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。可以放置任何东西

posted @ 2024-07-04 15:54  重生之我在异界写程序  阅读(46)  评论(0)    收藏  举报