相关链接：
视频教程：https://www.bilibili.com/video/BV14J4114768/
vscode 插件推荐 - 献给所有前端工程师（2023.7.26更新）：https://segmentfault.com/a/1190000006697219
笔记来源：https://docs.mphy.top/#/

一、HTML简介

1. 网页

1.1 什么是网页

网页是根据因特网上一定的规则，使用html等制作的用于展示特定内容的网页集合。

网页是构成网站的基本元素。

网页是图片、链接、文字、声音、视频等源深路组成，其实就是一个html文件。

1.2 什么是HTML

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

HTML不是一种编程语言，而是一种标记语言（markup language）。标记语言是一套标记标签（markup tag）。

超文本的含义：

它可以加入图片、声音、动画、多媒体等内容（超越文本限制）。
它可以从一个文件跳转到另一个文件，于世界各地主机的文件连接（超级链接文本）。

1.3 网页的形成

网页由网页元素组成，这些元素通过html标签描述出来，然后通过浏览器解析并显示出来。

2. 常用浏览器及其内核

2.1 常用浏览器

浏览器是网页显示、运行的平台。

五大浏览器有 IE、Firefox、Chrome、Safari 和 Opera。

四大内核：Trident, Gecko, Webkit, Blink

2.2 浏览器内核

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

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360、百度浏览器
firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	chrome/opera 浏览器内核

3. Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

3.1 为什么需要Web标准

浏览器不同，它们显示的页面或者排版有些许差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

让Web标准发展前景更为广阔
内容能被更广泛的设备访问。
更容易被搜索引擎了搜索。
降低网站流量费用。
易于维护。
提高页面浏览速度。

3.2 Web标准的构成

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

Web标准提出的最佳体验方案：结构、表现、行为相分离。

二、HTML 标签（上）

1. HTML 语法规范

1.1 基本语法规范

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

1.2 标签关系

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

2. HTML 基本结构标签

每个网页都会有一个基本的结构标签，页面内容都是在这些基本标签上书写。 HTML 页面也叫 HTML 文档。

3. 开发工具

3.1 文档类型声明标签

!<DOCTYPE> 文档类型声明，告诉浏览器使用何种 HTML 版本来显示网页。

1	`<!DOCTYPE html>`

这句话的意思是：当前页面采用的是 HTML5 版本来显示网页。 注意：

<!DOCTYPE> 声明位于文档最前面的位置，处于<html>标签之前。
<!DOCTYPE> 不是一个 HTML 标签，他就是文档类型声明标签。

3.2 lang 语言种类

用来显示当前文档显示的语言。

1
2
3

<html lang="zh-CN">
  <html lang="en"></html>
</html>

en 定义语言为英文。
zh-CN 定义语言为中文。

这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。

3.3 charset 字符集

1	`<meta charset="UTF-8" />`

字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset 属性来设置文档使用何种字符编码。

charset常用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

4. HTML 常用标签

4.1 标签语义

标签语义就是标签的含义。

根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰。

4.2 标题标签 h1-h6（重要）

为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即 <h1>-<h6>。

<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

单词为 head 简写，从 h1-h6 依据重要性递减。

4.3 段落和换行标签（重要）

p 指paragraph，意为段落。把文字有条理的显示出来就需要将文字分段显示。在 html 中，<p> 标签用于定义段落，将整个网页分成若干个段落。

1	`<p>我是一个段落标签</p>`

标签语义: 把 HTML 文档分割为若干段落。

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

<br/> 是 break 缩写，意为打断、换行。

标签语义：强制换行

特点：

<br/> 是个单标签。
<br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

课堂案例

体育新闻显示页面——基本标签的使用

4.4 文本格式化标签

在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。

标签语义：突出重要性，比普通文字重要。

语义	标签	说明
加粗	`<strong></strong>`或`<b></b>`	更推荐`<strong>`，语义更强烈
斜体	`<em></em>`或`<i></i>`	更推荐使用`<em>`，语义更强烈
删除线	`<del></del>`或`<s><s/>`	更推荐使用`<del>`，语义更强烈
下划线	`<ins></ins>`或`<u></u>`	更推荐使用`<ins>`，语义更强烈

4.5 div 和 span 标签

<div> 和 <span> 是没有语义的，它们是一个盒子，用来装内容的。

1 2	`<div>这是头部</div> <span>今日价格</span>`

div 是 division 的缩写，表示分割、分区。span 意思是跨度、跨距。

特点：

div 标签用来布局，但是现在一行只能放一个 div，大盒子。
span 标签用来布局，一行可以多个 span，小盒子。

4.6 图像标签和路径（重点）

4.6.1 图像标签

在 HTML 标签中，<img /> 标签用于定义 HTML 标签页面中的图像。

