当前位置：首页 > article >正文

前端知识HTMLCSS

article 2024/11/19 22:35:38

1. 前端开发介绍

1.1 认识前端开发

1.2 web标准

2. HTML & CSS

2.1 HTML快速入门

2.1.1 操作

2.1.2 总结

2.2 开发工具

2.3 基础标签 & 样式

2.3.1 标题实现

2.3.1.1 标题排版

2.3.1.1.1 分析

2.3.1.1.2 标签

2.3.1.1.2 实现

2.3.1.2 标题样式

2.3.1.2.1 CSS引入方式

2.3.1.2.2 颜色表示

2.3.1.2.3 标题字体颜色

2.3.1.2.4 CSS选择器

2.3.1.2.5 发布时间字体颜色

2.3.1.3 新功能完善-超链接

2.3.1.3.1 介绍

2.3.1.3.2 实现

2.3.2 正文实现

2.3.2.1 正文排版

2.3.2.1.1 分析

2.3.2.1.2 标签

2.3.2.1.3 实现

2.3.2.2 页面布局

2.3.2.2.1 盒子模型

2.3.2.2.2 布局标签

2.3.2.2.3 盒子模型代码

2.3.2.2.3 布局实现

1. 前端开发介绍

1.1 认识前端开发

前端开发，主要的职责就是将数据以好看的样式呈现出来。说白了，就是开发网页程序，如下图所示：

那在讲解web前端开发之前，我们先需要对web前端开发有一个整体的认知。主要明确一下三个问题：

1). 网页有哪些部分组成 ?

文字、图片、音频、视频、超链接、表格等等。

2). 我们看到的网页，背后的本质是什么 ?

程序员写的前端代码 (备注：在前后端分离的开发模式中，)

3). 前端的代码是如何转换成用户眼中的网页的 ?

通过浏览器转化（解析和渲染）成用户看到的网页

浏览器中对代码进行解析和渲染的部分，称为 浏览器内核

1.2 web标准

而市面上的浏览器非常多，比如：IE、火狐Firefox、苹果safari、欧朋、谷歌Chrome、QQ浏览器、360浏览器等等。而且我们电脑上安装的浏览器可能都不止一个，有很多。

但是呢，需要大家注意的是，不同的浏览器，内核不同，对于相同的前端代码解析的效果也会存在差异。那这就会造成一个问题，同一段前端程序，不同浏览器展示出来的效果是不一样的，这个用户体验就很差了。而我们想达到的效果则是，即使用户使用的是不同的浏览器，解析同一段前端代码，最终展示出来的效果都是相同的。

要想达成这样一个目标，就需要定义一个统一的标准，然后让各大浏览器厂商都参照这个标准来实现即可。而这套标准呢，其实早都已经定义好了，那就是我们接下来，要介绍的web标准。

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

当然了，随着技术的发展，我们为了更加快速的开发，现在也出现了很多前端开发的高级技术。例如：vue、elementui、Axios等等。

我们以后主要是做后端开发，但前端知识也需要了解，而且目前很多企业都需要全栈开发工程师，就是前后端都要会开发（后端为主）。那基于此呢，我们在预科课程中给大家讲一下前端的核心技术，主要有以下三部分：

第一部分：HTML & CSS
第二部分：JavaScript
第三部分：Ajax & Vue3基础

那今天我们就先来讲解第一部分 HTML & CSS。

2. HTML & CSS

1). 什么是HTML ?

HTML: HyperText Markup Language，超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签 "<标签名>" 构成的语言

HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

下面展示的是一段html代码经过浏览器解析，呈现的效果如右图所示：

2). 什么是CSS ?

CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

下面展示的是一段 html代码及 CSS样式经过浏览器解析，呈现的效果如右图所示：

2.1 HTML快速入门

2.1.1 操作

1. 新建文本文件，后缀名改为 .html，命名为：01-html快速入门.html 。

创建一个名为HTML的文件夹，然后找到课程素材中的 1.jpg 文件放到该目录下的img目录中。此时HTML文件夹中内容如下：

