前言
在这篇文章中，我将会详细讲解用HTML和CSS制作一个简单的新闻页面。
目录
原始页面网址：原始新闻页面链接
提示：本文所用的网址是新浪新闻网的页面，不涉及任何政治问题，只是采用此页面来学习前端技术。
这个新闻页面可以分为标题和正文部分，我们先来看标题部分：
新浪新闻-标题排版
1). 第一部分，是一张图片，需要用到HTML中的图片标签 <img> 来实现。
2). 第二部分，是一个标题，需要用到HTML中的标题标签 <h1> ... <h6>来实现。
3). 第三部分，有两条水平分割线，需要用到HTML中的 <hr> 标签来定义水平分割线。
- 图片标签：<img>
- src：指定图像的url（绝对路径/相对路径）
绝对路径：包括绝对磁盘路径和绝对网络路径
相对路径：. 代表当前路径
.. 代表上一级路径
2.width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
3.height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
提示：一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
- 标题标签:<h1> - <h6>（数字越小，字体越大）
- 水平线标签：<hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容</title>
</head>
<body>
<img src="./img/logo.png" alt="logo.png"> 新浪政务>正文
<!-- 标题标签 h1~h6 -->
<h1>内容</h1>
<!-- 水平线标签 hr -->
<hr>
2023年07月23日 19:49 央视网
<hr>
</body>
</html>以上部分的代码已经能完成标题部分的大致框架，但是我们在浏览器运行代码之后会发现这段代码中的标题与原网页的标题字体颜色还有些差异，原网页中能点击跳转的超链接我们也还没有写，接下来我们对标题部分做一个完善。
新浪新闻-标题样式-标题颜色
要想改变标题颜色我们需要用到css，这些具体样式都是由css控制的，这里我们要对css引入方式有一些认识。
css引入方式：
- 行内样式：写在标签的style属性中（不推荐）原因是内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。
- 内部样式：写在style标签中（可以写在页面的任何位置，但通常约定写在head标签的style标签中）
- 外部样式：写在一个单独的.css文件中（需要通过link标签在网页中引入，企业常用）
具体有3种引入方式，语法如下表格所示：
| 名称 | 语法描述 | 示例 |
|---|---|---|
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对。 | <h1 style="xxx:xxx;">中国新闻网</h1> |
| 内嵌样式 | 定义<style>标签，在标签内部定义css样式。 | <style> h1 {...} </style> |
| 外联样式 | 定义<link>标签，通过href属性引入外部css文件 | <link rel="stylesheet" href="css/news.css"> |
下面我们用css为标题附加颜色，里面例举了css的三种引入方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容</title>
<!-- CSS引入方式二： 内部样式 -->
<style>
h1 {
/* 颜色：
关键字表示 ： 颜色英文
rgb表示法：rgb(r,g,b) 取值范围0~255
rgba表示法：rgba(r,g,b,a) a代表透明度 取值范围0-1
16进制表示法：#rrggbb 取值范围00~ff 例子：000000可以简写000
*/
/* color: blue; */
/* color: rgb(0, 0, 255); */
/* color: rgba(0, 0, 255, 0.5); */
color: #4d4f53;
}
span {
color: grey;
}
</style>
<!-- CSS引入方式三： 外部样式 -->
<!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
<img src="./img/logo.png" alt="logo.png"> 新浪政务>正文
<!-- CSS引入方式一： 行内样式-->
<!-- <h1 style="color: red;">【内容</h1> -->
<h1>内容</h1>
<hr>
<span>2023年07月23日 19:49</span> <span>央视网</span>
<hr>
</body>
</html>这里总结一下css三种引入方式的优先级：
行内样式>内部样式（外部样式）[这两个谁后加载谁后加载谁的优先级高（就近原则）]
提示：按alt+a可以查看颜色的rgb表示，或者可以下载取色器
但是我们会发现在原网页中，标题部分的文字和日期的颜色是不一样的，但是上面的代码中css都用span标签把颜色改为了相同的灰色，但实际上这两段文字用的是不一样的颜色，那么如何更改日期的颜色呢？这就需要用到css选择器。
我们需要学习的3种选择器是元素选择器，class选择器，id选择器，语法以及作用如下：
1.元素（标签）选择器：
-
选择器的名字必须是标签的名字
-
作用：选择器中的样式会作用于所有同名的标签上
元素名称 {
css样式名:css样式值；
}
例子如下：
h1{
color: red;
}
2.类选择器：
-
选择器的名字前面需要加上 .
-
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
.class属性值 {
css样式名:css样式值；
}
例子如下：
.cls{
color: green;
}
3.id选择器:
-
选择器的名字前面需要加上#
-
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
#id属性值 {
css样式名:css样式值；
}
例子如下：
#hid {
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容</title>
<!-- CSS引入方式二： 内部样式 -->
<style>
/*
CSS选择器优先级：
id选择器 > 类选择器 > 元素选择器
*/
/* CSS选择器一：元素选择器 */
h1 {
color: #4d4f53;
}
/* span {
color: blue;
} */
/* CSS选择器二：类选择器 */
.cls {
color: grey;
font-size: 12px; /* 设置字体大小,单位px */
}
/* CSS选择器三：id选择器 */
/* #timer {
color: red;
} */
</style>
</head>
<body>
<img src="./img/logo.png" alt="logo.png"> 新浪政务>正文
<h1>内容</h1>
<hr>
<span class="cls" id="timer">2023年07月23日 19:49</span> <span>央视网</span>
<hr>
</body>
</html>用了css选择器之后，就可以区分相同标签下文字的不同颜色。
接下来我们要给文字添加超链接
新浪新闻-标题样式-超链接
标签：<a href="..." target=" ...">央视网</a>
属性：
href：所添加的url
target：指定在何处打开资源链接
_self:默认值，在当前页面打开
_blank:在空白页面打开
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容</title>
<style>
h1 {
color: #4d4f53;
}
.cls {
color: grey;
font-size: 12px;
/* 设置字体大小,单位px */
}
a {
text-decoration: none;
/* 删除超链接的下划线*/
/* 设置文本的样式, none代表什么样式都没有 */
color: black;
}
</style>
</head>
<body>
<!--
超链接标签: a
href属性: 设置要跳转的资源地址
target属性:
_self: 在原来的页面跳转 [默认值]
_blank: 打开空白页跳转
-->
<img src="./img/logo.png" alt="logo.png">
<a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> >正文
<h1>内容</h1>
<hr>
<span class="cls" id="timer">2023年07月23日 19:49</span>
<span> <a href="https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml" target="_blank">央视网</a>
</span>
<hr>
</body>
</html>到这里，新浪新闻页面的标题部分就已经全部完成了
新浪新闻-正文排版
整个正文部分的排版，主要分为这么四个部分：
1). 视频 (当前这种新闻页面,可能也会存在音频)
2). 文字段落
3). 字体加粗
4). 图片
视频标签：<video>
- src: 规定视频的url
- controls：显示播放控件
- width：播放器的宽度
- height：播放器的高度
音频标签：<audio>
- src：规定音频的url
- controls：显示播放控件
段落标签
-
换行标签: <br>
-
注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签
-
-
段落标签: <p>
-
如: <p> 这是一个段落 </p>
-
文本格式标签
| 效果 | 标签 | 标签(强调) |
|---|---|---|
| 加粗 | b | strong |
| 倾斜 | i | em |
| 下划线 | u | ins |
| 删除线 | s | del |
前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。
实现正文部分的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容</title>
<style>
h1 {
color: #4d4f53;
}
.cls {
color: grey;
font-size: 12px; /* 设置字体大小,单位px */
}
a {
text-decoration: none; /* 设置文本的样式, none代表什么样式都没有 */
color: black;
}
p {
text-indent: 30px; /* 设置首行缩进 */
line-height:25px; /* 设置行高 */
}
#editor {
text-align: right ; /* 设置文本居右 */
}
#keyword {
text-align: left ; /* 设置文本居左 */
}
</style>
</head>
<body>
<!--
超链接标签: a
href属性: 设置要跳转的资源地址
target属性:
_self: 在原来的页面跳转 [默认值]
_blank: 打开空白页跳转
-->
<img src="./img/logo.png" alt="logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> >正文
<h1>【新思想引领新征程】推进美丽中国建设 谱写绿色发展新篇章</h1>
<hr>
<span class="cls" id="timer">2023年07月23日 19:49</span> <span> <a href="https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml" target="_blank">央视网</a> </span>
<hr>
<!-- 正文 -->
<!-- 视频标签 video
src: 设置视频资源路径
controls: 播放控件 [注意: 当值和key一样的时候,可以省略值]
width: 设置宽度
height: 设置高度
-->
<video src="./video/news.mp4" controls width="950px"></video>
<!-- 音频标签audio
src: 设置视频资源路径
controls: 播放控件 [注意: 当值和key一样的时候,可以省略值]
-->
<!-- <audio src="./audio/news.mp3" controls></audio> -->
<!-- 换行标签 br -->
<!-- <br>
<br> -->
<!-- 段落标签p -->
<!-- 加粗: b / strong -->
<p>
<strong>央视网消息</strong>内容
</p>
<img src="img/1.jpg">
<p>
内容
</p>
<p>
内容
</p>
<img src="img/2.jpg">
<p>
内容
</p>
<img src="img/3.jpg">
<p>
内容
</p>
<img src="img/4.jpg">
<p>
内容
<p id="editor">
责任编辑：王树淼 SN242
</p>
<!-- 空格符 -->
<span id="keyword">
<b>关键字</b> : 美丽中国 绿色发展 新篇章 新征程
</span>
</body>
</html>注意：在HTML页面中无论输入了多少个空格，最多只会显示一个。可以使用空格占位符（ ；）来生成空格，如果需要多个空格，就使用多次占位符。
其他的一些占位符：
| 显示结果 | 描述 | 占位符 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ' | 撇号 | ' |
目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部分，都是铺满了整个浏览器。 而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居中展示的，左边、右边都是一定的边距的。
新浪新闻-页面布局
盒子模型
布局标签
-
布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
-
标签：<div> <span>
-
特点：
-
div标签：
-
一行只显示一个（独占一行）
-
宽度默认是父元素的宽度，高度默认由内容撑开
-
可以设置宽高（width、height）
-
-
span标签：
-
一行可以显示多个
-
宽度和高度默认由内容撑开
-
不可以设置宽高（width、height）
-
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进美丽中国建设 谱写绿色发展新篇章</title>
<style>
h1 {
color: #4d4f53;
}
.cls {
color: grey;
font-size: 12px; /* 设置字体大小,单位px */
}
a {
text-decoration: none; /* 设置文本的样式, none代表什么样式都没有 */
color: black;
}
p {
text-indent: 30px; /* 设置首行缩进 */
line-height:25px; /* 设置行高 */
}
#editor {
text-align: right ; /* 设置文本居右 */
}
#keyword {
text-align: left ; /* 设置文本居左 */
}
#div {
/* 外边距 */
width: 60%;
/* margin: 0 20% 0 20%; */
/* margin: 0 20%; */
margin: auto; /* auto 会自动计算距离,居中展示 */
}
</style>
</head>
<body>
<div id="div">
<img src="./img/logo.png" alt="logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> >正文
<h1>内容</h1>
<hr>
<span class="cls" id="timer">2023年07月23日 19:49</span> <span> <a href="https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml" target="_blank">央视网</a> </span>
<hr>
<video src="./video/news.mp4" controls width="950px"></video>
<p>
<strong>央视网消息</strong>内容
</p>
<img src="img/1.jpg">
<p>
内容
</p>
<p>
内容
</p>
<img src="img/2.jpg">
<p>
内容
</p>
<img src="img/3.jpg">
<p>内容
</p>
<img src="img/4.jpg">
<p>
内容
</p>
<p id="editor">
责任编辑：王树淼 SN242
</p>
<!-- 空格符 -->
<span id="keyword">
<b>关键字</b> : 美丽中国 绿色发展 新篇章 新征程
</span>
</div>
</body>
</html>把新闻页面所有的内容都放到一个盒子中，用div标签包装起来，然后在head标签的style中用css内部样式的id选择器为整个页面设置width（宽度）和margin（外边距）
总结
新浪新闻页面基本把常见的html和css网页制作的内容都包含了，非常适合新手小白用来练手，后续我会继续分享我的学习笔记与具体案例，欢迎各位大神批评指正。
扫一扫
623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
