1.结构标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- html 搭建网页结构
大部分的网站 头部 主题 底部 导航 文章等等
-->
<!-- 头部 -->
<!-- html5 新增的标签，语义化更强，网站的性能也会更好 -->
<!-- 布局标签（结构化标签）
header 网页的头部
main 网页的主体部分（一般就一个）
footer 网页的底部
nav 网页的导航
aside 和主体相关的内容，侧边栏
article文章之类的
section独立的区块，上面的标签都不合适，就用这个代替div
-->
</body>
</html>
2.行内与块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 元素分类
块元素（block element） 用来布局
特点：
1、会独占一行
2、默认情况下，块元素的宽度是视口的100%
3、默认情况下，块元素的高度是被内容撑开的
常用块元素：div、p、h1-h6、header、main、footer、nav
行内元素（inline element） 用来包裹文字
特点：
1、不会独占一行
2、宽度是被内容撑开的，内容有多宽它就多宽
常用行内元素：span、strong、em、del
行内块元素
特点：
兼具块元素和行内元素的特点
常用行内块元素：img
注意：
1、块元素主要是用来布局，里面可以放任何元素，块元素、行内元素、行内块元素
2、行内元素主要是用来包裹文字的，一般情况下不能放块元素
3、p标签是一个特殊块元素，它里面不能放块元素。
4、a标签是个特殊的行内元素，它里面什么都能放
-->
<div>
然导那受们釜宫五，杀胜婵杨李志对千训请。
<h1></h1>
</div>
<p>
<div>
兮哉一落。
</div>
</p>
<a href=""></a>
</body>
</html>
3.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
列表：如果页面中，出现结构、样式、功能都比较雷同的部分，就可以用列表
列表（list） 一组一组
1：有序列表 用ol创建列表，li表示列表项
2：无序列表 用ul创建列表，li表示列表项
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
3：定义列表 用dl创建列表，dt表示下定义，dd表示对定义的解释
类似：大列表里面有很多的小列表，每个小列表里有标题，有对标题的解释
注意：
1、列表之间是可以互相嵌套的
2、可以使用type属性，更改项目符号
ol 它的项目符号：1、A、a、Ⅰ、等，默认项目符号是“1”
ul 它的项目符号，默认项目符号：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
3、默认样式，li有项目符号，上下左右有间距
4、最常用ol、ul，在实际的使用中，一般不做有顺序或者无顺序的区分
5、 ol，li
ul，li
dl，dt，dd
都是配套使用，就像cp
不要混合使用！
-->
<h1>我最喜欢的三件事</h1>
<ol type="a">
<li>吃饭</li>
<li>睡觉</li>
<li>学习</li>
</ol>
<hr>
<h1>我最喜欢的三件事</h1>
<ul type="circle">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<hr>
<dl>
<dt>web前端课程体系</dt>
<dd>网页三剑客</dd>
<dd>vue2/ve3</dd>
<dd>react</dd>
<dt>java架构</dt>
<dd>java基础</dd>
<dd>三大框架</dd>
<dd>五大数据库</dd>
</dl>
</body>
</html>
4.超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- html 超文本语言 -->
<!-- 超链接：2个功能，2个属性，1个补充 -->
<!--
超链接：可以是一个字，可以是一个块元素，可以是图片，可以是任何内容
特殊的行内元素，可以包裹任何元素除了它自己
默认样式：字体有一定颜色，有下划线
功能：
1、从一个页面跳到另一个页面
2、在当前页面进行跳转（楼梯导航/锚点功能）
3、下载
属性：
1、href属性 指向跳转的地址
绝对地址：不管你的html文件在哪里，超链接去的地方是确定的，是绝对的
相对地址：它的地址根超链接的html文件位置相关
./ 当前目录下跳转 ./可省略，默认是./
../ 跳出当前目录，来到上一级目录
注意：很多路径规则都是一样，包括图片、音视频跳转等
2、target属性 指定超链接页面打开的方式
可选值：
_self 在当前页面打开超链接 默认值 一般情况下，国外网站常用
_blank 新开页面打开新链接 一般情况下，国内常用
具体用哪种方式，根据项目需求来的
锚点功能实现
去顶部 href属性值设置为#
去任意的位置 先给要去的位置打个标记 id属性='id属性值'
在href里填写标记 fref='#id属性值'
注意：
id属性值：你起的名字：
一般不以数字开头
一般不用汉字
不能重复使用
补充：空链接的写法
<a href="#">空链接</a>
<a href="JavaScript:;">空链接2</a>
-->
<a href="#">空链接1</a><br>
<a href="JavaScript:;">空链接2</a><br>
<a href="https://www.jd.com/" target="_blank">
京东
</a>
<br>
<a href="https://www.baidu.com/" target="_blank">
百度
</a>
<br>
<a href="../1116/08.常用的标签.html" target="_blank">
click here to label
</a>
<br>
<a href="#buttom">
去底部
</a>
<br>
<a href="#center">
去中间
</a>
<div>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p id="center">君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p>君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
<p id="buttom">君杨姑本冷承后设叹斯认侯无极法一，保不。</p>
</div>
<a href="#">
去顶部
</a><br>
<a href="#">空链接1</a><br>
<a href="JavaScript:;">空链接2</a>
</body>
</html>
5.图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
使用img标签来向网页中引入一个外部图片，（掌握4个属性）
src alt width height
-->
<a href="https://img02.sogoucdn.com/app/a/100520093/caeba5a347c20618-9f007285b539607f-23d198196d2a6de0199496bfbd778bc9.jpg">
美女
</a>
</body>
</html>
6.图片格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
图片的格式
JPEG（JPG）
-JPEG图片支持的颜色比较多，图片可以压缩,但是不支持透明
-一般用来保存照片等颜色丰富的图片
GIF
-GIF支持的颜色少,只支持简单的透明，支持动态图
-图片颜色单一或者是动态图时可以使用gif
PNG
-PNG支持的颜色多，并且支持复杂的透明，不支持动图
-可以用来显示颜色复杂的透明的图片 专为网页而生的
webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有替他图片格式的所有优点，而且文件格式还很小
-缺点：兼容性不好
base64
-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64
图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
-->
<!--
网页加载流程
第一次请求：加载网页本身
第二次之后请求，加载外部资源
-->
</body>
</html>
7.音视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- audio标签 用来向页面中引入一个外部的音频文件 -->
<!-- video标签 用来向页面中引入一个视频，使用方式跟音频基本上一样的 -->
<!--
src 引入音视频的路径
controls 控制用户是否可以播放，默认是不能播放
autoplay 自动播放（基本被废止）
loop 循环播放
-->
<audio src="" controls autoplay loop></audio>
<video src="" controls autoplay></video>
</body>
</html>
4435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
