html排版标签
HTML排版标签
标题标签
标题使用<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>KindaZhang的标题标签测试</h1> <h2>KindaZhang的标题标签测试</h2> <h3>KindaZhang的标题标签测试</h3> <h4>KindaZhang的标题标签测试</h4> <h5>KindaZhang的标题标签测试</h5> <h6>KindaZhang的标题标签测试</h6> </body> </html>
结果展示：
HTML注释
HTML的注释如下：
<!-- <h6>KindaZhang的标题标签测试</h6> -->
vscode的快捷键是ctrl+/
段落标签<p>
段落：paragraph缩写，属性：align（对齐方式），属性值包括left、center、right
作用：如同写文章分段落，是页面文字更有调理。
代码：
<p>这是一个段落</p> <p align="center">这又是一个段落</p>
结果展示：
水平线<hr />
水平线：horizontal rule
作用：用一条线隔离文档
属性：
-
aligen，设置线条位置。属性值：right、left、center -
size：设置线条粗细。单位是像素，默认为2. -
width:设置线条长度。绝对值（数字、单位是像素）和相对值（百分比，默认为100%）两种表示方法。 -
color：设置线条颜色。 -
noshade：不要阴影、及设定为平面显示。没有这个属性，表明线条具有阴影或立体
代码：
<p>这是一个段落</p> <hr size="5"color="#0000FF"></hr> <p align="center">这又是一个段落</p>
结果：
换行标签<br/>
作用：强制换行
代码：
<p>这又是<br/>一个<br/>段落</p>
结果：
<div>和<span>标签
div：division，分割。将标签内容分割成独立的区块。必须单独占据一行
span：范围、跨度。和div作用一致，但不换行。
属性：div属性--align，设置块的位置，属性值--left、right、center。
代码：
<div>一去二三里</div> <div>烟村四五家</div> <span>亭台六七座</span> <span>八九十枝花</span>
结果：
div和span区别：
-
<div>换行，<span>不换行 -
<div>是一个容器级标签，就是什么标签都可以放。<span>是一个文本级标签，只能防止文字、图片、表单元素。不能放p、h、ul、ol、div。 -
div+css，div标签赋值布局、结构、分块，css负责样式。
预定义（预格式化）标签<pre>
作用：不忽略空格换行、直接输出。几乎不用。
代码：
<pre> 一去二三里 烟村四五家 亭台六七座 八九十枝花 </pre>
结果：
8
标签分级
-
文本级标签：p、span、a、b、i、u、em。文本级标签内只能放文字、图片、表单元素。（a标签内不能放a和input，p标签要记牢）
-
容器级标签：div、h1-h6、li、dt、dd。可以放置任何东西
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY