新浪新闻-正文实现
2.3.2.1 正文排版
2.3.2.1.1 分析
整个正文部分的排版，主要分为这么四个部分：
1). 视频 (当前这种新闻页面,可能也会存在音频)
2). 文字段落
3). 字体加粗
4). 图片
2.3.2.1.2 标签
1). 视频、音频标签
- 视频标签: <video>
- 属性:
- src: 规定视频的url
- controls: 显示播放控件
- width: 播放器的宽度
- height: 播放器的高度
- 音频标签: <audio>
- 属性:
- src: 规定音频的url
- controls: 显示播放控件
2). 段落标签
- 换行标签: <br>
- 注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签
- 段落标签: <p>
- 如: <p> 这是一个段落 </p>
3). 文本格式标签
| 效果 | 标签 | 标签(强调) |
| 加粗 | b | strong |
| 倾斜 | i | em |
| 下划线 | u | ins |
| 删除线 | s | del |
前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。
2.3.2.1.3 实现
在上述的正文排版实现中，还用到了几个CSS属性：
- text-indent: 设置段落的首行缩进
- line-height: 设置行高
- text-align: 设置对齐方式, 可取值为 left / center / right
注意事项:
- 在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符（ ；）来生成空格，如果需要多个空格，就使用多次占位符。
- 那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)，如下：
| 显示结果 | 描述 | 占位符 |
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ' | 撇号 | ' |
2.3.2.2 页面布局
目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部分，都是铺满了整个浏览器。 而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居中展示的，左边、右边都是一定的边距的。
那接下来呢，我们就需要按照这个效果，来完成页面布局。 而要想完成这样一个页面布局，我们就需要介绍一下CSS中的盒子模型 。
2.3.2.2.1 盒子模型
- 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
- 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：
盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。
2.3.2.2.2 布局标签
- 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
- 标签：<div> <span>
- 特点：
- div标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
- span标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
测试：
浏览器打开后的效果:
1). div会独占一行，默认宽度为父元素 body 的宽度
2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度
2.3.2.2.3 盒子模型代码
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> div { width: 200px; /* 宽度 */ height: 200px; /* 高度 */ box-sizing: border-box; /* 指定width height为盒子的高宽 */ background-color: aquamarine; /* 背景色 */ padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */ margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */ } </style> </head> <body> <div> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> </body> </html>
代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)：
我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：
2.3.2.2.3 布局实现
在实现新闻页面的布局时，我们需要做两部操作：
- 第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。
- 第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即可，为：0%。
