跟永哥学HTML5（3）：HTML5新增语义化元素的使用

江山如画 • 2018年1月26日上午8:52 • 网页制作 • 阅读 10348

上节课我们讲了html5与html4的区别，Html5对语法进行了简化，一个htm5文档结构代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>

为了使文档的结构更加清晰明确， HTML 5增加了与页眉、页脚、内容区块等文档结构相关联的语义元素。

<header>元素表示页面中一个内容区域或整个页面的标题。通常情况下，它是一个页面中（指主体标记中）的第一个元素，可以包含站点的标题、Logo和旗帜广告等。 例1:应用<header>标记定义页面的页眉，包括网站的Logo和标题。

<header>
<img src="logo.jpg">
<h1>125建站网</h1>
</header>

<footer>元素表示整个页面或页面中一个内容区块的脚注。 脚注中通常包含一些基本信息，如日期、作者、相关文档的链接或版权信息等。 例2: 应用<footer>标记定义页面的脚注，这里为显示版权信息。

<footer>
    <ul>
        <li>CopyRight &copy; 2020 www.125jz.com 125建站</li>
        <li>本站请使用支持HTML5的浏览器…… </li>
    </ul>
</footer>

表示页面中的一个区域, 标识文档结构。 例3：应用<section>标记定义一个区域。

<section>
    <h2>section标记的使用</h2>
    <p>125建站网是为各类网页制作爱好者……</p>
    <footer>2050年1月26日</footer>
</section>

例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等，可以独自被外部引用的。 除了内容部分，一个<acticle>元素通常有自己的标题和脚注等内容。 例4：应用<acticle>元素在页面定义一篇文章。

<acticle>
     <header>
      <h1>苹果美容</h1>
    </header>
    <p>苹果素有"水果之王"的美称……</p>
    <footer>
      <p>2050-1-26</p> 
    </footer>
</acticle>

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/738.html

登录后才能评论