本次HTML5+CSS3+移动端前端的学习源自黑马程序员的pink老师：https://www.bilibili.com/video/BV14J4114768
HTML简介：
网页的基本组成：
什么是网页：
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容的网页的集合
网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。
什么是HTML：
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言(Markup Language)。
标记语言由标签组成，里面有一套标记标签(Markup Tag)。
所谓超文本的含义：
- 可以加入图片、声音、动画、多媒体等内容(超越了文本限制)
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)
网页的形成：
网页是有各种网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析显示给用户的。
前端人员开发代码->浏览器显示代码(解析渲染)->生成最后的Web页面
常用浏览器及其内核：
浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等
浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
| IE | Trident | IE、猎豹安全、360极速、百度 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Chrome/Opera内核。Blink是Webkit的分支 |
目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等
Web标准(重点)：
Web标准是由W3C组织和其他标准化组织指定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
为什么需要Web标准：
浏览器不同，它们显示页面或者排版就有些许差异。有的浏览器默认16号大小的字体，有的浏览器是12号。这时如果写出的代码通过Web标准，那么就可以通过不同的浏览器展示统一的内容。下面是符合Web标准的代码的一系列优点：
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 是网站更易于维护
- 提高页面浏览速度
Web标准的构成：
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三方面
| 标准 | 说明 |
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。 |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript |
图片解释：https://blog.csdn.net/qq_34644270/article/details/102632691
结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作
Web标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到Javascript文件中。
HTML标签：
基本语法概述：
HTML标签是由尖括号包围的关键词，例如<html>。
HTML标签通常是成对出现的，例如<html></html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签(极少情况)，例如<br />，我们称为单标签。
标签关系：
标签关系可以分为两类：包含关系和并列关系。
HTML基本结构标签：
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也被称为HTML文档。
第一个HTML：
| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，我们称之为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里的 |
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>我的第一个页面</title> </head> <body> 你我之间，黑马洗练，月薪过万，一飞冲天。 </body> </html> |
HTML文档的后缀名必须是.htm或.html，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了
开发工具：
VSCode的配置参考了此文章
https://zhuanlan.zhihu.com/p/113222681
VScode输入!会自动补全HTML模板
模板如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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>这页面是vscode写的</title> </head> <body> 写代码是一件非常快乐的事情 </body> </html> |
在VScode补全中新出现的标签：
文档类型声明标签：
<!DOCTYPE> 是文档类型声明标签，作用是告诉浏览器使用哪种HTML版本显示网页
<!DOCTYPE html>的意思是 当前页面采取的是HTML5版本来显示网页
注意：
- <!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前
- <!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
lang语言种类：
<html lang="en">
用来定义当前文档显示的语言
en是嘤语，zh-CN定义语言为中文
其实定义en的文档也是可以写中文，无影响
对浏览器和搜索引擎是有作用的
字符集：
字符集(Character set)是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性规定HTML文档应该使用哪种字符编码。
<meta charset="UTF-8" />
charset常用的值有：GB2312、BIG5、GBK(分别是简体 繁体 包含简繁体)和UTF-8，UTF-8也被称为万国码，基本包括了全世界所有国家需要用到的字符。
注意：字符集是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8"，不是 "utf8" "UTF8"
HTML常用标签：
标题标签<h1>-<h6>：
|
1 |
<h1>我是一级标题</h1> |
h即head，作为标题使用，根据重要性递减
特点：
- 加了标题的文字会变得加粗，字号也会依次变大
- 一个标题独占一行
段落标签和换行标签
<p> 用于定义段落
|
1 |
<p>我是一个段落</p> |
p即paragraph，段落，可以把HTML文档分割为若干段落
特点：
- 文本在一个段落中会根据浏览器的大小自动换行
- 段落和段落之间保有空隙
<br />用于换行
break意为打断、换行。
是单标签 只是简单的开始新的一行，跟段落不一样
文本格式化标签：
如粗体、斜体和下划线等效果
|
1 2 3 4 5 6 7 8 |
这是<strong>加粗</strong>的效果 这也是<b>加粗</b>的效果 这个是<em>倾斜</em>的文字效果 这个也是<i>倾斜</i>的文字效果 这里应该<del>删除</del> <s>s也是删除的效果</s> ins是<ins>下划线</ins> u其实也是，只是<u>ins的语义更强烈</u> |
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong>或<b></b> | 更推荐strong因为语义更强烈 |
| 倾斜 | <em></em>或<i></i> | 更推荐em因为语义更强烈 |
| 删除线 | <del></del>或<s></s> | 更推荐del因为语义更强烈 |
| 下划线 | <ins></ins>或<u></u> | 更推荐ins因为语义更强烈 |
<div>和<span>标签：
<div>和<span>是没有语义的它们就是一个盒子，用来装内容的
|
1 2 |
<div>这是头部</div> <span>今日价格</span> |
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：
- <div>标签用来布局，但是现在一行只能放一个<div>。大盒子
- <span>标签用来布局，一行上可以多个<span>。小盒子
图像标签和路径：
图像标签：
在HTML标签中，<img>标签用于定义HTML页面中的图像
|
1 |
<img src="图片路径" /> |
ims为image，意为图像。<img>是单标签
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
属性简单理解就是属于这个图像标签的特性
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，当图片不能显示时显示的文字 |
| title | 文本 | 提示文本，鼠标悬浮在图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
border在VS中不是黄色的，与其他属性不同，边框一般不在HTML中编写，在CSS中使用
图像标签在使用当中的注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后
- 标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式，即Key(键) = "vakue"(值)，属性 = "属性值"
路径：
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径(图片相对于HTML页面的位置)
| 相对路径分类 | 符号 | 说明 |
| 同级路径 | 图像文件位于HTML文件同级 如<img src="Megumin.png" /> | |
| 下级路径 | / | 图像文件位于HTML文件下一级 如<img src="img/Megumin.png" /> |
| 上级路径 | ../ | 图像文件位于HTML文件上一级 如<img src="../Megumin.png" /> |
绝对路径：指目录下的绝对位置，直接到达目标位置，通常都是从盘符开始的路径
如"D:\web\img\logo.jpg"或完整的网络地址"https://imgs2023.oss-cn-shanghai.aliyuncs.com/2020/08/doge.jpeg"
超链接标签：
|
1 |
<a href="跳转目标" target="跳转方式">文本或图像</a> |
单词anchor缩写a意为锚
| 属性 | 作用 |
| href | 必须属性，用于指定连接目标的url地址，当为标签应用href属性时，他就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，_sefl为默认值，_blank为在新窗口中打开 |
链接分类：
外部链接：必须加http://，不可以直接www.百度.com
|
1 |
<a href="http://www.baidu.com">baidu</a> |
内部连接：网站内部页面之间的相互连接
|
1 |
<a href="index.html">首页</a> |
空连接：当没有确定连接目标时使用，
|
1 |
<a href="#">首页</a> |
下载链接：如果href里的地址是一个文件或者压缩包，会下载这个文件
网页元素链接：网页中的各种网页元素如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：点击链接时可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为#名字的形式如：
|
1 |
<a href="#第二部分">跳转到第二部分</a> |
然后在目标位置的标签添加id属性=刚才的名字 如：
|
1 2 |
<h3 id="第二部分">第二部分</h3> <p id="第三部分">第三部分</p> |
注释标签：
HTML中的注释以"<!--"开头，以"-->"结束
|
1 |
<!-- 我想喝猫娘手冲咖啡 --> 快捷键：Ctrl + / |
注释标签不显示在页面中。
特殊字符：
HTML中一些符号很难直接使用，我们可以用下面的字符替代
| 特殊字符 | 描述 | 字符的代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
想在页面显示标签，也可以用
|
1 |
<p>是一个段落标签 |
的方法，会显示为<p>是一个段落标签
表格标签：
用于显示、展示数据，不是用来布局的。
|
1 2 3 4 5 6 7 |
<table> <tr> <td>单元格内</td> ... </tr> ... </table> |
table是定义表格的标签
tr是行，必须嵌套在table内
td是单元格，必须嵌套在table内
td指表格数据(table data)即数据单元格的内容
可以写成这样
|
1 2 3 4 5 6 7 8 |
<table> <tr><td>单元格内</td><td>格子2</td><td>格子3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> |
th是表头
th跟标题似的,th跟td不一样的地方在于th会加粗和居中
表格属性：实际开发中不常用，后面用css
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框默认为""表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
align:控制整个表格在页面何处对齐
表格结构标签：
使用场景：表格可能很长，为了更好表示表格的语义可以将表格分割成表格头部和表格主体两大部分
在表格标签中分别用<thead>表示表格的头部区域，<tbody>表示表格的主体区域，可以更好的区别表格结构
合并单元格：
- 先确定是跨行还是跨列
- 找到目标单元格写上合并方式=合并的单元格数量
比如<td colspan="2">格内数据<td> - 删除多余的单元格
个人感觉与其说是合并，不如说是扩展单元格，将某个单元格向横或竖方向扩展
列表标签：
表格是用来显示数据的，列表是用来布局的
列表最大的特点就是整齐整洁有序用它来布局会更自由方便
列表可以分为三大类：无序列表、有序列表、自定义列表
无序列表：
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项目，而列表项使用<li>标签定义
|
1 2 3 4 5 6 |
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul> |
- 无序列表的各个列表之间没有顺序级别之分，是并列的
- <ul></ul>中只能嵌套<li></li>,直接在ul里输入其他文字或者标签不行
- li里相当容器可以容纳所有元素
- 无序列表会带有自己的样式属性，但是在实际使用时我们用CSS
有序列表：
有序列表即为有序排列顺序的列表，其各个列表项会按照一定的顺序排列定义
在HTML标签中ol标签用于定义有序列表列表排序以数字显示并使用li标签定义列表项
有序：
|
1 2 3 4 5 6 |
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol> |
- ol里只能放li
- li是容器
- 有属性我们不用后面我们用css
自定义列表：
|
1 2 3 4 5 6 |
<dl> <dt>一个词</dt> <dd>词的解释1</dd> <dd>词的解释2</dd> <dd>词的解释3</dd> </dl> |
dl用于定义表述列表（定义列表）
dt定义项目/名字
dd描述每一个项目/名字
- dl里只能dt或dd
- dt与dd没个数限制，通常是一个dt对应多个dd
|
1 2 3 4 5 6 7 8 9 10 |
<dl> <dt>一个词</dt> <dd>词的解释1</dd> <dd>词的解释2</dd> <dd>词的解释3</dd> <dt>一个词</dt> <dd>词的解释1</dd> <dd>词的解释2</dd> <dd>词的解释3</dd> </dl> |
表单标签：
使用表单是为了收集用户信息，在网页中需要与用户进行交互，收集用户资料，此时需要表单
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三部分构成
表单域是一个包含表单元素的区域，在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递：<form>会把它范围内的表单元素信息提交给服务器。
|
1 2 3 |
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form> |
常用属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 设置表单数据的提交方式 |
| name | 名称 | 指定表单的名称以便区分同页面中的多个表单域 |
表单控件（表单元素）
<input>表单元素
input是输入的意思，而在表单元素中<input>标签用于收集用户信息
在<input>标签中，包含一个type属性，根据不同的type属性值输入字段拥有很多种形式（文本、字段、复选框、掩码后的文本控件、单选按钮、按钮等）
|
1 |
<input type="属性值"> |
<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
type属性的属性值及其描述如下：
| 属性值 | 描述 |
| button | 定义可点击按钮(多数情况下，用于通过javascript启动脚本) |
| checkbox | 定义复选框 |
| file | 定义输入字段和"浏览按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其输入文本。默认宽度为20个字符 |
text、password、radio、checkbox的使用方法如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
用户名：<input type="text"> <br> 密码：<input type="password"> <br> <!-- 仅仅写了最基础单选项，下面这俩没有关联不可以二选一 --> 性别：男<input type="radio"> 女<input type="radio"> <br> <!-- 加了name后便可二选一 --> 性别：男<input type="radio" name="性别"> 女<input type="radio" name="性别"> <br> 爱好：唱<input type="checkbox" name="爱好"> 跳<input type="checkbox" name="爱好"> rap<input type="checkbox" name="爱好"> |
submit属性值：
|
1 |
<input type="submit"> |
提交之后会引导到另一个页面，同时链接会附带刚刚表格的信息：如
|
1 |
file:///F:/!Code-HTML/11-表单元素.html?username=andy&性别=男&爱好=唱&我已同意用户条款=我已同意用户条款 |
|
1 |
file:///F:/!Code-HTML/11-%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0.html?username=andy&%E6%80%A7%E5%88%AB=%E7%94%B7&%E7%88%B1%E5%A5%BD=%E5%94%B1&%E6%88%91%E5%B7%B2%E5%90%8C%E6%84%8F%E7%94%A8%E6%88%B7%E6%9D%A1%E6%AC%BE=%E6%88%91%E5%B7%B2%E5%90%8C%E6%84%8F%E7%94%A8%E6%88%B7%E6%9D%A1%E6%AC%BE |
点击了提交按钮，可以把表单域form的表单元素里面的值提交给后台服务器
除了type属性之外，input标签还有其他很多属性，其常用属性如下
| 属性 | 属性值 | 描述 |
| name | 由用户定义 | 定义input元素的名称 |
| value | 由用户定义 | 规定input元素的值 |
| checked | checked | 规定次input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
name属性
|
1 2 3 4 |
性别：男<input type="radio" name="性别"> 女<input type="radio" name="性别"> |
vaule属性
|
1 2 3 4 5 6 |
用户名：<input type="text" name="username" value="请输入用户名"> 性别：男<input type="radio" name="性别" value="男"> 女<input type="radio" name="性别" value="女"> 爱好：唱<input type="checkbox" name="爱好" value="唱"> 跳<input type="checkbox" name="爱好" value="跳"> rap<input type="checkbox" name="爱好" value="rap"> |
vaule和name是每个表单元素都要有的属性值，主要给后台人员使用
name和vaule会一起提交到服务器后台
name表单元素的名字，要求一组单选按钮或一组多选按钮要有相同的name值
checked属性
|
1 |
<input type="checkbox" checked="checked" name="我已同意用户条款" value="我已同意用户条款">我已同意用户条款 |
初始选中的属性
checked属性主要针对于单选按钮和复选框，主要作用一打开页面就可以默认选中某个表单元素
maxlength属性
|
1 |
用户名：<input type="text" name="username" value="请输入用户名" maxlength="12"> |
规定输入字段中的字符的最大长度
maxlength使用户可以在表单元素输入的最大字符数，一般较少使用
本笔记内直接或间接引用了如下内容：
- CSDN Web 标准构成-LeonGus :
https://blog.csdn.net/qq_34644270/article/details/102632691 - 知乎 史上最全vscode配置使用教程-灰蓝宇墨：
https://zhuanlan.zhihu.com/p/113222681