Web前端HTML基础（二）——标题、横线和换行

最新推荐文章于 2024-07-08 14:13:57 发布

山坊

最新推荐文章于 2024-07-08 14:13:57 发布

阅读量2.9k

点赞数 22

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_74298002/article/details/135717971

版权

本文介绍了HTML的基本框架，包括如何使用<h1>到<h6>定义标题，添加属性控制段落和标题样式，以及单标签（如<br>和<img>）和双标签（如<p>和<a>）的区别。还详细讲解了如何使用和调整hr标签的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

了解了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>
	hello,world 
</body>
</html>

标题标签：

当然，我们并不满足自己的网页上只有一个‘hello，world’

我们可以使用<h1>一级标题</h1>进行写标题：用<h1>-<h6>来定义1-6级标题

直接输入h1然后回车生成<h1></h1>，不同等级的标题所对应的而字体大小不同。

快捷键: h$*5 一步生成<h1>-<h5>

<!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>
<h1 align="center">haha</h1><!-- 在标签中添加属性align="left/center/right"默认为居左，center为中，改right为右
属性为<h1>的M<>里的。 -->
<h2>auau</h2>
<h3>sasa</h3>

</body>

</html>

注意：

在标签中添加属性align="left center right"默认为居左，center为中，改right为右

段落标签：

p+回车，即可生成一个段落标签

p标签是一个双标签

hr标签——生成一道横线：

hr+回车即可生成一个hr标签，在网页中的体现为一条横线

这条横线是一个可以改变其属性的标签L:

color=“”属性改变横线的颜色

width=“”属性改变横线的长度

size=“”属性改变横线的粗细

align=“”设置对齐位置，默认为居中对齐

hr标签是一个单标签

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>我是一个段落标签</p><!-- 段落标签/kuaijie键为单击‘p’+回车 --><!-- 要用标签去承载文本，否则不利于调整文本的样式 -->
    <p>我是另一段，<br>我跟上面是同一段。</p><!-- br:在不产生一个新的段落的前提下进行换行 -->
    <hr>                  <!-- 产生一条横线 --><!-- hr也是一个单标签 -->
    <hr color="yellow">   <!-- color：设置颜色 -->
    <hr width="5px">        <!-- width：长度——px代表像素单位 --><!-- 屏幕像素长度大约2000px -->
    <hr size="22">        <!-- size——线的宽度 -->
    <hr align="center">   <!-- align：设置对齐位置 --><!-- 默认为居中 -->
    <hr color="red" width="500px" size="3" align="right">
</body><!-- 记得Ctrl S保存 --><!-- <br>是一个单标签 -->
</html>

运行效果：