共计 7145 个字符，预计需要花费 18 分钟才能阅读完成。
web 标准（前端三剑客：html、css、js）
- 网页的结构（后缀名字为 html 的文件），负责网页的内容整理和分类
- 网页的样式（后缀名字为 css 文件），负责设置网页的板式，颜色，文字大小
- 网页的行为（后缀名字为.js 的文件），负责网页的动态交互
1 认识 html
概念：HTML（英文 Hyper Text Markup Language 的缩写）中文译为“超文本标签语言”，主要是通过 HTML 标签对网页中的文本、图片、声音等内容进行描述。
说白了 HTML 就是用尖括号包裹起来的英文单词，浏览器对这个尖括号包裹起来的英文单词有特殊的解释
如：<strong> 加粗 </strong> <h1> 大标题 </h1> 等等HTML 骨架
HTML 有固定的基本格式，就跟我们书信有基本的格式是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 网页的标题 </title>
</head>
<body>
这里写内容
</body>
</html>自动生成完整版骨架的快捷方式：! => tab 键 或者 html:5 => tab 键
标签的关系
1、嵌套关系：html 标签嵌套 head 标签
<html>
<head></head>
</html>2、并列关系：head 标签与 body 标签并列
<head></head>
<body></body>2 认知标签
2.1 常用标签
1、标题标签
<hn> 标题内容 </hn> 其中 n 的取值范围是 1 -6（1 的权重最高，6 最小）2、段落标签
<p> 段落内容 </p>
3、水平线标签
<hr> 单标签，作用是呈现一个水平线
4、换行标签
<br> 单标签，作用是换行2.2 字体格式化标签
1、加粗字体
<strong> 字体加粗 </strong> <b> 字体加粗 </b>
2、倾斜字体
<em> 字体倾斜 </em> <i> 字体倾斜 </i>
3、字体贯穿线，也就是删除线
<del> 字体贯穿 </del> <s> 字体贯穿 </s>
4、字体下划线
<ins> 字体下划线 </ins> <u> 字体下划线 </u>可以使用不同的标签完成功能，如加粗字体标签，可以使用 strong，也可以使用 b，但建议使用具有语义的标签，如加粗字体标签：strong。
一个是标签语义强，起强调作用。一个是没有语义，没有强调作用。语义好的网页更受 SEO 的喜欢，在搜索引擎里面的排名会更靠前。
SEO 优化：
在输入关键字的时候，搜索引擎会罗列很多很多的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页，所以如果网页在搜索引擎中的排名更加靠前，那么自然而然会带来更多的用户点击访问。
2.3 标签属性
在使用标签的时候，一个独立的标签比较单一不能完成一些需求，这个时候就可以借助于标签的属性来完成。多个属性之间用空格隔开。
< 标签 属性名 1 =“属性值 1”属性值 2 =“属性值 2”>
<!-- 如：<hr color="red"/> -->2.4 图片标签
<img src="图片的地址" alt="图片的替换文本" title="图片的标题" />
图片标签属性：1、src 图片的地址
2、alt 图片加载失败后的替换文本
3、title 鼠标移到图片上，显示图片的标题
4、width="100" height="200"（样式属性都会通过 CSS 实现）2.5 链接标签
<a href="链接地址" target="链接打开方式"></a>
<!--<a href="http://www.baidu.com" target="_blank"> 百度一下 </a>-->
链接标签属性：1、href 跳转的链接地址
2、target 链接打开的方式1、target 的取值
- _self 默认值，当前窗口覆盖打开链接
- _blank 新建窗口打开链接
2、href 跳转地址分类
- 站外跳转：http://www.baidu.com
- 站内跳转：本地文件路径
- 锚点跳转（页面内部跳转）：
<!-- 在需要跳转的标签上添加 id="自定义 id 名" 如：<p id="myid"></p>
让 a 标签的 href 属性等于之前自己自定义的 id 名 如：<a href="# 自定义的 id 名字" /> -->
<!-- 跳转到薪水的位置 -->
<a href="#target_salary"> 我的薪水 </a>
<p id="target_salary">10000+</p>2.6 路径（地址）
1、绝对地址：从盘符或者 http:// 出发去找目标文件的过程 …
<!-- http:// 开头 -->
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度图片">
<!-- 盘符开头 -->
<img src="c:\img\1.png">2、相对地址：从当前文件出发去找目标文件的过程就称之为相对路径
- 同级目录：路径直接写目标文件的名称即可
- 非同级目录：上一级目录（../）下一级目录（文件名 /）
<!-- 同级目录 -->
<img src="img.png"/>
<!-- 非同级目录：上一级目录 -->
<img src="../img.png"/>
<!-- 非同级目录：下一级目录 -->
<img src="img/img.png"/>2.7 列表
2.7.1 列表分类
1、无序列表
列表之间没有顺序，在实际工作中用的比较多。li 标签相当于一个容器，可以容纳所以元素。
<ul>
<li> 无序列表 1 </li>
<li> 无序列表 2 </li>
<li><a href="02_test.html"> 无序列表 3 </a></li>
</ul>2、有序列表
列表之间有顺序，在实际工作中用的较少。
<ol>
<li> 有序列表 1 </li>
<li> 有序列表 2 </li>
<li> 有序列表 3 </li>
</ol>3、自定义列表
可以针对一个列表标题充分解释，特定情况下使用。
<dl>
<dt> 列表标题 </dt>
<dd> 列表标题的解释说明 </dd>
<dd> 列表标题的解释说明 </dd>
</dl>2.7.2 列表注意事项
1、<ul></ul> 或者 <ol></ol> 中只能嵌套 <li></li>，直接在 <ul></ul><ol></ol> 标签中输入其他标签或者文字的做法是不被允许的。2、<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。3、<dl></dl> 中只能嵌套 <dt></dt> 和 <dd></dd>，直接在 <dl></dl> 标签中输入其他标签或者文字的做法是不被允许的。4、<dd></dd> 之间相当于一个容器，可以容纳所有元素。<dt></dt> 一样2.8 注释 和 特殊字符
2.8.1 注释
浏览器不解析的标签，作用是用来提示开发人员或者便于开发人员理解和阅读。WebStorm 工具注释快捷键 command + /（MacBook）
<!-- 注释 -->2.8.2 特殊字符
在一些情况下，我们需要在页面上显示一些特殊的标识的时候，我们就需要用到字符实体。
<p></p>
<!-- 网页展示如下那内容 -->
<p></p>
3 表格标签
<table>
<tr>
<td> 姓名 </td>
<td> 性别 </td>
<td> 年纪 </td>
<td> 成绩 </td>
</tr>
<tr>
<td> 张三 </td>
<td> 男 </td>
<td>23</td>
<td>99</td>
</tr>
<tr>
<td> 李四 </td>
<td> 男 </td>
<td>30</td>
<td>88</td>
</tr>
</table>1、表格至少有三个基本的标签构成：table 代表一个表格，tr 代表行，td 代表单元格
2、tr 必须嵌套在 table 标签中，td 必须嵌套在 tr 或者 th 中
3、有几个单元格就代表有几列
3.1 表格属性
borde 表格的边框（了解）
width 表格的宽度（了解）
cellspacing 单元格与单元格的间距
cellpadding 单元格与单元格内容的间距
align 表格的对齐方式，值如：left、center、right（了解）
3.2 表格的表头标签
在合适的位置将 td 替换成 th 即可，th 标签相对 td 来说更有语义性，并且会将内部的文字加粗且居中
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th> 姓名 </th>
<th> 性别 </th>
<th> 年纪 </th>
<th> 成绩 </th>
</tr>
</table>3.3 表格的结构
thead 标签表示表头部分，tbody 标签表示表体部分，caption 标签表示表格的标题。表格的结构不是一定需要的，但是添加上表格的结构会使表格的语义更明确。
<table border="1" cellspacing="0" cellpadding="10">
<caption> 成绩管理系统 </caption>
<thead>
<tr>
<th> 姓名 </th>
<th> 性别 </th>
<th> 年纪 </th>
<th> 成绩 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 张三 </td>
<td> 男 </td>
<td>23</td>
<td>89</td>
</tr>
</tbody>
</table>3.4 合并单元格
单元格的合并分为：跨行和跨列合并
1、跨行合并：rowspan 上下合并 将 rowspan 写在上面的单元格上
2、跨列合并：colspan 左右合并 将 colspan 写在左边的单元格上
<table border="1" width="800" cellspacing="0" cellpadding="8" align="center">
<caption> 成绩管理系统 </caption>
<tr>
<td> 姓名 </td>
<td> 性别 </td>
<td> 年纪 </td>
<td> 成绩 </td>
</tr>
<tr>
<td> 张三 </td>
<td> 男 </td>
<td>23</td>
<td rowspan="2">99</td>
</tr>
<tr>
<td>kerwin</td>
<td rowspan="2"> 女 </td>
<td>30</td>
</tr>
<tr>
<td> 张三 </td>
<td>23</td>
<td>89</td>
</tr>
<tr>
<th> 备注 </th>
<td colspan="3"></td>
</tr>
</table>
4 表单标签
作用：收集用户信息发送给后台
三大组成部分：
- 表单域（将内部包含的表单信息都收集起来发送给后台）
- 提示文本（提示用户当前表单的输入内容）
- 表单（真正用来收集用户信息）
4.1 表单的分类
<input type="">type 的取值：
- text 单行文本输入框
- password 密码框
- radio 单选框（在多个里面选择一个）单选框要生效必须具备 name 属性 并且同一种类型的单选框的 name 取值必须一样
- checkbox 复选框（在多个里面选择某几个）
- button 普通按钮
- file 用户上传控件
- submit 提交按钮，收集表单域里面的用户信息提交给后台
补充：1、radio 和 checkbox 默认选中项 需要使用 checked 属性
2、value 属性代表表单里面包含的值
3、表单如果想被提交，都需要写上 name 属性（目前不涉及数据提交，可以不写；单选框 radio 由于特殊性，如果不写就会不能有单选的效果，所以单选框）
4、单行文本输入框，使用 maxlength 属性可以限制输入的最大字符数
4.2 其它表单补充
1、textarea 多行文本输入框
<textarea rows="5" cols="60"></textarea>rows 默认显示的行数
cols 默认显示的列数，超过指定数字，自动换行
2、select 下拉菜单
<select>
<option value="上海"> 上海 </option>
<option value="北京" selected> 北京 </option>
<option value="安徽"> 安徽 </option>
</select>select 下拉框的默认选中项使用 selected 属性
3、label 标签会自动关联表单，点文字的时也相当于点了表单，体验更好
<label><input type="radio" name="sex"> 男 </label>
<label><input type="radio" name="sex"> 女 </label>
<label> 用户名：<input type="text"></label>4.2 表单域
作用：将内部的表单里面的 value 值收集起来发送给后台
<form action=""method=""></form>- action 提交的后台地址
- method 提交的方法，取值：get post
4.3 容器标签 div 和 span
<div>
我是一个 div，我一般用来做模块布局
</div>
<span>
我是一个 span 标签，我一般用来包文字
</span>表单案例：
<form action="demo.php" method="get">
用户名：<input type="text" name="username" maxlength="10">
密码：<input type="password" name="password">
<br>
性别：<input type="radio" name="sex" value="男" checked="checked"> 男
<input type="radio" name="sex" value="女"> 女
<br>
爱好：<input type="checkbox" value="读书" name="hobby"> 读书
<input type="checkbox" value="打篮球" name="hobby"> 打篮球
<input type="checkbox" checked="checked" value="旅游" name="hobby"> 旅游
<br>
图片上传：<input type="file">
<br>
<select name="city">
<option value="上海"> 上海 </option>
<option value="北京" selected> 北京 </option>
<option value="安徽"> 安徽 </option>
</select>
<br>
请介绍自己：<textarea rows="1" cols="2" name="introduce"></textarea>
<br>
<input type="button" value="按钮">
<br>
<input type="submit">
</form>
5 h5 新增的标签及其表单属性
5.1 h5 新增的标签
header,nav,section,footer,aside,article
这些新增标签的功能使用 div 标签都能实现，且使用方式跟 div 一摸一样，但 div 标签没有语义性，搜索引擎不知道这个标签内部装的是什么，所以这样的话搜索引擎不喜欢这样的网页。
- header 表示 header 里面包裹的东西是网站的头部区域
- nav 表示 nav 里面包裹的东西是网站的导航
- section 表示里面包裹的东西是网页的某一个模块
- footet 表示 footer 标签里面包裹的东西是网页的页脚
- aside 表示 aside 标签里面包裹的东西是网页的侧边栏
- article 表示 article 标签里面包裹的东西是网页的文章页
5.2 h5 新增的表单和新属性
1、h5 新增的表单
<!-- 滑块 -->
<input type="range">
<!-- 日期控件 -->
<input type="date">
<!-- 唤醒数字键盘 -->
<input type="number">2、表单新增属性
- placeholder 占位文本
- autofocus 自动获取焦点
- autocomplete 自动补全
- required 自动验证表单
请输入用户名：<input type="text" placeholder="请输入用户名">5.3 多媒体标签
1、视频标签
网页中插入视频有两种方法：
- 第一种方法：将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可，如上传到优酷视频网站，没有兼容性但是有广告植入。
- 第二种方法：使用 h5 新增的 video 标签，没有广告，但是有兼容性问题，一般运行在手机端。
<video src=""></video>video 标签常用的属性：
- autoplay 自动播放
- controls 播放控件
- loop 循环播放
video 的格式支持 ogg,mp4,webm 不同的浏览器支持的格式不一样，所以出现了一种兼容写法: 前提是准备三种格式的视频文件。
<video autoplay>
<source src="视频 1.ogg">
<source src="视频 1.mp4">
<source src="视频 1.webm">
<a href="#"> 你的浏览器不支持 video，点击升级吧 </a>
</video>浏览器会从上到下依次去读，在这个过程中，只要读到自己识别的视频文件就直接播放这个视频文件，并且不会再往后继续读取。实测：目前的主流浏览器对 mp4 的支持都比较好
2、音频标签
音频标签的使用和视频标签的使用基本一致，兼容性处理。
<audio>
<source src="音频 1.ogg">
<source src="音频 1.mp3">
<source src="音频 1.webm">
<a href="#"> 你的浏览器不支持 audio，点击升级吧 </a>
</audio>audio 标签的常用属性 1.autoplay 自动播放 2.controls 播放控件 3.loop 循环播放
知识补充
字符集的设置
字符集的核心点就是如果设置了以什么字符集进行读取，那么在保存的时候也需要设置成对应的字符集
utf-8 收录了全世界所有国家的语言文字
gbk 收录的是汉字
utf-8 > gbk 所以查询来说的话 gbk 的查询和存储都小于 utf-8 但是现在国际主流都是 utf-8，所以为了后期的考虑，都用 utf-8
