html5简记（新增元素与属性）

最新推荐文章于 2025-10-14 22:02:39 发布

原创最新推荐文章于 2025-10-14 22:02:39 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #结构

HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文简要介绍了HTML5中新增的主体结构元素、其他元素、Input元素类型及属性。重点讲解了表单相关属性如autofocus、placeholder、form等，链接属性如media、hreflang等，以及其他全局属性如contentEditable、hidden。还讨论了article、section、aside等结构元素的区别和用途，以及nav、header、hgroup元素的使用场景。

新增的主要主体结构元素

 - header
 - nav
 - hgroup
 - section
 - article
 - aside
 - footer
 - figure

新增的其他元素

 - video
 - audio
 - embed
 - progress
 - meter
 - time
 - canvas
 - command
 - datagrid
 - datalist
 - output
 - source
 - menu
 - ......等等

新增的Input元素类型

 - email
 - url
 - number
 - range
 - Date Pickers(date,month,week,time,datetime,datetitm-local)

新增的属性

表单相关的属性：(多配合新增input类型元素使用)
1. autofocus：自动获取焦点
2. placeholder：输入提示
3. form：指定所属表单，input元素可不在表单之内
4. required：必填
5. autocomplete：自动完成允许浏览器预测对字段的输入
6. max,min：最大值，最小值
7. multiple：属性规定输入字段可选择多个值（多文件上传）
8. pattern：验证输入字段的模式（正则表达式）
9. step:规定输入字段的合法数字间隔
10. novalidate:无条件提交。
11. …等等
链接相关的属性：
1. media（在href存在时使用，为指定的媒体类型进行优化）
2. hreflang和rel（area元素）
3. sizes（link元素与icon元素指定图标大小）
4. target（base元素）
其他属性：
1. reversed(ol元素指定列表倒序显示)
2. charset(meta元素：字符编码)
3. type与label（为menu元素定义可见标注和三种菜单形式）
4. scoped(style元素：规定样式的作用范围)
5. asnc(script元素，脚本是否异步执行)
6. manifest(html元素：在创建的url上描述文档的缓存信息)
7. sandbox,seamless,srcdoc(iframe元素：页面安全)

全局属性

contentEditable:允许编辑元素中的内容；
designMode:指定整个页面是否可编辑（该属性只能在js脚本中被编辑修改），属性值为：on/off；
hidden:不渲染该元素，不可见元素
spellcheck:对输入的文本内容进行拼写和语法检查（若元素的readOnly或disabled属性设为true，则不执行拼写检查）；
tabindex:按Tab键让链接元素和表单元素获得焦点（用途？）

新增结构元素的用处与区别:

article元素和section元素和aside元素：

- article元素:代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;

 - section元素：对页面上的内容进行分块，通常由标题和内容组成，可以理解为该元素中的内容可单独存储到数据库中或输出到word文档中;

 - aside元素：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分；

小总结：

section元素强调分段或分块，而article元素强调独立性；
不要将section元素用作设置样式的页面容器，那是div的工作；
如果article,aside或nav元素更符合使用条件，不要使用section元素；
不要为没有标题的内容块使用section元素。

nav元素：可用作页面导航的链接组，并不是所有的链接组都要放进nav元素中，只需将主要、基本的链接组放进其中；
注：例如，在页脚中通过会有一组链接，包括服务条款，首页，版权声明等，使用footer元素是最恰当的。
用途：传统导航条、侧边栏导航、业内导航、翻页操作等

header元素：常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片；
注：一个网页内并没有限制header元素的个数，可多个，可为每个内容区块加一个header元素。

hgroup元素：将标题及其子标题进行分组的元素，通常会将h1~h6元素进行分组；
注：一个内容区块的标题及其子标题算一组。

以上为html5新增元素与属性的简单罗列，以及区别点，相对清晰，便于记忆！