常用的HTML标签

The CrazyMan

已于 2023-01-24 10:28:09 修改

阅读量174

点赞数

分类专栏：前端web 文章标签： html5

于 2022-12-12 20:34:39 首次发布

本文链接：https://blog.csdn.net/qq_42897323/article/details/128286951

版权

前端web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

记录学习HTML里面的table标签，a标签，列表标签；以及在HTML里面颜色的表示方法；块元素与内联元素介绍；div标签与span标签的使用特性

文章目录

一、table标签的使用
二、a标签的使用
三、列表标签的使用
四、颜色的表示
五、标签的分类

正文内容：

一、table标签的使用

table标签是表格标签，用于在页面上显示一个表格；对于一个表格而言，包括表头，行，列。使用tr标签表示表格的行，使用td标签表示表格的列，也就是表格的单元格内容。当一个单元格独自占3列的时候，则添加colspan="3"属性到td标签，当一个单元格独自占3行的时候，则添加rowspan="3"属性到td标签。标签为了方便之后对表格进行修饰，可以使用thead标签将表头内容包裹起来，tbody标签将表格的主体内容包裹起来，tfoot标签将表格尾部内容包括起来。
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>学生成绩表</title>
</head>

<body>
    <!-- 表格标签 -->
    <table border="1" cellpadding="0" cellspacing="0" style="width: 500px;">
        <thead>
            <tr>
                <th colspan="5">学生成绩表</th>
            </tr>
            <tr style="background-color: antiquewhite;">
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr>
                <td>李四</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
                <td>270</td>
            </tr>
            <tr>
                <td rowspan="3">张三</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
                <td>270</td>
            </tr>
            <tr>
                <td>90</td>
                <td>90</td>
                <td>90</td>
                <td>270</td>
            </tr>
            <tr>
                <td>90</td>
                <td>90</td>
                <td>90</td>
                <td>270</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">备注：</td>
            </tr>
        </tfoot>
    </table>

</body>

</html>

效果图如下所示：
在这里插入图片描述

二、a标签的使用

a标签是链接标签，用于页面的跳转，包括target与href属性；target属性用于指定页面在何处打开目标 URL，href属性用于指定目标URL
范例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签学习</title>
</head>

<body>
    <a href="https://book.douban.com/subject/36136074/?icn=index-latestbook-subject" target="_blank">
        我看见无数的她：跟女孩们聊文学和电影的30个夜晚</a>
    <a href="https://book.douban.com/subject/36078381/?icn=index-latestbook-subject" target="_blank">新潮职业</a>
</body>

</html>

效果图如下：
在这里插入图片描述

三、列表标签的使用

列表分为有序列表与无序列表，使用ol标签指定一个有序列表，使用ul标签指定一个无序列表；列表的表项则都使用li标签指定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表的学习</title>
</head>
<body>
    <h1>畅销图书榜</h1>
    <hr />
    <ol>
        <li><a href="https://book.douban.com/subject/27192353/" target="_blank">钝感力</a></li>
        <li><a href="https://book.douban.com/subject/35051822/" target="_blank">尘埃落定</a></li>
        <li><a href="https://book.douban.com/subject/35587028/" target="_blank">生死疲劳</a></li>
    </ol>
    <ul>
        <li><a href="https://book.douban.com/subject/27192353/" target="_blank">钝感力</a></li>
        <li><a href="https://book.douban.com/subject/35051822/" target="_blank">尘埃落定</a></li>
        <li><a href="https://book.douban.com/subject/35587028/" target="_blank">生死疲劳</a></li>
    </ul>
</body>
</html>

效果图如下所示：
在这里插入图片描述

四、颜色的表示

颜色是由红色，绿色，蓝色三色组成，也就是RGB颜色，可以使用十进制，十六进制表示颜色；颜色的取值范围是0~255（十进制表示），或者00~ff（十六进制表示），在HTML里面可以使用rgb()属性或者rgba()属性进行设置颜色，其中rgb属性共有三个参数，分别用十进制表示红色，绿色，蓝色颜色值；rgba属性共有四个参数，前三个参数分别用十进制表示红色，绿色，蓝色颜色值，第四个参数是指定透明度；透明度的取值范围是0~1；使用范围值在#000000~#ffffff的十六进制值表示颜色；具体的代码如图所示：

<!DOCTYPE html><!--标记文件是HTML文档-->
<html lang="en"><!--html标签是根标签-->

<head><!--头部标签开始-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个HTML</title><!--浏览器页面中的将要显示的标题-->
</head><!--头部标签闭合-->

<body><!--HTML的主体-->

    <h1>了不起的文明现场</h1>
    <h2 style="background-color: #000000; color: #ffffff;" >内容简介</h2>
    <p style="background-color: rgb(255, 0, 0);">
        “上下五千年”早已刻入每一位中国人的基因，而考古学让我们看到另一个与古籍文献所载的中国相似又不同的华夏，也许难说二者谁更“真实”，但可以肯定的是，我们所能见到的中华文明景观，得益于考古学的襄助，已经殊为精彩，蔚为大观。<br />20世纪的考古发现在极大程度上丰富了我们对于中国历史的认知，改变了世界对中国文明的基本看法。
    </p>
    <p style="background-color: rgba(0, 255, 0, 1);">
        全书从中国的重大考古发现中遴选出十个独具代表性的考古遗址——新石器时代的良渚古城、堪称最早的“中国”的二里头遗址、商代晚期的安阳殷墟、拨开古蜀迷雾的广汉三星堆、见证中西文明交流的小河墓地、秦始皇陵、汉代海昏侯墓、汉唐长安城、宋代沉船南海I号、敦煌莫高窟，分别由十位负责一线勘探的考古人——刘斌、许宏、唐际根、高大伦、伊弟利斯•阿不都热苏勒、段清波、杨军、刘瑞、崔勇、樊锦诗，以亲历者的角度为公众揭开考古探掘的面纱，带领读者来到中华上下五千年的文明现...
    </p>
    <hr />
    <img src="https://img1.doubanio.com/view/subject/s/public/s33657000.jpg" alt="描述图片信息">
