前端02——HTML排版标签

最新推荐文章于 2024-09-18 21:27:36 发布

圆滚滚的柴柴

最新推荐文章于 2024-09-18 21:27:36 发布

阅读量591

点赞数

分类专栏：前端文章标签：前端 html

本文链接：https://blog.csdn.net/zhang_han666/article/details/126377924

版权

本文是博主学习前端的笔记，详细介绍了HTML中的排版标签，包括标题、段落、水平线、换行、居中等标签的使用方法，以及属性设置。通过代码示例展示各个标签的效果，并提醒读者注意编码格式对文本显示的影响。

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

本系列文章是是博主自己的学习前端笔记，所有笔记参照：Github。

排版标签包括：<h1> 、<p> 、<hr /> 、<br /> 、<div> 、<span> 、<center> 、<pre>。

标题标签`<h>`

标题使用<h1>至<h6>标签进行定义。

<h1>定义最大的标题，<h6>定义最小的标题。

具有align属性，属性值可以是：left、center、right，表示文字的对齐为居左、居中或居右。

代码示例及其效果：

<!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">H1：千古壹号，永不止步</h1>
	<h2 align="right">H3：千古壹号，永不止步</h2>
	<h3 align="left">H3：千古壹号，永不止步</h3>
	<h4>H4：千古壹号，永不止步</h4>
	<h5>H5：千古壹号，永不止步</h5>
	<h6>H6：千古壹号，永不止步</h6>
</body>
</html>

中文乱码
如图，这里中文出现了乱码，是因为html文件的存储编码和显示编码不一致。可能是因为我的html文件是先新建一个txt文件再改为html文件，所以我手动修改了html文件的编码格式为utf-8，问题解决。
中文正常显示

段落标签`<p>`

将HTML文档分为若干段落。也具有align属性，属性值可以是：left、center、right，表示文字的对齐为居左、居中或居右。

HTML标签可以分为两类：文本级标签和容器级标签。

文本级标签只可以放文字、图片、表单元素；容器级标签可以放任意东西。

文本级标签：p、span、a、b、i、u、em。（a标签里不能放a和input）。
容器级标签：div、h系列、li、dt、dd。

<p>标签是一个文本级标签，不能嵌套h！

代码及其示例：

<!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">H1：千古壹号，永不止步</h1>
	<h2 align="right">H3：千古壹号，永不止步</h2>
	<h3 align=