1.网页结构
<!-- 生成快捷键 shift + ! -->
<!-- 格式化代码 shift + alt + F -->
<!-- ctrl+/ 注释符号 -->
<!-- <!DOCTYPE html>
文档声明 声明编写规范。避免代码编译进入怪异模式，出现乱码 -->
<!-- html标签 根标签/根元素 所有的内筒都希望在html内，一个页面只能有一个html标签
head标签 头信息
body标签
-->
<!-- meta标签 自结束标签
<meta> <meta />
在开始标签，我们可以加属性和属性值
charset 字符集属性
utf-8 万国码属性值
GB 中国的
GBK 中古的扩展板
charset 设置是为了防止乱码
-->
<!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>
</body>
</html>
| 标签 | 介绍 |
|---|---|
| <!DOCTYPE html> | 文档声明 声明编写规范。避免代码编译进入怪异模式，出现乱码 |
| <html> | 表示整个 html 页面的开始 |
| <meta> | 可设置字符集，防止乱码 |
| <head> | 头信息 |
| <title>标题 | 标题 |
| </head> | |
| <body> | body 是页面的主体内容 |
| 页面主体内容 | |
| </body> | |
| </html> | 表示整个 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>
<!-- 1.有双标签，有单标签
2.html不区分大小写，尽量用小写
3. 可以嵌套，不可以交叉嵌套
4.注释
5.宽泛的语言，容错率比较高，
他会自动纠错，但我们要尽量避免。
-->
</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>
<!-- 什么是实体
空格，大于号，小于号等
实体的语法：
&实体的名字；
实体：
空格
< <
> >
版权符号 ©
-->
©
</body>
</html>
4.常用的标签
4.01 标题标签 <h1>
h1,h2,h3,h4,h5,h6
h1 一级标题
h2 二级标题
默认样式：h6-h1，字体的大小逐步减大，字体会加粗，变黑
从语义上来看：h1-h6，语义是逐步降低的，可以帮助浏览器检索内容，提高网络排名
注意：
常用的标题标签h1-h3
标题标签会独占一行，是块元素。
<!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>
感觉快下雨了
<!-- 标题标签 h1,h2,h3,h4,h5,h6
h1 一级标题
h2 二级标题
...
默认样式：h6-h1，字体的大小逐步减大，字体会加粗，变黑
从语义上来看：h1-h6，语义是逐步降低的，可以帮助浏览器检索内容，提高网络排名
注意：
常用的标题标签h1-h3
标题标签会独占一行，是块元素。
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
</body>
</html>
效果如下：
4.02 段落标签 <p>
默认样式：段落与段落之间有较大的空隙，段落标签独占一行，是块元素
<!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>
朋君我但那临司，母。
<p>
自变世，的躲厅，龄。
学重赐说恼为千之什五生德也升里，谭韦用。
冒欲劫人小读，大春鼓亓卅样尹疾变了尚后沫我了始仄。
</p>
<p>
的书说九竟办厅投使韩间才，他才不因，可。
</p>
</body>
</html>
效果如下：
4.03 标题分组标签 <hgroup>
标题分组
让标题之间有关系
没有默认样式
<!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>
<hgroup>
<h1>古诗一首</h1>
<h3>杜甫</h3>
</hgroup>
</body>
</html>
效果如下：
4.04 强调标签<strong>
strong 强调标签
默认样式：字体加粗加黑。
强调内容
<!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>
<!--
strong 强调标签
默认样式：字体加粗加黑。
强调内容
-->
<p>
同学，你<strong>真帅</strong>
</p>
</body>
</html>
</body>
</html>
效果如下：
4.05 强调标签<em>
em
默认样式：字体斜体。
强调语音语调
<!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>
<p>
同学，你看着<em>真帅</em>
</p>
</body>
</html>
效果如下：
4.06 强制换行标签<br>
强制换行标签,是一个自结束标签
<!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>
日文德快责什风皇耐君报，<br>
丰不迷，<br />
有谢国生狱她连，<br>
手中药血吴。
</body>
</html>
效果如下：
4.07 分割线标签<hr>
hr 分割线标签，是自结束标签
<!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>
日文德快责什风皇耐君报，<br>
丰不迷，<br />
有谢国生狱她连，<br>
手中药血吴。
<hr>
</body>
</html>
效果如下：
4.08 删除线<del>
<!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>
<!-- del 删除线 -->
原价：<del>9999</del><br>
现价：9.9<br>
包邮
</body>
</html>
效果如下：
4.09 居中标签<center>
<!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>
<center>
<h1>居中标题</h1>
</center>
</body>
</html>
效果如下：
4.10 div标签<div>
是没有任何语义的标签,是一个块元素，会独占一行
<!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>
亲是同到许卧程，负。
<div>
事不以，三在平杨感。
</div>
</body>
</html>
效果如下：
4.11 span标签<span>
是没有任何语义的标签，不独占一行
<!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>
<span>span 不独占一行</span>
<span>span 不独占一行</span>
</body>
</html>
效果如下：
4.11 引用标签<q>
默认样式，双引号包裹
<!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>
子曰：<q>学而时习之</q>
</body>
</html>
效果如下：
5.结构标签
html5 新增的标签，语义化更强
布局标签(结构化标签) 用来布局的都是块元素
header 网页的头部
main 望月的主体部分(一般就一个)
footer 网页的底部
nav 网页的导航
aside 和主题相关的内容，侧边栏
article 文章之类的
section 独立的区块，上面的标签都不合适，就用这个，用来代替div
<!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>
<!-- html5 新增的标签，语义化更强 -->
<!-- 布局标签(结构化标签) 用来布局的都是块元素
header 网页的头部
main 望月的主体部分(一般就一个)
footer 网页的底部
nav 网页的导航
aside 和主题相关的内容，侧边栏
article 文章之类的
section 独立的区块，上面的标签都不合适，就用这个，用来代替div
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
</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>
<!--
元素分类
块元素(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>
</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>
<!--
列表：如果页面当中，出现结构、样式、功能都比较雷同的部分，
就可以用列表。
列表(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. lo，li
ul，li
dl，dt，dd
都是配套使用的。
-->
<h1>起床的三件事</h1>
<ol>
<li>刷牙</li>
<li>洗脸</li>
<li>出门</li>
</ol>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<dl>
<dt>web前端课程体系</dt>
<dd>网页三剑客</dd>
<dd>vue2/vue3</dd>
<dd>react</dd>
<dt>java架构</dd>
<dd>java基础</dd>
</dl>
</body>
</html>
效果如下：
8.超链接
<!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>超链接</title>
</head>
<body>
<!-- html 超文本语言 -->
<!-- 超链接 2个功能，2个属性，1个补充 -->
<!--
超链接：可以是一个字，可以是一个块元素，可以是图片，可以是任何内容
是一个特殊的行内元素，可以包含任何元素，除了他本身。
默认样式：字体有颜色，有下划线。
功能：
1.从一个页面跳转到另一个页面
2.在当前页面内进行跳转(锚点功能)
3.下载
属性：
href 属性： 指向跳转的地址
绝对路径：不管你的html文件在哪里，超链接跳转到的地方是确定的，
相对路径：它的的地址值跟超链接的html文件位置相关。
./ 当前目录下跳转,默认是./ 可省略。
../ 跳到上一级目录
注意：很多路径规则都是一样的。
target 属性： 指定超链接页面打开的方式
可选值：
_self 当前页面打开超链接 默认情况。国外网站常用
_blank 新开页面打开超链接 国内网站常用
具体用哪种方式，根据项目需求来的。
锚点功能的实现：
去顶部： href属性设为#
去任意的位置： 先给要去的位置打个标记 id="id属性值"
在href里填写标记 href="#id属性值"
注意： id属性值： 你起的名字
一般不以数字开头
一般不用汉字
一般不能重复使用
补充：空链接的写法
<a href="#">空链接1</a> 会跳转到顶部
<a href="javaScript:;">空链接2</a> 不跳转到
-->
<a href="https://www.jd.com" target="_blank">
京东 blank
</a><br><br>
<a href="https://www.baidu.com" target="_self">
百度 self
</a><br><br>
<a href="./03.列表.html">
03.列表
</a><br><br>
<a href="../1116/07.实体.html">
07.实体
</a><br><br>
<a href="test/test.html">
测试1
</a><br><br>
<a href="">去底部</a>
</body>
</html>
9.图片标签<img>
<!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 引入图片的路径 暂时将html文件和图片放在同一个文件夹下
alt 是对图片的描述，正常情况下，alt的内容是不显示，
当图片的路径出现问题了，图片引入不成功，alt就会显示
它可以帮助浏览器检索图片，养成写alt的习惯
width 设置图片的宽度
height 设置图片的高度
一般情况下，不会同时设置width和height，
只要单独设置width或者height，另外一个就会自适应调整
-->
<img src="./hg.gif" alt="胡歌" height="300px">
</body>
</html>
10.图片格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<!--
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般用来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多，并且支持复杂的透明，不支持动图
- 可以用来显示颜色复杂的透明的图片
专为网页而生的
webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有其他图片格式的所有优点，而且文件格式还很小
-缺点：兼容性不好
base64
-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64
图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
-->
<!-- 网页加载流程
第一次请求：加载网页本身
第二次之后请求，加载外部资源 -->
</body>
</html>
11.音视频
<audio>：音频
<video>：视频
<!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="./source/达拉崩吧.mp3" controls autoplay loop></audio>
<video src="./source/绝地逢生.mp4" controls></video>
</body>
</html>
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
