首页 > 代码库 > HTML 基础学习笔记

HTML 基础学习笔记

2024-11-03 08:19:39   204人阅读

       HTML 指超文本标记语言（Hyper Text Markup Language）,一种标记语言，用来描述网页的一种语言。

一、HTML 基本结构示意图

技术分享

1、 HTML 标签 (HTML tag)，由尖括号包围的关键词(如 <html>)，通常是成对出现的，比如 <b>（开始标签） 和 </b>（结束标签）。

2、HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

3、HTML 段落是通过标签 <p> 来定义的。

4、HTML 链接是通过标签 <a> 来定义的。如：

<a href="http://www.runoob.com">这是一个链接</a>

    提示:在 href 属性中指定链接的地址。

5、HTML 图像是通过标签 <img> 来定义的。如：

  • <img src="http://www.mamicode.com/images/logo.png" width="258" height="39" />

    注意： 图像的名称和尺寸是以属性的形式提供的。

6、提示：使用小写标签。

二、基础内容

1、HTML 空元素：没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br/> 就是没有关闭标签的空元素（<br/> 标签定义换行）。

2、HTML属性：

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。
  • 属性值应该始终被包括在引号内。双引号是最常用的，单引号一般用于属性值本身就含有双引号，例如：name=‘John "ShotGun" Nelson‘。
  • 使用小写属性

 　①常用的标签属性：

  • <h1>:align对齐方式
  • <body>:bgcolor背景颜色
  • <a>:target规定在何处打开链接(新窗口、原窗口等)

　②通用属性：

  • class：规定元素的类名
  • id:  规定元素的唯一ID
  • style：规定元素样式
  • title：规定元素的额外信息

3、HTML标题：

      ①标题（Heading）通过 <h1> - <h6> 标签进行定义的，<h1> 定义最大的标题。 <h6> 定义最小的标题。（浏览器会自动地在标题的前后添加空行。）

      ②HTML水平线：<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

      ③HTML注释格式示例：<!-- 这是一个注释 -->；浏览器会忽略注释，也不会显示它们。

4、HTML段落

     ①段落是通过 <p> 标签定义的。如:

<p>这是一个段落 </p>

        注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

    ②HTML 折线

        在不产生一个新段落的情况下进行换行（新行），使用 <br/> 标签。

<p>这个<br>段落<br>演示了分行的效果</p>

    ③、HTML输出—使用提醒：当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

5、HTML<head>
　　①HTML<head>元素包含了所有的头部标签元素。
      在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
      可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
　　②HTML <title> 元素
  • <title> 标签定义了不同文档的标题。
  • <title> 在 HTML/XHTML 文档中是必须的。
  • <title> 元素:
    • 定义了浏览器工具栏的标题
    • 当网页添加到收藏夹时，显示在收藏夹中的标题
    • 显示在搜索引擎结果页面的标题
③HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。
④HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css"> </head>
⑤HTML <style> 元素
  • <style> 标签定义了HTML文档的样式文件引用地址.
  • 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
  • <head> <style type="text/css"> body {/style> </head>
　　⑥HTML <meta> 元素
  • meta标签描述了一些基本的元数据。
  • <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
  • META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
  • 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
  • <meta> 一般放置于 <head> 区域
  • 为搜索引擎定义关键词:
  • <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 为网页定义描述内容:
  • <meta name="description" content="免费 Web & 编程 教程">
  • 定义网页作者:
  • <meta name="author" content="Runoob">
  • 每30秒中刷新当前页面:
  • <meta http-equiv="refresh" content="30">
⑦HTML <script> 元素
<script>标签用于加载脚本文件，如： JavaScript。

6、HTML 文本格式化

标签描述
<b>
 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small>
 定义小号字
<strong>
 定义加重语气
<sub> 定义下标字
<sup>
 定义上标字
<ins>
 定义插入字
<del>
 定义删除字

  

7、HTML样式

    ①标签：

  • <style> : 样式定义
  • <link> : 资源引用

    ②属性：

  • rel="stylesheet":外部样式表
  • type="text/css" :引入文档类型
  • margin-left: 边距

    ③三种样式表插入方法：

  • 外部样式表：<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css">
  • 内部样式表：

<style type= "text/css">

body {" style="margin-left: 60px;">p{margin-left: 20px }

</style>

  • 内联样式表：<p style= "color:red">

8、HTML链接

　　①链接数据：

  •       文本链接
  •       图片链接

②属性：

  • href属性：指向另一个文档的链接
  • name属性：创建文档内的链接

　　③img标签属性：

  • alt : 替换文本属性
  • width：宽
  • hight： 高
  • 示例：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>链接</title>
 6 </head>
 7 <body>
 8     <a href="http://www.jikexueyuan.com/">点击我</a>
 9     <hr>
10     <a href="http://www.jikexueyuan.com/">
11         <img src="http://www.mamicode.com/海葡萄.jpeg" width="200px" height="100px" alt="海葡萄">
12     </a>
13     <br/>
14     <a name="tips">hello</a>
15     <br/><br/><br/><br/><br/><br/><br/><br/><br/>
16     <br/><br/><br/><br/><br/><br/><br/><br/><br/>
17     <a href="http://www.mamicode.com/#tips">跳转到hello</a>
18 </body>
19 </html>

9、HTML表格

标签描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

   

技术分享

 

10、HTML列表

标签描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述

 

①无序列表

使用标签：<ul>、<li>

属性：disc、circle、square

②有序列表

使用标签：<ol>、<li>

属性：A、a、I、i、start

③嵌套列表

使用标签：<ul>、<ol>、<li>

④自定义列表

使用标签：<dl>、<dt>、<dd>

11、HTML块

①HTML块元素

块元素在显示时，通常会以新行开始

如：<h1>、<p>、<ul>

②HTML内联元素

内联元素通常不会以新行开始

如：<b>、<a>、<img>

③HTML<div>元素

<div>元素也被称为块元素，其主要是组合HTML元素的容器

④HTML<span>

<span>元素是内联元素，可作为文本的容器

⑤示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>块元素</title>
 6     <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/my.css">
 7     <style type="text/css">
 8         span{
 9             color: red;
10         }
11     </style>
12 </head>
13 <body>
14     <!-- 块-->
15     <p>大家好!</p>
16     <h1>大家好</h1>
17     <b>这是一个加重标签</b>
18     <a>这是一个超链接</a>
19     <div id="divid">
20         <p>Hello</p>
21         <a>点击我</a>
22     </div>
23     <div id="divspan">
24         <p><span>这是一个测试</span>效果</p>
25     </div>
26 </body>
27 </html>

12、HTML布局

 ①div布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>div布局</title>
 6     <style type="text/css">
 7         body{
 8             margin: 0px;
 9         }
10         #container{
11             width: 100%;
12             height: 640px;
13             background-color: darkgray;
14         }
15         #heading{
16             width: 100%;
17             height: 10%;
18             background-color: aqua;
19         }
20         #conten_menu{
21             width: 30%;
22             height: 80%;
23             background-color: aquamarine;
24             float: left;
25         }
26         #conten_body{
27             width: 70%;
28             height: 80%;
29             background-color: blueviolet;
30             float: left;
31         }
32         #footing{
33             width: 100%;
34             height: 10%;
35             background-color: black;
36             clear: both;
37         }
38     </style>
39 </head>
40 <body>
41 <div id="container">
42     <div id="heading">头部</div>
43     <div id="conten_menu">内容菜单</div>
44     <div id="conten_body">内容主体</div>
45     <div id="footing">底部</div>
46 </div>
47 </body>
48 </html>

