<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<meta charset="UTF-8">
<!-- 设置浏览器兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
img标签：
src: 图片资源路径
width: 宽度（px，像素；%，占父元素宽度的百分比也就是body的宽度）
height: 高度
路径书写方式：
绝对路径：
1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径：
./ : 当前目录，./ 可以省略的
../ : 上一级目录
-->
<img src = img/news_logo.png > 新浪 > 正文
<h1>新闻题目</h1>
<hr>
2024.9.12
<hr>
</body>
</html>
上一章完成了标题的基本结构，下面进行润色。
CSS样式控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<!-- 方式一：内联样式 -->
<style>
h1 {
color: #4C4E52;
}
</style>
<!-- 方式三：外联样式 -->
<!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文
<!-- 方式二：行内样式 -->
<!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
2024年09月12日 21:50 央视网
<hr>
</body>
</html>这是方法三
下面进行补充颜色知识，可以使用谷歌浏览器插件
<span>标签，行内标签，仅用于分隔，没有语义。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>焦点访谈</title>
<style>
/* 元素选择器 */
/*
span {
color: red;
}
*/
/* 类选择器 */
/*
.cls {
color: green;
}
*/
/* ID选择器 */
#time {
color: #968D92;
font-size: 13px;/* 字体大小 */
}
</style>
</head>
<body>
<img src="img/news_logo.png" alt="新闻Logo"> 新浪政务 > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span>
<span class="cls">央视网</span>
</body>
</html>超链接
HTML 新闻正文
正文排版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>焦点访谈</title>
<style>
/* 元素选择器 */
/*
span {
color: red;
}
*/
/* 类选择器 */
a {
color: green;
text-decoration: none;
}
p{
text-indent: 35px;/* 缩进 */
line-height: 40px;/* 行高 */
}
/* ID选择器 */
#time {
color: #968D92;
font-size: 13px;/* 字体大小 */
}
#editor {
text-align: right;
}
</style>
</head>
<body>
<img src="img/news_logo.png" alt="新闻Logo"> <a href="https://news.sina.cn/?vt=4" target="_blank">新浪首页</a> > 新闻 > 焦点访谈 > 新浪政务 > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span>
<span class="cls">央视网</span>
<!-- 正文 -->
<!-- 视频 -->
<video src="video/1.mp4" controls width="950px"></video>
<!-- 音频 -->
<audio src="audio/1.mp3" controls></audio>
<p>
<b>央视网消息</b>（焦点访谈）：党的十八大以来，以习同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事。
重农抓粮一系列政策落实有力有效，我国粮食产量连增。1.3万亿斤谷物，谷物基本自给，口粮绝对安全。
我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑。为应对各种风险挑战赢得了主动。
连续八年，1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
</p>
<p>
人勤春来早，春耕农事忙。进入春之后，由南到北，我国春耕备耕工作陆续展开，春天的田野处处生机盎然。
</p>
<p id="editor">
责任编辑：张晨
</p>
</body>
</html>页面布局
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
div {
width: 200px;
height: 200px;
box-sizing: border-box; /* 指定宽高为盒子的高度 */
background-color: aquamarine; /* 背景色 */
padding: 20px; /* 内边距，上右下左 */
border: 10px solid red; /* 边框，宽度，线条类型，颜色 */
margin: 30px 30px 30px 30px; /* 外边距，上右下左 */
}
</style>
</head>
<body>
<div>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</body>
</html>将页面居中显示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>焦点访谈</title>
<style>
/* 元素选择器 */
/*
span {
color: red;
}
*/
/* 类选择器 */
a {
color: green;
text-decoration: none;
}
p{
text-indent: 35px;/* 缩进 */
line-height: 40px;/* 行高 */
}
/* ID选择器 */
#time {
color: #968D92;
font-size: 13px;/* 字体大小 */
}
#editor {
text-align: right;
}
#center{
width: 65%;
/* margin: 0 17.5% 0 17.5%; */
margin: 0 auto;/*自动居中*/
}
</style>
</head>
<div id = "center">
<body>
<img src="img/news_logo.png" alt="新闻Logo"> <a href="https://news.sina.cn/?vt=4" target="_blank">新浪首页</a> > 新闻 > 焦点访谈 > 新浪政务 > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span>
<span class="cls">央视网</span>
<!-- 正文 -->
<!-- 视频 -->
<video src="video/1.mp4" controls width="950px"></video>
<!-- 音频 -->
<audio src="audio/1.mp3" controls></audio>
<p>
<b>央视网消息</b>（焦点访谈）：党的十八大以来，以习同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事。
重农抓粮一系列政策落实有力有效，我国粮食产量连增。1.3万亿斤谷物，谷物基本自给，口粮绝对安全。
我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑。为应对各种风险挑战赢得了主动。
连续八年，1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
</p>
<p>
人勤春来早，春耕农事忙。进入春之后，由南到北，我国春耕备耕工作陆续展开，春天的田野处处生机盎然。
</p>
<p id="editor">
责任编辑：张晨
</p>
</body>
<div>
</html>