2. 编写HTML的基本骨架，定义标题

选中文件，鼠标右击，选择使用记事本打开文件，并且编写网页的标题

首先html有固定的基本结构

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
         <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>HTML 快速入门<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
     <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
         
     <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

其中<html>是根标签，<head>和<body>是子标签。

<head> : 定义网页的头部，用来存放给浏览器看的信息，如：CSS样式、网页的标题。
<body> : 定义网页的主体部分，存放给用户看的信息，也是网页的主体内容，如：文字、图片、视频、音频、表格等。

3. 在<body>中编写HTML的核心内容

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
         <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>HTML 快速入门<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
     <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
         <span style="color:#117700"><</span><span style="color:#117700">h1</span><span style="color:#117700">></span>Hello HTML<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
         <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"1.png"</span><span style="color:#117700">></span>
     <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

其中 <h1> 标签是一个一级标题的标签。 <img> 标签是一个图片标签，用来展示图片，而其中的 src 属性是用来指定要展示的图片。

4. 然后选中文件，鼠标右击，选择使用浏览器打开文件。

浏览器呈现效果如下:

2.1.2 总结

1). HTML页面的基础结构标签

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
         <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
     <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
        
     <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域

2). HTML中的标签特点

HTML标签不区分大小写，建议小写
HTML标签的属性值，采用单引号、双引号都可以，一般写双引号
HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

2.2 开发工具

我们通过快速入门案例，发现由记事本文件开发html是非常不方便的，所以接下来我们需要学习一款前端专业的开发工具VS Code。

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。

官网： Visual Studio Code - Code Editing. Redefined

详细安装教程：参考 资料/2. VsCode安装文档/VS Code安装文档.md

注意1 ：需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中。

注意2 ：由于安装了IDEA快捷键的插件，VSCode快键键与IDEA是一致的。

2.3 基础标签 & 样式

那我们在讲解HTML的常见基础标签及 CSS的基本样式时，我们就以新浪新闻页面为例，来进行讲解，这样大家不仅能够知道常见标签及样式的作用，还能够知道具体的应用场景。

新浪新闻的具体页面效果如下：

而对于这个新浪新闻的页面来说，核心内容分为两个部分，如下：

aaaaaaaaaaaaaaaaaaaa-标题部分 (绿色标注的部分)
aaaaaaaaaaaaaaaaaaaa-正文部分 (黄色标注的部分)

2.3.1 新浪新闻-标题实现

2.3.1.1 标题排版

2.3.1.1.1 分析

1). 第一部分，是一张图片，需要用到HTML中的图片标签 <img> 来实现。

2). 第二部分，是一个标题，需要用到HTML中的标题标签 <h1> ... <h6>来实现。

3). 第三部分，有两条水平分割线，需要用到HTML中的 <hr> 标签来定义水平分割线。

2.3.1.1.2 标签

1). 图片标签 img

<span style="background-color:#f8f8f8"><span style="color:#000000"> A. 图片标签: <span style="color:#117700"><</span><span style="color:#117700">img</span><span style="color:#117700">></span>
 
 B. 常见属性: 
     src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
     width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
     height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
     
     备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
     
 C. 路径书写方式:
     绝对路径:
         1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\logo.png
                        <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"C:\Users\Administrator\Desktop\HTML\img\logo.png"</span><span style="color:#117700">></span>
 
         2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
                        <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"</span><span style="color:#117700">></span>
     
     相对路径:
         ./ : 当前目录 , ./ 可以省略的
         ../: 上一级目录</span></span>

注意：一般图片的width、height只设置一个，图片会等比例缩放。

2). 标题标签 h 系列

