HTML5增加了主要增加了一些结构标签,媒体标签,表单标签以及一些功能性标签
需要注意兼容性问题,使用时需严格测试,大部分标签只有高版本浏览器支持
email 输入邮箱地址,提交表单时会自动验证是否合法;如<input type=“email”>url 输入yrl地址,提交表单时会自动验证是否合法,如<input type=“url”>number 输入域为数值,如 max:设定最大值 min:设定最小值 pattern:验证输入字段的模式 reqired:不可为空 step:规定合法的间隔range 包含一定范围内数字值的数字域 <input type=“range” min=“1” max=“10”> 特有属性介绍: max:设定最大值 min:设定最小值 step:规定合法的间隔date 从日期选择器中选择一个日期,如 <input type=“date”>datetime-local 从日期选择器中选择一个日期和事件,如<input type=“datetime-local”>month 选择一个月份如<input type=“mouth”>week 选择一个周 如<input type=“week”>search 搜索 如 <input type=“search”>clolr 颜色选取,可获取颜色响应的十六进制颜色值, 如 <input type=“color” value="#FFFFFF">还有一些其他属性可以根据引入的内容类型来选择使用,如当引用内容为音频或视频时,可使用autoplay,loop,lolume[音量调节]等属性.
mark 标记文本,IE9,如,<mark>被标记文本
propress 进度条,IE9+ <progress value = “10” max=“100”>
time 标记时间,方便搜索引擎搜索,IE9+ 如 <time datetime=“2016-02-14”>情人节 还可以设置pudate属性,来表示该事件为文档的创建时间,注意兼容性问题
ruby 注释,rt内为注释的内容,rp内为浏览器不支持时展示的内容
cnavas 标签定义图形,比如图标和其他图像.改标签基于Javascript的绘图API
command 定义命令按钮,如单选按钮,复选框或者按钮,兼容性极差,IE9支持
details 用于描述文档或文档的某个部分的细节,类似于下拉列表,兼容性极差chrome与Safari支持,如 <details> <summary>指定的标题,用户点击标题时暂时下面的所有内容,内容可以是任何形式的内容 <div> <p>内容描述</p> </div> </details> 当增设open属性时,描述内容默认展示. <details open> <summary>指定的标题,用户点击标题时暂时下面的所有内容,内容可以是任何形式的内容 <div> <p>内容描述</p> </div> </details>
dialog 定义对话框,如提示框,兼容性极差,chrome与safari支持,如 <dialog>内容</dialog> 当增设open属性时,对话框显示 <dialog open>内容</dialog>
keygen 加密,新的web标准中已经废弃
output 计算结果输出展示,IE不支持,如: 属性介绍: name:定义唯一名称,提交表单时使用 for:计算中使用的元素 <from οninput=“x.value = parseInt(a.value)+parseInt(b.value)”> 0 <input type=“range” id=“a” value=“50”> 100+ <input type=“number” id=“b” value=“50”> = <output name=“x” for=“a b” > </form>
menu 这个标签可以和<li>标签合用 可以给邮件单机中添加自己的内容
<base href=“http://wwww.junru.com/images/” taget="_blank"> <body> <img src=“demo.png”> <a href=“www.baidu.com”>将在新窗口打开,因为base的target属性为_blank
input标签新增属性 新增属性意义autocomplete是否启动自动完成功能autofocus页面加载时自动花去焦点height设置type=image的高度width设置type=image宽度required必填placeholder提示文字pattern指定输入格式,如pattern="[0-9]" //正则表达式max规定输入字段的最大值maxlenght规定输入字段中的字符的最大长度min最小值forminput元素所属的一个或多个表单,值必须是form_idformaction可以覆盖form的action属性formenctype覆盖表单的enctype属性formmethod覆盖表单的method属性formnovalidate覆盖表单的novlidate属性,如果使用该属性,则提交表单时不进行验证formtarget覆盖表单的target属性 a 超链接,注意:如果没有href属性,则hreflanh,media,rel,target,type不可用. 新增属性: download:指定下载链接 media;指定媒介类型 type:指定MINE类型ol有序列表 如: <ol start=“20” reversed> <li>one</li> <li>two</li> <li>three</li> </ol>style内嵌样式,如; <div> <style> h1{color:red;} p{font-szie:20px} <style> <h1>标签</h1> <p>内容</p> </div>iframe新增属性|介绍 ------------|-----------------没有async与defer参数是,浏览器会立即加载并执行JS脚本,按照文档的顺序依次执行 defer:文档的加载与JS脚本的加载同时执行,等文档所有元素解析完成后,domContentLoaded事件触发事件才执行 async:文档与js脚本的华仔与执行是并行进行的,即异步执行
