section的用法:
代码示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>section的用法</title>
</head>
<body>
<h1>大标题</h1>
<section>
<h2>小标题1</h2>
<p>
第一个小标题中的内容
</p>
</section>
<section>
<h2>小标题2</h2>
<p>
第二个小标题中的内容
</p>
</section>
<section>
<h2>小标题3</h2>
<p>第三个小编题(段落)中的内容</p>
</section>
</body>
</html>
结果展示:
article用法
代码示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>article的用法</title>
</head>
<body>
<article>
<header>
<h1>小标题1</h1>
</header>
<p>放入文本信息或者图片等等</p>
</article>
</body>
</html>
结果展示:
article和section
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>section的用法</title>
</head>
<body>
<!--article内容可以脱离上下文,可以作为完整的存在,整篇文章属于一个article,包含文章内容(article)和评论区(section)部分-->
<article>
<article>
<header>
<h1>大标题</h1>
</header>
<section>
<h2>小标题1</h2>
<p>
第一个小标题中的内容
</p>
</section>
<section>
<h2>小标题2</h2>
<p>
第二个小标题中的内容
</p>
</section>
<section>
<h2>小标题3</h2>
<p>第三个小编题(段落)中的内容</p>
</section>
</article>
<!--section适合一段主题性的内容-->
<section>
<h1>评论区</h1>
<article>
<header>张三的评论</header>
<p>fjklsdjljfladsjfldasjfldjfkala;ajkfljd</p>
</article>
<article>
<header>李四的评论</header>
<p>akljsdfklajdflksajflkadjsflkdajlvnnl</p>
</article>
</section>
</article>
</body>
</html>
结果:
aside的用法
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>aside的用法</title>
</head>
<body>
<header>网站的标题</header>
<article>
正文内容:青花瓷又称白地青花瓷,常简称青花,中华陶瓷烧制工艺的珍品。是中国瓷器的主流品种之一,属釉下彩瓷。青花瓷是用含氧化钴的钴矿为原料,在陶瓷坯体上描绘纹饰,再罩上一层透明釉,经高温还原焰一次烧成。钴料烧成后呈蓝色,具有着色力强、发色鲜艳、烧成率高、呈色稳定的特点。原始青花瓷于唐宋已见端倪,成熟的青花瓷则出现在元代景德镇的湖田窑。明代青花成为瓷器的主流。清康熙时发展到了顶峰。明清时期,还创烧了青花五彩、孔雀绿釉青花、豆青釉青花、青花红彩、黄地青花、哥釉青花等衍生品种。
</article>
<!--aside经常写在section里面-->
<section>
<h1>文章列表</h1>
<aside>
<blockquote>文章1</blockquote>
<blockquote>文章2</blockquote>
<blockquote>文章3</blockquote>
<blockquote>文章4</blockquote>
</aside>
</section>
</body>
</html>
结果:
nav的用法
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nav的用法</title>
</head>
<body>
<h1>技术资料</h1>
<!--页外链接-->
<nav>
<ul>
<li><a href="/">主页</a></li>
<li><a href="article用法.html">article的用法</a></li>
</ul>
</nav>
<article>
<header>
<h1>html5和css3的历史</h1>
<!--页内链接,通过添加锚点的方式进行,加上“#”-->
<nav>
<ul>
<li><a href="#html5">html5 历史</a></li>
<li><a href="#css3">css3 历史</a></li>
</ul>
</nav>
</header>
<section id="html5">
<h1>html5 的历史</h1>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
</section>
<section id="css3">
<h1>css3 的历史</h1>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
</section>
</article>
</body>
</html>
结果:
time的用法
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>time的用法</title>
</head>
<body>
<!--datetime用来确定时间-->
<p>
<time datetime="2017-10-11">
本篇文章写于2017年10月11日。
</time>
</p>
<!--pubdate="true"表示发布时间为真,确定是否为发布时间-->
<p>
<time datetime="2017-11-11" pubdate="true">
文章发布时间为2017年11月11日
</time>
</p>
</body>
</html>
结果: