html5新特性-header,nav,footer,aside,article,section等各元素的详解

Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素四大类。



下面是对各标签的详解,section、header、footer、nav、article、aside、figure、code、dialog、meter、time、progress、video、audio、details、atagrid、menu、command的 介绍

结构性元素主要负责web上下文结构的定义

<section>:在 web 页面应用中,该元素也可以用于区域的章节描述。

<header>:页面主体上的头部, header 元素往往在一对 body 元素中。

<footer>:页面的底部(页脚),通常会标出网站的相关信息。

<nav>:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。

<article>:用于表现一篇文章的主体内容,一般为文字集中显示的区域。

级块性元素主要完成web页面区域的划分,确保内容的有效分割。

<aside>:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

<figure>:是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用。

<code>:表示一段代码块。

<dialog>:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容。

行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。

<meter>:表示特定范围内的数值,可用于工资、数量、百分比等。

<time>:表示时间值。

<progress>:用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监事。

<video>:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。

<audio>:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。

<details>:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。

<datagrid>:用来控制客户端数据与显示,可以由动态脚本及时更新。

<menu>:主要用于交互菜单(曾被废弃又被重新启用的元素)。

<command>:用来处理命令按钮。

如果对您有帮助,请点击支持~

原文地址:https://www.cnblogs.com/zhaohongcheng/p/11373360.html

时间: 2024-10-13 06:01:26

html5新特性-header,nav,footer,aside,article,section等各元素的详解的相关文章

HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍 1.新的文档类型 <!DOCTYPE html> 2.脚本和链接无需type <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/Angular.js"></script> 3.语义化的Header 和Footer 这里通俗说下什么叫做语义化,就是:明

HTML5新特性小结

HTML5 新特性 新的DocType: <!DOCTYPE html> 不需要声明文档类型: 脚本和链接不需要type属性,如 lingk, script; 语义化标签,如:header, footer, hgroup, mark, figure, small, article, 属性及校验, 新的属性,如:placeholder, required, autofocus, pattern, autocomplete, data, contenteditable 自动校验,如: requir

HTML5新特性新增功能

HTML5 现如今已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 如:绘图canvas:用于媒介回放的video和audio元素:本地存储localStorage;语义化元素:表单控件等等新增的功能,都是HTML5新特性. 下面列举HTML5新特性详细说明: 一.新的文档类型  (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

HTML5新特性有哪些

HTML5新特性有哪些: 1.新的文档类型 2.脚本和链接无需 3.语义Header和Footer The Semantic Header and Footer 4.Hgroup 10.Autofocus 属性 Autofocus Attribute 12.Video 支持 Video Support 13.视频预载 Preload attribute in Videos element 14.显示控制条 15.正规表达式 5.标记元素 6.图形元素 8.占位符 9.必要属性

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使你已

HTML5新特性data_*自定义属性使用

HTML5 新特性data_*自定义属性使用HTML5规范里增加了一个自定义data属性. 这个自定义data属性的用法非常的简单,就是你可以往 HTML 标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. 使用 data-* 可以解决自定义属性混乱无管理的现状.

Html5新特性 &lt;canvas&gt;画板画直线

 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " stroke="" stroke-width=""> </polyline> #points 一组坐标点 #渐变特效对象:一种特效样式(从一种颜色慢慢过滤另一种颜色效果) #渐变特效对象:(1)创建渐变对象 <defs> (2)在指定图形应用