1	`<img src="图像url" />`

单词 image 的缩写，意为图像。

src 是标签的必须属性，用于指定图像文件的路径和文件名。

属性： 属于这个图像标签的特性。

图像标签的其他属性

属性	属性值	说明
`src`	图片路径	必须属性
`alt`	文本	替换文本，当图片不显示时显示文字
`title`	文本	提示文本。鼠标放到图像上显示文字
`width`	像素	图像宽度
`height`	像素	图像高度
`border`	像素	图像边框粗细

4.6.2 路径

相对路径
绝对路径

1. 相对路径

相对路径：以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。

分类	符号	说明
同级路径		同一级
下一级路径	`/`	位于 HTML 文件上一级
上一级路径	`../`	位于 HTML 文件下一级

2. 绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。

4.7 超链接标签

在 HTML 标签中，<a/> 标签用于从一个页面链接到另一个页面。

4.7.1 链接的语法格式

a 是单词 anchor 的简写，是锚的意思。

1	`<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>`

属性

属性	作用
`href`	指定链接地址 url，为必须属性。
`target`	指定页面打开方式，`_self`为默认值，`_blank`为在新窗口中打开

4.7.2 超链接分类

外部链接
内部链接：网站内部页面之间的相互链接。
空链接: #
下载链接：地址链接的是文件.exe、压缩包.zip 等。
网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。
锚点链接：点击链接，可以快速定位到页面中的某个位置。
- 在链接文本的href属性中，设置属性为 #名字的形式
- 找到目标位置标签，里面添加一个 id 属性 = 名字

[!TIP] 阻止 a 链接跳转，课可给 href 属性设置 javascript:void(0); 或者 javascript:;。

5. HTML 中的注释和特殊字符号

注释:  VSCode 中快捷键：Ctrl + /
字符实体

字符	显示
` `	空格
`<`	＜
`>`	＞
`©`	©

二、HTML 标签（下）

1. 表格标签

1.1 表格的主要作用

表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。表格不是来布局的，而是来展示数据的。

1.2 表格基本语法

<table></table> 用于定义表格的标签。
<tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table>中。
<td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
字母 td 指表格数据（table data），即单元格的内容。

1.3 表头单元格标签 th

一般单元格位于表格的第一行或第一列，表格单元格里面的文本内容 加粗显示。 <th> 标签表示 HTML 表格的表头部分（table head 的缩写）表头单元格(<th>)也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

1.4 表格属性

只作了解，后期通过 CSS 来设置。这些属性都要写到 <table></table> 标签中

属性名	属性值	描述
`align`	left、center、right	表格元素对齐方式
`border`	1 或""	规定是否有边框，默认为`""`，表示没有边框
`cellpadding`	像素值	规定单元边沿与其内容之间空白，默认 1px
`cellspacing`	像素值	规定单元格之间的空白，默认为 2px
`width`	像素值或百分比	规定表格宽度
`hight`	像素	表格高度

1.5 表格结构标签

场景：表格可能很长，将表格分割为表格头部和表格主题两大部分。

加强语义化：<thead> 表示头部区域，<tbody> 表示主体区域，更好区分表格结构。

注意：

<thead></thead>：定义表格头部，且内部必须有<tr>标签。
<tbody></tbody>：定义表格主体，存放数据。
以上标签都放在 <table></table> 里面。

1.6 合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格个数"
跨列合并：colspan="合并单元格个数"

合并三部曲：

确定跨行 or 跨列。
找到目标单元格：跨行取最上面为目标单元格，跨列取最左边为目标单元格。<td colspan="2"></td>
删除多余单元格。

2. 列表标签

表格展示数据，列表则用来布局。

列表特点是整齐、整洁、有序，作为布局更方便自由。根据使用场景不同，列表分为三大类：

无序列表
有序列表
自定义列表。

2.1 无序列表（重要）

<ul> 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。

语法格式:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

注意:

各个列表项之间无需，并列关系。
<ul></ul>中只能包含<li></li>，写入其他标签或文字是不允许的。
无序列表带有自己的属性，可用 CSS 修改样式属性。

2.2 有序列表（理解）

使用 <ol> 标签来定义有序列表，<li> 来定义列表项。

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

与无需列表类似，有自己的样式属性，通过 CSS 设置。

2.3 自定义列表（重点）

<dl> 定义描述列表，与 <dt> 和 <dd> 标签配合使用。

基本语法：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

注意

dl 里面只能包含 dt 和 dd。

3. 表头标签

3.1 为什么需要表头

收集用户信息。和用户进行交互，收集用户资料。

3.2 表头组成

表单域
表单控件（元素）
提示信息

3.3 表单域

