JavaWeb-基础标签&样式-05正文-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62858623/article/details/143972633

正文

正文排版

原网页：

原网页引入了一个视频，就需要使用视频标签<video>

音频标签：

正文部分还有文字段落：

strong带有强调语义。

正文排版Code

添加视频：

 <!-- 视频 -->
      <video src="./video/1.mp4"></video>

如果仅仅这样写在网页上会呈现图片，因为没有添加播放控件：

 <video src="./video/1.mp4" controls="controls"></video>

当属性名和属性值相同的时候可以只写属性名：

 <video src="./video/1.mp4" controls></video>

# VScode 自动换行快捷键 ctrl + shift + p 搜索 word wrap

添加音频的话就是用audio标签。

换行标签：br，段落被p标签包裹同时p标签有自动换行的功能，至于段落的首行缩进需要使用css style进行样式设置。

至于网页最后的尾款，编辑人落款是右对齐，那么需要使用id选择器使用plast设置对齐方式。

#plast {
            text-align: right;
        }

id选择器前要加#，类选择器前要加.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无语213审核</title>
    <!-- 内嵌样式 -->
     <style>
        /* 选择器 */
        h1 {
            /* color: red; */
            /* color: rgb(255, 0, 0); */
            /* 十六进制 */
            color: #4D4F53;
            /* 那么如何能够准确的找到某个颜色对应的参数呢，可以使用谷歌的拾词器LIVE COLOR PICKER */
        }
        /* 元素选择器 */
        /* span {
            color: #888 ;
        } */
        /* 类选择器 */
        /* .cls {
            color:#888  ;
        } */
        /* id选择器 */
        #time{
            color:#888;
            font-size: 13px;
        }

        a {
            color:#000 ;
            text-decoration: none;
        }
        p {
            text-indent: 35px;  /*设置缩进*/
            line-height: 40px; /*设置行高*/
        }
        #plast {
            text-align: right;
        }

     </style>

     <!-- 外联样式：将内嵌的style内容直接定义到CSS的外部文件中 -->
      <!-- <link rel="stylesheet" href="./CSS/news.css"> -->
      
</head>
<body>
    <img src="./img\news_logo.png" ><a href="https://gov.sina.com.cn/" target="_blank"> 新浪政务></a> 正文
    
    <!-- <h1 style="color: black;">2b审核</h1> -->
    <h1>2b审核</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日 21:50 </span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span>
    <hr>

    <!-- 正文部分 -->
    <!-- 视频 -->
    <video src="./video/1.mp4" controls="controls" width="950px"></video>
    <!-- 音频 -->
    <!-- <audio src="./audio/1.mp3" controls></audio> -->
    <!-- 文字部分  
            VScode 自动换行快捷键 ctrl + shift  + p 搜索 word wrap-->
    
    <!-- br换行 -->
    <!-- <br> -->
    <!-- 段落自动换行 p -->
    <!-- 首行缩进需要使用css -->
    <img src="./img/9.jpg">
    <p id="plast">
        责任编辑：王树淼 SN242
    </p>
</body>
</html>

小结：

页面布局

可以发现，上面工作结束后，界面的图片总是偏左，所以我们要对布局进行设置显得美观和好看。这就涉及到CSS的盒子模型--重要！！！一般都设置为居中。

页面布局标签：

在实际开发中大量使用div和span两个没有语义的标签。

div单独占一行，那么对于其高度和宽度的设置就是对于该行的设置。

盒子模型理解：

由外而内：margin设置的是网页边界与盒子的距离

border设置的是border和margin之间的分界线以及的分界线的颜色和粗细

background-color设置颜色

box-sizing将上面设置的宽高设置为盒子的宽高，如果没有这个设置那么就是内容的宽高。

如果使得所有内容居中，那么使用div将所有内容包裹起来。

然后使用选择器设置：

#center {
            width: 65%;
            margin: 0 auto;
        }

CODE:网页，可以点击检查查看htmlhttp://file///D:/JavaWeb/HTML/03.%E6%96%B0%E6%B5%AA%E6%96%B0%E9%97%BB-%E6%AD%A3%E6%96%87%E6%8E%92%E7%89%88%E5%92%8C%E6%A0%B7%E5%BC%8F.html