Javaweb之HTML,CSS的详细解析

新浪新闻-正文实现

2.3.2.1 正文排版

2.3.2.1.1 分析

整个正文部分的排版，主要分为这么四个部分：

1). 视频 (当前这种新闻页面,可能也会存在音频)

2). 文字段落

3). 字体加粗

4). 图片

2.3.2.1.2 标签

1). 视频、音频标签

• 视频标签:

  • 属性:

    • src: 规定视频的url

    • controls: 显示播放控件

    • width: 播放器的宽度

    • height: 播放器的高度

• 音频标签:

  • 属性:

    • src: 规定音频的url

    • controls: 显示播放控件

2). 段落标签

• 换行标签:
  

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

• 段落标签:

  • 如:

    这是一个段落

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标签：

    • 一行只显示一个（独占一行）

    • 宽度默认是父元素的宽度，高度默认由内容撑开

    • 可以设置宽高（width、height）

  • span标签：

    • 一行可以显示多个

    • 宽度和高度默认由内容撑开

    • 不可以设置宽高（width、height）

测试：

浏览器打开后的效果:

1). div会独占一行，默认宽度为父元素 body 的宽度

2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度

2.3.2.2.3 盒子模型代码

代码如下:

    
    
    
    
    

​

    
    

        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 
    
​

代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)：

我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：

2.3.2.2.3 布局实现

在实现新闻页面的布局时，我们需要做两部操作：

• 第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。

• 第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即可，为：0%。