HTML基础（标题/段落/链接/图像）

最新推荐文章于 2022-12-05 10:00:00 发布

搬砖的小小

最新推荐文章于 2022-12-05 10:00:00 发布

阅读量262

点赞数

分类专栏： html学习

本文链接：https://blog.csdn.net/qq_43677691/article/details/114996660

版权

html学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

HTML标题
HTML段落
HTML链接
HTML图像

HTML标题

HTML标题（heading）是通过<h1>——<h6>标签来定义的。HTML中有六个级别的标题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML标题示例</title>
    </head>
    
    <body>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
    </body>
</html>

效果如下：
在这里插入图片描述

HTML段落

HTML段落是通过<p>标签来定义的。p元素会自动在其后面创建一些空白。浏览器会自动添加这些空间。
p标签定义的段落会根据浏览器窗口显示，但是不会自动不会换行。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML标题示例</title>
    </head>
    
    <body>
        <p>这是一个段落</p>
        <p>这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的段落</p>
    </body>
</html>

效果如下：
在这里插入图片描述

HTML链接

HTML链接是通过<a>来定义的，用于从一个页面链接到另一个页面。
<a>元素最重要的属性是href属性，它指示链接的目标。在所有浏览器中，链接的默认外观是：未被访问的链接带有下划线而且是蓝色的，已被访问的链接带有下划线而且是紫色的。活动链接带有下划线而且是红色的。

注：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。请使用 CSS 来设置链接的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML链接示例</title>
    </head>
    
    <body>
        <a href="http://www.baidu.com">这是一个使用了href 属性的链接</a>
    </body>
</html>

未被访问的链接：
在这里插入图片描述

未被访问的链接：已被访问的链接：
在这里插入图片描述

HTML图像

HTML 图像是通过标签 <img> 来定义的。其作用就是在网页中插入一张图片。
<img> 标签创建的是被引用图像的占位空间。<img> 标签有两个必需的属性：src 属性和 alt 属性。
注意：在 HTML 中，<img> 标签没有结束标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML链接示例</title>
    </head>
    
    <body>
        <img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/baiduyun@2x-e0be79e69e.png" alt="无法显示图像">
    </body>
</html>