前端开发学习02 - html基础

回廊

已于 2022-08-18 10:36:49 修改

阅读量45

点赞数

文章标签： html 学习前端

于 2022-08-08 19:07:27 首次发布

本文链接：https://blog.csdn.net/qq_47918606/article/details/126222987

版权

本文介绍了HTML中的基础标签，包括h标签（标题）、p标签（段落）、a标签（链接）和img标签（图像）。h标签用于设置不同级别的标题，p标签定义段落，a标签则用于创建链接，可跳转至网页或实现页面内部定位。img标签用于插入图像，并详细解释了各属性的用途。此外，还提及了hr和br标签，前者创建分隔线，后者实现文本换行。在实际开发中，a标签的灵活性使其能包裹其他标签，实现内容的点击跳转功能。

摘要由CSDN通过智能技术生成

html基础标签

1.h标签（标题标签）

<html>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
</body>
</html>

即便使用了h标签，其文本依然可以使用css修改其字体大小和颜色。

2.p标签（段落标签）

<html>
<body>
    <p>这是段落。</p>
</body>
</html>

简单明了，不做赘述。

3.a标签（链接标签）

<html>
<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>
</html>

a标签最重要的属性是 href 属性，它指示链接的目标。

也可以用a标签实现“返回顶部的效果”

<body>
    <a href="#">点击返回页面顶部</a>
</body>

4.img标签（图像标签）

<head>
    <style>
        img{
            height: 200px;
        }
    </style>
</head>
<body>
    <img src="./img/测试用图片.png" alt="加载失败" title="这是测试用图片">
</body>

其中src属性和alt属性是必带的，src属性负责规定显示图像的 URL，即导入图片；alt属性负责规定图像的替代文本，即图片加载失败后的替换内容；title标签是在鼠标在移动到元素上的文本提示。

以上的几个标签中，a标签经常会使用到，且可以用a标签包裹大部分的标签，使它们运行后的样式也可以实现点击跳转。

<head>
    <style>
        img{
            height: 200px;
        }
    </style>
</head>
<body>
    <a href="#">
        <h1>这个是可跳转的标题</h1>
    </a>
    <a href="#">
        <p>这个是可跳转的段落</p>
    </a>
    <a href="#">
        <img src="./img/测试用图片.png" alt="加载失败" title="这是测试用图片">
    </a>
</body>