那些酷炫的网页你也可以做到——第二篇（HTML排版）

女爷i 2022-11-13 11:25 133阅读 0赞

前情回顾（不断复习）：  
[HTML第一篇][HTML]

## HTML的排版标签 ##

**HTML注释**

排版布局：类似于以前画的黑板报，需要将图片文字等进行布局，  
达到最好的展示效果。

<p></p>   段落标签
    特点：标签的开始和结尾默认产生一行空行
    属性：align     
    对齐方式：center（中间对齐）、left（向左对齐）、
    right（向右对齐）、justify（两端对齐）

<pre>预设格式标记
    作用：令文件按照原始码的排列方式显示
    <br />换行标签

下面我们看一个实例：

<body>
        这是主体标签 <br>
        感谢关注，共同学习。 <br>
    <p>
                  静夜诗
               床前明月光， 
               疑是地上霜，
               举头望明月，
               低头思故乡。
    </p>
      </body>

执行结果：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70]  
加入预设格式标记

<body>
        这是主体标签 <br>
        感谢关注，共同学习。 <br>
    <p>
    <pre>
                  静夜诗
               床前明月光， 
               疑是地上霜，
               举头望明月，
               低头思故乡。
    </p>
      </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70 1]

<hr />水平线标签，加上这个之后页面上出现一条水平线
    属性：1.color颜色属性
    （1）<hr color="red" />
    （2） RGB三原色（red、green、blue）：
                   #12af90，三组十六进制。
                 3个字节的二进制位：000000~FFFFFF
    2.width，宽度属性，水平线宽度
    （1）直接写像属值：200px
    （2）编写百分比：30%，代表整个屏幕像素的30%
    <hr color="red" width="300" />
     <hr color="red" width="30%" />
     <div></div>    在网页上声明一块区域，
     div是块级元素，内容后面默认有换行。
     <span></span> 在页面上声明一块区域，
     span标签是行内元素，默认在一行。

<!DOCTYPE html>
    <html>
      <head>
        <title>这是头部标签</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        
    
      </head>
      
      <body>
        这是主体标签 <br>
        感谢关注，共同学习。 <br>
    <p>
    <pre>
    
                  静夜诗
               床前明月光， 
               疑是地上霜，
               举头望明月，
               低头思故乡。
    </p>
    <hr color="red" width="300" align="center">
    <div><pre>
                                                          大家好，我是静静的雨，感谢大家点开这篇文章，希望我的文章可以帮助到你，加油，一起学习。
    
    </div>
    <hr color="red" width="300" align="center">
    <span>
    留个关注，避免迷路。
    </span>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70 2]

[HTML]: https://blog.csdn.net/qq_46285118/article/details/115176857?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70]: /images/20221022/78dfc8efd95b46d0b484177e48d0d95b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/21d7c0c7558f42b2b10e9bad7b1154e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70 2]: /images/20221022/c8a3ca6d39c24de49fa27e0fcefbaf1c.png