HTML 5学习笔记1——那些常被忽略的属性

浏览数：28 / 时间：2015年06月09日

　　之前学习HTML5的时候，心态比较浮躁，现在安下心来再仔细看HTML5，真的有很多比较好的属性常常被忽略，起码我是很少用到的。

　　1、 accesskey,支持的标签有<a> <area> <button> <input> <textarea> <label> <lagend>(表单标签以及链接标签)，除了Opera外其他浏览器均支持。

使用的时候用Alt + accessKey (或者 Shift + Alt +accessKey) 来访问带有指定快捷键的元素。

　　2、contenteditable,规定是否可编辑元素，布尔值属性，不支持的浏览器有IE（IE11） Firefox。

　　3、contextmenu，暂时没有浏览器支持。根据W3School给出的例子，contextmenu的值为<menu>的ID值，这样，通过右击，会弹出设定好的上下内容。

　　4、data-*,这个属性让我们可以自定义属性内容。在Javascript中可通过element.dataset["*"]来获取自定义设定的值。

　　5，media,这是一个描述性质的属性，描述的是目标URL是为什么样的设备进行优化的，所以只有存在href时才能使用。属性值见http://www.w3school.com.cn/tags/att_a_media.asp

　　6，lang,hreflang，前者是定义元素内容的语言（全局属性），后者是指定被连接文档的语言。是否指定这个属性，在网页中表现不出来，这主要是针对搜索引擎以及实现W3C规范的，告诉搜索引擎，这是一个英文<html lang="en">或是中文<html lang="zh">网站.http://www.w3school.com.cn/tags/html_ref_language_codes.asp

　　7,target,除了我们常常使用或见到的_blank,_self,_top,_parent外，还可以指定为当前页面中<iframe>的name属性值，这样被连接的网站就会在框架中打开。

　　8，preload,主要用于audio以及video，有三个值，none,auto,meta.如果指定了autoplay的话，在定义preload属性没有意义。

　　　　None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。

　　　　Meta：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。

　　　　Auto：全部预加载。

　　9,<button>中的value属性，W3School说在IE中会提交Button中间的文本，而不是value属性值，但是在IE11中这个问题应该是得到了解决了。http://www.w3school.com.cn/tags/tag_button.asp

　　10，name,有两个功能，一个是和value一起被发送，一个是标示自身，还有在radio中用于分组。

　　11，<embed>的src,可以解释.swf,.jpg，不能解释音频视频文件。

　　12，<iframe>的seamless属性指定后，框架内的内容没有边框以及滚动条。

　　13，<img>的usemap属性视为图像指定图像映射，其值指的是<map>的name或id值。

　　14，<input>中的accept属性，当type="file"时有效，其值为MIME_TYPE，指定后可接受的类型后，点击上传时默认弹出的窗口中只显示可上传的文件，比如设置accept="image/*" 则弹出窗口的文件可选择的全是图片类文件。

　　15,pattern ,用于指定输入内容的正则表达式.