黑马JavaWeb企业级开发（知识清单）03——HTML实现正文：排版（音视频、换行、段落）、布局标签（div、span）、盒子模型

🕗 发布于 2024-07-24 07:04 html 音视频前端 开发语言 笔记

文章目录

前言
一、正文排版
二、布局
三、源代码和运行结果
总结

前言

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）03：实现正文排版、布局的总结，帮助需要学习Web开发的朋友温故而知新。

视频标签< video >、音频标签< audio >
换行标签< br >、段落标签< p >
盒子模型
布局标签< div > < span >

一、正文排版

整个正文部分的排版，主要分为这么四个部分：
- 视频 (当前这种新闻页面,可能也会存在音频)
- 文字段落
- 字体加粗
- 图片

1. 视频标签: < video >

src: 规定视频的url
controls: 显示播放控件
width: 播放器的宽度
height: 播放器的高度

2. 音频标签: < audio >

src: 规定音频的url
controls: 显示播放控件

3. 换行标签: < br >

注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换
行效果, 浏览器是不会解析的, HTML中换行需要通过br标签

4. 段落标签 < p >

如: < p > 这是一个段落 < /p >
文本格式标签
- 前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。
- b标签：
- 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。
- strong标签：

5. vscode实现

实现视频播放
- 如果只是给出视频路径，那么只有图片没有播放按钮
- 加上controls就有了播放按钮播放视频（一定都要写）
- 可以调整播放器的大小
实现音频
- 会自动生成一个音频播放器
实现文字和图片穿插
设置段落缩进、行距和文本向右对齐

二、布局

新浪新闻的原始页面，新闻网页内容都是居中展示的，左边、右边都有一定的边距。

1. 盒子模型

页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
在这里插入图片描述
在vscode 里，我们自设定一个盒子模型，体验一下每个参数的意义：

2. 布局标签< div >和< span >

实际开发网页中，会大量频繁的使用< div >和< span >这两个没有语义的布局标签。

div标签
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
span标签
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）

3. VScode实现

新浪新闻页面布局，上下边界为0，为版心居中布局
直接用div包裹标题和正文部分，设置占比比例和边距，保证文本居中即可

三、源代码和运行结果

由于题材原因，这里的文本信息替换为正文1、正文2…

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性的 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=S, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻</title>

    <style>
        h1 {
            color: rgb(77, 79, 83);
        }

        /* ID选择器 */
        
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }

        a {
            /* 把超链接字体颜色仍然设置为黑色 */
            color: black;

            /* 把下划线的效果去掉 */
            /* 设置文本为一个标准的文本，就默认把下划线去掉了 */
            text-decoration: none;
        }

        p {
            /* 为所有段落设置首行缩进 */
            text-indent: 35px;
            /* 把每一行行距调宽 */
            line-height: 40px;
        }

        #plast {
            /* 设置文本对齐方式，文本靠右对齐 */
            text-align: right;
        }

        #center {
            /* 整个标题和正文内容占整个区域65% */
            width: 65%;

            /* 让div居中展示 */
            /* margin: 0% 17.5% 0% 17.5%; */
            margin: 0 auto; /* 只有两个数据的时候，前一个表示上下边距，后一个表示左右边距 */
        }
    </style>
</head>


<body>
    <div id="center">
    <img src="../img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文

    <!-- 方式三：外联样式 -->
    
    <h1>焦点访谈：底气 新思想夯实大国粮仓</h1>

    <hr>
    <!-- <span></span>标签无意义，只是用来组合一行的元素的 -->
    <!-- 可以把一行的元素单独切割，方便单独修改 -->
    <span 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 width="950px"></video> 

    <!-- 音频 -->
    <!-- <audio src="../audio/1.mp3" controls></audio> -->

    <!-- 用段落标签把正文每一个段都包裹起来 -->
    <p>
        <strong>重点内容</strong>正文1
    </p>

     <p>
        正文2
    </p>

    <img src="../img/1.jpg">

    <p>
        正文3
    </p>

    <img src="../img/2.jpg">

    <p>
        正文4
    </p>

    <p id="plast">
        责任编辑：XXX
    </p>

    </div>
</body>
</html>

在这里插入图片描述

总结