HTML5新增的常用元素

1、文档结构元素

  • <article>:该元素用于代表页面上独立、完整的一篇“文章”。
  • <section>:该元素用于对页面的内容进行分块。
  • <nav>:该元素专门用于定义页面上的导航条。
  • <aside>:该元素专门用于定义当前页面或当前文章的附属信息。
  • <header>:该元素主要用于为<article.../>元素定义文章的“头部”信息。
  • <hgroup>:该元素主要用于组织多个<h1.../>~<h6.../>这样的标题元素。
  • <footer>:该元素主要用于为<article.../>元素定义“注脚”部分,包括文章的版权信息、做着授权信息等。
  • <figure>:该元素用于用于表示一块独立的“图片区域”。
  • <figcaption>:该元素通常放在<figure.../>内部,用于定义“图片区域”的标题。

2、语义相关元素

  • <mark>:用于显示html页面中需要重点“关注”的内容。
  • <time>:用来显示被标注内容是日期、时间或者日期时间。

  只有Chrome支持<details.../>与<summary.../>元素

<details.../>元素用于显示一段详细信息或者某个主题细节。<details.../>元素通常会与<summary.../>元素结合使用,当把<summary.../>放在<details.../>元素内部时,<summary.../>元素用于为<details.../>定义摘要信息,摘要信息默认是可见的,当用户点击摘要信息时,浏览器会显示出<details.../>里的详细内容。

3、两个特殊功能的元素

  • <meter>:用于表示一个已知最大值和最小值的计数仪表。

value:指定计数仪表的当前值。

min:指定计数仪表的最小值。

max:指定计数仪表的最大值。

low:指定计数仪表指定范围的最小值。

high:指定计数仪表指定范围的最大值。

optinum:指定计数仪表指定范围的最佳值。

  • <progress>:用于表示一个进度条。

max:指定进度条完成时的值。

value:指定进度条当前完成的进度值。

时间: 2024-09-28 16:17:27

HTML5新增的常用元素的相关文章

疯狂html5讲义(二):HTML5简的常用元素与属性(二):html5新增的通用属性

1.contentEditable属性 true时可直接编辑html元素里面的内容,且具有"可继承"的特点. 编辑后不要刷新页面,否则编辑的内容会丢失,可以通过该元素的innerHtml属性来获取编辑后的内容. 2.designMode属性 此属性相当于一个全局的contentEditable属性 3.hidden属性 可以替代css中的display,hidden=true相当于display:none 4.spellcheck属性 针对于input.textarea等元素,可以对用

HTML5新增的语义元素、JS常用对象

HTML5新增的语义元素 <header>元素表示页面中一个内容区域或整个页面的标题,通常他可能是一个页面中的(指主体标记中的第一个元素),可以包含站点的标题.Logo和旗帜广告 <header> <img src="logo.png"> <h1>YEN的Java Web之路</h1> </header> <footer>元素表示整个页面或页面中一个区域块的脚注,通常包含一些基本信息,包括一些基本信息:

疯狂html5讲义(二):HTML5简的常用元素与属性(一):html5保留的常用元素

html5删除了少量的元素与属性:主要删除了文档样式相关的各种元素与属性,比如<font>.width等,html5规范推荐使用css样式单来控制html文档样式. 1.基本元素 <html>.<head>.<title>.<body>.<style>.<h1>到<h6>.<p>.<br>.<hr>(定义水平线).<div>.<span>~~~ <

2.HTML5新增的其他元素

HTML5新增的其他元素: video元素用于定义视频. audio元素用于定义音频. embed元素用于插入各种多媒体,格式可以是Midi.Wav.AIFF.AU.MP3等. mark元素主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字.mark元素的一个比较经典的应用就是在搜索结果中向用户高亮显示搜索关键词. progress元素表示运行中的进程,可以使用process元素来显示JavaScript中消耗时间的函数的进程.   <progress value="22"

html5新增表单元素和属性

从三方面来介绍html5表单的新特性表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body><form action="upload.php" method="post" accept-charset="utf-8" id="form1"&g

疯狂的表单-html5新增表单元素和属性

疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body> <form action="upload.php" method="post" accept-charset="utf-8&

HTML5新增的结构元素

HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档,页面或应用程序中独立的完整的,可以独自被外部引用的内容,<article> 标签定义外部的内容.article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联, 另外article元素也可以用来表示一个插件. <time> 标签定义日期或时间,或者两者.pubdate

HTML5保留的常用元素(二)

1.超链接和锚点 html5保留了定义超链接的<a.../>元素,该元素可以指定id,class,style等核心属性,也可以指定onclick等各种事件属性.它还可以指定如下三个重要属性. href:指定超链接所关联的另一个资源. target:指定使用框架集中的哪个框架来装载另一个资源.该属性的属性值可以使_self,_blank,_top,_parent四个值,分别代表使用自身.新窗口.顶层框架.父框架来装载新资源. media:指定目标URL所引用的媒体类型.默认值为all.只有当指定

《Web前端笔记2.10-2.11》 HTML5 新增的结构元素

课程背景: 在 HTML5 中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的元素. 核心内容:1.Article2.Section3.Nav4.Aside5.Time6.Pubdate 7. header 元素8. footer 元素9. hgroup 元素10. address 元素 article 元素 article 元素代表文档,页面或应用程序中独立的.完整的.可以独自被外部引用的内容. section 元素 本课时讲解 HMTL5 新增的主体结构元素