HTML 笔记

1. 网页

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一页，通常是HTML格式的文件，他要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.htm后缀结尾的文件，因此将其俗称为HTML文件。


1.2 什么是HTML

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它是 web 开发的基础，用于定义网页的结构和内容。HTML 使用标记来描述文档的结构和语义，以便浏览器能够正确地显示文档。HTML 文件通常由文本、图像、链接、音频和视频等元素组成。


其结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html> <!-- 文档类型声明 -->
<html> <!-- 根元素 -->
  <head> <!-- 文档头部 -->
    <meta charset="UTF-8"> <!-- 字符编码 -->
    <title>页面标题</title> <!-- 页面标题 -->
  </head>
  <body> <!-- 文档主体 -->
    <h1>标题</h1> <!-- 标题 -->
    <p>段落</p> <!-- 段落 -->
    <a href="http://www.example.com">链接</a> <!-- 链接 -->
    <img src="image.jpg" alt="图片"> <!-- 图片 -->
  </body>
</html>

  • <!DOCTYPE html> 声明了文档类型，告诉浏览器这是一个 HTML5 文档。
  • <html> 元素是 HTML 文档的根元素，它包含了整个文档的内容。
  • <head> 元素包含了文档的元数据，比如页面标题、字符编码等。
  • <meta charset="UTF-8"> 声明了文档的字符编码为 UTF-8，以支持更多的字符集。
  • <title> 元素定义了文档的标题，会显示在浏览器的标题栏上。
  • <body> 元素包含了文档的主要内容，比如文本、图像、链接等。
  • <h1> 元素定义了一个大标题，它的级别从 1 到 6，依次递减。
  • <p> 元素定义了一个段落。
  • <a> 元素定义了一个链接，它的 href 属性指向链接的目标地址。
  • <img> 元素定义了一张图片，它的 src 属性指向图片的地址，alt 属性定义了图片的替代文本，以便在图片无法显示时显示。

2. 常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐、谷歌、Safar和Opera等。

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页额显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
fierfox Gecko 火狐浏览器
Safari Webkit 苹果浏览器
Chrome/Opera Bline Blink其实是Webkit的分支

3. Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。


3.1 为什么需要Web标准

浏览器不同，它们显示的页面和排版就有差异。


3.2 Web标准的结构

主要包括结构、表现、行为三个方面。

标准 说明
结构 结构用于对网页元素进行整理和分类，现阶段主要是HTML
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS
行为 行为是指网页模型的定义及交互的编写，现阶段是指JavaScript

结构类似身体结构，表现类似装饰，行为类似行动动作。


4. HTML 语法规范

1.1 基本语法概述

  1. HTML 标签是由尖括号包围的关键词，例如<html>。
  2. HTML 标签通常是成对出现的，例如<html></html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
  3. 有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。

包含关系：

1
2
3
<head>  // 父标签
    <title></title> // 子标签
</head>

并列关系：

1
2
<head></head>
<body></body>

5. HTML 基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基础本标签上书写的。

标签名 定义 说明
<html></html> HTML标签 页面中最大的标签，我们称为跟标签
<head></head> 文档的头部 为网页渲染提供额外的信息
<title></title> 文档的标题 定义浏览器工具栏中标题
<body></body> 文档的主体 定义文档的主体

6. HTML标签学习

1.1 排版标签

1.1.1 标题标签

1
2
3
4
5
6
<h1>1级标题</h1>
   <h2>2级标题</h2>
   <h3>3级标题</h3>
   <h4>4级标题</h4>
   <h5>5级标题</h5>
   <h6>6级标题</h6>

​ 特点：块级标签。


1.1.2 段落标签

1
2
3
<p>
    可以放文字，此标签会自动换行，且是块级标签，段落之间有间隙
</p>

1.1.3 水平标签

1
<hr>

特点：属于单标签，且为块级标签，在页面显示一条水平线。


1.1.4 换行标签

1
<br>

特点：属于单标签，可在标签换行或段落文字之间换行。


1.2 文本格式化标签

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

HTML”计算机输出”标签

标签 描述
code 定义计算机代码
kbd 定义键盘码
samp 定义计算机代码样本
var 定义变量
pre 定义预格式文本

HTMl 引文，引用，及标签定义

标签 描述
abbr 定义缩写
address 定义地址
bdo 定义文字方向
blockquote 定义长的引用
q 定义短的引用语
cite 定义引用、引证
dfn 定义一个定义项目。

1.3 媒体标签

1.3.1 图片标签

场景：在网页中显示图片。

代码：<img src=" " alt=" " >

特点：单标签，对应效果可使用标签属性进行设置。

