HTML5新的网页结构及主要新增元素的使用

最新推荐文章于 2023-06-21 00:07:20 发布

lixiuxiu2017

最新推荐文章于 2023-06-21 00:07:20 发布

阅读量3.3k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/lixiuxiu2017/article/details/79477416

版权

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、HTML5的定义：

HTML即超文本标记语言，是一种解释型文档，不做任何的编译处理
HTML5是HTML的第五次产品更新，能够提高新元素的互操作性，解决了浏览器之间的不兼容性问题，目标就是将HTML5网页上的音视频、图像、动画等都带入一个国际标准化
HTML5结构清晰，增加了很多主体元素，比如NAV标签表示导航的意思

2、HTML5新的网页结构

<!DOCTYPE html>

<html>

<metacharset=’UTF-8’>

</head>

<body>

<article>页面中一块和上下文不相关的独立内容，比如页面中调用一篇新闻、博客</article>

<header>页面中一个article元素内容或者整个页面的标题</header>

<section>页面中的一块内容区块，将文章内容分块，也可以和hn配合使用</section>

<aside>表示article元素内容之外的，和内容相关的辅助信息</aside>

<footer>页面中一个article元素内容或者整个页面的页脚，比如作者、联系方式等</footer>

<nav>页面中的导航链接部分</nav>

</body>

</html>

3、HTML5新增的主体结构元素

（1）article元素：表示页面中一块和上下文不相关的独立内容，内容的标题和页脚分别放在<header>和<footer>元素中，具体demo见链接 http://blog.csdn.net/lixiuxiu2017/article/details/79477541

（2）section元素：对网页内容进行分块，每一个section都由标题和内容组成，和div元素一样也是容器元素，具体demo见链接 http://blog.csdn.net/lixiuxiu2017/article/details/79477606

注意：

如果要求文章内容是独立的，使用article元素；如果要求对内容分块，使用section元素
如果要对元素内容进行CSS样式设置，不要使用section元素，而是使用div容器元素
如果元素内容区块没有标题，则不要使用section元素

（3）aside元素：使用方式有两种，一种是包含在article元素中作为主要内容的附属信息，比如当前文章的参考资料，名词解释等等；另一种是在article元素之外作为整个页面的附属信息，具体demo见链接http://blog.csdn.net/lixiuxiu2017/article/details/79477697

（4）nav元素：表示页面导航的链接组，包含很多重要链接，可以链接到其他页面或者页面其他部分，一个页面可以嵌套很多nav标签，具体demo见链接 http://blog.csdn.net/lixiuxiu2017/article/details/79477720

注意：

不是所有的导航链接<a>都要添加到nav标签中，比如页脚中的版权信息、站点信息等链接放到footer元素中即可
nav标签的使用场合有：传统的上边导航条、侧边栏导航、内页导航（比如单击百度百科的内部词条可以跳转到本页的词条解释）、翻页操作

（5）time元素：表示某个日期或者24小时中的某一个时刻，允许带时差，定义的格式有：

<time datetime=’2014-9-27’>今天的时间</time>

<time datetime=’2014-9-28T22:30Z’>UTC标准时间2014年9月28晚上10点</time>

（6）pubdate元素：用在time元素里面，作为time元素的属性，表示当前文章或页面的发布时间，只有time中带有pubdate属性的时间才是文章的发布时间，具体demo如下：

<body>

<h1>你好pubdate</h1>

</header>

</body>

6、HTML5新增的非主体结构元素

（1）header元素：通常用来放置整个页面或一个内容区块的标题，也可以包含logo图片、搜索表单等，一个页面中可以出现多次header元素，一个header元素至少包含一个heading元素（h1-h6），另外还可以包含hgroup元素，nav元素等，具体demo见链接 http://blog.csdn.net/lixiuxiu2017/article/details/79481369

（2）hgroup元素：将标题和他的子标题进行分组，一般会把h1-h6的元素进行分组，如果文章只有一个主标题，不用使用hgroup元素，具体demo见链接 http://blog.csdn.net/lixiuxiu2017/article/details/79481369

（3）footer元素：包含与它相关的内容区块的注脚信息，比如作者、版权信息等，一个页面中可以出现多次footer元素，具体demo见链接 http://blog.csdn.net/lixiuxiu2017/article/details/79481369

（4）address元素：用来呈现联系信息，包括文档的作者、邮箱、地址、电话信息等，还可以用来展示文章中相关联系人的所有信息，具体demo见链接 http://blog.csdn.net/lixiuxiu2017/article/details/79481369

lixiuxiu2017

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5新的网页结构及主要新增元素的使用

1、HTML5的定义：HTML即超文本标记语言，是一种解释型文档，不做任何的编译处理HTML5是HTML的第五次产品更新，能够提高新元素的互操作性，解决了浏览器之间的不兼容性问题，目标就是将HTML5网页上的音视频、图像、动画等都带入一个国际标准化HTML5结构清晰，增加了很多主体元素，比如NAV标签表示导航的意思2、HTML5新的网页结构&lt;!DOCTYPE html&gt; &lt;!...
复制链接

扫一扫