0.前言:
- 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意。
- 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码。这样更有利于读写代码。
- 人很容易直接或间接的呆在舒适区,当我写惯了h4的代码之后,不愿意用h5标签,为了杜绝后患,遂决定总结以下内容。
1.header:
被放置在页面或者页面中某个区块元素的顶部,包含整个页面或者区块的标题、简介等信息,起到引导与导航的作用。
如:小米商城的导航栏整体,width:100%
header {
width: 100%;
height: 70px;
background-color: #515151;
position: fixed;
top: 0px;
z-index: 222;
}
.main {
width: 80%;
height: 70px;
margin: auto;
}
.logo {
width: 240px;
height: 70px;
background-color: rgb(153, 204, 51);
text-align: center;
line-height: 70px;
float: left;
}
2.nav:页面的导航
可以通过导航链接到网站的其他页面,或者当前页面的其它部分。说白了就是包含在header里的导航功能。当然如果在头部左面是logo,还是要做一些页面分离的。
<header>
<div class="main">
<div class="logo">公司logo</div>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">旅游咨询</a></li>
<li><a href="">机票订购</a></li>
<li><a href="">风景欣赏</a></li>
<li><a href="">公司简介</a></li>
</ul>
</nav>
</div>
</header>
3.图片标签、图片标题
<div class="tour">
<figure>
<img src="./image/tour5.jpg" alt="">
<figcaption>
<span class="box1"><span class="box2">
<曼谷-芭提雅6日游>
</span>包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成员自费卷</span>
<span class="box3">国内长线</span>
</figcaption>
</figure>
</div>
figure图片标签,figcaption图片标题。
4.时间标签
<time>4-29</time>
5footer标签
页脚标签。
6。待补充完善的语义化标签
<section>
元素表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题。(没用过,感觉有用先记录下来。)
7.自定义列表
dt: 定义列表 相当于table
dl:dldefines terms 定义项目,相当于ul
dd:defines description,作用是定义列表中项目的注释 相当于li
与无序列表的区别?
<dl>
<dt>测试
<dd>列表1</dd>
<dd>列表1</dd>
<dd>列表1</dd>
</dt>
</dl>
<table>
<ul>测试2 <!--我会居中-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</table>
- ul会居中,dt不会居中。在需要去掉list-style时,且不需要列表居中选择自定义列表,更有助于读写。
8.mark标签
- 用来突出显示文本,它的效果就像是用荧光笔给重点的语句做标记一样。
9.label标签
- lable标签中设置for,来让说明文本和相对应的input关联起来,input设置id属性。
10.注意:
- 尽量少使用无语义的span和div
- 在语义不明显时,可以用p和div时,尽量用p自带换行,对兼容特殊终端有利。
11 to be contined......