img属性解析

  1. src为路径。
  2. alt但图片加载不出时的占位符。
  3. title标题属性，当鼠标悬停在图片时，显示标题，可在其他标签使用。
  4. width & height宽度与高度属性，当其中缺少一个值时，将等比例缩放。

注意点：

  1. 标签的属性写在开始标签内部。
  2. 标签上可以同时存在多个属性。
  3. 属性之间以空格隔开。
  4. 标签名和属性之间必须以空格隔开。
  5. 属性之间没有顺序之分。

1.3.2 路径

场景：页面需要加载图片，需要先找到对应的位置中的图片。

绝对路径

指目录下的绝对位置，可直接到达目标位置，通常从盘符开始。

例如：

E:\Code\Bl

相对路径

从当前文件开始出发找目标文件的过程。

分为：同级目录，下级目录，上级目录。

  1. 同级目录：当前文件和目标文件在同一目录。

    src="a.img"

    src="./a.img"

  2. 下级目录：目标文件在当前文件的目录中的另一目录。

    src="./img/a.img"

  3. 上级目录：目标文件在当前文件的上一级目录。

    src="../img/a.img"


1.3.3 音频标签

场景：在页面中插入音频。

代码：<audio src="./music.mp3" controls></audio>

常见属性：

属性名 说明
src 路径
controls 显示播放控件
autoplay 自动播放（谷歌浏览器可配合muted实现静音播放）
loop 循环播放

1.3.4 视频标签

场景：在页面中插入视频元素。

代码：<video src="./video.mp4" controls></video>

常见属性与音频标签类同。


1.4 链接标签

场景：点击之后，从一个页面跳转到另一个页面。

代码：<a href="./Home.html">超链接</a>

特点：

  • 双标签，内部可包裹内容。
  • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性。

示范：[百度一下](百度一下，你就知道 (baidu.com))

空链接：<a href="#">超链接</a>

属性解析：

属性名：target

属性值：目标网页的打开形式。

取值 效果
_self 默认值，在当前页面跳转
_blank 在新窗口中跳转

例：<a href="#" target="_blank" >点击一下</a>


1.5 列表标签

场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等。

特点：按照行的方式，整齐显示内容。

1.5.1 无序列表

场景：在网页中表示一组没有顺序之分的列表，如：新闻列表。

标签组成：

标签名 说明
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示圆点标识。

注意点：

  • ul标签中只允许包含li标签。
  • li标签可以包含任意内容。

代码示例：

1
2
3
4
5
<ul>
    <li>橘子</li>
    <li>苹果</li>
    <li>哈密瓜</li>
</ul>

代码实现：


1.5.2 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜。

标签组成：

标签名 说明
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示序号标识。

注意点：

  1. ol标签汇总只允许包含li标签。
  2. li标签可以包含任意内容。

代码示例：

1
2
3
4
5
6
7
<h1>电影排行榜</h1>
    <ol>
        <li>《喜羊羊与灰太狼之兔年顶呱呱》</li>
        <li>《深海》</li>
        <li>《熊出没之过年》</li>
        <li>《隐入尘烟》</li>
    </ol>

代码实现：


1.5.3 自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现。

场景案例：

image-20230328230247778

标签组成：

标签名 说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主体
dd 表示自定义列表的针对主体的每一项内容

显示特点：dd前会默认显示缩进效果。

注意点：

  • dl标签中只允许包含dt/dd标签。
  • dt/dd标签可以包含任意内容。

代码示例：

1
2
3
4
5
6
<dl>
     <dt>帮助中心</dt>
     <dd>联系客服</dd>
     <dd>技术支持</dd>
     <dd>保障</dd>
</dl>

代码实现：


1.6 表格标签

场景：在网页中以行+列鹅单元格的方式整齐展示数据，如学生成绩表。

基本标签：

标签名 说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容

注意点：标签的嵌套关系：table > tr > td

常见属性：

属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1">
     <tr>
         <td>姓名</td>
         <td>年龄</td>
         <td>班级</td>
     </tr>
     <tr>
         <td>张大头</td>
         <td>19</td>
         <td>1班</td>
     </tr>
     <tr>
         <td>筱婕薇</td>
         <td>19</td>
         <td>1班</td>
     </tr>
</table>

代码实现：


1.6.1 表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题。

其他标签：

标签名 名称 说明
caption 表格大标题 表示表格整体大标题
th 表头单元格 表示一列小标题，通常用于表格第一列

注意点：

  • caption标签书写在table标签内部。
  • th标签书写在tr标签内部。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="1">
    <caption>班级表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
       	<th>班级</th>
    </tr>
    <tr>
        <td>张大头</td>
        <td>19</td>
        <td>1班</td>
    </tr>
    <tr>
        <td>筱婕薇</td>
        <td>19</td>
        <td>1班</td>
    </tr>
</table>

1.6.2 表格的结构标签

