前端02——HTML排版标签

本系列文章是是博主自己的学习前端笔记，所有笔记参照：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="left">H3：千古壹号，永不止步</h3><p>This is a paragraph</p><p align="center">This is another paragraph</p>
</body>
</html>

水平线标签`<hr>`

一条水平线。包括的属性有：

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>Document</title>
</head>
<body><h1 align="center">H1：千古壹号，永不止步</h1><h2 align="right">H3：千古壹号，永不止步</h2><h3 align="left">H3：千古壹号，永不止步</h3><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This is another paragraph</p>
</body>
</html>

换行标签`<br>`

强制换行。

代码及其示例：

<!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><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This <br>is<br> another<br> paragraph</p>
</body>
</html>

`<div>`标签和`<span>`标签

<div>标签：把标签里的内容分为独立的区块，必须单独占一行，即会换行。包括align属性。容器级标签。“div+css”即div标签负责布局、结构、分块，css负责样式。
<span>标签：与<div>作用一致，但是不换行。文本级标签。

代码及其示例：

<!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><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This <br>is<br> another<br> paragraph</p><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span>
</body>
</html>

内容居中标签`<center>`

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>Document</title>
</head>
<body><h1 align="center">H1：千古壹号，永不止步</h1><h2 align="right">H3：千古壹号，永不止步</h2><h3 align="left">H3：千古壹号，永不止步</h3><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This <br>is<br> another<br> paragraph</p><center><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span>
</center></body>
</html>

预定义（预格式化）标签`<pre>`

含义：将保留标签内部所有的空白字符(空格、换行符)，原封不动地输出结果（告诉浏览器不要忽略空格和空行）。
说明：真正排网页过程中，<pre>标签几乎用不着。

代码及其示例：

<!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><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This <br>is<br> another<br> paragraph</p><center><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span>
</center><pre>随便写写不知所云</pre></body>
</html>

HTML 注释

<!-- 我是 html 注释  -->