HTML5的语义化及新增和废弃元素属性详细总结
目录
-
HTML5的语义化
HTML5在继承了原有的标签的基础上,还添加了很多带有语义性的标记,比如<header>、<article>、<footer>等标记。那么为什么要增加这些标记呢?在以往的编程习惯中,我们可能会比较常用<div>来标记元素,虽然这并不会存在任何的错误,但这种页面结构的很多部分对于浏览器来说都是未知的,这是因为浏览器是通过id号来定位元素。因此,只要开发者不同,那么就允许元素的id号各异,这对浏览器来说,不能很好地表明元素在页面中的位置,必然影响页面解析的速度。而HTML5中的新增元素<header>,明确的告诉浏览器此处是页头,<nav>标记用于构建页面的导航,<article>标记用于构建页面内容的一部分,<footer>表明页面已到也页脚或根元素部分,并且这些标记都可以重复使用,极大地提高了开发者的工作效率、浏览器的解析速度,同时有利于SEO(搜索引擎)优化。
-
常用节点元素标签:
页头:<header>
导航:<nav>
文章:<article>
侧边栏:<aside>
分段章节:<section>
菜单:<menu>
搜索:<search>
页面主体:<main>
内容:<content>
媒体流内容:<figure>
标签页:<tab>
文章列表:<list>
联系方式:<address>
栏目标题:<title>
标题组合:<hgroup>
-
分组内容元素
<ul>元素用于定义页面中的无序列表,其用法与HTML4类似,区别在于,HTML5不再支持"type"和"compact"两个属性,同时也不再支持<li>元素的"type"属性,而是改用CSS样式来定义列表的类型。
<ol>元素用于页面中有序列表的创建。新增"start"属性和"reversed"属性,前者用于自定义列表项开始的编号,后者用于设置列表是否进行反向排序。
<dl>元素用于创建一个术语列表。HTML5允许在一个<dl>元素表中包含多个带名字的术语<dt>元素,每个术语元素后面可以跟一个或多个定义<dd>元素,并且术语元素<dt>与定义元素<dd>都不允许重复出现。例如:
[code]<dl> <dt>苹果</dt> <dd>一种好吃的水果</dd> <dt>小龙虾</dt> <dd>一种美味的食物</dd> </dl>
-
文本层次语义标记
<time>是HTML5新增加的一个标记,用于定义时间或日期。该元素可以代表24小时中的某一时刻,在表示时刻时,允许有时间差。在设置时间或日期时,只需将该元素的属性"datetime"设为响应的时间或日期即可。如:
[code]<time datetime="2019-6-3T21:00">现在是2019年6月3日晚上9点</time><!--日期和时间之间用字母T分隔-->
<mark>元素主要功能是在文本中高亮显示某个或几个字符,只在引起用户的特别注意。在使用效果上与<em>或<strong>元素有相似之处,但三者的出发点不同。<strong>元素是作者对文档中某段文字的重要性进行的强调;<em>元素是作者为了突出文章的重点而进行的设置;<mark>元素是数据展示时,以高亮的形式显示某些字符,与原作者本意无关。
[code]<p>做一个有<mark>热情</mark>的程序员</p>
<cite>元素可以创建一个引用标记,用于文档中参考文献的应用说明,如书名或文章名称。一旦在文档中使用了该标记,被标记的文档内容将以斜体的样式展示在页面中,以区别于段落中的其他字符。
[code]<p>---引用自《<cite>html5实战</cite>》---</p>
-
嵌入内容
<img>元素的功能是在页面中导入一幅图像,在HTML5中,该元素的"border"、"align"、"hspace"、"vspace"属性不再被支持,这些功能需要通过CSS样式实现。
<iframe>元素用于在页面中创建包含另一文档的框架。出于对页面安全性的考虑,HTML5不再支持<frame>框架元素,包括<frameset>框架集元素,但仍然支持<iframe>元素,只是该元素的一些原有属性不再被支持,而仅仅支持"src"属性。考虑到这一操作的安全性,HTML5还新增加了该元素的属性"sandbox",通过设置该属性,可以避免私自访问父页面、执行一样脚本、通过脚本嵌入表单或控制表单。该属性有4个属性值可供选择:
属性值 | 描述 |
---|---|
allow-forms | 允许脚本嵌入自己的表单或操纵表单 |
allow-same-origin | 允许将嵌入内容视为同一个数据源 |
allow-scripts | 允许执行脚本 |
allow-top-navigation | 允许最外层浏览器的上下文导航功能 |
在设置时,根据实际需求选择允许的操作,从而有效避免<iframe>元素嵌入的文档有安全性问题。
4000例如:
[code]<iframe src="index.html" sandbox="allow-forms"></iframe>
-
公共属性
"draggable"属性用于设置是否允许用户拖动元素,该属性有两个值,"true"和"false","true"表示鼠标选择元素后,可以进行拖动的操作,"false"表示不能拖动,该属性值为默认值。
"hidden"属性,HTML5中绝大部分元素都支持"hidden"属性,该属性也只有"true"和"false"两个取值,取值为"true"时。元素不在页面中显示,但还存在于页面中;反之则显示在页面中。该属性默认值为"false"
"spellcheck"属性用于检测文本框或输入框中的拼音或语法是否正确,当该属性为"true"则检测对应输入框中的语法;为"false"则不检测。例如在如下文本框中输入zzz
[code]<textarea spellcheck="true"></textarea>
"contenteditable"属性可以设置对显示在页面中的文字直接进行编辑,该属性的取值为布尔型,即"true"或"false",如果为"true"则可以对该元素显示的文本内容直接进行编辑了。
-
input元素
<input>元素在原有类型的基础上添加了许多新的类型成员,如表:
类型名称 | HTML代码 | 功能描述 |
---|---|---|
邮件输入框 | <input type = "email"> | 输入E-mail地址的文本框 |
web地址输入框 | <input type = "url"> | 输入URL地址的文本框 |
数字输入框 | <input type = "number"> | 输入数字的文本框,可以设置输入值的范围 |
数字滑动条 | <input type = "range"> | 通过拖动滑动条改变一定范围内的数字 |
日期选择器 | <input type = "date"> |
选择日期(包括年、月、日、星期)的文本框 |
搜索输入框 | <input type = "search"> | 输入搜索关键字操作的文本框 |
<input>元素在HTML5中还添加了一些公用的属性,如表:
属性名称 | HTML代码 | 功能说明 |
autofocus | <input autofocus = "true"> | 页面加载成功后,设置对应的元素自动获取焦点 |
pattern | <input pattern = "正则表达式"> | 使用正则表达式验证<input>元素的内容 |
placeholder | <input placeholder = "默认内容"> | 设置文本输入框中的默认内容 |
required | <input required = "true"> | 是否检测文本输入框中的内容为空 |
novalidate | <input novalidate = "true"> | 是否验证文本输入框中的内容 |
-
新增表单元素
<datalist>是HTML5中新增加的元素,该元素的功能是辅助表单中文本框的数据输入。<datalist>元素需要与表单文本框的"list"属性绑定,即将"list"属性值设置为<datalist>元素的id号。例如:
[code]<form> <p>请输入水果:</p> <input type="text" list="fruit"> <!--将list属性设置为datalist的id--> <datalist id="fruit"> <option value="苹果"></option> <option value="梨子"></option> <option value="桃子"></option> </datalist> </form>
<output>元素的功能是在页面中显示各种不同类型表单元素的内容,如输入框的值、Javascript代码执行后的结果值等。为了获取这些值,需要设置<output>元素的"onFormInput"事件。在表单输入框中录入内容时,触发该事件,从而实时侦察到表单中各元素的输入内容。例如:
[code]<form> <fieldset> <legend>请输入两个数字:</legend> <input id="num1" type="text"/>+<input id="num2" type="text" />= <output onFormInput="value=num1.value+num2.value"></output> </fieldset> </form>
但是现在的主流浏览器都还不支持这个新增的元素。。
参考书籍:《html5实战》.(陶国荣)
- HTML5表单新增元素与属性知识点总结
- HTML5新增表单元素及属性总结
- HTML5 学习总结(二)——HTML5新增属性与表单元素
- HTML5新增的属性与元素(二)
- WEB前端之HTML5[3]~HTML5 表单新增表单元素与属性
- HTML5表单新增元素与属性
- HTML5新特性新增于废弃元素标签
- HTML5表单新增元素与属性
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- HTML5 学习笔记5-表单新增元素和属性(续写)
- HTML5表单新增元素与属性 (续)
- HTML5-表单新增元素和属性
- HTML5表单新增元素与属性
- HTML5学习笔记简明版(10):废弃的元素和属性
- HTML5新增属性,新增元素
- html5 新增元素属性和废除的元素
- 繁星H5之旅-HTML5表单新增元素与属性
- HTML5新增的元素属性及废除的元素属性
- HTML5 表单新增元素与属性
- HTML5表单新增元素和属性(2)