新增主体结构元素

来源：互联网发布：淘宝店铺可以改类目吗编辑：程序博客网时间：2024/05/18 01:30

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>

结果：

阅读全文

0 0