场景：让表格的内容结构分明，突出表哥的不同部分（头部、主体、底部），使语义更加清晰。

基本标签：

标签 说明
thead 表格头部
tbody 表格主体
tfoot 表格底部

1.6.3 合并单元格

场景：将水平或垂直多个单元格合并成一个单元格。

合并单元格步骤：

  1. 明确合并哪几个单元格。

  2. 通过左上原则，确定保留谁保留，删除谁。

    • 上下合并 > 只保留最上的，删除其他的。
    • 左右合并 > 只保留最左的，删除其他的。

  3. 给保留的单元格设置：跨行合并(rowspan) 或者跨列合并(colspan)

    属性名 属性值 说明
    rowspan 合并单元格的个数 跨行合并，将多行单元格垂直合并
    colspan 合并单元格的个数 跨列合并，将多列单元格水平合并

注意点：只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨thead、tbody、tfoot）。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border="1">
  <caption>
    班级表
  </caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>班级</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张大头</td>
      <td rowspan="2">19</td>
      <td>1班</td>
    </tr>
    <tr>
      <td>筱婕薇</td>
      <!-- <td>19</td> -->
      <td>1班</td>
    </tr>
  </tbody>
</table>

代码实现：


1.7 表单标签

场景：在网页中显示收集用户信息的表单效果，如：登录页，注册页。


1.7.1 input系列标签的基本介绍

input标签可以通过type属性值的不同，展示不同效果。

type属性值：

标签名 type属性值 说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于上传文件
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能

具体使用效果请转到菜鸟查看HTML 表单 | 菜鸟教程 (runoob.com)


1.7.1.1 text 文本框

常用属性：

属性名 说明
placeholder 占位符。提示用户输入内容的文本

1.7.1.2 radio 单选框

常用属性：

属性名 说明
name 分组，有相同name属性值的单选框为一组，一组中只能一个被选中
checked 默认选中

注意点：

  • name属性对于单选框有分组功能。
  • 有相同name属性值的单选框为一组，一组中只能一个被选中

代码示例：

1
2
性别：<input type="radio" name="sex" id="man" />男
	 <input type="radio" name="sex" id="woman" checked />女

1.7.1.3 file 文件选择

常用属性：

属性名 说明
multiple 多文件选择

1.7.1.4 button 按钮

属性值：

属性名 说明
submit 提交按钮，点击之后提交数据到后端服务器
reset 重置按钮
button 普通按钮

注意点：

  • 如果需要实现以上按钮功能，需要配合form标签使用。

  • form使用方法：用form标签把表单标签一起包裹起来即可。

  • 谷歌浏览器中的button默认是提交按钮。

  • button有双标签使用。

    例如：<button>这是个按钮</button>


1.7.1.5 form 标签

常用属性：

属性名 值 说明
action 地址 表单提交的后端地址
method post/get 定义表单数据提交方式
autocomplete on/off 规定输入字段是否应该启用自动完成功能

1.7.1.6 select 标签

属性和标签：

属性/标签 说明
select标签 下拉菜单的整体
option标签 下拉菜单的每一项
selected 下拉菜单默认选中

代码示例：

1
2
3
4
5
6
<select name="" id="">
    <option value="">上海</option>
    <option value="">重庆</option>
    <option value="">渝北</option>
    <option value="" selected>南岸</option>
</select>

代码实现：


1.7.1.7 textarea 文本域标签

场景：在网页中提供可输入多行文本的表单。

常见属性：

属性 说明
cols 规定文本域内可见的宽度
rows 规定文本域内可见的行数

注意点：

  • 右下角可以拖拽改变大小。
  • 实际开发时针对央视效果推介使用css样式。
  • placeholder可使用。

1.7.1.8 label 标签

场景：常用于绑定内容与表单标签的关系。

使用方法：

  1. 使用label标签把内容包裹起来。
  2. 在表单标签上添加id属性。
  3. 在label标签的for属性中设置对应的id属性值。 、

或者：

  1. 直接使用label标签把内容和表单标签一起包裹起来。
  2. 需要把label标签的for属性删除即可。

代码示例：

1
2
3
性别：
<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
1
2
3
性别：
<label><input type="radio" name="sex" id="man">男</label>
<label><input type="radio" name="sex" id="woman">女</label>

1.8 语义标签

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用。

标签：

标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
artice 网页文章


7. 结语

大体是还有很多标签没写上，这份 HTML 笔记是为助我复习和巩固 HTML 知识而作，简单记载了些常用的标签，及部分基础知识，不甚详备使用方法。于常规开发，不宜死记硬背，识得便足，遗忘时再上网搜搜文档，查阅使用方法。HTML 的标签实属不止于此，其语法与功能多采多姿，足以创造有趣的网页。