HTML常用标签及标签属性

ZTφ

已于 2023-12-05 10:34:43 修改

阅读量88

点赞数

文章标签： html 算法前端

于 2023-12-04 12:55:17 首次发布

本文链接：https://blog.csdn.net/Dyj12333/article/details/134779745

版权

什么是HTML

HTML全称Hyper Text Markup Language，即一种用于创建网页的标准标记语言。它使用一系列标签来定义文本、图像、链接等元素，并允许将它们嵌入到网页中。

什么是HTML标签

HTML标签说白了就是一种样式，告诉浏览器该怎么显示文本或图像，用<>这种尖括号方式。

HTML标签

<b>标签

粗体效果。

<b>这是一个b标签</b>

效果：

<i>标签

斜体效果。

<i>这是一个i标签</i>

效果：

<p>标签

段落标签，一个p标签表示一段不换行。

<p>这是一个p标签</p>

效果：

<h>标签

h标签表示标题一般字号会根据h后面跟着的数字的增大而减小

    <h1>这是一个h1标签</h1>
    <h2>这是一个h2标签</h2>
    <h3>这是一个h3标签</h3>
    <h4>这是一个h4标签</h4>
    <h5>这是一个h5标签</h5>
    <h6>这是一个h6标签</h6>

效果：

<a>标签

创建一个链接，链接里面可以是本系统的其他网页，也可以是其他域名的网页，也可以是其他标签。

<a href="https://www.example.com">这是一个链接</a>

注意：一定要有href关键字。

<img>标签

在网页插入一张图片。

<img src="../HelloWorld/1693920290886.png" alt="demo">

src：这个属性指定了图片的路径。

alt：这个属性提供了图片的替代文本。当图片无法显示时，浏览器会显示这个替代文本。

列表标签

<ul>标签

创建无序列表。

    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>

li（列表项）：使用标签表示列表中的单个项目。

效果：

<ol>标签

创建有序列表。

    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
      </ol>

效果：

<dl>标签

创建定义列表。

    <dl>
        <dt>苹果</dt>
        <dd>一种水果</dd>
        <dt>香蕉</dt>
        <dd>另一种水果</dd>
      </dl>

效果：

HTML标签属性

HTML标签的属性用于为标签添加额外的信息，是附加在HTML元素上的键值对，用于提供额外的信息或功能。这些属性通常以名称和值的形式出现。

class：指定元素的类名，用于样式表选择器。

id：指定元素的标识符，用于唯一标识一个元素。

style：指定元素的内联样式。

src：指定图像的源文件路径。

href：指定链接的目标URL。

target：指定链接的打开方式（例如在新窗口中打开）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myClass {
            color: blue;
            font-size: 20px;
        }
        #myId {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
   <!-- class实例 -->
   <div class="myClass">Hello World!</div>
   <!-- id实例 -->
   <div id="myId">Hello Again!</div>
   <!-- style实例 -->
   <div style="color: yellow;">Hello Again And Again!</div>
   <!-- src实例 -->
   <img src="image.jpg" alt="Image">
   <!-- href实例 -->
   <a href="https://www.baidu.com">百度</a>
   <!-- target实例 -->
   <a href="https://www.baidu.com" target="_blank">百度</a>
</body>
</html>

rowspan=" 合并行数"

colspan=" 合并列数"

                <table border="1" style="text-align: center;"
                            cellspacing="0" cellpadding=5 align="center">
 
                            <!-- 一行 -->
 
                            <!-- 加载顺序 head - body -foot -->
                            <thead>
                                <tr>
                                    <!-- th会自动居中 加粗字体 -->
                                    <th>班级</th>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>学号</th>
                                    <th>性别</th>
                                    <th>宿舍</th>
                                    <th>籍贯</th>
                                    <th>兴趣1</th>
                                    <th>兴趣2</th>
                                    <th>兴趣3</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <td colspan="10">
                                        <h3>合计人数8人</h3>
                                    </td>
                                </tr>
                            </tfoot>
                            <!-- 都会在表格的最上面显示 -->
                            <caption><h1>班级学生信息统计</h1></caption>
                            <tbody>
                                <tr>
                                    <!-- 行合并 rowspan="合并的行数" -->
                                    <td rowspan="5">工业应用软件开发</td>
                                    <td>李四</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N616</td>
                                    <td>安徽</td>
                                    <td colspan="3">篮球</td>
                                </tr>
                                <tr>
 
                                    <td>王五</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N616</td>
                                    <td>安徽</td>
                                    <td>篮球</td>
                                    <td>唱跳</td>
                                    <td>Rap</td>
                                </tr>
                                <tr>
 
                                    <td>赵六</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N618</td>
                                    <td>安徽</td>
                                    <td>篮球</td>
                                    <!-- colsapn 合并列 -->
                                    <td colspan="2">唱跳</td>
 
                                </tr>
                                <tr>
 
                                    <td>孙七</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N618</td>
                                    <td>安徽</td>
                                    <td>篮球</td>
                                    <td>唱跳</td>
                                    <td>Rap</td>
                                </tr>
                                <tr>
 
                                    <td>王八</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N618</td>
                                    <td>安徽</td>
                                    <td colspan="2">篮球</td>
                                    <td>唱跳</td>
                                </tr>
                                <tr>
                                    <!-- 行合并 rowspan="合并的行数" -->
                                    <td rowspan="5">智能软件开发班</td>
                                    <td>李四</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N616</td>
                                    <td>安徽</td>
                                    <td>篮球</td>
                                    <td>唱跳</td>
                                    <td>Rap</td>
                                </tr>
                                <tr>
 
                                    <td>王五</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N616</td>
                                    <td>安徽</td>
                                    <td>篮球</td>
                                    <td>唱跳</td>
                                    <td>Rap</td>
                                </tr>
                                <tr>
 
                                    <td>赵六</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N618</td>
                                    <td>安徽</td>
                                    <td>篮球</td>
                                    <td>唱跳</td>
                                    <td>Rap</td>
                                </tr>
                                <tr>
 
                                    <td>孙七</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N618</td>
                                    <td>安徽</td>
                                    <td>篮球</td>
                                    <td>唱跳</td>
                                    <td>Rap</td>
                                </tr>
                                <tr>
 
                                    <td>王八</td>
                                    <td>21</td>
                                    <td>20201014</td>
                                    <td>女</td>
                                    <td>A19N618</td>
                                    <td>安徽</td>
                                    <td>篮球</td>
                                    <td>唱跳</td>
                                    <td>Rap</td>
                                </tr>
                            </tbody>
 
                        </table>