一、结构标签
了解网页结构组成
<!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 搭建网页结构
大部分的网站 头部 主题 底部 导航 文章等等
-->
<!-- 头部 -->
<div></div>
<!-- html5 新增的标签，语义化更强 网站的性能也会更好-->
<!-- 布局标签（结构化标签）
header 网页的头部
main 网页的主体部分（一般就一个）
footer 网页的底部
nav 网页的导航
aside 和主体相关的内容，侧边栏
article 文章之类的
section 独立的区块，上面的标签都不合适，就用这个替代div
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<div></div>
<div></div>
</body>
</html>二、行内与块元素
<!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
行内元素（inlin element）用来包裹文字
特点：
1.不会独占一行
2.宽高是被内容撑开的，内容多宽它就多宽
常用行内元素：span strong em del等
行内块元素
特点
兼具块元素和行内元素特点
常用行内块元素：img
注意
1.块元素主要是用来布局，里面可以放任何元素，块元素、行内元素、行内块元素
2.行内元素主要用来包裹文字的，一般情况下不能放块元素
3.p标签是个特殊的块元素，它里面不能放块元素
4.a标签是个特殊的行内元素，它里面什么都能放
-->
<div>间惊选谓，专到王得。 才越治韩打与价百秦害卅从，服在能这他死郭杨力，光思活子我降木火竟前看夹未护你颜不一玉，竟下台锐报普你统到褒保宋是极，有可珍死三的修了之而无变三气太二升感，这血是哉生惶今师打性活的我法，评名今法向哥又活的救，个太沫音忧纯风极哉他尘沫，朋太内时若夫切乏文言定郭召极，挟我高了得心报快生贼首张友更高卡孔，她活这好资关爱俭绪家极向使入不应得，其云自性畴以希韩，你责李未知灰专梵今也千秦大第洪已文，而褒支，把。
<div></div>
<p></p>
<!--
以下是错误的示范
<span>
<div></div>
</span>
<p>
<h1></h1>
</p> -->
<img src="" alt="">
</div>
<p>看航不前疾，死拾能。</p>
<span>导皇是二。</span>
<strong>掸未</strong>
<em>安胜作发。</em>
<del>10000</del>
<hr>
<p>
<div>
人老貂，真将的，贼。
</div>
</p>
</body>
</html>三、列表
学习使用列表
<!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表示列表项
3.定义列表 用dl创建列表，dt表示下定义，dd表示对定义的解释
类似：大列表里有很多的小列表，每个小列表里有标题，有对标题的解释
注意：1.列表之间是可以相互嵌套的，ul，ol，li是块元素
2.可以使用type属性 更改项目符号
ol 它的项目符号：1、a、A、I 等，默认项目符号是`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>
<h1>最喜欢的三件事</h1>
<ul type='circle'>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<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>四、超链接
学习使用在网页中加入超链接
<!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.下载
属性：
herf属性 指向跳转的地址
绝对地址：不管你的html文件在哪里，超链接去的地方是确定的，是决定
相对地址：./ 当前目录下跳转 ./可省略，默认是./
../ 跳出当前目录，来到上一级目录
注意：很多路径规则都是一样，包括图片、音视频跳转等
target属性 指定超链接页面打开的方式
可选值：
_self 在当前页面打开超链接 一般情况下，默认值，国外网站常用
_blank 新开页面打开超链接，国内常用
具体用哪种方式，根据项目需求来
-->
<a href="https://www.jd.com/"target="_blank">百度</a>
<!--
锚点功能实现
去顶部 href属性值设置为#
去任意的位置 先给要去的位置打个标记 id属性='id属性值'
在href里填写标记 href='#id属性值'
注意：id属性值：你起的名字
一般不以数字开头
一般不用汉字
不能重复使用
补充：空链接的写法
<a href="#">空链接1</a>
<a href="JavaScript：">空链接2</a>
-->
<a href="#">空链接1</a>
<a href="JavaScript：">空链接2</a>
<a href="#abc">去底部</a>
<a href="#center">去中间</a>
<div>
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
<p id="center">
仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
<p>仑太了褒子大者方老王德风，有年就同非骨高一上足定生秦有雷，必以的幕文仁惶战，绝俭宋高，俭不胆，薪变。</p>
</div>
<a href="#" id="abc">去顶部</a>
<a href="https://www.jd.com/">
京东
</a><br><br>
<a href="http://www.baidu.com">
百度
</a><br><br>
<a href="./03.列表.html">
列表
</a><br><br>
<a href="../11月16日/07.实体.html">
11月16日 07.实体
</a><br><br>
<a href="./测试/01.测试.html">
去测试1
</a><br><br>
<a href="./测试/测试2/测试3/测试3.html">
去测试3
</a>
<a href="">
<span></span>
</a>
</body>
</html>五、图片标签
制作图片页面
<!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标签来向 -->
<img src="../../作业/11.16/图片1.png" alt="本地图片跳转">
</body>
</html>六、图片格式
了解图片格式
<!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>七、音视频
学会在网页中插入音视频
<!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 自动播放 （基本上被废止，也是考虑到用户的体验，除了ie9以下）
loop 循环播放
-->
<audio src="" controls autoplay loop></audio>
</body>
</html>
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
