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表示法：最后一个数是透明度 0-1 */
/* color: rgba(255, 0, 0, 0.5); */
/* 十六进制表示法 */
color:#B2B2B2
}
/* 类选择器 */
.cls{
color: red;
}
/* id选择器 */
#id{
color: blue;
}
/* 优先级：id > 类 > 元素选择器 */
a{
/* 去除超链接下方的下划线 */
text-decoration: none;
}
p{
/* 设置行高 */
line-height: 30px;
/* 设置首行缩进 */
text-indent: 2em;
}
#content-container{
width: 70%;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- 方式三：外部样式 -->
<!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
<div id="content-container">
<!-- div盒子模型组成：内容(content)、内边距(padding)、边框(border)、外边距(margin) -->
<h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 </h1>
<a href="https://www.cctv.com/" target="_blank">央视网</a>
<!-- target是打开方式，_blank是新窗口打开，不写默认值_self就在当前窗口打开 -->
<!-- 方式一：行内样式 -->
<!-- <span style="color:gray">2024年05月15日 20:07</span> -->
<span class="cls" id="id">2024年05月15日 20:07</span>
<span>6666</span>
<br><br>
<!-- ------------------新闻正文------------------ -->
<!-- 定义一个视频，引入video/news.mp4 -->
<!--video标签属性
src：视频地址
controls:显示播放控件
autoplay:自动播放
width:视频宽度（建议：宽度和高度只设置一个即可，另一个会等比例缩放）
height:视频高度
单位：
px：像素
%：百分比(相对于父元素的百分比)
-->
<video src="video/news.mp4" controls width="100%"></video>
<!-- 引入一个音频，引入audio/news.mp3 -->
<!-- <audio src="audio/news.mp3" controls></audio> -->
<p>
<!-- <b>央视网消息</b>加粗 -->
<strong>央视网消息</strong>
（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。
</p>
<p>
行走在长江沿线，科研人员发现很多可喜现象。
</p>
<!-- 定义一张图片，引入img/1.gif -->
<!-- img标签属性
src：图片地址
1.相对路径
1.1绝对磁盘路径：C:\Users\Administrator\Desktop\img\1.gif（不推荐）
1.2绝对网络路径：https://www.baidu.com/img/1.gif
2.相对路径
2.1 ./表示当前目录（可以省略），如：./img/1.gif
2.2 ../表示上一级目录，
width：图片宽度（建议：宽度和高度只设置一个即可，另一个会等比例缩放）
height：图片高度
-->
<img src="img/1.gif" width="100%" >
</div>
</body>
</html>
