HTML5语义化元素
HTML5语义化元素
用户1149564
发布于 2018-01-11 18:03:46
发布于 2018-01-11 18:03:46
语义化元素：有意义的元素。
对语义化的理解：
- 正确的标签做正确的事情；
- HTML5语义化元素让页面内容结构化清晰；
- 便于开发人员阅读，理解，维护；
- 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键字权重，利于SEO。
支持情况：IE9以上，现代浏览器！
原先我们都是用这样的代码进行布局：
1 <div class="nav"></div>
2 <div class="header"></div>
3 <div class="footer"></div>而现在，我们可以使用语义化元素：
- <header>文档头部区域</header>
- <nav>导航链接区域</nav>
- <section>文档节区域(可以包含内容，标题，页眉，页脚等)</section>
- <article>定义文章区域</article>
- <aside>定义页面主区域内容之外的内容(比如侧边栏)</aside>
- <footer>定义底部区域</footer>
- <figure>定义独立的流内容(比如图像，代码等);与主内容相关，但删除后不会对主内容造成影响</figure>
- <figcaption>定义figure标题</figcaption>：放置在<figure></figure>之间！
示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>html5</title>
8 <link rel="shortcut icon" href="test.jpg" type="image/x-icon">
9 <style>
10 header,nav,section,article,aside,footer{
11 border: 3px solid gray;
12 }
13 .bgSection{
14 width: 300px;
15 border: 0px;
16 position: relative;
17 text-align: center;
18 margin: 0 auto;
19 }
20 header,nav,footer{
21 width: 300px;
22 height: 50px;
23
24 }
25 section,article{
26 width: 200px;
27 height: 100px;
28 }
29 aside{
30 width: 93px;
31 height: 206px;
32 position:absolute;
33 left: 206px;
34 top:112px;
35 }
36 nav p, ul{
37 display: inline;
38 }
39 ul li{
40 display: inline;
41 }
42 p{
43 font-weight: bold;
44 color: goldenrod;
45 }
46 </style>
47 </head>
48 <body>
49 <section class="bgSection">
50 <header> <p><header></p></header>
51 <nav>
52 <p><nav></p>
53 <ul>
54 <li><a href="">first</a></li>|
55 <li><a href="">second</a></li>|
56 <li><a href="">last</a></li>
57 </ul>
58 </nav>
59 <section class="section1">
60 <p><section></p>
61 </section>
62 <article>
63 <p><article></p>
64 </article>
65 <aside>
66 <p><aside></p>
67 </aside>
68 <footer>
69 <p><footer></p>
70 </footer>
71 </section>
72 </body>
73 </html>运行结果：
image.png
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-11-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读