显示效果：

技术分享

②table布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table布局</title>
 6 </head>
 7 <body marginheight="0px" marginwidth="0px">
 8 <table width="100%" height="950px" style="" style="color: rgb(0, 0, 255);">>
 9     <tr>
10         <td colspan="3" width="100%" height="10%" style="" style="color: rgb(0, 0, 255);">>这是头部</td>
11     </tr>
12     <tr>
13         <td width="20%" height="80%" style="" style="color: rgb(0, 0, 255);">>左菜单
14             <ul>
15                 <li>ios</li>
16                 <li>android</li>
17                 <li>html5</li>
18             </ul>
19         </td>
20         <td width="60%" height="80%" style=""></td>
21         <td width="20%" height="80%" style=""></td>
22     </tr>
23     <tr>
24         <td colspan="3" width="100%" height="10%" style="" style="color: rgb(0, 0, 255);">>这是底部</td>
25     </tr>
26 </table>
27 </body>
28 </html>

显示效果：

技术分享

13、 HTML表单

①表单用于获取不同类型的用户输入

②常用的表单标签：

标签描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist>
 指定一个预先定义的输入控件选项列表
<keygen>
 定义了表单的密钥对生成器字段
<output>
 定义一个计算结果

 

③代码示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单</title>
 6 </head>
 7 <body>
 8       <form>
 9           用户名：
10           <input type="text">
11           密码：
12           <input type="password">
13           <br/>
14           喜欢的水果有？
15           <br/>
16           苹果<input type="checkbox">
17           香梨<input type="checkbox">
18           香蕉<input type="checkbox">
19           <br/>
20           请选择性别：
21           男<input type="radio" name="sex">
22           女<input type="radio" name="sex">
23           <br/>
24           请选择您常用的网站:
25           <select>
26               <option>jikexueyuan.com</option>
27               <option>www.google.com</option>
28               <option>www.iwen.org</option>
29           </select>
30           <input type="button" value="http://www.mamicode.com/按钮">
31           <input type="submit" value="http://www.mamicode.com/提交">
32       </form>
33       <textarea cols="30" rows="30">请在此填写个人信息</textarea>
34 </body>
35 </html>

 14、HTML框架

①框架标签（frame）：框架对于页面的设计有着很大的作用。

②框架标签（<frameset>）（已被替代）:

框架及标签定义如何将窗口分割为框架

每一个frameset定义一系列行或列

rows/colsde 值规定了每行或每列占据屏幕的面积

③常用标签：

    • noresize： 固定框架大小
    • cols：列
    • rows：行

④内联框架(较为有用)

    iframe

15、HTML背景

①背景标签：Background

②背景颜色：Bgcolor

③颜色：

颜色是由一个十六进制符号来定义，这个符号由红色、绿色、蓝色的值组成（RGB）

颜色值最小值：0(#00)

颜色值最大值：255（#FF）

红色：#FF0000

绿色：#00FF00

蓝色：#0000FF

16、HTML实体

      在 HTML 中，某些字符是预留的，必须被替换为字符实体。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

      如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：

&entity_name;或&#entity_number;

       如需显示小于号，我们必须这样写：&lt; 或 &#60; 或 &#060;

HTML 基础学习笔记


联系
我们