HTML5语义化元素

语义化元素:有意义的元素。

对语义化的理解:

  1. 正确的标签做正确的事情;
  2. HTML5语义化元素让页面内容结构化清晰;
  3. 便于开发人员阅读,理解,维护;
  4. 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键字权重,利于SEO。

支持情况:IE9以上,现代浏览器!

原先我们都是用这样的代码进行布局:

1     <div class="nav"></div>
2     <div class="header"></div>
3     <div class="footer"></div>

而现在,我们可以使用语义化元素:

  1. <header>文档头部区域</header>
  2. <nav>导航链接区域</nav>
  3. <section>文档节区域(可以包含内容,标题,页眉,页脚等)</section>
  4. <article>定义文章区域</article>
  5. <aside>定义页面主区域内容之外的内容(比如侧边栏)</aside>
  6. <footer>定义底部区域</footer>
  7. <figure>定义独立的流内容(比如图像,代码等);与主内容相关,但删除后不会对主内容造成影响</figure>
  8. <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>&lt;header&gt;</p></header>
51         <nav>
52             <p>&lt;nav&gt;</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>&lt;section&gt;</p>
61         </section>
62         <article>
63             <p>&lt;article&gt;</p>
64         </article>
65         <aside>
66             <p>&lt;aside&gt;</p>
67         </aside>
68         <footer>
69             <p>&lt;footer&gt;</p>
70         </footer>
71     </section>
72 </body>
73 </html>

运行结果:

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏电光石火

所有前端都必须知道的 jQuery 技巧

前端是一个很繁杂的工作,在工作中会考虑到很多细节,也许有时候一个细节没有处理好,就会造成很大的麻烦。但是一些小技巧就能够避免。作为一个新手,即使掌握一个小技巧都...

19510
来自专栏Petrichor的专栏

Jupyter

When attempt to download .ipynb file as .python file:

6503
来自专栏hbbliyong

Extjs 项目中常用的小技巧,也许你用得着(1)

我在项目中遇到的一些知识点: 1.在GridPanel中显示图片,效果 ? 对应的代码实现 { text: '是否启用...

3537
来自专栏bboysoul

python练手小程序(石头剪子布)

https://asciinema.org/a/YYGXOzfoP3dAu9mMXCV4J5GRs

1102
来自专栏青玉伏案

iOS开发之仿射变换示例总结

本篇博客比较简单,但还是比较实用的。其中的示例依然使用Swift3.0来实现,该博客算是下篇博客的一个引子,因为我们下篇博客要介绍使用Swift开发iOS应用中...

2048
来自专栏帮你学MatLab

期刊图片的输出

期刊图片 下载地址:http://www.mathworks.se/matlabcentral/fileexchange/727 也可在文后下载 详细介绍见...

37310
来自专栏数据小魔方

自定义下拉菜单

今天跟大家分享怎么利用excel的数据有效和开发工具制作自定义下拉菜单! 下拉菜单是我们经常会用到的高效录入数据方式,可以减少我们录入大量数据时的繁琐过程。 本...

3266
来自专栏听雨堂

label自定义的惨痛教训

修改label文字: source.DefaultLabelProperties.Style.Font.Size=9; 修改文字的位置: source.Defa...

2106
来自专栏个人随笔

使用ListView控件展示数据

属性名称    说明 items   指定显示那种视图 View   指定显示那种视图 largelmagelist  大图标图像的imagelist控件 Sm...

2937
来自专栏码生

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle...

4102

扫码关注云+社区

领取腾讯云代金券