一、语法元素标签
1.<!DOCTYPE html> //表示该文档为html5类型文档
<html lang="zh-CN">//声明语言为中文
<meta charset="utf-8">//字符
<input type="checkbox" checked />//boolean值 属性值单引号 属性值省略引号
标签省略闭合、标签不区分大小写
2.新增标签
结构标签：
section 内容区块，如章节、页眉、页脚或页面其他部分
article 页面中与上下文不相关的独立内容，如一篇文章
aside 表示article文章之外的与article标签内容相关的辅助信息
header 页面中一个内容区块或整个页面的标题
hgroup 对整个页面或页面中一个内容区块的标题进行组合
footer 整个页面或页面中一个区块的脚注，一般包含作者姓名、创作日期以及作者联系信息
nav 页面中导航链接的部分
figure 一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption标签为figure标签组添加标题
媒体标签：
<video src="video.ogg" controls="controls"> video标签</video>
<audio src="audio.mav">audio标签</audio>
<embed src="flash.swf" />嵌入各种媒体内容Midi Wav FIFF AU MP3 flash等
表单控件标签：
url
number
range
Date Pickers
有多个可供选取日期和时间的新输入类型:
date 选年月日
month 选取年月
week 选取年周
time选取时间 小时和分钟
datetime选取时间 日月年(UTC时间)
datetime-local 选取时间 日月年(本地时间)
search 用于搜索、域显示为常规文本域
color
3.新增其他标签
<mark></mark>用于视觉上突出显示或高亮显示文字，典型应用：搜索结果中高亮显示关键字
<progress>表示运行进程，可用于progress标签显示js中耗时时间函数的进程，如加载，下载进度等
<time datatime="2018-1-1T23:56Z" pubdate>23:56<time> //pubdate表示datetime值是该文章的发布时间
<ruby> <rt></rt> <rp>(</rp> <rp>)</rp></ruby>//ruby对某个字注释,rt注释内容，rp浏览器不支持显示的内容
<wbr></wbr>当页面宽度不够执行软换行<p>你的快递<wbr></wbr>到了</p>
<canvas name="myCvs"></canval>画布标签
<script>
var cvs = document.getElementsByName("myCvs");
var ctx = cvs.getContext("2d");
ctx.fillStyle="#b4b4b4";
ctx.fillRect(0,0,100,80);//从(0,0)点开始画长(x轴方向)100，宽(y轴方向)80的矩形
</script>
<command οnclick="alert('Hi 2018')" label="click"></command>//命令菜单
<details>//展开详细信息
<summary>概要信息</summary>
<ol start="10" reversed>//从10开始，倒叙显示：10.a 9.b 8.c
<li>a</li> <li>b</li><li>c</li></ol>
</details>
<datalist></datalist> //为input框添加选项
<input list="myList" />
<datalist id="myList">
<option val="a"></option>
<option val="b"></option>
<option val="c"></option>
</datalist>
<keygen>标签规定用于表单的密钥对生成器字段，当提交表单时，私钥存储在本地，密钥发送到服务器
<output></output>结果计算输出值
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50" />
<input type="number" id="b" value="50"/>
<output name="x" for="a b"></output>
</form>
<menu>//菜单
<ul>
<li><input type="checkbox" />Apple</li>
<li><input type="checkbox" />Banana</li>
<ul>
</menu>
3.被删除的标签
big center font s strike tt u
frameset framen frames 不支持frame框架
4.新增属性
input type=text、select、textarea、button新增autofocus属性
input type=text、textarea 增加placeholder属性
input output select textarea button fididset指定form属性，表明属于哪个表单，该元素可放在页面的任何位置
input type=text、textarea指定require属性，用户提交时检查该元素内必填内容
input 添加autocomplete\min\max\multiple\pattern\step\list(与datalist标签配合使用)。datalist与autocomplete属性配合使用，multiple属性允许上传时一次上传多个文件，pattern属性用于验证输入字段的模式，step属性规定输入字段的合法数字间隔可与max min配合使用
input button标签添加formaction formenctype formmethod formnovalidate formtarget属性，用户重置form标签的action enctype method novalidate target属性，fieldset标签添加disabled属性，可以把他的子标签设为disabled状态
input button form 增加novalidate属性，取消提交时有关验证
链接相关属性：
a area 增加media(media=handhelp/tv/iPhone)0 列出媒介、设备
area 增加hreflang规定在被连接文档中的文本语言，只有设置了href属性才能使用该属性，rel属性规定当前文档与被链接文档、资源之间的关系，只有当使用href属性才能会用rel属性
link 增加size属性，规定被链接资源尺寸，只有被链接资源是图标时（rel=icon），才能使用该属性
base 增加target属性，保持与a标签一致性
其他属性：
ol reversed，列表倒叙显示
meta 增加charset属性
menu 增加type label属性，label定义一个标注，type定义可以menu以上下菜单、工具条、与列表三种形式出现
style增加scoped属性，允许为文档定义部分样式，只应用到style标签的父标签及其字标签
script增加async是否异步，脚本相当于页面其他部分异步执行 defer脚本在页面完成解析时执行
html 增加manifest，开发离线缓存web应用程序时与API结合使用，定义一个URL,在这个URL上描述文档的缓存信息
iframe 增加sandbox seamiess srcdoc提高页面安全性，防止不信任的web页面执行某些操作
seamless 框架没有边框 没有边距；
srcdoc>src srcdoc标签出现，显示srcdoc标签内容忽略src里面的内容。
- <iframe srcdoc="<h1>hi</h1>" doc="http://www.baidu.com"></ifame> 内容显示< h1>hi</h1> 而不是百度首页
sandbox 内嵌框架安全级别，表示受到严格安全限制。禁止提交表单、运行javascript、表示该文件与所在页面不同源
- <iframe sandbox src="http://www.baidu.com"></iframe> 不能够提交内容正常搜索
-sandbox=allow-forms允许提交表单allow-same-origin允许相同的源 allow-script允许执行脚本 allos-top-navigation允许跳转
4.全局属性
添加自己的属性<input data-aaa="bbb"/> aaa为你自定义的全局属性
隐藏 hidden
语法纠错 spellcheck="true”
tab键切换顺序 tabindex=“”3“”
内容可编辑 contenteditable="true"
页面所有元素可编辑window.document.designnode="on/off"
二、H5唤起APP
1.<a href="weixin://"> //打开微信
QQ： mqq://
腾讯微博： TencentWeibo://
淘宝： taobao://
支付宝： alipay://
微博： sinaweibo://
2.navigator.userAgent判断安卓/iOS/微信内置浏览器
var u= navigator.userAgent；
app = navigator.appVersion;
var isInWeChat = /(micromessenger|webbrowser)/.test(u.toLocaleLowerCase());
trident: u.indexOf('Trident') > -1, //IE
presto: u.indexOf('Presto') > -1, //opera
webKit: u.indexOf('AppleWebKit') > -1, //webkit
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //firefox
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //mobile
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android or uc
iPhone: u.indexOf('iPhone') > -1 , //iPhone QQHD
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') == -1
4129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
