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>
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tlias智能学习辅助系统</title> <style> body{/* 去掉默认的边距 */ margin: 0; } .navbar{ background-color: #808080; display: flex;/* 弹性布局 */ justify-content: space-between;/* 左右对齐 */ padding: 10px;/* 上下左右的内边距 */ align-items: center;/*垂直居中*/ } .navbar h1{ margin: 0;/*移除默认外边距 */ font-weight: bold;/* 加粗 */ color: white; /* 字体为楷体 */ font-family: '楷体'; } .navbar a{ color:white; text-decoration: none;/* 移除下划线 */ } </style> </head> <body> <!-- 顶部导航栏 --> <div class = "navbar"> <h1>Tlias智能学习辅助系统</h1> <a href="#">退出登录</a> </div> </body> </html>
- 表单标签
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- form表单： action：表单提交数据的URL地址 method：表单提交数据的方式 get:默认，表单数据会出现在URL后面，形式:/save?username=Tom&age=12 特点：1、如果表单中包含了隐私数据，get方式并不安全，不推荐使用该方式 2、数据量比较大，get方式数据量有限制，不能提交大量数据 post：表单数据不会出现在URL后面，数据会以表单数据的形式提交给服务器 特点：1、post方式安全，推荐使用该方式 2、数据量比较大，post方式没有数据限制，可以提交大量数据 注意：表单项要想能够采集数据，必须得设置name属性，表示当前表单项的名字 --> <form action="/save" method="get"> 姓名:<input type="text" name="username"> 年龄:<input type="text" name="age"> <input type="submit" value="提交"> </form> </body> </html>
- 选中想要缩进的代码块，按"Tab"键缩进，按"Shift + Tab"键表退格。
