第二章新的结构标签和属性

HTML5和CSS3学习笔记

1.新的结构标签和属性

结构标签 用法
<header> 定义页面或区段的头部
<footer> 定义页面或者区段的尾部
<nav> 定义页面或者区段的导航区域
<section> 定义页面的逻辑区域或内容组合
<article> 定义正文或一片完整的内容
<aside> 定义补充或相关内容
<meter> 描述指定范围内的数值
<progress> 用于显示实时进度的控件
自定义的数据属性 允许通过“data-”前缀向任意元素中添加自定义的数据属性

2.实例：用语义化标记重新定义博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<header id="page_header">
		<h1>Hello World!</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Articles</a></li>
				<li><a href="#">About me</a></li>
				<li><a href="#">Contact me</a></li>
			</ul>
		</nav>
	</header>
	<section id="posts">		
		<article class="post">
			<header id="section_header">
				<h2>Welcome to my blog!</h2>
				<p>Posted by GuoRuiyang on <time datetime="2017-03-18T16:27">March 18st, 2017 at 4:27PM</time></p>
			</header>
			<aside>
				<p>&quot;Never give someone a chance to say no when you selling your product.&quot;</p>
			</aside>
			<P>
				Life is full of confusing and disordering Particular time,a particular location,Do the arranged thing of ten million time in the brain,Step by step ,the life is hard to avoid delicacy and stiffness No enthusiasm forever,No unexpected happening of surprising and pleasing So,only silently ask myself in mind Next happiness,when will come?
			<P>
			<P>
				Then the wandering soul wild crane stands still the memory river Listen to whistle play tightly ring slowly,Water rises a ship to go medium long things of the past.Wait for a ship’s person Wait for one and other,But hesitate always should ascend which ship Missed Had to consign the hope to next time,Finally what to wait for until has no boats and ships to come and go,Sunset west .
			</P>
			<footer id="article_footer"><p><a href="#"><i>25 comments</i></a>.....</p></footer>
		</article>		
		<footer></footer>
	</section>
	<section id="sidebar">
		<header><h3>Archives</h3></header>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Articles</a></li>
				<li><a href="#">About me</a></li>
				<li><a href="#">Contact me</a></li>
			</ul>
		</nav>
	</section>
	<footer id="page_footer">
		<p>@copy;2017GuoRuiyang.</p>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Articles</a></li>
			<li><a href="#">About me</a></li>
			<li><a href="#">Contact me</a></li>
		</ul>
	</footer>
</body>
</html>
赏

谢谢你请我吃糖果
置顶

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家