欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

笔记二:常用的h5语义化标签

程序员文章站 2022-05-11 13:24:12
...

0.前言:

  1. 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意。
  2. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码。这样更有利于读写代码。
  3. 人很容易直接或间接的呆在舒适区,当我写惯了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......