目录
1.HTML基础结构标签
每个网页都会有一个基础的结构标签（骨架标签：4组），页面内容也是在这些基础标签上书写的。
HTML 页面也称为 HTML 文档。
【HTML 基础结构】
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
<html> </html> | 根标签 | 页面中最大的标签（最基础的标签） |
<head> </head> | 头部标签 | 在 head 标签中我们必须要设置 title 标签 |
<title> </title> | 标题标签 | 页面自己的网页标题 |
<body> </body> | 主体标签 | 包含文档的所有内容 |
在VsCode中按快捷键
!号即可快速生成基础结构,如下图所示
2.HTML中的注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签。
HTML 中的注释以：<!-- 开头，以 --> 结束。
<!-- 注释语句 -->
一句话：注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的。
注释是为了更好地解释代码功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
VsCode中的快捷键是Ctrl+/
3.HTML常用标签
3.1 标题标签和段落标签
标题标签:
为了使网页更具有语义化，我们经常会在页面中用到标题标签。
HTML 提供了 6 个等级的网页标题，即：<h1> 到 <h6>。
VsCode中快捷键为h1+Tab
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
单词 head 的缩写，意为：头部、标题。
段落标签:
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在 HTML 标签中，<p> 标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词 paragraph 的缩写，意为：段落。
3.2 换行标签和分割线标签
换行标签:
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。
如果希望某段文本强制换行显示，就需要使用换行标签 <br>。
<br>
单词 break 的缩写，意为：打断、换行。
分割线标签:
分割线标签：<hr>。
<hr>
<!-- 某些时候需要对内容块进行分割时会用到分割线标签 -->
3.3 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
标签语义： 突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong> </strong> 或 <b> </b> | 介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者 |
| 倾斜 | <em> </em> 或 <i> </i> | 介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者 |
| 删除线 | <del> </del> 或 <s> </s> | 介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者 |
| 下划线 | <ins> </ins> 或 <u> </u> | 介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者 |
3.4 图像标签
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
<img src="图像URL" alt="">
单词 image 的缩写，意为图像。
src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。
URL 是 统一资源定位符（通俗理解：地址、网址）。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本，图像显示失败时显示（为了提高 SEO 及适配屏幕阅读器，建议都把 alt 写上） |
title | 文本 | 提示文本，鼠标放到图片上，显示的提示文字 |
width | 像素 | 设置图像的宽度（了解，后面通过 CSS 设置） |
height | 像素 | 设置图像的高度（了解，后面通过 CSS 设置） |
border | 像素 | 设置图像的边框粗细（了解，后面通过 CSS 设置） |
设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
3.5 音频标签
- 场景：在页面中插入音频
- 代码：
<audio src="./music.mp3" controls></audio> - 常见属性:
- src 音频的路径
- controls 显示播放的控件
- autoplay 自动播放(部分浏览器不支持)
- loop 循环播放
- 注意点：
- 音频标签目前支持三种格式：Mp3,Wav,Ogg
3.6 视频标签
- 场景：在页面中插入视频
- 代码：
<video src="./video.mp4" controls></video> - 常见属性:
- src 音频的路径
- controls 显示播放的控件
- autoplay 自动播放(谷歌浏览器需配合muted实现静音播放)
- loop 循环播放
- 注意点：
- 音频标签目前支持三种格式：Mp4,WebM,Ogg
3.7 超链接标签
在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
（1）链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>
单词 anchor 的缩写，意为：锚。
两个属性的作用如下：
| 属性 | 作用 |
|---|---|
href | 用于指定链接目标的 url 地址，（必须属性）当标签应用 href 属性时，它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式，其中 _self 在当前页面打开的方式（为默认值），_blank 在新窗口中打开的方式 |
4.列表标签
列表最大的特点就是：整齐、整洁、有序、它作为布局会更加自由和方便。
在实际开发中凡是遇到排列整齐的简洁内容，都可以使用列表来进行布局。
合理的使用列表布局可以有效提高 SEO。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表 和 自定义列表。
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul> </ul> | 无序标签 | 里面只包含 li，没有顺序，使用较多，li 里面可以包含任何标签 |
<ol> </ol> | 有序标签 | 里面只包含 li，有顺序，使用相对较少，li 里面可以包含任何标签 |
<dl> </dl> | 自定义标签 | 里面只能包含 dt 和 dd，dt 和 dd 里面可以放任何标签，dd 一般作为对 dt 的细分描述 |
4.1 无序列表
<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义（开发中经常使用）。
无序列表的基本语法格式如下：
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>火龙果</li>
</ul>
- 无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在li中<li>与</li>之间相当于一个容器，可以容纳所有的元素- 无序列表会带有自己的样式属性（比如圆点），但在实际开发中，我们会使用 CSS 来设置
效果演示:
4.2 有序列表
有序列表即为有序排列顺序的列表，其各个列表项会按照一定的顺序排列定义（开发中不太常用）。
在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
有序列表的基本语法格式如下：
<ol>
<li>100</li>
<li>80</li>
<li>70</li>
</ol>
<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的<li>与</li>之间相当于一个容器，可以容纳所有的元素- 有序列表会带有自己样式属性（比如序号），但在实际使用时，我们会使用 CSS 来设置
效果演示:
4.3 自定义列表
自定义列表的使用场景：
自定义列表常用于对术语或名词进行解释、描述和展开，定义列表的列表项前没有任何项目符号（开发中常用）。
在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。
其基本语法如下：
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>用户指南</dd>
</dl>
<dl></dl>里面只包含<dt>、<dd><dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>dd前会默认显示缩进效果
5.表格标签
5.1 表格的基本语法
<table>
<tr>
<td>单元格</td>
...
</tr>
...
</table>
<table></table>是用于定义表格的标签<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中- 字母 td 指表格数据（table data），即：数据单元格的内容
- 单元格 td 里面可以放任何的元素
5.2 表头单元格和表格标题
一般表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格里面的文本内容默认加粗居中显示。
<th> 标签表示 HTML 表格的表头部分（table head 的缩写）。
<caption>标签表示表格整体大标题，默认在表格整体顶部剧中位置设置
<!-- 表格 -->
<table border="1">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>棒</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>棒</td>
</tr>
<tr>
<td>总结</td>
<td>100分</td>
<td>棒</td>
</tr>
</table>
代码展示：
5.3 表格属性
注意： 表格标签的属性在实际开发中并不常用，而是通过后面的 CSS 来设置，这里了解即可。
以下属性都写在 table 开始标签内，多个属性之间用空格隔开。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
...
</table>
| 属性名 | 属性值 | 描述 |
|---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：style="text-align: center;" 设置）（了解） |
border | 1 或 "" | 规定表格单元是否拥有边框，默认为 “”，表示没有边框（了解） |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认 1 像素（了解） |
cellspacing | 像素值 | 规定单元格之间的空白，默认 2 像素（了解） |
width | 像素值 或 百分比 | 规定表格的宽度（了解） |
height | 像素值 或 百分比 | 规定表格的高度（了解） |
5.4 表格的结构标签
场景：让表格的内容结构分组，突出表格的不同部分(头部，主体，底部)，使语义更加清晰
结构标签:
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主题 |
| tfoot | 表格底部 |
<table border="1">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>棒</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>棒</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>100分</td>
<td>棒</td>
</tr>
</tfoot>
</table>
</body>
5.5 合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，这里会最简单的合并单元格即可。
合并单元格的方式：
- 跨行合并（上下合并）：
rowspan="合并单元格的个数" - 跨列合并（左右合并）：
colspan="合并单元格的个数"
<table border="1">
<caption>优秀学生信息表格</caption>
<thead>
<tr>
<th>年纪</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年二班</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</tfoot>
</table>
6.表单标签
6.1 input系列标签
在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息，如：登录页，注册页。
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本、字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
<input type="属性值" />
-
<input />标签为单标签 -
type 属性设置不同的属性值用来指定不同的控件类型
type 属性的属性值及其描述如下：
| 属性值 | 描述 |
|---|---|
button | 定义可点击按钮，默认无功能（多数情况下，用于通过 JavaScript 启动脚本） |
checkbox | 定义复选框，即：多选框，在一组多选中，要求它们必须拥有相同的 name |
file | 定义输入字段和 “浏览” 按钮，供文件上传，只能单文件，加上multiple属性值，可以实现多文件 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段，该字段中的字符被掩码 |
radio | 定义单选按钮，在一组单选按钮中，要求它们必须拥有相同的 name |
reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符 |
除 type 属性外，<input> 标签还有很多其他属性，其常用属性如下：
| 属性名 | 属性值 | 描述 |
|---|---|---|
name | 由用户自定义 | 定义 input 元素的名称 |
value | 由用户自定义 | 规定 input 元素的值，也就是提交到服务器的值 |
checked | checked | 规定此 input 元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
placeholder | 由用户自定义 | 占位符，提示用户输入内容的文本 |
multiple | file | 常用于type值为file时，进行多文件选择 |
<form action="">
用户名：<input type="text" placeholder="请输入账号">
<br>
<br>
密码：<input type="password" placeholder="请输入密码">
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="normal button">
</form>
<1>、有些表单元素刚打开页面就须要默认显示几个文字怎么做？
答：可以给这些表单元素设置 value属性="值"。
用户名：<iuput type="text" value="请输入用户名" />
<2>、页面中的表单元素很多，如何区别不同的表单元素？
答：name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单，页面中的表单很多，name 的主要作用就是用于区别不同的表单。
用户名：<input type="text" value="请输入用户名" name="username" />
- name 属性后面的值是自定义的
- radio（或者 checkbox）如果是一组，我们必须给他们命名相同的名字
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<3>、如果页面一打开就让某个单选按钮或者复选框是选中状态？
答：checked 属性：表示默认选中状态，用于单选按钮和复选按钮。
性 别：
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" >女
6.2 label标签
VsCode快捷键：alt+shift+↑/↓ 复制当前行在下方插入
<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法：
第一种写法：
<label for="sex">
男<input type="radio" name="sex" id="sex" />
</label>
第二种写法：
<label>男<input type="radio"></label>
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。
6.3 button按钮标签
场景：在网页中显示用户点击的按钮
type属性值(同input的按钮系列)
| type属性值 | 描述 |
|---|---|
reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
button | 普通按钮，默认无功能 |
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
6.4 select下拉单标签
使用场景： 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 <select> 标签控件定义下拉列表。
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<select>中至少包含一对<option>- 在
<option>中定义selected="selected"时，当前项即为默认选中项
每个 <option> 元素都应该有一个 value 属性，其中包含选择该选项时要提交给服务器的数据值。如果不包含 value 属性，则 value 默认为元素内包含的文本。可以在 <option> 元素上包含 selected 属性，以使其在页面首次加载时默认选中。
<select name="" id="">
<option value="">北京</option>
<option value="" selected>南京</option>
<option value="">东京</option>
<option value="">西京</option>
</select>
6.5 textarea文本域标签
使用场景： 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板、评论。
语法：
<textarea rows="3" cols="20">
文本内容
</textarea>
- 通过
<textarea>标签可以轻松地创建多行文本输入框 cols="每行中的字符数"，rows="显示的行数"，我们在实际开发中不会使用，都是用 CSS 来改变大小- 如果要禁止拉伸文本框大小，则：
style="resize: none"
6.6 表单域标签
表单域是一个包含表单元素的区域。
在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
<!-- 各种表单元素控件 -->
</form>
常用属性：
| 属性名 | 属性值 | 作用 |
|---|---|---|
action | url 地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
method | get / post | 用于设置表单数据的提交方式，其取值为 get 或 post |
name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
注意：对于 HTML 基础的学习来说，暂时不用考虑提交数据，只需写上 form 标签即可，后面学习服务端编程阶段会重新讲解。
<form action="">
用户名：<input type="text">
<br>
<br>
密码：<input type="password">
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="normal button">
</form>
注意： 如果不加form,那么提交或者重置的时候没有效果，因为不知道重置哪些内容
7.字符实体
在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 上标 | ² |
8.综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form action="">
昵称：<input type="text" placeholder="请输入昵称">
<br>
<br>
性别：
<label><input type="radio" name="sex" checked> 男</label>
<label><input type="radio" name="sex"> 女</label>
<br>
<br>
所在城市：
<select name="" id="">
<option value="">北京</option>
<option value="" selected>南京</option>
<option value="">东京</option>
</select>
<br>
<br>
喜欢的类型：
<label><input type="checkbox"> 可爱</label>
<label><input type="checkbox" checked> 萝莉</label>
<label><input type="checkbox"> 御姐</label>
<br>
<br>
个人介绍：
<br>
<textarea name="" id="" cols="60" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox" name="" id=""> 我同意所有条款
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</form>
</body>
</html>
1252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
