一、浏览器内核分类(cxhhnr)
Trident——IE/Edge浏览器使用
Gecko——火狐浏览器使用
Webkit——safari浏览器使用
Chromium/Blink——Chrome浏览器使用
Presto——Opera浏览器使用（新版Opera已经使用Blink内核）
二、Web标准构成
Web标准是由W3C及其他标准化资质制定的标准集合。包括：结构（Structure）、表现（Presentation）、行为（Behavior）
结构标准：用于对网页元素进行整理和分类，包括 xml、xhtml 两部分
样式标准：用于设置网页元素的版式、颜色、大小等外观，主要指 Css
行为标准：网页模型的定义及交互的编写。包括 DOM和ECMAScript两部分
所以，理想状态下，一个网页的源码中需要包含：.html、.css、.js
三、html基本骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1、<!DOCTYPE>
<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。
HTML5可以向下兼容，所以，现在直接指定为<!DOCTYPE html>即可。
2、charset（字符编码集）
GB2312：简体中文字符集，含6763个常用汉字
BIG5：繁体中文，港澳台地区使用
GBK：含全部中文字符，是对GB2312的扩展，支持繁体字
UTF-8：支持中文和英文等，是最常用的字符集
四、HTML标签
HTML大量使用语义化标签，所谓语义化就是见名知意，
1、排版标签
（1）、标题标签 <h1></h1>
h 即 head 的简写
有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。
基本格式<h1></h1>
像<h7>这种错误的标签在展示时不起作用
（2）、段落标签<p></p>
p 即 paragraph 的简写
基本格式<p>段落内容</p>
段落中的文本内容超出浏览器宽度之后会执行自动换行
（3）、水平线标签<hr />
hr 即 horizontal 的缩写
其作用是在页面中插入一条水平线
基本格式<hr />
这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）
（4）、容器标签 <div></div> 和 <span></span>
div 即 division 的缩写，分割、区分的意思
span 即 span ，跨度、范围的意思
这俩本质上是一个容器，类似于 Android 中的ViewGroup
基本格式<div>这是div标签中的内容</div> <span>这是span标签中的内容</span>
2、文本格式化标签
标签 效果
<b></b>、<strong></strong> 加粗，XHTML推荐使用<strong>
<i></i>、<em></em> 斜体，XHTML推荐使用<em>
<s></s>、<del></del> 删除线，XHTML推荐使用<del>
<u></u>、<ins></ins> 下划线，XHTML推荐使用<ins>
3、标签的属性
基本格式：<标签名 属性1=”属性值1“ 属性2=”属性值2“></标签名>
标签可以拥有多个属性
属性必须写在开始标签中，位于标签名后面
属性之间不区分顺序
标签名与属性、属性与属性之间使用空格隔开
任何属性都有默认值，省略该属性表示使用默认值
4、图像标签 <img />
img 即 image 的缩写
基本格式<img src="图片URI/URL" />
<img />常用属性如下：
属性 属性值 属性含义
src URI/URL 图像的路径
alt 文本 图像无法正常显示时的提示文本
title 文本 鼠标悬停于图像时显示的文本
width 像素（XHTML 不支持按页面百分比显示） 图像的宽度
height 像素（XHTML 不支持按页面百分比显示） 图像的高度
border 数字 设置图像边框的宽度
设置图像的宽高时，如果想等比缩放，则只设置其中一个即可
5、超链接标签
(1)、超链接标签<a></a>
anchor 的缩写
基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>
href 即 HyperText Reference , 指定要跳转的URL地址
target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开
注意：
外链需要添加 http:// 或 https:// 前缀
内部链接 直接链接内部页面名称即可，如 <a href="index.html">首页</a>
如果当时没有确定链接目标时，可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接
各种网页元素，如 文本、图像、表格、音频、视频等都可以作为超链接的载体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接文本示例</title>
</head>
<body>
<a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">CnPeng简书</a>
<br/>
<a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>
<br/>
<a href="aTag.html" target="_blank">内部链接--再打开一个aTag.html</a>
<br/>
<a href="#">空的超链接</a>
</body>
</html>
（2）、锚点
通过创建锚点，可以快速定位到目标内容区域
创建锚点分为两步
为目标内容（即锚点）创建id 并赋值
将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#createAnchor">点击跳转到锚点位置</a>
<br/>
通过创建锚点，
可以快速定位到目标内容区域
<!--加这一堆br是为了增加页面高度，不然显示不出锚点效果-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<h3 id="createAnchor">创建锚点分为两步</h3>
<hr/>
为目标内容（即锚点）创建id 并赋值
<br/>
将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a>
</body>
</html>
6、<base> 标签
<base> 标签可以限定同一页面内所有 超链接 的打开方式。<base target="_blank">
设置 <base> 之后依旧可以为某个单独的超链接设置打开方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>base 标签</title>
<!--指定页面中所有超链接的默认打开方式为 blank -->
<base target="_blank">
</head>
<body>
<a href="https://www.jianshu.com/u/414acf7abc2b" >CnPeng简书</a>
<br/>
<!--虽然 head 中设置了base,但此处依旧可以单独指定打开方式为 self,实现重载-->
<a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a>
<br/>
<a href="aTag.html">内部链接--再打开一个aTag.html</a>
<br/>
<a href="#">空的超链接</a>
</body>
</html>
<img /> 、 < br/>、 <hr />、<base/> 都是自闭合标签
7、转义字符
8、注释标签
格式为 < !-- 注释内容 -- >
9、路径
（1）、相对路径
图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img src="logo.gif"/>
图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img src="image/logo.gif"/>
图像文件位于HTML文件的上一级，在文件名之前加 " ../ ", 上两级则使用 " ../../ ",依次类推。<img src="../image/logo.gif"/>
(2）、绝对路径
本地绝对路径： D:\web\img\logo.gif
网络绝对路径：https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700
10、列表标签
（1）、无序列表 <ul>
所谓无序列表就是以小圆点或者小方块作为行首标志的列表
无序列表的各项之间是并列的，没有顺序级别的区分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无序列表 ul</title>
</head>
<body>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
</body>
</html>
注意：
<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
<li></li> 之间相当于一个容器，可以嵌套任意标签
（2）、有序列表 <ol></ol>
内部也是嵌套<li></li>
默认以 1、2、3...作为行首排序标志
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序列表ol</title>
</head>
<body>
<ol >
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
</body>
</html>
（3）、自定义列表 <dl></dl>
<dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd></dd>
自定义列表项前不具有任何项目符号，既没有小圆点也没有1234
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>自定义列表项1</dt>
<dd>自定义列表项1 的内容解释1</dd>
<dd>自定义列表项1 的内容解释2</dd>
<dt>自定义列表项2</dt>
<dd>自定义列表项2 的内容解释1</dd>
<dd>自定义列表项2 的内容解释2</dd>
</dl>
</body>
</html>
11、表格标签 table
<table></table> 用来定义表格，
<tr></tr> 用来定义行，嵌套在 <table></table> 中
<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素
属性名称 含义 属性取值
border 表格的边框。默认 border="0",即无边框 像素值
cellspacing 单元格与单元格边框之间的间距。
默认 cellspacing="2" 像素值
cellpadding 单元格内容与单元格边框的间距。
默认 cellpadding="1" 像素值
width 表格的宽度 像素值
height 表格的高度 像素值
align 表格在页面中的水平对齐方式 left 、center 、right
caption 标题 文本
colspan 从当前列向后 横跨几列, 应用于td、th 数字
rowspan 从当前行向下 竖跨几行, 应用于td、th 数字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1">
<tr>
<td>第一行第1列</td>
<td>第一行第2列</td>
<td>第一行第3列</td>
</tr>
<tr>
<td>第二行第1列</td>
<td>第二行第2列</td>
<td>第二行第3列</td>
</tr>
</table>
</body>
</html>
12、表头标签
表头一般位于表格的第一行或者第一列。
表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果
增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可
下图即是设置了表头的表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表头</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10">
<caption>caption标签是啥？标题？</caption>
<tr>
<th>属性</th>
<th>含义</th>
<th colspan="2">取值</th>
</tr>
<tr>
<th>border</th>
<td>单元格边框</td>
<td>像素值，默认0</td>
<td rowspan="3">rowspan从当前单元格向下跨三行</td>
</tr>
<tr>
<th>cellspacing</th>
<td>单元格与单元格边框的间距</td>
<td>像素值，默认2</td>
</tr>
<tr>
<th>cellpadding</th>
<td>单元格内容与单元格边框的间距</td>
<td>像素值，默认1</td>
</tr>
</table>
</body>
</html>
随时随地看视频
