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.gif1.2、绝对网络路径：https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif2、相对路径2.1、 ./ 表示当前目录(可以省略)2.2、../ 表示上一级目录alt :图片描述width :图片宽度height :图片高度（建议宽度和高度只设计一个，另一个会等比例缩放）--><img src="img/1.gif" width="60%"></img></body>
</html>