<span style="background-color:#f8f8f8"><span style="color:#000000"> A. 标题标签: <span style="color:#117700"><</span><span style="color:#117700">h1</span><span style="color:#117700">></span> - <span style="color:#117700"><</span><span style="color:#117700">h6</span><span style="color:#117700">></span>
     
     <span style="color:#117700"><</span><span style="color:#117700">h1</span><span style="color:#117700">></span>111111111111<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">h2</span><span style="color:#117700">></span>111111111111<span style="color:#117700"></</span><span style="color:#117700">h2</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">h3</span><span style="color:#117700">></span>111111111111<span style="color:#117700"></</span><span style="color:#117700">h3</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">h4</span><span style="color:#117700">></span>111111111111<span style="color:#117700"></</span><span style="color:#117700">h4</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">h5</span><span style="color:#117700">></span>111111111111<span style="color:#117700"></</span><span style="color:#117700">h5</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">h6</span><span style="color:#117700">></span>111111111111<span style="color:#117700"></</span><span style="color:#117700">h6</span><span style="color:#117700">></span>
     
 B. 效果 : h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。</span></span>

3). 水平分页线标签 <hr>

备注：而上述的 <hr> <img> 标签呢，其实都属于单标签，也就是说是不需要结束标签的。

2.3.1.1.2 实现

1). 打开VsCode，选择左侧最顶部的 "资源管理器"，然后选择打开文件夹，选择打开桌面的 HTML 文件夹

2). 将【2.课程素材\01.新浪新闻】中提供的 img(图片)、audio(音频)、video(视频) 三个文件夹（里面是图片、音视频素材），复制到 HTML 文件夹中。

3). 在VsCode中创建一个新的 html 文件，文件的后缀名设置为 .html

4). html 文件创建好之后，在其中输入！，然后直接回车，就可以生成 HTML 的基础结构标签

5). 编写标题排版的核心代码

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#aa5500"><!-- 文档类型为HTML --></span>
 <span style="color:#555555"><!DOCTYPE html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
     <span style="color:#aa5500"><!-- 字符集为UTF-8 --></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
     <span style="color:#aa5500"><!-- 设置浏览器兼容性 --></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
       <span style="color:#aa5500"><!-- </span>
     <span style="color:#aa5500">img标签: </span>
         <span style="color:#aa5500">src: 图片资源路径</span>
         <span style="color:#aa5500">width: 宽度(px, 像素 ; % , 相对于父元素的百分比)</span>
         <span style="color:#aa5500">height: 高度(px, 像素 ; % , 相对于父元素的百分比)</span>
         
         <span style="color:#aa5500"><img src="img/logo.png" width="80%" ></span>
 
     <span style="color:#aa5500">路径书写方式:</span>
         <span style="color:#aa5500">绝对路径:</span>
             <span style="color:#aa5500">1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\logo.png</span>
                            <span style="color:#aa5500"><img src="C:\Users\Administrator\Desktop\HTML\img\logo.png"></span>
 
             <span style="color:#aa5500">2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png</span>
                            <span style="color:#aa5500"><img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"></span>
         <span style="color:#aa5500">相对路径:</span>
             <span style="color:#aa5500">./ : 当前目录 , ./ 可以省略的</span>
             <span style="color:#aa5500">../: 上一级目录</span>
      <span style="color:#aa5500">--></span>
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/logo.png"</span><span style="color:#117700">></span> aaaaaaaaaaaaaaaaaaaa> 正文
 
      <span style="color:#117700"><</span><span style="color:#117700">h1</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
     aaaaaaaaaaaaaaaaaaaa
      <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
 
 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

2.3.1.2 标题样式

新浪的标题部分的基本排版，我们已经完成了，然后大家会看到，我们编写的一级标题，默认字体颜色为纯黑色。而原始的页面的新闻标题字体，并不是纯黑色，而是灰黑色，那接下来，我们就要来设置这个字体的颜色。而要设置这个字体的颜色，我们就需要通过CSS样式来控制。

那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。

HTML&CSS网站：w3cschool官网 - 1000多本编程教程免费学

2.3.1.2.1 CSS引入方式

具体有3种引入方式，语法如下表格所示：

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对。	<h1 style="xxx:xxx;">中国新闻网</h1>
内嵌样式	定义<style>标签，在标签内部定义css样式。	<style> h1 {...} </style>
外联样式	定义<link>标签，通过href属性引入外部css文件	<link rel="stylesheet" href="css/news.css">

