粉阿吉整理(5)之------H5 新增标签

-1. 结构

1. 写法上更加的简单化(DOCTYPE/charset)
2. 相关面试题(DOCTYPE)
   1). DOCTYPE声明必须是HTML文档的第一行，位于标签之前
   2). DOCTYPE声明不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令
   3). DOCTYPE 3种类型：HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset
   4). 如果html中没有加上DOCTYPE**可能在不同浏览器出现bug**，所以html加上DOCTYPE是至关重要

-2. 新增标签

1.头部信息   header: 
2.页脚   footer:
3.导航链接的部分  nav:
4.主体  main: 元素中的内容对于文档来说应当是唯一的
注意:
	在一个文档中，不能出现一个以上的 <main> 元素
	<main> 元素不能是以下元素的后代: <article>、<aside>、<footer>、<header> 或 <nav>
5.独立的内容区块 section: 类似div
6.侧边栏导航  aside:
7.文章标签  article:
8.标签 hgroup: 用于对网页或区段（section）的标题进行组合 主副标题
9.标记  mark: 内容显示背景颜色，可以修改 
10.地址标签  address: 写在侧边栏多一点
11.表示日期或时间 time: 也可以同时表示两者，相当于span
12.上图下字的dl可以用这个 figure + figcaption:  figure里只能有一个figcaption
13.对话框(会话框) dialog:类似微信  open代表这个对话框是能互动的，没设置open，对话框不应该显示给用户。
14.canvas:可被用来通过脚本（通常是JavaScript）绘制图形
15.音频播放 audio:  自动播放 autoplay;  控件 controls;  循环 loop; 地址 src url;
16.视频播放 video:  自动播放 autoplay ; 静音播放 muted ; 控件 controls ; 宽高 ;循环 loop ; 地址 src url ;
17.加载等待画面poster imgurl; 缓冲条 autobuffer。
18.HTML5支持的视频格式：
	Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件   支持的浏览器:F、C、O 
	MPEG4=带有H.264视频编码+AAC音频编码的MPEG4文件   支持的浏览器: S、C 
	WebM=带有VP8视频编码+Vorbis音频编码的WebM格式    支持的浏览器: I、F、C、O

19.标记定义媒体资源source:
<video controls width="250">     
<source src="/media/examples/flower.webm"  type="video/webm">      
<source src="/media/examples/flower.mp4"   type="video/mp4">      
	Sorry, your browser doesn't support embedded videos. 
</video>

20.改良的ol
	1)可以自定义编号 start   
	2)可以按编号反向排序(reversed) 
	3)Type

21.废除的元素
	1).可以用css替代的元素     big    center    font   等    
	2).不再使用frame框架，由于框架对网页可用性存在负面影响。所以废除。

	e.g. <big>big</big>
		 <center>center</center>
		 <font>font</font>
		 <iframe src="http://www.baidu.com" width="800" height="500"></iframe>

22.嵌套公共部分可以用iframe:嵌套的时候默认带有标签
<iframe src="../index.html" width="100%" height="103" scrolling="no" frameborder="0"></iframe>
//scrolling 取消滚动条 frameborder 取消边框

-3. 新增表单

我们要写表单控件的时候，是一定要写form表单域的，写控件可以用fieldset表示，legend元素为控件fieldset元素定义标题

<input type="search"/>
<input type="tel"/> 
<input type="url"/>
<input type="email"/> 
<input type="number" max="最大值" min="最小值" step="数字间隔"/> 
<input type="range" max="最大值" min="最小值" step="数字间隔"/> 
<input type="color"/>
<input type="date"  value="2018-07-22"  min="2018-01-01"  max="2018-12-31" />
<input type="month"/> 
<input type="week" /> 
<input type="time" /> 
<input type="datetime-local" /> 

选项列表 Datalist   list属性:结合datalist元素使用 
input中输入list属性，属性值为该标签的id值，标签中子标签使用option，设置value和label
<input type="text" list="id名" />
<datalist id="id名">             
	<option label="提示信息"     value="值" >             
	<option label="提示信息"   value="值" > 
 </datalist>        
 提示：option 元素永远都要设置 value 属性。

<form >
<fieldset style="border:none">
    <legend style="display:none" >登录表单</legend>
    <p><label for="name">账号: </label><input type="text" id="name" /></p>
    <p><label for="pw">密码: </label><input type="password"  id="pw"/></p>
    <input type="submit" value="登录" class="subBtn" />
</fieldset>
</form>

-4. 新增表单属性

1.必填项 required:  如果表单未填写，会弹出相应的提示信息
2.占位符 placeholder: 当获取焦点或者输入框中的值输入为空时显示
3.获取焦点 autofocus：原则上只允许设置一个，如果设置多个，则只有第一个有效果 
4.输入的时候自动补全 autocomplete：默认值为on，另一个值为off, 给form加上,如果想补全,再加上name 
5.上传文件 file   上传多个文件 再加上 multiple:
6.支持用户输入多个此类行的文本，以逗号隔开，每个文本均会进行验证,适用于类型type为email属性值和file属性值 
7.正则表达式 pattern：一般和title属性配合说明该项填写的内容 大写A到小写z要有三个 
国家代码：
<input type="text" name="country_code" pattern="[A-z]{3}" title="三个字母的代码" />
8.最小值 min: 适用于属性type为number和range 
9.最大值 max: 适用于属性type为number和range 
  间隔  step:    
10.取消验证：对form表单添加novalidate，即使form表单中的input添加了required，也将不进行验证。
11.同类型的输出 output: 比如脚本的输出  
注：必须从属于某个表单。必须将它书写在表单内部，或对它添加form属性 
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)" > 
	<input type="range" id="a" value="50" min="0" max="100"/> + <input type="number" id="b" value="50"/>= <output name="x" for="a b"></output> 
</form>

-5. 新增标签的兼容 ie低版本显示不出来时，加上这行代码

在head标签中加入 lt 是 小于的意思

<!--[if lt IE 9]>  
 	<script src="地址要换/html5shiv.js"></script> 
<![endif]-->