持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
1. HTML 语法规范
1.1 基本语法规范
- HTML 标签是
由尖括号包围的关键词，例如< html> - HTML 标签
通常是成对出现的，例如 < html> 和 < html/> ，称为双标签。第一个是开始标签，第二个是结束标签。 - 有些特殊标签必须是单个标签（极少情况），例如< br/>
，我们称之为
单标签（自闭和标签）。
1.2 标签关系
标签关系可以分为两类：包含关系 和 并列关系
2. HTML 基本结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容都是在这些基本标签上书写。 HTML 页面也叫 HTML 文档。
每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写。
| 标签名 | 定义 | 说明 |
|---|---|---|
| < html>< /html> | HTML标签 | 页面中最大的标签，我们称为 根标签 |
| < head>< /head> | 文档的头部 | 注意在 head标签 中我们必须要设置的标签是 title（所以说，title标签与 head标签 是包含关系） |
| < title>< /title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| < body>< /body> | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到 body 里面的 |
扩展：空格键 和 回车键 在网页中都不会起到任何作用，无论多少个 空格键 和 回车键 都会被替换成一个空格键，只是为了编写时能看清
HTML 文档的后缀名必须是 .html 或 .htm，浏览器的作用是 读取 HTML 文档，并以网页的形式显示出它们
2.2 基本结构标签总结
3. 开发工具
3.1 文档类型声明标签
< !DOCTYPE> 文档类型声明标签，告诉浏览器使用何种 HTML 版本来显示网页。
<!DOCTYPE html>
这句话的意思是：当前页面采用的是 HTML5 版本来显示网页。 注意：
- 声明位于文档最前面的位置，处于标签之前。
- 不是一个 HTML 标签，他就只是一个文档类型声明标签。
3.2 lang 语言种类
用来显示当前文档所展示的语言
- en 定义语言为英文
- zh-CN 定义语言为中文
这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的
3.3 charset 字符集
<meta charset="UTF-8" />
字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
在 < head > 标签内，可以通过 < meta > 标签的 charset 属性来设置文档使用何种字符编码。
charset 常用的值有：GB2312（简体中文）、BIG5（繁体中文）、GBK（包含了简体中文 与 繁体中文（国标的意思））、UTF-8，其中 UTF-8 被称为 万国码，基本包含了全世界所有国家需要用到的字符。
3.4 总结
- 以下三个代码 vscode 自动生成，基本不需要我们重写🙄
< !DOCTYPE html > 文档类型声明标签，告诉浏览器这个页面采取 HTML5 版本来显示页面< html lang= “en” > 用于告诉浏览器或者搜索引擎这是一个英文网站。本页面采取英文来显示< meta charset="UTF-8"/ > 必须写。采取 UTF-8 来保存文字。如果不写就会乱码。具体原理后面分析
4. HTML 常用标签
学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。
4.1 标签语义
标签语义就是标签的含义
根据标签的语义，在合适的地方给一个最合理的标签，可以让页面结构更清晰。
4.2 标题标签 < h1 > - < h6 >（重要）
h 是 head 的缩写，意为 头。
为了使网页具有语义化，经常使用标题标签。HTML 提供 6 个等级的网页标题标签即 < h1 > - < h6 >
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4
> <h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
标签语义：作为标题使用，并且依据重要性递减
特点：
- 加了标题的文字会变的加粗，字号也会依次变大
- 从 h1-h6 重要性依次递减
- 一个标题独占一行
4.3 段落和换行标签（重要）
p 是 paragraph 缩写，意为 段落。
把文字有条理的显示出来就需要将文字分段显示。在 HTML 中，
标签用于定义段落，将整个网页分成若干个段落。
<p>我是一个段落标签</p>
标签语义：把 HTML 文档分割为若干段落
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保有空隙
< br/ > 是 break 缩写，意为 打断、换行。
标签语义： 强制换行
特点：
< br/ > 是个单标签（自闭和标签）< br/ > 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
4.4 文本格式化标签
在网页中，有时候需要为文字设置 粗体、斜体 或 下划线 等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。
标签语义： 突出重要性，比普通文字重要
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | < strong >< /strong >或< b >< /b > | 更推荐< strong >，语义更强烈 |
| 斜体（emphasis、italic） | < em >< /em >或< i >< /i > | 更推荐使用< em >，语义更强烈 |
| 删除线（delete、strikethrough） | < del >< /del >或< s >< s/ > | 更推荐使用< del >，语义更强烈 |
| 下划线 | < ins >< /ins >或< u >< /u > | 更推荐使用< ins >，语义更强烈 |
4.5 div 和 span 标签
< div > 和 < span > 是没有语义的，它们是一个盒子，用来装内容的
<div>这是头部</div>
<span>今日价格</span>
< div > 是 division 的缩写，表示分割、分区。 意思是跨度、跨距。
特点：
- div 标签用来布局，但是现在（未经修饰的div）一行只能放一个 div，大盒子。
- span 标签用来布局，一行可以多个 span，小盒子。
4.6 图像标签和路径（重点）
4.6.1 图像标签
在 HTML 标签中，< img / > 标签用于定义 HTML 标签页面中的图像
<img src="图像url" />
< img/ >单词 image 的缩写，意为图像
src 是标签的 必须属性，用于指定图像文件的路径和文件名
属性： 属于这个图像标签的特性
- 图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。当图片不能正常显示的时候，显示该文字 |
| title | 文本 | 提示文本。当鼠标放到图像上时，显示该文字 |
| width | 像素 | 图像宽度 |
| height | 像素 | 图像高度 |
| border | 像素 | 图像边框粗细 |
注意：在设置宽高时，一般设置一个（它会等比例变化），如果宽高一起设置的话，会造成挤压扁平
PS：一般我们不会在属性中设定其边框（为了解耦合，还有符合web标准）
- 图像标签的属性注意点
① 图像标签可以拥有多个属性，必须写在标签名的后面
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格隔开
③ 属性采取键值对的格式，即 key= "value"的格式，属性="属性值"
- 重点掌握点
- 请说出图像标签哪个属性是必须要写的?
src 属性是必写属性（不写该标签将起不到任何作用）
- 请说出图像标签中h和title属性区别?
alt 属性是图片打不开显示文字，title 属性是鼠标放上图片显示文字
4.6.2 路径
1 前置知识
① 目录文件夹和根目录：
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
根目录：打开目录文件夹的第一层就是根目录
② vsCode打开目录文件夹：
文件 ---- 打开文件夹 ---- 选择目录文件夹。后期非常方便管理文件
- 相对路径
- 绝对路径
- 相对路径
相对路径： 以引用文件位置为参考基础，而建立出来的目录路径。就是相对于 HTML 页面的位置。
| 分类 | 符号 | 说明 |
|---|---|---|
| 同级路径 | 同一级 | |
| 下一级路径 | / | 位于 HTML 文件上一级 |
| 上一级路径 | ../ | 位于 HTML 文件下一级 |
- 绝对路径
绝对路径： 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。
4.7 超链接标签
在 HTML 标签中，< a/ > 标签用于从一个页面链接到另一个页面
4.7.1 链接的语法格式
< a/ > 单词 anchor 的简写，意为 锚
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性
| 属性 | 作用 |
|---|---|
| href | 指定链接地址 url，为必须属性 |
| target | 指定页面打开方式，_self：为默认值，_blank：在新窗口中打开 |
4.7.2 超链接分类
- 外部链接（一定要带上 http:// ）
- 内部链接：网站内部页面之间的相互链接
- 空链接： #
- 下载链接：地址链接的是 文件、.exe、压缩包.zip 等
- 网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等
- 锚点链接：点击链接，可以快速定位到页面中的某个位置
-
在链接文本的 href 属性中，设置属性为 #名字 的形式找到目标位置标签后（可以是 标签啥的），在里面添加一个 id = 名字
Tip
阻止 a 链接跳转，课可给 href 属性设置 javascript:void(0); 或者 javascript:;。
注意事项：
网页元素链接会和提示文本 title 属性相冲突，导致打不开链接！
5. HTML 中的注释和特殊字符号
- 注释: < !-- 注释 -- > VSCode 中快捷键：Ctrk + /
- 字符实体
| 字符 | 显示 |
|---|---|
| （Non-Breaking Space） | 空格 |
| <（Less than） | ＜ |
| >（Greater than） | ＞ |
| © | © |
6. 表格标签
6.1 表格的主要作用
表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。 表格不是来布局的，而是来展示数据的。
6.2 表格基本语法
- < table >< /table >
用于定义表格的标签。 - < tr >< /tr > 标签（table row）
用于定义表格中的行，必须嵌套在 < table >< /table >中。 - < td >< /td >标签（table data）
用于定义表格中的单元格，必须嵌套在 < tr >< /tr > 中。 - 字母 td 指表格数据（table data），即单元格的内容。
6.3 表头单元格标签 th
一般单元格位于表格的第一行或第一列，表头单元格里面的文本内容 加粗显示。
标签表示 HTML 表格的表头部分（table head 的缩写）
表头单元格()也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
6.4 表格属性
只作了解，后期通过 CSS 来设置。 这些属性都要写到 < table >< /table > 标签中
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 表格元素对齐方式（设置整个表格在网页的位置，而不是内容） |
| border | 1 或"" | 规定是否有边框，默认为 ""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间空白，默认 1px |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为 2px |
| width | 像素值或百分比 | 规定表格宽度 |
| hight | 像素 | 表格高度 |
6.5 表格结构标签
场景：表格可能很长，将表格分割为表格头部和表格主题两大部分。
加强语义化：< thead > 表示头部区域，< tbody > 表示主体区域，更好区分表格结构。
注意：
- < thead >< /thead >：定义表格头部，且内部必须有标签。
- < tbody >< /tbody >：定义表格主体，存放数据。
- 以上标签都放在 < table >< /table > 里面。
表格的结构标签其实就只是为了好区分表头部分和表格主题部分罢了
6.6 合并单元格
合并单元格方式：
- 跨行合并：rowspan="合并单元格个数"
- 跨列合并：colspan="合并单元格个数"
跨行是行与行之间进行连接，跨列是列与列之间进行连接（横行竖列）
合并三部曲：
- 确定跨行 or 跨列。
- 找到目标单元格：跨行取最上面为目标单元格，跨列取最左边为目标单元格。
- 删除多余单元格。
小结：
记住是在目标单元格上面进行处理！！！
跨列则删除最后一列后面多余的单元格，跨行则删除最后一行多余的单元格
6.7 表格标签小结
表格标签有哪些：
7. 列表标签
表格展示数据，列表则用来布局。 列表特点是整齐、整洁、有序，作为布局更方便自由。 根据使用场景不同，列表分为三大类：
- 无序列表
- 有序列表
- 自定义列表。
7.1 无序列表（重要）
< ul > 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。而列表项使用 < li > 标签定义
< ul > 单词 unordered list 的简写，意为 无序列表
语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注意:
- 各个列表项之间没有顺序之分，并列关系。
- < ul >< /ul >中只能包含< li >< /li >，写入其他标签或文字是不允许的。（然而 < li > 标签里面可以放任何元素）
- < li > 与 < /li > 之间相当于一个容器，可以容纳所有元素。
- 无序列表带有自己的属性，可用 CSS 修改样式属性。
7.2 有序列表（理解）
使用 < ol > 标签来定义有序列表，< li > 来定义列表项。
< ol > 单词 ordered list 的简写，意为 有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
PS：< ol > 标签和 < ul > 标签的注意要点是一样的！< ol >< /ol >中也只能包含< li >< /li >
7.3 自定义列表（重点）
自定义列表的使用场景：
自定义列表 常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。
< dl > 定义描述列表，与 < dt > 和 < dd > 标签配合使用。
< dl > 单词 definition list 的简写，意为 自定义列表
< dt > 单词 definition title 的简写，意为 定义项目/名字
< dd > 单词 definition description 的简写，意为 描述每个项目/名字
基本语法：
<dl>
<dt>名词1</dt>
<dd>名词1的解释1</dd>
<dd>名词1的解释2</dd>
</dl>
注意
dl 里面只能包含 dt 和 dd- < dt >和< dd >个数没有限制，经常是一个< dt >对应多个< dd >。
7.4 列表总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| < ul >< /ul > | 无序标签 | 里面只能包含 li，没有顺序，使用较多。li 里面可以包含任何标签 |
| < ol >< /ol > | 有序标签 | 里面只能包含 li，有顺序，使用相对较少。li 里面可以包含任何标签 |
| < dl >< /dl > | 自定义列表 | 里面只能包含 dt 和dd，dt 和 dd 里面可以放任何标签 |
8. 表头标签
8.1 为什么需要表头
收集用户信息。 和用户进行交互，收集用户资料。
8.2 表头组成
表单域表单控件（表单元素）提示信息
8.3 表单域
表单域是一个包含表单元素的区域。 使用 < form > 标签用于定义表单域，收集和传递用户信息
< form > 标签会将它范围内的表单元素信息提交给服务器
目前而言，暂时不需要用表单域提交数据，只需要写上 < form > 标签即可。
语法格式
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 指定接受并处理表单数据的服务器的 url 地址 |
| method | get/post | 设置表单数据的提交方式 |
| name | 名称 | 用于指定表单名称，区分同一个页面中的多个表单域 |
注意：
- 写表单元素之前需要有表单域将其包含
- 表单域就是 < form > 标签
8.4 表单控件（表单元素）
在表单域中可以定义各种表单元素，并允许用户在表单中输入或选择的内容控件
8.4.1 < input > 表单元素
< input > 标签用于收集用户信息
input 标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
<input type="属性值" />
- input 标签为单标签
- type 属性设置不同属性值来指定不同控件类型
- type 常用属性值
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkox | 复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。字符被掩码。 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单所有数据。 |
| submit | 定义提交按钮。重置按钮会清除表单所有数据。 |
| text | 定义输入字段。用户可输入文本，默认宽度为 20 个字符。 |
- input 的其他属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义 | 定义 input 元素名称（表单元素的名字） |
| value | 自定义 | 规定 input 元素的值 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段字符的最大长度 |
PS：value 是默认值（用于传递给后台的），placeholder 才是提示语
注意
name 和 value 是每个表单元素都有的属性值，主要是给后台人员使用的- 对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。 同理，复选框也要有相同的name值
- 单选框和复选框可以设置 checked 属性，页面打开默认选择按钮
- 设置 type 的值为
submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台 - 设置 type="button"，普通按钮，后期结合 js 使用
1 提问
1. 有些表单元素想刚打开页面就默认显示几个文字怎么做?
答：可以给这些表单元素设置 value 属性 = "值"
PS：但不建议这么做！因为 value 属性一般是传递给后台的值，建议用 placeholder
2. 页面中的表单元素很多，如何区别不同的表单元素?
答：name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单
页面中的表单很多，name 的主要作用就是用于区别不同的表单
3. 如果页面一打开就让某个单选按钮或者复选框是选中状态?
答：checked 属性：表示默认选中状态。用于单选按钮和复选按钮
4. 如何让 input 表单元素展示不同的形态?比如单选按钮或者文本框
答: type 属性：type 属性可以让 input 表单元素设置不同的形态
8.4.2 label 标签
< label > 标签为 input 元素定义标注（标签）。
< label > 标签用于绑定一个表单元素，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。
核心： 标签的 for 属性应当与相关元素的 id 属性相同
8.4.3 select 下拉表单元素
select 标签设置多个选项让用户选择，节约页面空间。
语法
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
注意
- select 中至少包含一对 option
在 option 中定义属性 selected="selected"，当前项即为默认选项
8.4.4 textarea 文本域表单元素
场景：输入内容较多时
语法：
<textarea rows="3" cols="20"> 文本内容 </textarea>
cols="每行字符数"，rows="显示的行数"
col 列，row 行
PS：注意 表单标签只有三个：input、select、textare
