HTML-CSS-常见标签和样式-央视新闻-标题
1、标题的排版（HTML）
HTML程序有两种运行方式：
1、直接在浏览器运行
2、在服务端运行，好处是Ctrl+s保存后浏览器也会自动刷新
1、
-
的HTML区域标题元素：
是一级标题标签，共有h1-h6的6级标签
2、a 超链接标签：
href:链接地址 - usl地址
target:打开方式 - _blank(在新窗口打开)
_self(在当前窗口打开)
_blank(在新窗口打开)
3、HTML基本语法：
元素：元素可以相互嵌套，但必须正确闭合（不能交叉嵌套） 格式：<> </>
属性：属性写在开始标签内，格式：属性名="属性值"
html
<!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>
<!-- 定义一个标题，标题内容：新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，里面展示 央视网 -->
<!-- a 超链接标签：
href:链接地址 - url地址
target:打开方式 - _blank(在新窗口打开)
_self(在当前窗口打开)
_blank(在新窗口打开)
-->
<a href="https://www.cctv.com/" target="_blank">央视网</a>
2024年05月15日 20:07
</body>
</html>
标题的样式（CSS）
1、方式一：行内样式。的复用性最差
2、方式二：内部样式。推荐加在head当中，且仅对当前界面有效，对于其他界面是没有效果的
3、方式三：外部样式。的复用性最强
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<!-- 方式二：内部样式 -->
<style>
span {
/* 关键字 颜色*/
/* color: gray; */
/* RGB 颜色 */
/* color:rgb(255, 0, 0); */
/* RGBA 颜色 */
/* color: rgba(255, 0, 0, 0.5); */
/* 十六进制(红绿蓝) 颜色 */
color: #b2b2b2;
}
</style>
<!-- 方式三：外部样式 -->
<!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
<!-- 定义一个标题，标题内容：新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，里面展示 央视网 -->
<a href="https://www.cctv.com/" target="_blank">央视网</a>
<!-- 方式一：行内样式 -->
<!-- <span style="color:gray;">2024年05月15日 20:07</span> -->
<span>2024年05月15日 20:07</span>
</body>
</html>
css
span {
color: gray;
}
标题的样式(选择器)
1、span元素选择器选择的是页面中的所有span元素
2、选择器优先级：id选择器>类选择器>元素选择器
3、选择器有很多，但常用且重要的就是前三个选择器
4、元素/类/id选择器及其里面的属性属于CSS属性，在HTML中有元素和它里面的HTML属性
HTML元素 + HTML属性 → 构成HTML结构
CSS选择器 + CSS属性 → 控制样式表现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<style>
/* 元素选择器 */
/* span { */
/* 十六进制(红绿蓝) 颜色 */
/* color: #b2b2b2; */
/* } */
/* 元素选择器：操作超链接 */
a{
/* 去除超链接下方的下划线 */
text-decoration: none;
}
/* 类选择器 */
/* .cls {
color: #b2b2b2;
} */
/* id选择器 */
#time {
color: #b2b2b2;
}
</style>
</head>
<body>
<!-- 定义一个标题，标题内容：新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，里面展示 央视网 -->
<a href="https://www.cctv.com/" target="_blank">央视网</a>
<span class="cls" id="time">2024年05月15日 20:07</span>
</body>
</html>
HTML-CSS-常见标签和样式-央视新闻-正文
正文的排版
1、视频标签:< video >
2、音频标签:< audio >
3、图片标签:< img >
4、段落标签:< p >
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<style>
a{
/* 去除超链接下方的下划线 */
text-decoration: none;
}
/* id选择器 */
#time {
color: #b2b2b2;
}
</style>
</head>
<img>
<!-- ---------------------新闻标题--------------------------- -->
<!-- 定义一个标题，标题内容：新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，里面展示 央视网 -->
<a href="https://www.cctv.com/" target="_blank">央视网</a>
<span class="cls" id="time">2024年05月15日 20:07</span>
<!-- ---------------------新闻正文--------------------------- -->
<!-- 定义一个视频，引入 video/news.mp4 -->
<!-- video标签属性
src:视频地址
controls:显示播放控件
autoplay:自动播放
width:视频宽度（建议宽度和高度只设置一个即可，另一个会等比例缩放）
height:视频高度
单位：
px:像素（电脑屏幕长*宽为1920*1080）
%:百分比（整个屏幕的80%）
-->
<video src="video/news.mp4" controls width="80%"></video>
<!-- <audio src="audio/news.mp3" controls></audio> -->
<p>
央视网消息（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
</p>
<p>
行走在长江沿线，科研人员发现很多可喜现象。
</p>
<!-- img标签属性 -->
<!-- 定义一张图片，引入 img/1.gif
src:图片的访问地址
1、绝对路径
1.1绝对磁盘路径：C:\Users\Administrator\Desktop\HTML\img\1.gif(不推荐)
1.2绝对网络路径：http://www.baidu.com/img/1.gif
2、相对路径
2.1 ./当前目录，如当前目录下img/1.gif
2.2 ../上一级目录
width:图片宽度（建议宽度和高度只设置一个即可，另一个会等比例缩放）
height:图片高度
-->
<img src="./img/1.gif" width="80%"></img>
</body>
</html>
正文的样式
1、加粗标签：< b >或< strong >
2、下划线标签:< u >或< ins >
3、倾斜标签:< i >或< em >
4、删除线标签:< s >或< del >
5、空格： 
6、CSS的属性：line-height设置行高、text-indent设置首行缩进
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<style>
a{
/* 去除超链接下方的下划线 */
text-decoration: none;
}
/* 元素（段落）选择器 */
P{
/* 设置行高 */
line-height: 2;
/* 设置首行缩进 */
text-indent: 2em; /*首行缩进两个字符*/
}
/* id选择器 */
#time {
color: #b2b2b2;
}
</style>
</head>
<img>
<!-- ---------------------新闻标题--------------------------- -->
<!-- 定义一个标题，标题内容：新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，里面展示 央视网 -->
<a href="https://www.cctv.com/" target="_blank">央视网</a>
<span class="cls" id="time">2024年05月15日 20:07</span>
<!-- ---------------------新闻正文--------------------------- -->
<!-- 定义一个视频，引入 video/news.mp4 -->
<!-- video标签属性
src:视频地址
controls:显示播放控件
autoplay:自动播放
width:视频宽度（建议宽度和高度只设置一个即可，另一个会等比例缩放）
height:视频高度
单位：
px:像素（电脑屏幕长*宽为1920*1080）
%:百分比（整个屏幕的80%）
-->
<video src="video/news.mp4" controls width="80%"></video>
<!-- <audio src="audio/news.mp3" controls></audio> -->
<p>
<!-- <b>央视网消息</b> -->
<!-- <strong> 央视网消息</strong> -->
<strong>央视网消息</strong>
（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
</p>
<p>
行走在长江沿线，科研人员发现很多可喜现象。
</p>
<!-- img标签属性 -->
<!-- 定义一张图片，引入 img/1.gif
src:图片的访问地址
1、绝对路径
1.1绝对磁盘路径：C:\Users\Administrator\Desktop\HTML\img\1.gif(不推荐)
1.2绝对网络路径：http://www.baidu.com/img/1.gif
2、相对路径
2.1 ./当前目录，如当前目录下img/1.gif
2.2 ../上一级目录
width:图片宽度（建议宽度和高度只设置一个即可，另一个会等比例缩放）
height:图片高度
-->
<img src="./img/1.gif" width="80%"></img>
</body>
</html>
HTML-CSS-常见标签和样式-央视新闻-整体布局
1、整体内容居中
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<style>
.publish-date {
color: #b2b2b2;
}
/* 设置超链接取消下划线效果 */
a {
text-decoration: none;
}
/* 设置段落首行缩进 */
p {
text-indent: 2em; /* 首行缩进2em */
line-height: 2; /* 行高2倍 */
}
/* 新增样式 */
.news-content {
width: 70%; /* 宽度占70% */
margin: 0 auto; /* 横向居中 */
}
</style>
</head>
<body>
<!-- 包裹新闻内容的容器 -->
<div class="news-content">
<!-- 定义网页标题, 标题内容： 【新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1 id="title">【新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
<a href="https://news.cctv.com/" target="_blank" >央视网</a>
<span class="publish-date">2024年05月15日 20:07</span>
<br>
<br>
<!-- 定义一个视频, video/news.mp4 -->
<video src="video/news.mp4" controls width="100%"></video>
<p>
<strong>央视网消息</strong>（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
</p>
<p>
行走在长江沿线，科研人员发现很多可喜现象。
</p>
<!-- 定义一张图片, img/1.gif -->
<img src="img/1.gif" alt="" width="100%">
<p>
在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
</p>
<p>
在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
</p>
<p>
在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
</p>
<img src="img/2.jpg" width="100%">
<p>
水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。
</p>
<p>
实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
</p>
<img src="img/3.jpg" width="100%">
<p>
按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的"无鱼"提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
</p>
<p>
实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。
</p>
<img src="img/4.jpg" width="100%">
<p>
安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
</p>
<p>
在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
</p>
<p>
在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
</p>
<img src="img/5.jpg" width="100%">
<p>
长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
</p>
<img src="img/6.jpg" >
</div>
</body>
</html>盒子模型
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; /* 指定width height为盒子的高宽 */
background-color: aquamarine; /* 背景色 */
padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/
border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
}
</style>
</head>
<body>
<div>
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
</div>
</body>
</html>代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小 , 以及盒子各个组成部分(内容、内边距、边框、外边距)：
