2、HTML5新标签和新属性

来源：互联网发布：linux系统工程师知乎编辑：程序博客网时间：2024/04/29 15:24

<一> 、新标签

一、新布局标签

（1）、<article> ：文档或站点的一个独立部分

（2）、<aside>：页面或站点主题之外的内容

（3）、<figcaption>： figure元素的标题

（4）、<figure> ：独立于文本流之外的一段流内容（如图形、图表等）

（5）、<footer> ：文档或章节的页脚

（6）、<header>：文档或标题的页眉

（7）、<hgroup> ：标题组

（8）、<nav> ：导航部分

（9）、<section> ：无法被以上类型定义的普通章节

注：1、这些标签用来定义HTML文档中的对应区域。使用它们，不但便于附加css样式，也给页面的相关部分提供了语义含义。

2、语义标签让浏览器或用户代理辨别标签内容。换言之，例如：<article> 这类语义标签不会简单的为一段文档定义其位于相关页面上的位置，而会告诉浏览器此内容属于独立文章的一部分

3、一个页面可以包含许多此类元素，因此加入id属性，如：<nav id="mainNav">通常能为文档样式提供帮助

二、其他语义标签

（1）、<details> ：新增信息

（2）、<mark> ：被突出或标记的内容

（3）、<meter> ：计量器

（4）、<output>：脚本或表单结果

（5）、<progress> ：进度指示

（6）、<summary> ：details 元素的概要或说明

（7）、<time> ：日期或时间

（8）、<wbr> ：可选的换行符（软换行）

三、新的多媒体标签

（1）、<audio> ：音频

（2）、<canvas> ：动态图形（用于绘制矢量图象，可以为页面增添自定义字体，游戏，让矢量图形动起来并通过HTML来控制这一切）

（3）、<embed> ：增添其他不包含特定HTML5元素的技术

（4）、<source> ：内嵌音频及视频的源文件

（5）、<track> ：内嵌音频及视频的辅助多媒体轨道

（6）、<video> ：视频文件

四、新的表单功能

（1）、<command> ：为多个表单元素定义一个单一的动作，也可以为<datails> 标签提供预定义的数据

（2）、<keygen> ：生成一对公/私密钥对以保障表单数据安全

（3）、<input> ：现共有13种类型，用于收集特定的数据（colot,data,datetime,datetime-local,email,month,number,range,search,time,tel,url,week）

五、更好的国际化支持

以下5个 HTML5新标签进一步为非英语文档提供支持

（1）、<bdi> ：改变HTML中文本文字的方向（若想在英文（从左至右）文档中加入希伯来文（从右至左），可以将希伯来文字用<bdi> 围起来）

（2）、<meta charset> ：用来定义web页面使用的字符集编码。如：<meta charset="utf-8">

（3）、<rp> ：代表附注文本两侧括号

（4）、<rt> ：附注文本

（5）、<ruby> ：指明附注文字字符的范围（若使用中日等双字节语言书写HTML时，通常会有附注文字字符，即字符旁边的小注释，通常用来标记读音）

如：<ruby> <rp> <rt> xxxx文本 </rt> </rp> </ruby>

<二>、新属性

一、新事件（event）属性

（1）、onabort ：操作中止使触发

（2）、onbeforeonload、onbeforeonunload、onunload ：在某一元素加载或卸载之前或同时触发

（3）、oncontextmenu ：打开菜单时触发

（4）、ondrag、ondragend、ondragenter、ondragleave、ondragstart、ondrop ：发生拖拽行为使触发

（5）、onerror 、onmessage ：发生错误或弹出信息时触发

（6）、onscroll ：用户滚动浏览器滚动条使触发

（7）、onresize ：调整元素大小时触发

二、全局元素

（1）、contenteditable 和spellcheck ：将一些元素设置成可通过浏览器编辑，而且浏览器可以在编辑过程中检查语法

（2）、draggable 、dropzone ：让元素变得可被拖拽，同时还提供结束拖拽使的放置区

（3）、contextmenu ：可定义一个仅在右键单击元素时出现的菜单

（4）、hidden ：和css中的diaplay: hidden 作用相同，但可以通过它描述一个当前与页面不相关的元素（如：仅在以特定方法填充完别的字段后才会用到的表单元素。这个特性可以增加页面的可访问性，因为隐藏元素无法被屏幕阅读器读取，但若该元素仅被CSS隐藏，则它可被读取）

<三>、部分标签和属性的变化

（1）、<address> 标签成为分节内容的一部分2

（2）、<cite> 标签可以表示引用作品的标题，但不能用来标记人名

（3）、<menu> 用于创建工具栏及右键菜单

（4）、<dl> 是“名称=值对” 的列表，但不能像脚本一样用来显示对话框

（5）、显示<label>元素时，用户代理不再将焦点从标签移至相关表单控件，除非它属于平台的标准行为

（6）、<strong> 现在不再指“强调”，而是指“重要”的内容

（7）、<object> 不再允许嵌套在<head> 元素中

（8）、不再将border属性放在<img>标签中，并将其赋值为“0”以关闭边框，改为使用img{border:none;} 这类css定义会更好

（9）、如果还需要在<a> 标签中使用name属性，应该改用id属性

（10）、依旧可以使用summary属性为复杂的表格提供概述，但是将置于文本中的summary放在<detail> 元素的表格<caption> 中，或放在一部分为该表格的<figure>或<figcaption>是更好的做法，因为她能提高可访问性

（11）、使用width属性的图像时，不能再用百分比作为宽度单位

0 0