html5
html语法:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="xxx.css">
<link rel="icon" type="image/png" href="xxx.png">
</head>
增加布尔值 hidden disabled readonly ...
单标签不允许写结束符,如:<meta>、<input>、<img>、<br>、<wbr> ...
不建议的习惯:大小写都可以、有无引号都可以(带空格的属性必须要引号)、单双引号都可以、可以省略结束符的标签(p ...)、可以完全省略的标签(html、head、body ...)
新增标签
语义化结构标签(可用作选择器筛选,不用作布局)
section: 区块(强调区块)
article:文章(强调独立)
aside:在article之外但与article相关的辅助信息 || 侧边栏
header:页面或区块的头部
footer:页面或区块的脚注
nav:导航链接
figure:媒体标题&&媒体内容
figcaption:媒体标题
hgroup:标题组 <hgroup><h1>...</h1><h2>...</h2></hgroup>
dialog:一组会话,类似微信会话
address:相关联系信息
媒体标签
video:视频
audio:音频
<source/>:媒体资源
<embed/>:外部内容或插件 flash ...
表单
<keygen/>:表单加密级别选项
datalist(ie10+):智能提示的列表选项 <input list="searchList"/><datalist id="searchList"><option value="1">xxx</option>......</datalist>
output(no-ie):用于输出结果 --- 更语义
其它
mark:标注(黄底黑字)
time:时间 <time datetime="2016-07-06T17:09Z" pubdate>发布</time>
canvas:画布
progress(ie10+):本地化的进度条 <progress max="100" value="85"></progress>
<wbr/>(no-ie):软换行,相当于隐形的空格 XML<wbr>Http<wbr>Request
IE78
<!--[if lt IE9]><script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
删除的标签
可以用css代替的标签:u、s 、font ...
frame
...
新增属性(全局)
data-xxx
hidden布尔值
contenteditable布尔值:可编辑 //document.designMode='on'
tabindex:Tab键索引 //智能判断元素是否可用
新增属性(局部)(no-pc)
html中的manifest:<html lang="zh-cn" manifest="manifest.appcache">
script中的async布尔值:异步下载,下载完成后立即执行
script中的defer布尔值:异步下载,下载完成后,在DOMContentLoaded事件触发前或后执行
ol中的start(pc):起始值
iframe中的sandbox:沙盒模式 sandbox || sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"
可操控父window | 可向父源发请求 || 让target="_blank | _self | _parent | _top"生效 || 可提交表单 || 可执行脚本
同时具有allow-same-origin和allow-scripts值,沙盒模式将无意义
input类型:
<input type="date">:年月日选择器,带验证
<input type="month">:年月选择器,带验证
<input type="time">:时分选择器,带验证
<input type="datetime-local">:年月日时分选择器,带验证
<input type="week">:年周选择器,带验证
<input type="color">:颜色选择器
<input type="email">:email验证
<input type="url">:url验证
<input type="range" min="10" max="100" value="50" step="10">:数字验证(滑块)
<input type="number" min="10" max="10" value="5" step="0.5">:数字验证(手输&&上下调)
<input type="search">:搜索
h4回顾:radio checkbox text hidden file password button|reset|submit
form属性:
novalidate布尔值:不验证表单
autocomplete(pc):表单自动完成,on|off
h4回顾:action="xxx.php" method="get|post" enctype="multipart/form-data" accept-charset="utf-8" target="_blank"
input属性
type="submit"
formnovalidate布尔值: 不验证表单
formaction="xxx.php"
formenctype="multipart/form-data"
formtarget="_blank"
autocomplete(pc):表单自动完成,on|off
form:所属表单,<input form="formID_1 formID_2">
autofocus布尔值:页面加载时自动获焦
list:list="datalist_id"
pattern:正则表达式
placeholder:占位提示
required布尔值:必填
multiple布尔值:允许多个值,一般只针对file的多选
min、max、step
h4回顾:maxlength="400" readonly disabled checked