表单域是一个包含表单元素的区域。使用 <form> 标签用于定义表单域，手机和传递用户信息。 form 标签会将它范围内的表单元素信息提交给服务器。

目前而言，暂时不需要用表单域提交数据，只需要写上 form 标签即可。

语法格式

1
2
3

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url 地址	指定接受并处理表单数据的服务器的 url 地址
method	get/post	设置表单数据的提交方式
name	名称	用于指定表单名称，区分同一个页面中的多个表单域

注意：

写表单元素之前需要有表单域将其包含。
表单域是 form 标签。

3.4 表单控件（表单元素）

在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。

3.4.1 `<input>` 表单元素

<input> 标签用于收集用户信息。

input 标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

1	`<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	正整数	规定输入字段字符的最大长度

注意

对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。同理，复选框也要有相同的name值。
单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。
设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。
设置 type="button"，普通按钮，后期结合 js 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>input 表单元素</title>
</head>
<body>
    <form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>
</body>
</html>

3.4.2 label 标签

<label> 标签为 input 元素定义标注。

<label> 标签用于绑定一个表单源深路，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。 语法：

1 2	`<label for="sex">男</label> <input type="radio" name="sex" id="sex" />`

核心： <lable>标签的 for 属性与相关元素的 id 属性相同。

3.4.3 select 下拉表单元素

select 标签设置多个选项让用户选择，节约页面空间。语法

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

注意

select 中至少包含一对 option。
在 option 中定义属性selected=selected，当前项即为默认选项。

3.4.4 textarea 文本域表单元素

场景：输入内容较多时。

语法：

1
2
3

<textarea rows="3" cols="20">
    文本内容
</textarea>

[!TIP] > cols="每行字符数"，rows="显示的行数"

三、其他

1. TDK 标签 SEO 优化

SEO（Search Engine Optimization），即搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO 的目的是对网站进行深度优化，从而帮助网站获得免费流量，进而在搜索引擎上提升网站排名，提高网站知名度。

页面必须有三个标签用来进行 SEO 优化。

title
description
keyword

<!-- 网站标题 -->
<title></title>
<!-- 网站说明 -->
<meta name="description" content="">
<!-- 网站关键词 -->
<meta name="keywords" content="">

1.1 title 网站标题

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）

例如： - 京东(JD.COM) - 综合网购首选-正品低价、品质保障、配送及时、轻松购物！ - 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

1.2 description 网站说明

简要说明我们网站主要是做什么的。

我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

例如：

1
2

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物
体验!" />

1.3 keywords 关键字

keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式。

例如：

1 2	`<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />`

2. LOGO SEO 优化

logo 里面首先放一个h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
h1 里面再放一个链接，可以返回首页的，把logo 的背景图片给链接即可。
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后overflow:hidden ，淘宝的做法。
方法2：直接给font-size: 0; 就看不到文字了，京东的做法。

最后给链接一个title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

一、HTML简介

1. 网页

1.1 什么是网页

1.2 什么是HTML

1.3 网页的形成

2. 常用浏览器及其内核

2.1 常用浏览器

2.2 浏览器内核

3. Web标准

3.1 为什么需要Web标准

3.2 Web标准的构成

二、HTML 标签（上）

1. HTML 语法规范

1.1 基本语法规范

1.2 标签关系

2. HTML 基本结构标签

3. 开发工具

3.1 文档类型声明标签

3.2 lang 语言种类

3.3 charset 字符集

4. HTML 常用标签

4.1 标签语义

4.2 标题标签 h1-h6（重要）

4.3 段落和换行标签（重要）

4.4 文本格式化标签

4.5 div 和 span 标签

4.6 图像标签和路径（重点）

4.6.1 图像标签

4.6.2 路径

1. 相对路径

2. 绝对路径

4.7 超链接标签

4.7.1 链接的语法格式

4.7.2 超链接分类

5. HTML 中的注释和特殊字符号

二、HTML 标签（下）

1. 表格标签

1.1 表格的主要作用

1.2 表格基本语法

1.3 表头单元格标签 th

1.4 表格属性

1.5 表格结构标签

1.6 合并单元格

2. 列表标签

2.1 无序列表（重要）

2.2 有序列表（理解）

2.3 自定义列表（重点）

3. 表头标签

3.1 为什么需要表头

3.2 表头组成

3.3 表单域

3.4 表单控件（表单元素）

3.4.1 <input> 表单元素

3.4.2 label 标签

3.4.3 select 下拉表单元素

3.4.4 textarea 文本域表单元素

三、其他

1. TDK 标签 SEO 优化

1.1 title 网站标题

1.2 description 网站说明

1.3 keywords 关键字

2. LOGO SEO 优化

3.4.1 `<input>` 表单元素