HTML基础教程2——排版标签

279 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第13天,点击查看活动详情

HTML基础教程2——排版标签

标题

标题是通过<h1> ~ <h6>标签定义的,标题等级从<h1> ~ <h6>从大到小,标题等级越大对应的字体越大,标题默认为粗体,标题属于块元素,自动换行。

QQ图片20220402210551.png

段落

段落通过<p>标签定义,段落同样属于块元素,会自动换行,换行的距离相当于两个<br>标签的距离。

QQ图片20220402210934.png

HTML中<pre>标签比较特殊可以将文本以代码中的格式显示在页面中,包括换行等 QQ图片20220402220359.png

换行符

换行符通过<br>标签实现,也可以使用<br/>表示 QQ图片20220402213335.png 为什么要使用换行符? 因为HTML中不会接收enter所以换行需要使用标签让电脑明白你的需求。 无论是否使用换行符,在文本长度达到盒子长度(默认为浏览器宽度)都会自动换行 如果我们不想文本到达一定长度就换行可以用<nobr>标签强制文本不换行。 QQ图片20220402213934.png

分割线

分割线通过<hr>标签实现。 QQ图片20220402214249.png <hr>标签默认属性size(分割线的粗度)为1,width(分割线的宽度)为浏览器宽度,color(分割线颜色)为黑色,这些属性可以根据需求修改。

综合练习

制作一个如下图所示的页面, QQ图片20220402215405.png 首先进行分析古诗的题目应该用标题标签因此我们选择<h1>标签,诗题下分割线用<hr>标签,作者以及朝代我们可以选择<h3>标签,最后诗的主体用<p>标签,除此之外诗主体每一句都独处一行说明每一句的后面都需要用上一个<br>标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>排版标签练习</title>
	</head>
	<body>
		<h1>陋室铭</h1>
		<hr>
		<h3>刘禹锡(唐代)</h3>
		<p>山不在高,有仙则名。
		<br>
		水不在深,有龙则灵。
		<br>
		斯是陋室,惟吾德馨。
		<br>
		苔痕上阶绿,草色入帘青。
		<br>
		谈笑有鸿儒,往来无白丁。
		<br>
		可以调素琴,阅金经。
		<br>
		无丝竹之乱耳,无案牍之劳形。
		<br>
		南阳诸葛庐,西蜀子云亭。
		<br>
		孔子云:何陋之有。
		</p>
	</body>
</html>

(点击进入专栏查看详细教程)