文章目录

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

前言

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

1. 视频标签< video >、音频标签< audio >
2. 换行标签< br >、段落标签< p >
3. 盒子模型
4. 布局标签< 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…

                                                
      新浪政务  > 正文                
焦点访谈：底气 新思想夯实大国粮仓
      
               2023年03月02日 21:50  央视网      
                                       
         重点内容正文1     
       
         正文2     
            
         正文3     
            
         正文4     
      
         责任编辑：XXX     
      
   

总结

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

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