1.基本标签：
<h1>最大的标题字号
<h2>二号标题字号
<p>换行
2.根标签<html>
包括<head>和<body>
<html> <head> <title> title </title> <body> body </body> </head> </html>
3.自结束标签与注释（注释不可嵌套）
<html> <head> <title> 网页 </title> <body> 自结束标签： <img> <img/> <input> <input/> <!-- 注释：--> </body> </head> </html>
4.标签的属性：
<html> <head> <title> 标签的属性 </title> </head> <body> <!-- 属性font，在标签（开始标签或自结束标签）中设置属性 属性是一个名值对结构 属性用来设置标签中的内容如何显示 属性和标签名或其他属性用"空格"隔开 属性名和属性值不能瞎写--color，red，应该根据规定写 有些属性有属性值，有些没有。 若有属性值，则用引号引起来 --> <h1> 第 <font color="red" size="4">1</font> 个网页 </h1> </body> </html>
5.文档属性:告诉网页是html5的
<!-- 文档声明:doctype -告诉浏览器当前网页版本 -html5的文档声明（不区分大小写） <!doctype html> --> <!doctype html> <html> <head> <title> 网页的基本结构 </title> </head> <body> </body> </html>
6.字符集：使用万国码：UTF-8
<!doctype html> <html> <head> <!--通过meta标签设置网页字符集，避免乱码--> <meta charset="utf-8"> <title> 网页的基本结构 </title> </head> </html>
7.语义化标签（1）
①标题标签：h1~h6共6级标签
从h1到h6重要性递减
h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个h1
一般用h1~h3
②块元素：在页面中独占一行的元素称为块元素（例如h1）
③p标签：表示页面中的一个段落
③hgroup：为标题分组，可以将一组相关的标题同时放入hgroup
④em：语音语调（使字体倾斜）
⑤strong：加粗字体
⑥blockquote：引用，缩进+独占一行
⑦q：短引用，为文字加双引号
⑧br：换行
8.结构化语义标签（2）(前8个了解即可，主要使用div)
①header:网页头部
②main:网页主体（一个页面只有一个main）
③footer:网页底部
④nav:网页导航
⑤aside:和主体相关的其他内容
⑥article:表示一个独立的文章
⑦section:表示一个独立区块，上面的标签都不能表示时使用section
⑧span:行内元素，没有语义，一般用于在网页中选中文字
⑨div:没有语义，只用来表示一个区块，主要使用div来布局元素
9.块和行内
块元素(block element):在网页中一般通过块元素对页面进行布局
行内元素(inline element):包裹文字
一般在块元素中嵌套行内元素（例:<h1><em>iii</em><h1/>）
p元素中不能放任何块元素
浏览器在解析网页时，会对网页中不符合规范的内容进行修正
10.列表list
在html中创建列表：（可以嵌套）
1.无序列表：ul标签：li表示列表项
<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul>
2.有序列表：ol标签：li表示列表项
<ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol>
3.定义列表：dl标签：dt表示定义的内容，dd对内容进行解释说明（交互菜单）
<dl> <dt>dt</dt> <dd>dd1</dd> <dd>dd2</dd> </dl>
11.超链接
使用a标签定义超链接。超链接也是一个行内元素，在其中可以嵌套除a以外的任何元素
属性:href:指定跳转的目标路径
<a href="https://www.baidu.com/">baidu</a>
12.相对路径
.或..开头：./ ../ ./可以省略不写
./当前文件所在目录
../上一级文件目录
13.超链接
(1)新建页面
target属性，用来指定超链接打开的位置
_self默认值，在当前页面打开超链接
_blank在一个新的页面打开超链接
<a href="https://www.baidu.com/" target="_blank">baidu</a>
(2)回到顶部
将超链接的href属性设置为#，这样点击超链接后页面不会跳转，而是转到当前页面的顶部
<a href="#">回到顶部</a>
(3)跳转到任意地方:
使用id，给每个标签设置id属性（唯一标识）
href设为"#"+"id"
<a href="#bottom">去底部</a> <a id="bottom" href="#">--底部--</a>
<a href="javascript:;">什么也不会发生</a>
14.图片标签
（1）img标签引入图片，它是一个自结束标签
属性：src 外部图片路径
img这种元素属于替换元素（被图片替换）
（2）alt，图片的描述，默认情况下不显示，在浏览器无法加载图片时显示
搜索引擎会根据alt中的内容识别图片（如果不写alt则不能被搜索引擎搜到）
（3）width图片宽度 height图片高度（单位：像素）
若两者只改一个，则会等比例缩放
若都改，则会改变图片长宽
（PC端一般不改图片大小，移动端经常对图片进行缩放）
<img width="500 src="./img/1.gif" alt="图片1">
15.图片格式
jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图（一般用来显示照片）
gif 支持的颜色比较少，支持简单透明，支持动图（颜色单一的图片，动图）
png 支持的颜色丰富，支持复杂透明，不支持动图（专为网页而生）
webp 谷歌专门用来表示网页中图片的一种格式，具备其他的有点，而且文件小（最完美的，但兼容性不好（ie浏览器不能用））
base64 将图片用base64进行编码，这样可以将图片转换为字符，通过字符的形式引入图片
一般用于一些需要和网页一起加载的图片采用base64(同步加载)（使用场景不多）
16.内联框架
iframe 用于向其他页面引入一个其他页面
用于向当前页面引入一个其他页面
<!-- frameborder="1" 有边框 ；="0" 无边框--> <iframe src="https://www.bilibili.com/" width="800" height="600" frameborder="0"></iframe>
17.音视频播放
（1）音频
<!-- audio标签用来向页面中引入一个外部音频 音视频文件引入时，默认情况下不允许用户自己控制播放停止 属性： controls 是否允许用户控制播放 autoplay 音频文件是否自动播放，但大部分浏览器不会自动对音乐进行播放 loop 音乐循环播放 --> <audio src="./source/1.mp3" controls autoplay loop></audio>
<!--除了用src指定外部文件的路径外，还可通过source指定文件路径--> <audio> 对不起，您的浏览器不支持播放音频，请升级浏览器！<!--支持的浏览器显示音频，不支持的输出该行文字--> <source src="./source/1.mp3"> <source src="./source/2.mp3"> <source src="./source/3.mp3"> </audio> <!--优点：对用户友好，可以有多个音频（后面的音频只有前面的失效才会显示），若都失效，则显示文字-->
<!--用于老版本浏览器，自动播放(一般不用)--> <embed src="./source/1.mp3" type="audio/mp3" width="200" height="100">
（2）视频
<!--video使用方式基本与audio一致--> <video> <source src="./source/1.webm"> <source src="./source/1.mp3"> <source src="./source/3.mp3"> <embed src="./source/3.mp3"> </video>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)