对于上述3种引入方式，企业开发的使用情况如下：

行内样式会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。
内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中）
外部样式，html和css实现了完全的分离，企业开发常用方式。

2.3.1.2.2 颜色表示

在前端程序开发中，颜色的表示方式常见的有如下三种：

表示方式	属性值	说明	取值
关键字	颜色英文单词	red、green、blue	red、green、blue...
rgb表示法	rgb(r, g, b)	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
rgba表示法	rgba(r, g, b, a)	红绿蓝三原色，a表示透明度，取值：0-1	rgb(0,0,0,0.3)、rgb(255,255,255,0.5)
十六进制表示法	#rrggbb	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

2.3.1.2.3 标题字体颜色

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#555555"><!DOCTYPE html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
     <span style="color:#aa5500"><!-- 方式二: 内嵌样式 --></span>
     <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
         <span style="color:#117700">h1</span> {
             <span style="color:#aa5500">/* color: red; */</span>
             <span style="color:#aa5500">/* color: rgb(0, 0, 255); */</span>
             <span style="color:#000000">color</span>: <span style="color:#221199">#4D4F53</span>;
         }
     <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 
     <span style="color:#aa5500"><!-- 方式三: 外联样式 --></span>
     <span style="color:#aa5500"><!-- <link rel="stylesheet" href="css/news.css"> --></span>
 <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/logo.png"</span><span style="color:#117700">></span> aaaaaaaaaaaaaaaaaaaa > 正文
     
     <span style="color:#aa5500"><!-- 方式一: 行内样式 --></span>
     <span style="color:#aa5500"><!-- <h1 style="color: red;">aaaaaaaaaaaaaaaaaaaa</h1> --></span>
     
     <span style="color:#117700"><</span><span style="color:#117700">h1</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
 
     <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
     aaaaaaaaaaaaaaaaaaaa
     <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
 
 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

2.3.1.2.4 CSS选择器

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习最基本的3种。

选择器通用语法如下：

<span style="background-color:#f8f8f8"><span style="color:#000000"> 选择器名   {
     <span style="color:#000000">css</span>样式名：<span style="color:#000000">css</span>样式值;
     <span style="color:#000000">css</span>样式名：<span style="color:#000000">css</span>样式值;
 }</span></span>

我们需要学习的3种选择器是元素选择器，class选择器，id选择器，语法以及作用如下：

1.元素（标签）选择器：

选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上

<span style="background-color:#f8f8f8"><span style="color:#000000"> 元素名称 {
     css样式名:css样式值；
 }</span></span>

例子如下：

<span style="background-color:#f8f8f8"><span style="color:#000000">  <span style="color:#117700">h1</span>{
      <span style="color:#000000">color</span>: <span style="color:#770088">red</span>;
  }</span></span>

2.类选择器：

选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

<span style="background-color:#f8f8f8"><span style="color:#000000"> .class属性值 {
     css样式名:css样式值；
 }</span></span>

例子如下：

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#555555">.title1</span>{
      <span style="color:#000000">color</span>: <span style="color:#770088">green</span>;
  }
 
 <<span style="color:#117700">h1</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"title1"</span> >aaaaaaaaaaaaaaaaaaa</<span style="color:#117700">h1</span>></span></span>

3.id选择器:

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

<span style="background-color:#f8f8f8"><span style="color:#000000"> #id属性值 {
     css样式名:css样式值；
 }</span></span>

例子如下：

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#3300aa">#t1</span> {
     <span style="color:#000000">color</span>: <span style="color:#770088">blue</span>;
 }
 
 <<span style="color:#117700">h1</span> <span style="color:#117700">id</span>=<span style="color:#aa1111">"t1"</span> >aaaaaaaaaaaaaaaaa</<span style="color:#117700">h1</span>></span></span>

