花了两天时间把HTML二刷了一遍，温故而知新，第一遍学习是两个月前，好多忘了，也有很多点是之前没有学到的，所以在这里做一次总结加深记忆的同时也方便日后查阅。目录如下：
1.网页
2.浏览器及内核
3.Web标准
4.html标签
5.路径
6.列表
7.表格
8.表单
9.HTML5新增属性
1.网页
网页：网页是由文字、图片、超链接、音频、视频、flash等元素组成。
客户眼中的美丽=前端心中的心酸。网页由前端人员编写的代码通过浏览器的渲染呈
现出来的。
2.浏览器及内核
浏览器是网页运行的平台，常见浏览器有以下六种，其中IE和Edge浏览器（Windows10）合并都是微软出的。
https://tongji.baidu.com/data/browser
市场浏览器所占份额：
浏览器内核分为两部分：渲染引擎和JS引擎（后来JS用得比较多就单独拿出去了）。
现在主要是渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式、然后输出至显示器或打印机。
JS引擎主要是解析JavaScript语言，执行JavaScript语言来实现网页的动态显示效果。
（1） Trident(IE内核)
国内很多的双核浏览器其中一核就是Trident，美其名曰“兼容模式”。
代表有：IE、遨游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。
WINDOW10发布后，IE将其内置浏览器命名为Edge，Edge最显著的特点就是新内核EdgeHTML。
（2） Gecko(firefox)
Gecko(Firefox内核)：Mozilla Firefox(火狐浏览器)采用该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。可惜这几年没落了，比如打开速度慢、猪一样的队友flash、生一样的对手chrome。
（3） Webkit（safari）
Safari是苹果公司开发的浏览器，所用浏览器内核名是大名鼎鼎的Webkit。
现在很多人错误的把Webkit叫做chrome内核（即使现在chrome内核现在已经是Blink了），苹果感觉像被别人抢了媳妇，都哭晕在厕所里了。
代表浏览器：遨游浏览器、Apple Safari、Symbian手机浏览器、Android默认浏览器。
（4） Chromium/Blink(Chrome)
2013年4月3日，谷歌正式与Webkit宣布分手。
在Chrominum项目中研发了Blink渲染引擎，内置于Chrome浏览器中。Blink其实是Webkit的分支。现在大部分的国产浏览器用的是Blink内核。
（5） Presto(Opera)
Presto是挪威产浏览器opera的“前任”内核，因为最新的Opera浏览器早已将之抛弃投入到谷歌的怀抱了。
3.Web标准
Web标准的好处
① 让WEB的发展前景更广阔
② 内容能被更广泛的设备访问
③ 更容易被搜索引擎搜索
④ 降低网站流量的费用
⑤ 是网站更易于维护
⑥ 提高网页浏览速度
Web标准的构成
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合，主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
结构标准：结构用于对网页元素进行整理和分类，主要包括XML和HTML两个部分；
样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的CSS；
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两 个部分。
4.html标签
1、标题标签“<hn></hn>”
h1一般给logo使用的
2、段落标签<p></p>段落与段落之间会有空行
3、水平线标签<hr />
4、换行标签<br />
5、div span标签
6、文本标签
7、图片标签
Src:图片路径
Alt:图片不能正常显示时文本替换
Title：鼠标悬停时显示
Width：图片宽度
Height：图片高度
一般情况下，只需要更改宽度或者高度，其他会等比例缩放
Border：边框
8、链接标签
必须有href属性
外部链接：必须以http://开头
内部链接：只需要写上页面名称和后缀名即可。
9、锚点定位
适用于页面很长时，我们可以点击某个关键词迅速到达页面中想去的位置
<a href=”#idname”> 关键词</a>
<h4 id=”idname”>关键词</h4>
10、base标签:可以设置整体链接的打开状态
生成新页面时，避免重复给每个a标签写target=”_blank”
<base target=”_blank” />写在<head>与</head>之间
如果只想在自己窗口打开，不需要新窗口，则添加target=”_self“
11、特殊字符标签（每个特殊字符后别忘记加分号）
空格： (一般多个空格只能识别成一个)
小于：<
大于：>
12、注释标签
多使用注释标签是非常好的代码习惯能让没写过的程序员也能看懂你写的东西
注释标签里面的内容是给程序员看的，浏览器不会解析
html注释快捷键：ctrl+/
5.路径
1、相对路径
同一级路径：比如HTML文档和图片在同一个文件夹下，直接src=”img.jpg”
上一级路径：…/，上两级：…/…/
下一级路径：用“/“隔开，比如src=”img01/images/img.jpg”
2、绝对路径
6.列表
1、无序列表
<ul>
里面只能放li标签，不能放其他的标签
<li>可以放其他标签</li>
<li></li>
<li></li>
<li></li>
</ul>
2、有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
3、自定义列表
<dl>
<dt>定义标题</dt>
<dd>定义描述和解释</dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
7.表格
1、表格不是用来布局的，是用来做大批量数据处理的
<table>
不能放其他标签
\
不能放其他标签
<td>可以放其他标签
<td></td>
</tr>
</table>
2、表格属性
3、表头标签（加粗居中垂直显示）
表头一般是第一行或者第一列
把<td></td>换成<th></th>
4、表格结构
<table border=”1” cellspacing=”0” cellpadding=”2” width=”200” height=”500” align=”center”>
<thead>
<tr>
<td></td>
<td></td>
\
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
</tr>
</tbody>
</table>
5、表格标题标签
<caption>放在table里面</caption>
6、合并单元格
跨行合并：rowspan
跨列合并：colspan
从上往下从左往右保留第一个删掉后面的
8.表单
表单的目的是收集用户信息，一个完整的表单由三部分组成：表单域、提示文本、表单控件。
【表单控件】
1、 input(单标签)
input是个变色龙，通过type属性来变换形状
单选框如果是一组，通过相同的name值来实现单选功能。（再次点击时不能取消）；
复选框再次点击时可以取消选择。
2、 label标签
直接用<label></label>包裹起来
如果label里面有多个标签，可用for id来解决。
<label for=”you”><input type=”text” id=”you”></label>
3、 textarea控件（文本域）
双标签，可多行，一般用于留言、评论等。
4、 下拉菜单
后面学js就可以做联动了。如果在option里面定义selected=”selected”则为默认选中。
5、 表单域
文本域： textarea 留言的；
文件域： input type=“file” 上传文件的；
表单域： form 收集表单控件信息并提交的。
<form>
里面是提示文本和表单控件
</form>
9.HTML5新增属性
1、
官网手册：http://w3school.com.cn
2、datalist标签
配合input（list=”star”）使用
<input type=”text” list=”star”>
<datalist id=”star”>
<option>刘德华</option>
<option>刘若英</option>
<option>刘亦菲</option>
<option>郭富城</option>
</datalist>
3、fieldset和legend搭配使用
<fieldset>
<legend>用户登录</legend>
用户名：<input type=“text” value=“请输入用户名”><br />
密 码：<input type=“password” name=“password”>
</fieldset>
4、新增input type属性
5、新增属性
6、 embed标签
引入网上视频：视频上传服务器，引入网址
小技巧：可将视频上传到优酷，然后在优酷中的分享里面复制embed代码即可使用
7、 audio浏览器兼容问题
根据下表浏览器的兼容情况，一般写ogg\mp3两种兼容格式就行。
8、 vedio视频兼容
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
