HTML常用标签

叶子与海

已于 2022-10-06 11:14:52 修改

阅读量2k

点赞数 16

分类专栏： HTML CSS 文章标签： html 前端

于 2022-09-14 21:28:06 首次发布

本文链接：https://blog.csdn.net/btufdycxyffd/article/details/126859559

版权

HTML CSS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.文本标签

标题标签<h1></h1>

h1~h6逐渐变小

段落标签<p></p>

段落标签会自动换行，并且段落与段落之间有一定的间距。

换行标签<br>

自闭合标签，br是break（换行）的缩写。

文本标签

平时用更有语义性的标签(加粗的）

粗体标签：strong b

斜体标签：i、em cite（emphasize）

上标标签：sup（superscripted）

下标标签：sub（subscripted）

中划线标签：del s

下划线标签：ins u

大字号标签：big

小字号标签：small

水平线标签<hr/>
div标签

划分区域

特殊符号

一般标签和自闭合标签

一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。

自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

需要注意的是，在HTML5标准中，自闭合标签中的“/”，加与不加都是可行的。

块元素和行内元素

标签，也叫“元素”，例如p标签又叫p元素。叫法不同，意思相同。

块元素（block）

块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。如p、div、hr等。两大特点：

（1）块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
（2）块元素内部可以容纳其他块元素和行内元素。

行内元素（inline）

（1）行内元素可以与其他行内元素位于同一行。
（2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

代码演示：

<!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>Document</title>
</head>
<body>
    <!--标题标签-->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

    <!--段落标签-->
    <hr><!--水平线-->
    这是内容巴拉巴拉<br><!--强制换行-->
    换行了
    <p>这是一段</p>
    <p>这是另一段</p>

    <!--文本标签-->
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>
    <sub>下标</sub>
    <!--划分区域-->
    <div>
        <sup>上标</sup>
        <big>大字号</big>
        <small>小字号</small>
    </div>

    <!--特殊符号-->
    <p>欧元符号：&euro;</p>
    <p>英镑符号：&pound;</p>
</body>
</html>

效果：

2.媒体标签

图片标签

<img src="" alt="" title="" />

alt属性：显示失败的替换文字 title属性：鼠标悬停时显示

width和height还能设置宽高，如果只填一个，其他一个等比例缩放

路径

1.绝对路径：图片在电脑中的完整路径

2.相对路径：图片相对当前页面的位置

图片格式

1.jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。

2.png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。

3.gif图片效果最差，不过它适合制作动画。

音频标签

<audio src="love.mp3" controls autoplay loop></audio>

controls显示播放控件 autoplay自动播放(一般浏览器不支持） loop循环播放

视频标签

<video src="video.mp4" controls autoplay width="200"></video>

代码演示：

<!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>Document</title>
</head>
<body>
    <!--图片标签-->
    <img src="cat.gif" title="我是title，鼠标悬停时显示" width="200" height="166">
    <img src="cat1.gif" alt="显示失败，我是替换文字">

    <!--绝对路径-->
    <!--"如F:\前端\html"-->

    <!--相对路径-->
    <img src="cat.gif">
    <img src="./cat.gif">
    <!--上级目录-->
    <img src="../cat1.gif">  
    <!--下级目录-->
    <img src="next/love.jpg">  
    <!--上级的下级目录-->
    <img src="../early/lovely.gif">
    <br>

    <!--音频标签-->
    <audio src="love.mp3" controls autoplay loop></audio>
    <!--视频标签-->
    <video src="video.mp4" controls autoplay width="200"></video>

</body>
</html>

效果：

3.链接标签

使用a标签来实现超链接：

<a href="链接地址">文本或图片</a>

target属性：

<a href="链接地址" target="打开方式"></a>

内部链接：自身网站的页面

锚点链接：内部链接的一种，点击某一个超链接，然后它就会跳到当前页面的某一部分。

代码演示：

<!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>Document</title>
</head>
<body>
    <!--文本超链接-->
    <a href="https://www.baidu.com/" >跳转到百度</a>
    <!--图片超链接-->
    <a href="https://www.baidu.com/" ><img src="baidu.png"></a>

    <!--target属性-->
    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

    <a href="./02媒体标签.html">内部链接</a>

    <!--锚点链接-->
    <div>
        <a href="#article">文章</a>
        <a href="#music">音乐</a>
        <a href="#movie">电影</a>
    </div>
    <div id="article">
        <h3>文章</h3>
        <ul>
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </ul>
    </div>
    <br>
    <br>
    <br>
    <div id="music">
        <h3>音乐</h3>
        <ul>
            <li>222</li>
            <li>222</li>
            <li>222</li>
        </ul>
    </div>
    <br>
    <br>
    <br>
    <div id="movie">
        <h3>电影</h3>
        <ul>
            <li>333</li>
            <li>333</li>
            <li>333</li>
        </ul>
    </div>
</body>
</html>

效果：