一、结构标签
了解网页结构组成
<!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>