2.3.1.2.5 发布时间字体颜色

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#555555"><!DOCTYPE html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>aaa<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
         <span style="color:#117700">h1</span> {
             <span style="color:#000000">color</span>: <span style="color:#221199">#4D4F53</span>;
         }
 
         <span style="color:#aa5500">/* 元素选择器 */</span>
         <span style="color:#aa5500">/* span {</span>
 <span style="color:#aa5500">            color: red;</span>
 <span style="color:#aa5500">        } */</span>
 
         <span style="color:#aa5500">/* 类选择器 */</span>
         <span style="color:#aa5500">/* .cls {</span>
 <span style="color:#aa5500">            color: green;</span>
 <span style="color:#aa5500">        } */</span>
         
         <span style="color:#aa5500">/* ID选择器 */</span>
         <span style="color:#3300aa">#time</span> {
             <span style="color:#000000">color</span>: <span style="color:#221199">#968D92</span>;
             <span style="color:#000000">font-size</span>: <span style="color:#116644">13px</span>; <span style="color:#aa5500">/* 设置字体大小 */</span>
         }
     <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/news_logo.png"</span><span style="color:#117700">></span> aaa > 正文
     <span style="color:#117700"><</span><span style="color:#117700">h1</span><span style="color:#117700">></span>aaaaa<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"cls"</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"time"</span><span style="color:#117700">></span>2023年03月02日 21:50<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>  <span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"cls"</span><span style="color:#117700">></span>央视网<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
 
 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

上述我们还使用了一个css的属性 font-size , 用来设置字体的大小。但是需要注意，在设置字体的大小时，单位px不能省略，否则不生效。

2.3.1.3 新功能完善-超链接

在新浪新闻的标题部分，当我们点击顶部的 "新浪政务"，浏览器将自动在当前窗口访问这个资源
当我们点击新闻发布时间之后的 "aaa"，浏览器将会自动打开一个新的标签页，然后在新的标签页访问资源

那接下来，我们就来完善新闻标题部分的这个功能，那此时呢，我们就需要用到HTML中的超链接的标签。

2.3.1.3.1 介绍

标签: <a href="..." target="...">央视网</a>
属性:
- href: 指定资源访问的url
- target: 指定在何处打开资源链接
  - _self: 默认值，在当前页面打开
  - _blank: 在空白页面打开

2.3.1.3.2 实现

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#555555"><!DOCTYPE html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
     <span style="color:#aa5500">/* 1. 标签选择器 */</span>
     <span style="color:#117700">h1</span> {
       <span style="color:#000000">color</span>: <span style="color:#221199">#4d4f53</span>;
     }
 
     <span style="color:#555555">.time</span> {
       <span style="color:#000000">font-size</span>: <span style="color:#116644">12px</span>;
       <span style="color:#000000">color</span>: <span style="color:#221199">#888</span>;
     }
 
     <span style="color:#117700">a</span> {
       <span style="color:#000000">text-decoration</span>: <span style="color:#221199">none</span>;
       <span style="color:#000000">color</span>: <span style="color:#221199">#4d4f53</span>;
     }
   <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/logo.png"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://gov.sina.com.cn/"</span>  <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_self"</span><span style="color:#117700">></span>新浪<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span> > 正文
      <span style="color:#117700"><</span><span style="color:#117700">h1</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"cls"</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"hid"</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"time"</span><span style="color:#117700">></span>2023年07月23日 19:49<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>    
      <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span><span style="color:#117700">></span>aaaa<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
      
 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

浏览器打开此页面，我们可以看到最终效果（超链接的字体，以及默认的下划线，通过css样式已经调整好了）：

