HTML是一种超文本标记语言
超文本：超过了文本的限制，比普通文本更强大，除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签"<标签名>"构成的语言。
CSS:层叠样式表，用于控制页面的样式（表现）。
常见标签
| 类别 | 标签 | 说明 |
|---|---|---|
文本处理标签 | <h1> - <h6> | 一级标题 - 六级标题(h1到h6字体逐渐变小) |
<br>、<p> | 换行、段落 | |
<strong>、<em>、<ins>、<del> | 文本加粗、倾斜、下划线、删除线（具有强调作用） | |
<a href="..."> | 超链接（属性：href、target） | |
| 图片 音视频标签 | <img src="..."> | 图片（路径：绝对路径、相对路径） |
<audio src="...">、<video src="..."> | 音频、视频 | |
| 布局标签 | <div>、<span> | 没有语义的布局标签，配合CSS实现页面布局 |
| 表格标签 | <table>、<thead>、<tbody><br><tr> / <th>、<td> | 表格、表头、表格主体 行/单元格 |
表单标签 | <form> | 定义表单（属性：action、method） |
<input type="text/button"> | 表单项（文本输入框、按钮...） | |
<select> / <option> | 表单项（下拉列表/选项） |
| 类别 | 属性 | 说明 |
|---|---|---|
| 盒子模型 | width, height | 作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示<br>高度、宽度 |
| box-sizing | 高度和宽度的计算方式；content-box, border-box | |
| padding | 内边距（上、右、下、左；上下、左右） | |
| border | 边框 | |
| margin | 外边距（上、右、下、左；上下、左右） | |
| flex弹性布局 | display | 作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力。<br>flex: 使用flex布局 |
| flex-direction | 设置主轴方向（row: x轴，水平方向；column: y轴，垂直方向） | |
| justify-content | 子元素在主轴上的对齐方式 |
样式
若是需要更改某个标签下字体的颜色，有三种样式
1、内部样式
在style标签里直接定义需要标签字体的颜色（如以下代码style标签定义span标签内的字体颜色）
2、行内样式
在定义标签时直接在标签后跟需要的颜色（如以下代码<span style="color:gray">2024年05月15日 20:07</span>）
3、外部样式
通过调用外部css文件中的代码为某个标签定义颜色（如<link rel="stylesheet" href="css/news.css">）
下面为css文件中的内容
以下均为没有内容的示例，可以自己往title等标签内加入内容测试。
<!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, 120, 0, 0.1); */
/* 十六进制表示法 */
color: #8e8282;
}
</style>
<!-- 方式三：外部样式 -->
<!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
<!-- 定义一个标题，标题内容：： -->
<h1></h1>
<!-- 定义一个超链接，里面展示 央视网 -->
<!-- a 超链接标签
href 属性 超链接的地址
target 属性 超链接打开方式
1、_blank 新窗口打开
2、_self 当前窗口打开（默认）
3、_parent 父窗口打开
内容 超链接的文本 -->
<a href="http://www.cctv.com" target ="_blank">央视网</a>
<!-- span为没有语义的标签，此处用于修改字体颜色 -->
<!-- 方式一：行内样式 -->
<!-- <span style="color:gray">2024年05月15日 20:07</span> -->
<!-- 方式二：内部样式 -->
<span>2024年05月15日 20:07</span>
</body>
</html>选择器
以上的设置样式的方法有缺陷，方式一、三会直接将所有span标签的字体都设为灰色，方式二书写步骤繁琐，但选择器可以解决这个问题。
选择器有元素选择器，类选择器与id选择器，其中元素选择器就是上文介绍的方法
类选择器
语法：在style标签内 .类名{这个类需要的修改}，使用时在标签后声明是哪个类就行（如 <span class="cls" id="time">2024年05月15日 20:07</span>）
id选择器
语法：在style标签内 #id名{此id需要的修改} ，使用时标签内声明是哪个id即可（如 <span class="cls" id="time">2024年05月15日 20:07</span>）
优先级顺序如下（从高到低）：
-
ID 选择器（
#id）：优先级最高。 -
类选择器（
.class）、属性选择器（如[type="text"]）、伪类选择器（如:hover）：优先级次之。 -
元素选择器（
div,span等）：优先级最低。
<!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;
} */
/* 类选择器 */
/* .cls{
color:#f00;
} */
/* id选择器 */
#time{
color:#0000ff;
}
</style>
<!-- 方式三：外部样式 -->
<!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
<!-- -----------------新闻标题------------------------ -->
<h1></h1>
<a href="http://www.cctv.com" target ="_blank"> </a>
<span class="cls" id="time">2024年05月15日 20:07</span>
<!-- 换行 -->
<br></br>
<!-- -----------------新闻正文------------------------ -->
<!-- 定义一个视频，引入video/news.mp4 -->
<!-- video标签的属性
src :视频地址
没有播放控件视频不能播放
controls :显示播放控件
autoplay :自动播放
width :视频宽度（建议宽度和高度只设计一个，另一个会等比例缩放）
height :视频高度
单位：像素px % ：百分比（相对于父元素的百分比）
-->
<video src="video/news.mp4" controls autoplay width="60%"></video>
<br></br>
<!-- 音频播放器 -->
<!-- <audio src="audio/news.mp3" controls autoplay></audio> -->
<!-- 段落标签：p -->
<p>
</p>
<P>
</P>
<!-- 定义一张图片，引入img/1.gif -->
<!-- img标签的属性
src :图片访问地址:
1、绝对路径
1.1、绝对磁盘路径：D:\我的文档\桌面\HTML-CSS\img\1.gif
1.2、绝对网络路径：https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif
2、相对路径
2.1、 ./ 表示当前目录(可以省略)
2.2、../ 表示上一级目录
alt :图片描述
width :图片宽度
height :图片高度（建议宽度和高度只设计一个，另一个会等比例缩放）
-->
<img src="img/1.gif" width="60%"></img>
</body>
</html>
![AT_abc409_e [ABC409E] Pair Annihilation](https://i-blog.csdnimg.cn/img_convert/1a644047a1897e17bd3c0227eae93ff4.png)
