pre标签：会按照在代码中编写的格式显示内容（预格式文本）
<pre>
nfks dsfdsf
nfe
</pre>
显示为：nfks dsfdsf
nfe
ins：下划线标签 del:删除字标签
abbr:定义缩写
<abbr title="哈哈哈哈 我很棒">
我很棒//当鼠标放在“我很棒”上面时，会提示性的显示“ 哈哈哈哈 我很棒”
</abbr>
bdo标签：定义文字方向，属性dir="" (ltr:从左到右显示；rtl:从右到左显示）
table标签里面有一个caption标签（定义table标题）合并行：rowspan=“行数”，合并列：colspan=”列数“
ul标签（无序列表）可以通过type属性设置前面的圆点样式（值：disc–黑圆点；square–黑方点；circle–空心圆）
ol标签（有序列表）–star属性规定从那一个开始，star=“20”
–type属性规定开始的类型，type=“I” (罗马数字)
dl标签（问答标签）dt–问 dd–答
(点击label标签，input单选按钮就会被选中)
(提交图片)
（选取文件）
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
普通按钮
提交按钮
重置按钮
<iframe src="" frameborder="0" scrolling="no" width="100px" height="100px" name="frameAA" >
</iframe>
<p><a href="http://www.baidu.com" target="frameAA">点击我</a></p>
HTML5新增标签
音频视频标签
audio:（video同理）
controls:属性规定浏览器应该为视频提供播放控件
autoplay :自动播放 loop：循环播放
eg:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
如果浏览器播放不出来第一个音频，则会选择第二个播放（type规定媒体资源的 MIME 类型）.
</audio>
布局标签
header:头部标签
nav:导航标签
article:中间内容（包含section标签–分章节）
aside:中间右侧栏
footer:底部标签
注意：以上标签用法和div一样，只是语义化更强。可以相互嵌套
input框新的输入类型
color:选取颜色
data：日期
datatime:日期和时间
datatime-local:允许你选择一个日期和时间
email:允许你应该包含一个e-mail地址的输入域
month:允许你选择一个月份
number:包函数值的输入域
range:滑动条
search:搜索域
tel:电话号码
time:允许你选择一个时间
url:URL地址的输入域。在提交表单时，会自动验证url域的值
week:允许你选择周和年
注：有些输入框外观虽然看起来一样，但是对于浏览器来说不一样，增强了识别性（语义化）
datalist标签，预定义input输入框的值（可以直接选择，也可以直接输入，会自动筛选对应项）
<input list="dtlist">
<datalist id="dtlist">
<option value="InterEx"></option>
<option value="opera"></option>
<option value="chrome"></option>
<option value="firefox"></option>
</datalist>
keygen加密标签(在新的web浏览器中已被废弃)
<form>
<input type="password" name="txtpwd">
<keygen name="security">
<input type="submit">
</form>
用户的验证的可靠方法
公钥：发送到服务端
私钥：存放在客户端
output标签
0 100+ = 将计算结果显示在 元素中 注：oninput 监听当前指定元素内容的改变；只要内容改变（添加元素，删除元素），就会触发这个事件。svg
用xml定义的可缩放矢量图标
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="10" y1="10" x2="100" y2="100" style="stroke:red;stroke-width:2"></line>
</svg>
注：line线 定义了起点和终点坐标、颜色和宽度。（也可以写在外部.svg文件中）
html中有许多用于嵌入各种类型内容的标签，包括：embed，audio，canvas，iframe，img，math，object，svg和video
embed标签 (跟a标签区别不大)
优点：所有的主流浏览器都支持，并允许使用脚本
缺点：不推荐在html4和 XHTML中使用(html5支持)
object标签
优点：所有的主流浏览器都支持，html、 XHTML、
html5都支持
缺点：不允许使用脚本
iframe标签
优点：所有的主流浏览器都支持，并允许使用脚本 缺点：不推荐在html4和 XHTML中使用(html5支持)svg绘制图形
圆形：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="40" stroke="red" stroke-width="2" fill="red"></circle>
</svg>
注：（cx,cy）–圆心坐标 fill–填充色
三角形：
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" version="1.1">
<polygon points="220,100 300,210 170,250" style="fill:#ccc; stroke:#000 stroke-width:1"></polygon >
</svg>
注：points为三角形三个点的坐标（多边形就多个点。fill-rule:nonezero —显示连接线）
曲线：
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:#ccc;stroke:#000; stroke-width=1"></polyline >
</svg>
path路径：
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" style="fill:orange;stroke:blue ;stroke-width=1"/>
</svg>
注：d属性值区分大小写M、L、Z等，大写代表绝对定位，小写代表相对定位。
M = moveto
L = lineto
Z = closepath
svg文本
定义文本：
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" version="1.1">
<text x="0" y="15" fill="red">this is svg</text>
</svg>
文字旋转：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red" transform="rotate(30,20,40)">this is svg</text>
</svg>
路径的方式显示文字：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0"></path>
</defs>
<text x="10" y="100" fill="red">
<textPath xlink:href="#path1">
this is svg this is svg
</textPath >
</text>
</svg>
注：会按照def里面path定义的形状显示文字。
tspan(定义显示行)：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="20" fill="red">
this is svg
<tspan x="10" y="45">this is svg</tspan>
<tspan x="100" y="53">this is svg</tspan>
</text>
</svg>
a链接（xlink属性）：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<a xlink:href="http://www.ruanmou.net" target="_blank“>
<text x="0" y="15" fill="red">this is a</text>
</a>
</svg>
注：xmlns:xlink=“http://www.w3.org/1999/xlink"为a标签的link规范。target=”_blank“–新打开一个窗口
stroke-linecap设置外观样式：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 1215 0"/>
<path stroke-linecap="round" d="M5 40 1215 0"/>
<path stroke-linecap="square" d="M5 60 1215 0"/>
</g>
</svg>
注：butt–缩进 round–圆 square：方。
g标签里面定义的样式是公共样式
stroke-dasharray 虚线：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-dasharray="5,5" d="M5 20 1215 0"/>
<path stroke-dasharray="10,10" d="M5 40 1215 0"/>
<path stroke-dasharray="20,10,5,5,10" d="M5 60 1215 0"/>
</g>
</svg>
svg模糊阴影
模糊：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="d1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15">
</feGaussianBlur >
</filter>
</defs>
<rect width="900" height="90" stroke="green" fill="red" stroke-width="2" filter="url(#d1)">
</svg>
注：filter --过滤的名称" id"与rect中的"filter"属性对应。
feGaussianBlur --定义的一个模糊。
SourceGraphic–针对的整体图像创建这个阴影效果
stdDeviation–定义的模糊度
阴影：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="d2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"/>
<feBlend in="SourceGraphic" in2="offOut" model="normal"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" fill="red" stroke-width="2" filter="url(#d2)"/>
</svg>
偏移图像模糊：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="d3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"/>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
<feBlend in="SourceGraphic" in2="blurOut" model="normal"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" fill="red" stroke-width="2" filter="url(#d3)"/>
</svg>
阴影为黑色：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="d4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20"/>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
<feBlend in="SourceGraphic" in2="blurOut" model="normal"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" fill="red" stroke-width="2" filter="url(#d4)"/>
</svg>
注：唯一不同是改变了feOffset 里面的in属性值“SourceAlpha”–透明
阴影上涂上一层颜色：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="d5" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"/>
<feColorMatrix result="matrixout" in="offout" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
<feBlend in="SourceGraphic" in2="blurOut" model="normal"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" fill="red" stroke-width="2" filter="url(#d5)"/>
</svg>
svg颜色渐变
椭圆颜色线性水平渐变：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(225,225,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(225,0,0);stop-opacity:1"/>
</linearGradient >
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#lg1)"/>
</svg>
椭圆颜色线性垂直渐变：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="lg2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(225,225,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(225,0,0);stop-opacity:1"/>
</linearGradient >
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#lg2)"/>
</svg>
注：水平和垂直渐变的区别是改变了linearGradient里的x、y坐标属性值。
渐变存放文本：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="lg3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(225,225,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(225,0,0);stop-opacity:1"/>
</linearGradient >
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#lg3)"/>
<text fill="#fff" font-size="45" font-family="Verdana" x="150" y="85">SVG</text>
</svg>
放射性渐变
椭圆放射性渐变：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="rg1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(225,225,225);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,225);stop-opacity:1"/>
</radialGradient >
</defs>
<ellipse cx="200" cy="70" rx="85" ry="65" fill="url(#rg1)"/>
</svg>
矩形淡出实例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="20" y="20" width="100" height="100" style="fill:blue">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefined"/>
</rect>
</svg>
webStorage(web本地储存)
sessionStorage和localStorage的区别：
sessionStorage仅仅针对当前的一次会话，关闭浏览器或重新打开浏览器都不会保存上一次的数据。
localStorage当前的信息可以永久的储存到电脑上，关闭浏览器或重新打开浏览器都不会受影响
清除数据：
localStorage.removeItem(“key1”);//清除当前指定的数据
localStorage.clear();//清除所有数据
（sessionStorage同理）
什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
参考：https://www.w3school.com.cn/html5/html_5_webworkers.asp
拖放（Drag 和 drop）–HTML5 标准的组成部分
参考：https://www.w3school.com.cn/html5/html_5_draganddrop.asp
HTML5 应用程序缓存
参考：https://www.runoob.com/html/html5-app-cache.html
6449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
