在今天的博文中，我们将围绕“新浪新闻”项目，深入探讨HTML和CSS在网页制作中的基础应用。通过具体实例，我们将学习如何设置图片、标题、超链接以及文本排版，同时了解CSS的引入方式和选择器优先级，以及视频和音频标签的使用。
标题排版
图片标签 <img>
在网页中插入图片时，我们主要使用<img>标签。这个标签有几个重要的属性：
src：指定图像的URL，可以是绝对路径（如网络地址或磁盘路径）或相对路径（相对于当前页面的位置）。width和height：分别设置图像的宽度和高度，可以是像素值或相对于父元素的百分比。
标题标签 <h1> 到 <h6>
HTML提供了六级标题标签，从<h1>到<h6>，<h1>表示最重要的标题，<h6>表示最不重要的标题。这些标签不仅用于定义文本的大小，还帮助搜索引擎理解网页的结构。
水平线标签 <hr>
<hr>标签用于在HTML页面中插入一条水平线，通常用于分隔内容区块。
标题样式
CSS引入方式
CSS（层叠样式表）用于控制网页的布局和样式。CSS可以通过三种方式引入：
-
行内样式：直接在HTML标签的
style属性中定义样式，虽然方便但不利于维护，不推荐频繁使用。html复制代码 <h1 style="color: #4D4F53; font-size: 24px;">中国新闻网</h1> -
内嵌样式：在HTML文档的
<head>部分使用<style>标签定义样式，适用于单个页面的样式定义。<style> h1 { color: #4D4F53; font-size: 24px; } </style> -
外联样式：将样式定义在单独的
.css文件中，并通过<link>标签在HTML文档中引入，适用于多个页面的样式共享。html复制代码 <link rel="stylesheet" href="css/news.css">
颜色的表示
CSS中颜色的表示方式主要有三种：
- 关键字：如
red、green、blue等预定义的颜色名。 - RGB表示法：通过红绿蓝三原色组合，每项取值范围0-255，如
rgb(255, 0, 0)表示红色。 - 十六进制表示法：以
#开头，将数字转换成十六进制表示，如#4D4F53表示新浪微博标题的颜色。
超链接
标签 <a>
标签用于定义超链接，其href属性指定链接的目标地址，target属性控制链接的打开方式（_self为默认值，在当前页面打开；_blank在新窗口打开）。
CSS属性text-decoration用于控制文本装饰（如去除超链接下划线），color用于定义文本颜色。
正文排版
视频与音频标签
- 视频标签
<video>：用于嵌入视频内容，src属性指定视频文件的URL，controls属性显示播放控件，width和height属性设置播放器的尺寸。 - 音频标签
<audio>：与<video>类似，但用于嵌入音频内容。
文本排版
- 换行与段落：
<br>标签用于换行，<p>标签用于定义段落。 - 文本加粗：
<strong>和<b>标签都可以使文本加粗，但<strong>在语义上表示重要内容，而<b>仅用于样式加粗。
CSS样式
line-height：设置行高，影响文本的垂直间距。text-indent：定义段落首行内容的缩进。text-align：规定元素中文本的水平对齐方式，如left、center、right。
注意事项
- 在HTML中，无论输入多少个空格，浏览器最终只会显示一个空格。如果需要保留多个空格，可以使用空格占位符
页面布局与盒子模型
在网页设计中，页面布局是至关重要的环节，它决定了网页内容的展示方式和视觉效果。而理解盒子模型则是进行页面布局的基础。在本节中，我们将继续深入探讨盒子模型及其在布局中的应用，同时介绍版心居中布局这一常见且实用的布局方式。
盒子模型概述
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。
- 内容区域（Content）：元素的实际内容区域，如文本、图片等。
- 内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。
- 边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
- 外边距区域（Margin）：边框外部的空间，用于控制元素与其他元素之间的距离。
CSS盒子模型属性
在CSS中，我们可以通过一系列属性来设置盒模型的各个部分：
width和height：分别用于设置元素的宽度和高度。border：用于设置边框的样式，如1px solid #000表示边框宽度为1像素、实线、颜色为黑色。padding：用于设置内边距，可以是单一值或分别设置上、右、下、左四个方向的内边距。margin：用于设置外边距，同样可以是单一值或分别设置四个方向的外边距。
值得注意的是，当设置盒子的宽度和高度时，默认情况下，这些值只包括内容区域的宽度和高度，而不包括内边距、边框和外边距。然而，通过设置box-sizing属性为border-box，可以改变这一行为，使得宽度和高度包括内容、内边距和边框，但不包括外边距。
版心居中布局
在网页设计中，版心居中布局是一种常见的布局方式，它能够使网页的主要内容在页面中居中显示，从而提升用户体验。实现版心居中布局的一种简单方法是使用margin属性的auto值。
在CSS中，我们可以为需要居中的元素（通常是div标签）设置左右外边距为auto，同时指定一个固定的宽度。这样，浏览器会自动计算左右外边距的值，使得元素在父元素中水平居中。
示例代码如下：
#center {
width: 65%; /* 设置版心的宽度 */
margin: 0 auto; /* 上下外边距为0，左右外边距自动计算以实现居中 */
}
在HTML中，我们只需要将需要居中的内容包裹在一个div标签内，并为其设置id="center"属性，即可应用上述CSS样式，实现版心居中布局。
完整项目代码
根据以上前置知识，我们就能自己实现一个网页新闻的排版了
<!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;
}
#date {
color: #968D92;
}
a {
color: black;
text-decoration: none;
}
p {
text-indent: 35px;
line-height: 40px;
}
#center {
width: 65%;
/* margin: 0% 17.5% 0% 17.5%; */
margin: 0 auto;
}
</style>
<!-- <link rel="stylesheet" href="../css/1.css"> -->
</head>
<body>
<div id="center">
<img src="./news_logo.png"><a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文
<h1>焦点访谈:初音ミク</h1>
<hr>
<span id="date">2023年03月02日 21:50</span>
<span><a href="https://tv.cctv.com/" target="_blank">央视网</a></span>
<hr>
<video src="../video/1.mp4" controls width="950px"></video>
<audio src="../audio/1.mp3" controls></audio>
<p>
<b>央视网消息</b>（焦点访谈）：
</p>
<p>
一二三四五
</p>
<img src="../img/1.jpg">
<p>
上山打老虎
</p>
<img src="../img/2.jpg">
<p style="text-align: right;">责任编辑：洛天依 SN242</p>
</div>
</body>
</html>