</body><!--body标签闭合-->

</html><!--html标签闭合-->

效果图如下所示：
在这里插入图片描述

五、标签的分类

效果图1：
在这里插入图片描述

效果图2：
在这里插入图片描述

对效果图1与效果图2进行分析，效果图1里面使用两个a标签在页面里面，可以发现这两个a标签并在一起显示，将这种类型的标签称之为内联元素，它在页面所占的空间大小只与自己的内容大小有关系，无法设置内联元素的宽与高属性；在效果图2里面，分别是有序列表与无序列表，但是这两个列表都独占一行，将这种类型的标签称之为块元素，块元素可以设置宽与高属性；

特殊的两个容器标签：

div：块元素，无任何默认样式，可以使用它作为容器，嵌套其他标签，可以设置其宽与高属性
span：内联元素，无任何默认样式，看可以使用它作为容器，嵌套其他标签，不可以设置宽与高属性，它所占的空间大小只与标签的内容有关系

内联元素与块元素有着自己的特性，在开发的时候根据其特性进行选择使用；如果我们需要让自己的标签不独占一行，但是其所占的页面空间只与其内容有关系，或者我们的标签需要设置指定的宽与高，但是需要让其他标签和他并在一起显示；这种需求就是将块元素与内联元素的特征结合在一起，我们此时使用display属性进行设置，将标签的display属性值更改为inline-block；

范例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣title</title>
</head>

<body>
    <div style="background-color: #545652; height: 28px; color: #d5d5d5; font: 12px Helvetica,Arial,sans-serif;">
        <ul style="line-height: 28px;padding-inline-start: 10px;">
            <li style="display: inline-block;">豆瓣</li>
            <li style="display: inline-block;">读书</li>
            <li style="display: inline-block;">电影</li>
            <li style="display: inline-block;">音乐</li>
            <li style="display: inline-block;">同城</li>
            <li style="display: inline-block;">小组</li>
            <li style="display: inline-block;">阅读</li>
            <li style="display: inline-block;">FM</li>
            <li style="display: inline-block;">时间</li>
            <li style="display: inline-block;">豆品</li>
        </ul>
    </div>
    <div style="height: 40.67px; background-color: #f9f9f7; color: #666; font-size: 13px;">
        <ul style="line-height: 40.67px;">
            <li  style="display: inline-block;">购书单</li>
            <li  style="display: inline-block;">电子图书</li>
            <li  style="display: inline-block;">豆瓣书店</li>
            <li  style="display: inline-block;">2021年度榜单</li>
            <li  style="display: inline-block;">2021书影音报告</li>
            <li  style="display: inline-block;">购物车</li>
        </ul>
    </div>
    <div style="height: 27px; background-color: #ffffff; color: #9B9B9B; font-size: 13px;" >
        <span style="color: #111; font-size: 18px;">新书速递</span>
        <ul style="line-height: 27px; display: inline-block;">
           <li style="display: inline-block;">全部</li>
           <li style="display: inline-block;">文学</li>
           <li style="display: inline-block;">小说</li>
           <li style="display: inline-block;">历史文化</li>
           <li style="display: inline-block;">社会纪实</li>
           <li style="display: inline-block;">科学新知</li>
           <li style="display: inline-block;">艺术设计</li>
           <li style="display: inline-block;">商业经管</li>
           <li style="display: inline-block;">绘本漫画</li>
        </ul>
    </div>
    <hr />
    <div>
        <h2>畅销图书榜</h2>
        <hr />
        <ul  style="height: 27px; background-color: #ffffff; color: #3377AA; font-size: 13px;">
            <li style="display: block;">1.钝感力<br/>
                [日] 渡边淳一</li><hr/>
            <li style="display: block;">2.尘埃落定<br/>
                阿来</li><hr/>
            <li style="display: block;">3.生死疲劳<br/>
                莫言</li><hr/>
            <li style="display: block;">4.恐龙小q-四季变化：科普认知绘本<br/>（套装全4册）
            </li><hr/>
            <li style="display: block;">5.小小聪明豆绘本系列<br/>
                阿克塞尔·舍夫勒/绘</li><hr/>
            <li style="display: block;">6.张嘉骅少年读经典系列<br/>
                张嘉骅 著/郑慧荷 绘</li><hr/>
            <li style="display: block;">7.苏东坡传<br/>
                林语堂</li><hr/>
            <li style="display: block;">8.瓦尔登湖<br/>
                王光林（译）</li><hr/>
            <li style="display: block;">9.活着<br/>
                余华</li><hr/>
            <li style="display: block;">10.《宋朝的腔调》<br/>
                石继航</li><hr/>
        </ul>
    </div>
</body>

</html>