您的位置:首页 > Web前端 > HTML5

HTML5的语义化及新增和废弃元素属性详细总结

2019-06-11 01:24 1326 查看

目录

 

HTML5的语义化

常用节点元素标签:

分组内容元素

文本层次语义标记

嵌入内容

公共属性

input元素

新增表单元素

  • 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实战》.(陶国荣)

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: