一、发展历程
1、1993-2000：HTML
2、2000-2008：XHTML
3、2008-今：HTML5
二、HTML5的历史
1、2004年被提出，
2、2007年被W3C接纳，并成立了新的 HTML 工作团队。
3、2008年1月22日公布第一份正式草案。
4、2012年12月17日，HTML5规范定稿。
5、2013年5月6日， HTML 5.1正式草案公布。
6、2014年10月29日，HTML5标准规范终于最终制定完成了。
7、HTML5的设计目的：为了在移动设备上支持多媒体。
8、支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；
二、XHTML 与 HTML 之间的差异
1、XHTML 元素必须被正确地嵌套。
2、XHTML 元素必须被关闭。
3、标签名必须用小写字母。
4、XHTML 文档必须拥有根元素。
三、read-only和disabled的区别？
（1）提交表单的时候read-only可以提交，但是disabled不可以
（2）read-only只针对input/textarea这样的文本输入框，对select无效，disabled对所有表单元素有效
四、defer和async的用法：
（1）async：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。
（2）defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
五、CSS中有继承性的属性
（1）字体系列属性：font、font-family、font-weight、font-size、font-style；
（2）文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、color
（3）表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
（4）列表布局属性：list-style-type、list-style-image、list-style-position、list-style
（5）所有元素可以继承的属性：visibility、cursor
六：HTML5新增的元素和废除的元素
（1）新增元素：section、article、aside、header、footer、nav、figure、video、audio、mark、progress、meter、time、canvas、command、details、datalist、output、source、menu、datagrid、embed、hgroup、keygen、ruby、rt、rp、wbr；
（2）废除元素：basefont、big、center、font、s、strike、tt、u、frame、applet、bgsound、blink、marguee；
七、省略号代码
（1）单行省略号：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
（2）多行省略号：overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
八、：CSS中常用的四种链接状态（LV ha）：
（1）a:link {color:#FF0000;} 未被访问的链接
（2）a:visited {color:#00FF00;} 已被访问的链接
（3）a:hover {color:#FF00FF;} 鼠标指针移动到链接上
（4）a:active {color:#0000FF;} 正在被点击的链接
九、选择器
1、基本选择器语法
（1）* ：通配选择器
（2）E：元素选择器 选择指定类型的HTML元素
（3）#id：ID选择器 选择指定ID属性值为“id”的任意类型元素
（4）.class：类选择器
（5）selector1,selectorN：群组选择器
2、层次选择器语法
（1）E F：后代选择器
（2）E>F：子选择器
（3）E+F：相邻兄弟选择器
（4）E~F：通用选择器，选择E元素后的所有匹配的F元素
3、动态伪类选择器语法
（1）E:link 链接伪类选择器
（2）E:visited 链接伪类选择器
（3）E:active 用户行为选择器
（4）E:hover 用户行为选择器
（5）E:focus 用户行为选择器
十、HTML5新的API
（1）拖放
A、Drag
B、Drop
（2）History API（历史记录）
A、pushState
B、replaceState
（3）Storage API
A、localStorage
B、sessionStorage
（4）Communication API （跨域通信）
postMessage
（5）WebSocket API：双工通信
（6）Geolocation API（地理位置API）
（7）Web Worker：通过JavaScript创建一个后台进程，执行耗时比较长的数据处理
（8）File API：来帮助我们在Web页面中访问本地文件，它可以在Web应用中展现十一、表单验证
1、form标签里绑定onsubmit事件
2、type='submit'标签里绑定onsubmit事件
3、type='submit'标签里绑定onclick事件
4、type='button'标签里绑定onclick事件
5、不需要绑定任何时间，直接点击type='submit'标签，数据格式为name=value&name=value
6、借用jQuery
十二、清除浮动的8种方法
1、子级结尾处加空div标签 clear:both
2、父级div定义 width
3、父级div定义 伪类:after
4、父级div定义 overflow:hidden
5、父级div定义 overflow:auto
6、父级div 也一起浮动
7、父级div定义 display:table
8、子级结尾处加 br标签 clear:both
来源，https://www.qdfuns.com/article/27495/5c4b42c07070e566383c631ee275fb2b.html
十三、table相关
1、border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 table样式属性
2、border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 table样式属性
3、cellspacing 属性规定单元格之间的空间。table标签属性
4、cellpadding 属性规定单元边沿与其内容之间的空白。table标签属性
十四、清除浮动
1、.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
十五、文件提交
```html
<li class="item">软件版本：<span id="softwareVersion">V2.0</span>
<form method="POST" enctype="multipart/form-data" action="" >
<input type="submit" value="升级">
<input type="file" name="file">
</form>
</li>
```
enctype取值及含义
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。在使用<包含文件上传控件>的表单时，必须使用该值。
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。
十六、复选框状态(<input type='checkbox'/>)
(1)获取复选框状态：$("#allSelect").prop("checked")；遍历时，这么用item.checked;
(2)改变复选框状态：$("#allSelect").prop("checked",false)；遍历时，这么用item.checked = false;
(3)翻转复选框状态：$("#allSelect").prop("checked",!($("#allSelect").prop("checked")))；遍历时，这么用item.checked = !item.checked;
(4)判断复选框是否被选中：$("#allSelect").is(':checked')；遍历时，这么用item.is(':checked');
(5)获取所有复选框：$("#single input:checkbox")或$("#single input[type=checkbox]");
(6)获取所有被选中的复选框：$("#single input:checkbox:checked")或$("#single input[type=checkbox]:checked")
十七、animation的参数
animation: name(动画名) duration(运行周期) timing-function(运行轨迹) delay(延迟时间) iteration-count(播放次数) direction(是否轮流反向);
animation: circleAnimation 1s linear 0s infinite normal;
```css
@keyframes circleAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
```
十八、position
（1）absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
（2）fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。
（3）relative：相对于自身位置进行定位。
（4）static 默认值。没有定位。
（5）inherit 规定应该从父元素继承 position 属性的值。
十九、HTML标签属性
```json
<!DOCTYPE html>声明文档类型。
<html lang="en">声明本页面的主要语言。
<meta charset="UTF-8">规定 HTML 文档的字符编码。
<!DOCTYPE html>声明本文档的类型。
<html lang="en">声明本文档的主要语言。
<meta charset="UTF-8">声明本文档的字符编码。
```
二十、W3C标准规范：
```css
1、<!DOCTYPE html>声明本文档的类型。<html lang="en">声明本文档的主要语言。
2、<meta charset="UTF-8">声明本文档的字符编码。
3、JavaScript定义。Js必须要用<script language="javascript" type="text/javascript">来开头定义，以保证在不支持js的浏览器上直接显示出来。
4、CSS定义。CSS必须要用<style type=“text/css”>开头来定义，为保证各浏览器的兼容性，在写CSS时请都写上数量单位。
5、使用注释。正确的应用等号或者空格替换内部的虚线。<!--这里是注释-->
6、所有标签的元素和属性名字都必须使用小写
7、所有属性值必须用引号括起来（"" ''）双引号或单引号
7、把所有特殊符号用编码表示：空格为 、小于号（<）<、大于号（>）>、和号（&）&等。
8、所有属性必须有属性值，没有值就是重复本身。
9、所有的标记都必须有相应的结束标记。双标记：<div></div> 单标记：<img />
10、所有的标记都必须合理嵌套。<p><b></p></b>必须修改为：<p><b></b></p>
11、图片添加有意义的alt属性。图片加载失败时可以用alt属性表明图片内容。同理添加文字链接的title属性，帮助显示不完整的内容显示完整。
12、在form表单中增加label，以增加用户友好度
以上是规范标准，结论：
1、标签规范可以提高搜索引擎对页面的抓取效率，对SEO（搜索引擎优化）很有帮助。
2、尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
3、样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
参看：https://blog.csdn.net/Hhy_9288/article/details/78602277
```
二十一、点击事件之显示执行与隐式执行示例：
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{width:100px;height:100px;background: red;}
</style>
</head>
<body>
<div id="myDiv" onclick="myClick(event,'second','third')" ></div>
<!--这是显示执行，有定义，有执行。执行时，除了浏览器向其传参'event'，还可以人为传参'second'、'third'-->
<script>
function myClick(first,second,third){
console.log(first);
console.log(second);
console.log(third);
}
document.getElementById("myDiv").onclick=function (myEvent) {
/*这是隐式执行，有定义，无执行。执行时，除了浏览器向其传参'event'，没办法人为传参'second'、'third'*/
console.log(myEvent);
}
</script>
</body>
</html>
```
二十二、半包围效果：
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<span style="color:red;">被包围者</span>
<span style="color:green;">包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者</span>
</p>
</body>
</html>
```
二十三、一个空标签div，如果它没有任何占空间的样式，比如padding、border等，那么它是不占空间的。