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

文章目录

前言
一、正文排版
- 1. 视频标签: < video >
- 2. 音频标签: < audio >
- 3. 换行标签: < br >
- 4. 段落标签 < p >
- 5. vscode实现
二、布局
- 1. 盒子模型
- 2. 布局标签< div >和< span >
- 3. VScode实现
三、源代码和运行结果
总结

前言

本篇文章是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>