前端02——HTML排版标签

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

排版标签包括：

、

、、、

。 
标题标签 
标题使用
至标签进行定义。 
定义最大的标题，定义最小的标题。 
具有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>Documenttitle>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 

 如图，这里中文出现了乱码，是因为html文件的存储编码和显示编码不一致。可能是因为我的html文件是先新建一个txt文件再改为html文件，所以我手动修改了html文件的编码格式为utf-8，问题解决。
  
段落标签 
将HTML文档分为若干段落。也具有align属性，属性值可以是：left、center、right，表示文字的对齐为居左、居中或居右。 
HTML标签可以分为两类：文本级标签和容器级标签。 
文本级标签只可以放文字、图片、表单元素；容器级标签可以放任意东西。 
文本级标签：p、span、a、b、i、u、em。（a标签里不能放a和input）。
容器级标签：div、h系列、li、dt、dd。 
标签是一个文本级标签，不能嵌套h！ 
代码及其示例： 
DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<body>
	<h1 align="center">H1：千古壹号，永不止步h1>
	<h2 align="right">H3：千古壹号，永不止步h2>
	<h3 align="left">H3：千古壹号，永不止步h3>
    <p>This is a paragraphp>
    <p align="center">This is another paragraphp>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 
 
水平线标签 
一条水平线。包括的属性有： 
align="属性值"：left right center。意义同上。 size="2" ：设定线条粗细。以像素为单位，默认为2。
width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，默认为100%。
color="#0000FF"：设置线条颜色。
noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。 
代码及其示例： 
DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<body>
	<h1 align="center">H1：千古壹号，永不止步h1>
	<h2 align="right">H3：千古壹号，永不止步h2>
	<h3 align="left">H3：千古壹号，永不止步h3>
    <p>This is a paragraphp>
    <hr align="center" size="15" width="500" color="#0110FF">hr>
    <p align="center">This is another paragraphp>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 
 
换行标签
 
强制换行。 
代码及其示例： 
DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<body>
	<h1 align="center">H1：千古壹号，永不止步h1>
	<h2 align="right">H3：千古壹号，永不止步h2>
	<h3 align="left">H3：千古壹号，永不止步h3>
    <p>This is a paragraphp>
    <hr align="center" size="15" width="500" color="#0110FF">hr>
    <p align="center">This <br>is<br> another<br> paragraphp>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 
 
标签和标签 
标签：把标签里的内容分为独立的区块，必须单独占一行，即会换行。包括align属性。容器级标签。“div+css”即div标签负责布局、结构、分块，css负责样式。
标签：与作用一致，但是不换行。文本级标签。 
代码及其示例： 
DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<body>
	<h1 align="center">H1：千古壹号，永不止步h1>
	<h2 align="right">H3：千古壹号，永不止步h2>
	<h3 align="left">H3：千古壹号，永不止步h3>
    <p>This is a paragraphp>
    <hr align="center" size="15" width="500" color="#0110FF">hr>
    <p align="center">This <br>is<br> another<br> paragraphp>
    <div>div标签1div>
    <div>div标签2div>
    <span>span标签1span>
    <span>span标签2span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 
 
内容居中标签 
center标签里的内容都会居中. 
但是HTML5里面，center标签不建议使用，建议使用css布局来实现。 
代码及其示例： 
DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<body>
    <h1 align="center">H1：千古壹号，永不止步h1>
    <h2 align="right">H3：千古壹号，永不止步h2>
    <h3 align="left">H3：千古壹号，永不止步h3>
    <p>This is a paragraphp>
    <hr align="center" size="15" width="500" color="#0110FF">hr>
    <p align="center">This <br>is<br> another<br> paragraphp>

<center>
    <div>div标签1div>
    <div>div标签2div>
    <span>span标签1span>
    <span>span标签2span>
center>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 
 
预定义（预格式化）标签 
含义：将保留标签内部所有的空白字符(空格、换行符)，原封不动地输出结果（告诉浏览器不要忽略空格和空行）。
说明：真正排网页过程中，标签几乎用不着。 
代码及其示例： 
DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<body>
    <h1 align="center">H1：千古壹号，永不止步h1>
    <h2 align="right">H3：千古壹号，永不止步h2>
    <h3 align="left">H3：千古壹号，永不止步h3>
    <p>This is a paragraphp>
    <hr align="center" size="15" width="500" color="#0110FF">hr>
    <p align="center">This <br>is<br> another<br> paragraphp>

<center>
    <div>div标签1div>
    <div>div标签2div>
    <span>span标签1span>
    <span>span标签2span>
center>
    <pre>
        随便写写
                                          不知所云
    pre>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 
 
HTML 注释 

1

相关阅读:
基于阿基米德优化算法优化概率神经网络PNN的分类预测 - 附代码
 【BUG修复日志】Anaconda + VSCode 编码错误
 重新理解云原生
 自动安装系统-桌面
 【有ISSN、ISBN号！！往届均已完成EI检索】2024年第四届计算机视觉与模式分析国际学术大会（ICCPA 2024）
月薪20k的软件测试工程师都要具备什么能力？你跟大佬的差距在哪？
在线博客系统——ThreadLocal详解
 μC/OS-II---整理学习1
计算机毕业设计（附源码）python-志愿者管理系统
 从理论走向实战！阿里高工熬夜整理出的 Spring 源码速成笔记太香了
原文地址：https://blog.csdn.net/zhang_han666/article/details/126377924