跟永哥学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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年1月24日 下午1:32
下一篇 2018年1月27日 下午9:18

99%的人还看了以下文章

  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    3.0K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    2.2K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    2.1K0
  • 跟永哥学HTML5(4):正确使用HTML5的header、hgroup和section

    在上一章HTML5新增语义化元素的使用中我们讲解了HTML新增的标签,并举例给出如何使用。但真正从HTML4转变到HTML5编程,并不是那么简单的事情,很多初学者没有真正了解这些标签,或错误使用HTML5的标签。这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家学会正确使用HTML5的header、hgroup和section。 1、只在需要的时候…

    2018年2月3日
    3.8K0
  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    4.1K0
  • 跟永哥学HTML5(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    2.3K0

发表回复

登录后才能评论

评论列表(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>