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的
-->
<div>
<header><nav></nav></header>
<main></main>
<footer></footer>
</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. 默认情况下, 块元素的宽度是视口的百分百
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>得法衣谓如为世样竟。</div>
<p>一死一他打居为后我。</p>
<span>乡她了都身竟，韩马。</span>
<strong>得可帅都，动平书事。</strong>
<em>俭法人失，受久救薪。</em>
<del>10000</del>
</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创建列表
disc: 默认值, 实心圆点
square: 实心方块
circle: 空心的圆
3. 定义列表
用dl创建列表 dt表示下定义 dd表示对定义的解释
类似: 大列表里有很多小列表, 每个小列表里都有标题, 每个标题都有对应解释
注意:
1. 列表之间是可以互相嵌套的
2. 可以使用type属性, 更改项目符号
ol 它的项目符号: 1, a, A, I 等, 默认项目符号是阿拉伯数字"1"
ul 它的项目符号: 默认为实心的圆
3. 默认样式, li前有项目符号, 上下外边距, 左内边距
4. 最常用ol, ul, 在实际使用中, 一般不做有顺序或者无顺序的区分
5. ol, li
ul, li
dl, dt, dd
都是配套使用的, 不要混合使用
-->
<h1>我最喜欢的三件事</h1>
<ol type="I">
<li>吃饭</li>
<li>睡觉</li>
<li>打游戏</li>
</ol>
<h1>起床三件事</h1>
<ul type="square">
<li>刷牙</li>
<li>洗脸</li>
<li>吃早饭</li>
</ul>
<dl>
<dt>web前端课程体系</dt>
<dd>网页三剑客</dd>
<dd>vue2/vue3</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>
<!-- 超链接: 2个功能, 2个属性, 1个补充 -->
<!--
超链接: 可以是一个字, 可以是一个块元素, 可以是图片, 可以是任何内容
特殊的行内元素, 可议包裹任何元素, 除了它自己
默认样式: 字体有一定颜色, 有下划线
功能:
1. 从一个页面跳到另一个页面
2. 在当前页面进行跳转(楼梯导航/锚点功能)
3. 下载
属性:
href属性: 指向跳转的地址
绝对地址: 不管你的html文件在哪里, 超链接去的地方是确定的
相对地址: 它的地址跟超链接的html文件位置相关
./ 当前目录跳转 ./可省略 默认是./
../ 跳出当前目录, 来到上一级目录
注意: 很多的路径规则都是一样的, 包括图片, 音视频跳转等
target属性: 指定超链接页面打开的方式
可选值:
_blank: 新开页面打开超链接 一般情况下, 国内常用
_self: 在当前页面打开超链接(默认值) 一般情况下, 国外常用
具体哪种方式根据项目需求来
锚点功能实现:
去顶部: href的属性值设置为#即可
去任意位置:
1. 先给要去的位置打个标记 id属性="id属性值"
2. 在href里打个标记 href="#id属性值"
注意:
id属性值一般不以数字开头
一般不用汉字
id属性值不能重复使用
补充: 空链接的写法
-->
<!-- 绝对地址 -->
<a href="https://www.csdn.net/"> CSDN </a><br />
<!-- 相对地址 -->
<a href="./03_列表标签.html">列表</a><br />
<a href="../1116/07_实体.html">实体</a><br />
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.baidu.com" target="_self">百度</a>
<a href="">
<div></div>
</a>
<a href="">
<span></span>
</a>
<a href="">
<!-- <img src="../images/1.jpg" alt="!" /> -->
</a>
<a href="#bottom">去底部</a>
<a href="#middle">去中间</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 id="middle">
惜畴兼锐至病于此乌答准云予明弟斯，司瞠留春道破出这，生厅承杨好见色为生，以沾一后者有四不则派得远土，匹上里中系都准将思场归所，贼他么护不，活无谭妙不哥的着不光落貂事打，解统后圣落命为褒当天皇交攻事拾，身更尝死人郭心知但一高都的使，保不九是不不入有你有愿畴房，里向乌谋骂曾句人没快张皇国艳王骂，将辜乐同上皇不变的承在的可，杨知家孔谢圣师给卅珍读乐，九洪妙不，方就不服罚应挟杨是汪以卡回斯乐勉尚，壬只帝。
</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>
</div>
<a href="#" id="bottom">去顶部</a>
<a href="#">空链接1</a>
<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>
<!--
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多, 图片可以压缩, 但是不支持透明
- 一般用来保存照片等颜色丰富的图片
GIF
- 支持的颜色较少, 动图
PNG
- 支持颜色多, 且支持复杂的透明, 不支持动图
- 专为网页而生
webp
具有其他图片格式的所有优点, 而且文件格式还很小, 但是兼容性不好
base64
- 将图片转成字符, 通过字符形式来引入
- 一般需要和网页一起加载的图片才使用base64
图片使用原则
效果不一致, 使用效果好的
效果一致, 使用好的
-->
</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
- 支持的颜色较少, 动图
PNG
- 支持颜色多, 且支持复杂的透明, 不支持动图
- 专为网页而生
webp
具有其他图片格式的所有优点, 而且文件格式还很小, 但是兼容性不好
base64
- 将图片转成字符, 通过字符形式来引入
- 一般需要和网页一起加载的图片才使用base64
图片使用原则
效果不一致, 使用效果好的
效果一致, 使用好的
-->
</body>
</html>
扫一扫
18万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
