HTML基本标签

最新推荐文章于 2024-11-08 10:30:00 发布

actavy

最新推荐文章于 2024-11-08 10:30:00 发布

阅读量999

点赞数 30

文章标签： html 前端

本文链接：https://blog.csdn.net/actavy/article/details/141649854

版权

文章目录

HTML介绍
HTML标签介绍

HTML介绍

HTML（HyperText Markup Language）是超文本标记语言。它由一系列的元素（即标签）组成，每个标签都表示页面上的不同内容或元素，如文本、图像、链接等。HTML被用来描述网页的结构，并且在网页浏览器中解释显示这些结构，使网页内容呈现出来。

HTML标签介绍

标题标签

标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行，并且标题标签是块元素。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题等级标签</title>
</head>

<body>
    <h1>h1一级标题</h1>
    <h2>h2二级标题</h2>
    <h3>h3三级标题</h3>
    <h4>h4四级标题</h4>
    <h5>h5五级标题</h5>
    <h6>h6六级标题</h6>
</body>

</html>

运行结果：

段落标签

段落标签p,里面的内容是以段落的形式体现的，如果一个段落的文字太多，那么它会自适应浏览器窗口，一行显示不下，则会换行；如上面的运行结果。它代表着一个自然段。段落标签是块元素。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>

<body>
    <p>
        我是第一段的第一句，
        我是第一段的第二句，
        我是第一段的第三句，
        我是第一段的第四句，
        我是第一段的第五句，
        我是第一段的第六句，
        我是第一段的第七句，
        我是第一段的第八句，
        我是第一段的第九句，
        我是第一段的第十句，
        我是第一段的第十一句，
        我是第一段的第十二句，
        我是第一段的第十三句，
        我是第一段的第十四句，
    </p>
</body>

</html>

运行结果：

换行标签

换行标签br的作用是，强制换行，如上代码如果不加br标签。那么它就会在一行上显示i。br是单标签。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行标签</title>
</head>

<body>
    第一行

    第二行

    第三行

</body>

</html>

运行结果：

span标签

用于对文档中的行内元素进行组合。标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对应用样式，那么元素中的文本与其他文本不会任何视觉上的差异。标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。标签不同于

标签是一个行内元素（不独占一行）

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span>1234</span>
    <span>5678</span>
</body>

</html>

运行结果：

div标签

标签可以看出是一个盒子容器，这里面可以放别的标签，div 标签是一个块元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>这是一个div</div>
    <div>这是一个div</div>
    <div>
        <p>这是一个div</p>
    </div>
    <p>
    <div>z5343</div>

</body>

</html>

运行结果：

img标签

<img src=“图片的路径” alt=“图片未加载成功时的提示” title=“鼠标悬浮时提示信息” width=“宽” height=“高(宽高两个属性只用一个会自动等比缩放)”>
src的路径分为：网上的图片路径和本地的图片路径

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="./images/用户标签.svg" alt="User" width="100" height="100" title="User">
</body>

</html>

运行结果：

超链接标签

作用：点击文字跳到链接的地方，a是行内元素
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>
</head>

<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
</body>

</html>

运行结果：

特殊字符

格式化标签

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <ins>下划线</ins>

</body>

</html>

运行结果：