2.3.2 新浪新闻-正文实现

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 实现

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#555555"><!DOCTYPE html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
     <span style="color:#aa5500">/* 1. 标签选择器 */</span>
     <span style="color:#117700">h1</span> {
       <span style="color:#000000">color</span>: <span style="color:#221199">#4d4f53</span>; <span style="color:#aa5500">/* 字体颜色 */</span>
     }
 
     <span style="color:#555555">.time</span> {
       <span style="color:#000000">font-size</span>: <span style="color:#116644">12px</span>; <span style="color:#aa5500">/* 字体大小 */</span>
       <span style="color:#000000">color</span>: <span style="color:#221199">#888</span>;
     }
 
     <span style="color:#117700">a</span> {
       <span style="color:#000000">text-decoration</span>: <span style="color:#221199">none</span>; <span style="color:#aa5500">/* 文本装饰 */</span>
       <span style="color:#000000">color</span>: <span style="color:#221199">#4d4f53</span>;
     }
 
     <span style="color:#117700">p</span> {
       <span style="color:#000000">line-height</span>: <span style="color:#116644">30px</span>; <span style="color:#aa5500">/* 行高 */</span>
       <span style="color:#000000">text-indent</span>: <span style="color:#116644">35px</span>; <span style="color:#aa5500">/* 首行缩进 */</span>
     }
 
     <span style="color:#555555">.editor</span> {
       <span style="color:#000000">text-align</span>: <span style="color:#221199">right</span>; <span style="color:#aa5500">/* 规定文本的水平对齐方式 */</span>
     }
   <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/logo.png"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://gov.sina.com.cn/"</span><span style="color:#117700">></span>新浪政务<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span> > 正文
      <span style="color:#117700"><</span><span style="color:#117700">h1</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"cls"</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"hid"</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"time"</span><span style="color:#117700">></span>2023年07月23日 19:49<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>  <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span><span style="color:#117700">></span>aa网<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">video</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"video/news.mp4"</span> <span style="color:#0000cc">controls</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"930px"</span><span style="color:#117700">></</span><span style="color:#117700">video</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>
       <span style="color:#117700"><</span><span style="color:#117700">strong</span><span style="color:#117700">></span>aaa消息<span style="color:#117700"></</span><span style="color:#117700">strong</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      <span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/1.jpg"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/2.jpg"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/3.jpg"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
 
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/4.jpg"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
 
      <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"editor"</span><span style="color:#117700">></span>责任编辑：aaaaaaaa SN242<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">><</span><span style="color:#117700">strong</span><span style="color:#117700">></span>关键字:<span style="color:#117700"></</span><span style="color:#117700">strong</span><span style="color:#117700">></span> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

在上述的正文排版实现中，还用到了几个CSS属性：

text-indent: 设置段落的首行缩进
line-height: 设置行高
text-align: 设置对齐方式, 可取值为 left / center / right

注意事项:

在HTML页面中无论输入了多少个空格, 最多只会显示一个。可以使用空格占位符（&nbsp；）来生成空格，如果需要多个空格，就使用多次占位符。

那在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）

测试：

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
         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 
     <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
         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 
     <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
 
     <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span>
         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 
     <span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span>
         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 
     <span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span></span></span>

浏览器打开后的效果:

1). div会独占一行，默认宽度为父元素 body 的宽度。可以设置宽高（width、height）

2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度。不可以设置宽高（width、height）

2.3.2.2.3 盒子模型代码

代码如下:

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#555555"><!DOCTYPE html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"IE=edge"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>盒子模型<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
         <span style="color:#117700">div</span> {
             <span style="color:#000000">width</span>: <span style="color:#116644">200px</span>;  <span style="color:#aa5500">/* 宽度 */</span>
             <span style="color:#000000">height</span>: <span style="color:#116644">200px</span>;  <span style="color:#aa5500">/* 高度 */</span>
             <span style="color:#000000">box-sizing</span>: <span style="color:#221199">border-box</span>; <span style="color:#aa5500">/* 指定width height为盒子的高宽 */</span>
             <span style="color:#000000">background-color</span>: <span style="color:#770088">aquamarine</span>; <span style="color:#aa5500">/* 背景色 */</span>
             
             <span style="color:#000000">padding</span>: <span style="color:#116644">20px</span> <span style="color:#116644">20px</span> <span style="color:#116644">20px</span> <span style="color:#116644">20px</span>; <span style="color:#aa5500">/* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/</span> 
             <span style="color:#000000">border</span>: <span style="color:#116644">10px</span> <span style="color:#221199">solid</span> <span style="color:#770088">red</span>; <span style="color:#aa5500">/* 边框, 宽度 线条类型 颜色 */</span>
             <span style="color:#000000">margin</span>: <span style="color:#116644">30px</span> <span style="color:#116644">30px</span> <span style="color:#116644">30px</span> <span style="color:#116644">30px</span>; <span style="color:#aa5500">/* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */</span>
         }
     <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 
 <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
     
     <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
         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 
     <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
 
 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

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

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

