跟永哥学HTML5(3):HTML5新增语义化元素的使用

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

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

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

1.<header>元素

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

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

2.<footer>元素

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

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

3.<section>元素

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

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

4.<article>:定义独立的文章内容。

例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等,可以独自被外部引用的。 除了内容部分,一个<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

发表评论

登录后才能评论

评论列表(1条)

  • 江山如画
    江山如画 2018年2月3日 上午9:56

    在HTML5中,script和style元素不再需要type属性。
    <link type="text/css" rel="stylesheet" href="css/styles.css" />
    <script type="text/javascript" src="js/scripts" /></script>

    只需要这样写:
    <link rel="stylesheet" href="css/styles.css" />
    <script src="js/scripts" /></script>