HTML5知识整理
https://juejin.cn/post/6844903520953450509
1、新增的全局属性：contentEditable、designMode（on/off：页面可编辑/不可编辑）、hidden、spellcheck、tabindex（tabindex="-1"不能调到）
2、改良的input元素type属性：url、email、time、datetime、datetime-local、month、week、number、range、tel、color
3、改良的ol列表：新增加了start与reversed属性
4、新增元素（常用）：
<figure>与<figcaption>：figure元素是网页上一块独立的内容，figcaption从属于figure元素，figure元素的标题，必须书写在figure的内部以及其他元素的前面或后面
<detail>与<summary>：
detail元素用于标识该元素的内部的子元素可以被收缩显示的元素，默认为false收缩
summary从属于detail元素，单击summary元素中的内容时，detail中所有元素会展开或收缩。如果detail元素内没有summary元素，浏览器会提供默认文字以供单击
<details>：描述文档或文档某个部分的细节
<ruby>：定义注释（中文或拼音字符）
<bdi>：设置一段文本，使其脱离其父元素的文本方向设置
<time>：日期或时间
<small>：现用于版权等的声明（只允许当做额外的信息以inline方式内嵌在页面）
<mark>：需要高亮或突出显示
<dialog>：定义对话框、提示框
<command>：定义命令按钮，单选、复选按钮
<progress>：进度
<meter>：其中optimum属性表示最佳值
<meter value="20" min="0" max="100" low="10" high="90" optimum="80"></meter>
<article>：代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容，可嵌套使用，可用来表示插件
<hgroup>：将一个内容区域块的标题及其子标题分组
<header>：文档头部，可出现多次
<aside>：当前页面或文章的附属信息部分，侧边栏导航、广告、导航等
<nav>：传统导航条、侧边栏导航、页内导航、翻页操作
<label>：为所有可使用标签的表单元素如button、select等，定义一个labels属性，属性值为一个nodelist对象，代表该元素所绑定的标签元素所构成的集合
<body> <script> function Validate(){ var txtName = document.getElementById("txt_name"); var button = document.getElementById("btnValidate"); var form = document.getElementById("testform"); if(txtName.value.trim() == ""){ var label = document.createElement("label"); label.setAttribute("for", "txt_name"); form.insertBefore(label, button); txtName.labels[1].innerHTML = "input name"; } } </script> <form id="testform"> <label type="label" for="txt_name">name:</label> <input id="txt_name"> <input type="button" id="btnValidate" value="check" onclick="Validate()"> </form> </body>
<section>：用于对网站或应用程序中页面上的内容进行分块（通常由内容及其标题组成），如果article、aside、nav元素更符合使用条件，那不要使用section
<pubdate>：指明具体时间， <time datetime="2018-10-10">2018-10-10</time >
5、新多媒体元素
<audio>音频，<vedio>视频，<embed>插件，<source>多媒体资源，<track>外部文本轨道
6、表单新增元素与属性（与HTML4区别）：
1）在HTML4中——表单内的从属元素必须书写在表单内部；
在HTML5中——表单内的从属元素可以书写在页面上任何地方，然后为该元素指定一个id，这样就可以声明该元素从属于指定元素了
<form method="get" id="test"> <input type="text" name="name"/> <input type="password" name="password"/> <input type="submit" value="提交"> </form> <input type="text" name="confirm" form="test">
2）在HTML4中——一个表单内的所有元素只能通过表单的action被统一提交至另一页面；
在HTML5中——可以为所有提交按钮增加不同的formaction属性，使单击提交至不同的页面
3）在HTML4中——一个method属性统一提交方式；
在HTML5中——使用formmethod对每一个表单元素分别指定不同提交方法
4）在HTML4中——enctype属性指定在表单发送到服务器之前如何对表单内数据进行编码；
在HTML5中——使用formenctype分别指定不同的编码方式
5）在HTML4中——target；在HTML5中——formtarget
6）autofocus：自动获得光标焦点
7）autoComplete：其含义代表是否让浏览器自动记录之前来输入的值，很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获自取到，可以在input中加入autocomplete="off"来关闭记录（默认是on）,系统需要保密的情况下可以使用此参数
8）required属性：必填字段
9）indeterminate属性：不确定是否选取
10）pattern属性：设置某格式正则表达式，符合才能提交
11）文本框的selectionDirection属性：读取内容方向，正向forward、反向backward
12）label的control属性：可在标签内放置一个表单元素，通过control访问该元素
<body> <form action="" method="post"> <label id="label"> 邮编: <input type="text" name="text"value="" maxlength="6"> <small>请输入六位数字</small> </label> <input type="button" value="设置默认值" onclick="setValue()"> </form> <script type="text/javascript"> function setValue(){ var label = document.getElementById('label'); var textbox = label.control; textbox.value='341000'; } </script> </body>
9）list属性：属性值为某个datalist的id，datalist访问该表单元素
<input list="browsers" name="browser"> //表单的list属性指定对应datalist <datalist id="browsers"> //同时datalist id必须和表单的list属性一样 <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
7、页面其他设置——meta元素
1）为搜索引擎定义关键字
<meta name="keywords" content="HTML,ASP,PHP,SQL" />
2）为网页定义描述内容
<meta name="description" content="这里是自定义描述内容" />
3）每30s刷新当前页面
<meta http-equiv="refresh" content="#1010100" />
4）通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5）通过meta设置网页自适应
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。 width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。
如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度。 initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。
设为1.0则显示未经缩放的Web页面。 maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间 user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。 -->
HTML5语法的改变：
1、DOCTYPE声明（简洁）
2、指定字符编码集
3、可以省略标记的元素
4、具有boolean值的属性（disabled、hidden=""、...）
5、省略引号
HTML5结构编排规则：
1、显式编排内容区域块（使用section区分区域块，它们有标题）
2、隐式编排内容区域块（根据网页需求写h1-h6、hgroup等元素）
3、标题分级
4、不同区域使用相同标题