2.3.2.2.3 布局实现

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

第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：60%。
第二步：通过css为该div设置外边距，左右的外边距分别为：20%，上外边距靠边展示即可，为：0%，下边设置一部分外边距，比如100px。

具体的代码实现如下：

<span style="background-color:#f8f8f8"><span style="color:#000000"> <span style="color:#555555"><!DOCTYPE html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
     <span style="color:#117700">h1</span> {
       <span style="color:#000000">color</span>: <span style="color:#221199">#4d4f53</span>; <span style="color:#aa5500">/* 字体颜色 */</span>
     }
 
     <span style="color:#555555">.time</span> {
       <span style="color:#000000">font-size</span>: <span style="color:#116644">12px</span>; <span style="color:#aa5500">/* 字体大小 */</span>
       <span style="color:#000000">color</span>: <span style="color:#221199">#888</span>;
     }
 
     <span style="color:#117700">a</span> {
       <span style="color:#000000">text-decoration</span>: <span style="color:#221199">none</span>; <span style="color:#aa5500">/* 文本装饰 */</span>
       <span style="color:#000000">color</span>: <span style="color:#221199">#4d4f53</span>;
     }
 
     <span style="color:#117700">p</span> {
       <span style="color:#000000">line-height</span>: <span style="color:#116644">30px</span>; <span style="color:#aa5500">/* 行高 */</span>
       <span style="color:#000000">text-indent</span>: <span style="color:#116644">35px</span>; <span style="color:#aa5500">/* 首行缩进 */</span>
     }
 
     <span style="color:#555555">.editor</span> {
       <span style="color:#000000">text-align</span>: <span style="color:#221199">right</span>; <span style="color:#aa5500">/* 规定文本的水平对齐方式 */</span>
     }
 
     <span style="color:#3300aa">#main</span> {
       <span style="color:#000000">width</span>: <span style="color:#116644">60%</span>;
       <span style="color:#000000">margin</span>: <span style="color:#116644">0</span> <span style="color:#116644">20%</span> <span style="color:#116644">100px</span> <span style="color:#116644">20%</span>;
     }
   <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"main"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/logo.png"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://gov.sina.com.cn/"</span><span style="color:#117700">></span>新浪政务<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span> > 正文
      <span style="color:#117700"><</span><span style="color:#117700">h1</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"cls"</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"hid"</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"time"</span><span style="color:#117700">></span>2023年07月23日 19:49<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>  <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span><span style="color:#117700">></span>央视网<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">video</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"video/news.mp4"</span> <span style="color:#0000cc">controls</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"930px"</span><span style="color:#117700">></</span><span style="color:#117700">video</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>
       <span style="color:#117700"><</span><span style="color:#117700">strong</span><span style="color:#117700">></span>央视网消息<span style="color:#117700"></</span><span style="color:#117700">strong</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa
      <span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/1.jpg"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/2.jpg"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/3.jpg"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
 
      <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"img/4.jpg"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaa<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
 
      <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"editor"</span><span style="color:#117700">></span>aaaaaaaaaaaaaaaaaaaaSN242<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">strong</span><span style="color:#117700">></span>关键字:<span style="color:#117700"></</span><span style="color:#117700">strong</span><span style="color:#117700">></span> aaaaaaaaaaaaaaaaaaaa
   <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

查看全文

http://www.kler.cn/a/291606.html