HTML标签总结-CSDN博客

本文链接：https://blog.csdn.net/benxiangsj/article/details/126719469

HTML总共分为网页基本标签，图像标签、超链接标签、列表标签、表格标签

网页基本标签用来写标题，段落等，是关于文字的

图像标签是用来在网页中插入图片，是通过图片路径插入的，可以通过图像标签设置图片大小、悬停文字等。

超链接标签是用来跳转连接的，也可以通过锚标签来实现跳转

列表标签使信息以列表的形式显示出来

一、网页基本标签

1、标题标签 <h1>

<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

2、段落标签

两个p标签的内容，不会出现在同一行。标签之间会有一定的间距（段间距）

<!-- 段落标签 -->
 <p> 就快要夜深人静了</p>
 <p>反对的只剩下月亮</p> 
 <p>我会攥着小糖 眺望你方向</p>  
 <p>快告诉我 你在赶来的路上</p>  
 <p>我可以陪你去流浪</p>

小技巧：

1.使用lorem+tab键会自动生成一段随机的长文本，对于排版测试非常有帮助

2.同时给多个段落构造一串随机的长文本：

采用的是vscode中的“列编辑”模式，按住alt键，鼠标左键在要添加光标的位置点一下

3、换行标签

<!-- 换行标签 -->
就快要夜深人静了  <br/>
反对的只剩下月亮  <br/>
我会攥着小糖 眺望你方向  <br/>
快告诉我 你在赶来的路上  <br/>
我可以陪你去流浪   <br/>

4、水平线标签 <hr/>

5、字体样式标签

<!-- 粗体，斜体 -->
<h1>字体样式标签</h1>
粗体：<strong>I LOVE XSJ</strong>
斜体：<em>I LOVE XSJ</em>

6、注释和特殊符号

<!-- 特殊符号 -->
空 格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>

大于号
&gt;
<br/>

小于号
&lt;
<br/>

版权所有
&copy;版权所有yn

效果预览

二、图像标签

常见的图像格式：JPG GIF PNG BMP（位图）......

src:图片地址，其分为相对地址，绝对地址（不推荐使用）

../代表上一级目录

alt:图片名字

title:悬停文字

width:图片的宽

height:图片的高

举例：显示前端文件夹下的表情包，并将悬停文字设为哈哈哈，

<body>
    <img src="../前端/resourses/image/1.JPG" alt="表情包">
</body>

三、超链接标签

a:标签

href：必填，表示跳转到哪个页面

target：表示窗口在哪里打开

-blank：在新标签中打开

-self：在自己的网页打开

   <a href="图像标签.html"target="-blank">点击我跳转到图像标签-</a><br/>
    <a href="http://www.baidu.com">点击我跳转到百度-</a>

成果展示：

2、锚链接

1.需要一个锚标记，使用name作为标记

2.跳转到标记

（1）一个页面中跳转

<body>
    <!-- 使用name作为标记 -->
    <a name ="top">顶部</a>
    <a href="图像标签.html"target="-blank">点击我跳转到图像标签-</a><br/>
    <a href="http://www.baidu.com">点击我跳转到百度-</a>
<a href="">回到顶部</a>
</body>

（2）页面间跳转

从图像标签跳转到超链接标签

<body>
    <img src="../前端/resourses/image/1.JPG" alt="表情包"title="哈哈哈">
    <a href="超链接标签.html#top">点击我跳转到超链接标签-</a>
</body>

3、功能性链接

邮件链接：mailto:

<a href="mailto:1019176665@qq.com">点击联系我</a>

QQ推广：使用腾讯的QQ推广

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点此联系我" title="点此联系我"/></a>

四、列表标签

列表的分类：有序列表、无序列表、自定义列表

ol:order list

ul:unorder list

dl表示标签，dt表示列表名称，dd表示列表内容

<body>
    <!-- 有序列表 -->
    <ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c/c++</li>
    </ol>
<hr>
    <!-- 无序列表 -->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>运维</li>
        <li>前端</li>
        <li>c/c++</li>
    </ul>
<hr>
    <!-- 自定义列表 -->
    <dl>
        <dt>学科</dt>
        <dd>c语言</dd>
        <dd>数据结构</dd>
        <dd>Java</dd>

        <dt>位置</dt>
        <dd>安徽</dd>
        <dd>湖南</dd>
        <dd>海南</dd>
    </dl>
</body>

五、表格标签

基本结构：单元格、行、列、跨行、跨列

行：tr

列：td

border:表格线的宽度

colspan:列合并

rowspan:行合并

<table border="1px">
    <tr>
        <td colspan="4">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">小红</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>