HTML基本语法
HTML版本迭代
HTML4
XHTML2.0
HTML5
......
vscode使用技巧
快捷键
alt+shift+下方向键 ：快速复制本行代码粘贴到下一行
网页的结构
<!Doctype HTML> <!--文档声明 用来告诉浏览器当前网页的版本-->
<html lang="en"><!--html是网页的根标签，网页中的所有内容都要写在根元素里面-->
<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><!--标题标签，而且搜索引擎主要会根据title中内容来判断网页内容-->
</head>
<body> <!--网页的主体-->
</body>
</html>文档声明（doctype）
文档声明用来告诉浏览器当前网页版本HTML5的文档声明
(<!doctype html> 或者 <!Doctype HTML>) 需要写在网页的最开头 在html标签上面
注释语法
在html中注释用来进行注释
html中的注释中的内容会被浏览器忽略不会在网页中显示，但是可以在源码中看到
注意：注释中不可以嵌套注释
字符编码
所有的数据在计算机中存储时都是以二进制形式储存的，所以当读取文字时，计算机将会将二进制编码转换为字符，而过程叫做解码
编码
将字符转换成二进制码的过程解码
将二进制码转换为字符的过程字符集(charset):
编码和解码所采用的规则，如果编码和解码所采用的的字符集不同就会出现乱码问题常见字符集：
ascii：美国ISO88591：欧洲扩充GB2312：仅限中国GBK：支持中国切更全UTF-8:万国码标签
自结束标签
在html中除了成对标签还有自结束标签
如 也可以写成 一共两种自结束标签写法
标签中的属性
在标签中(在成对标签的开始标签或自结束标签) 还可以设置属性 属性是一个名值对（x=y）属性要和标签名或者和其他属性之间需要用空格隔开 属性用来设置标签中内容如何显示 属性不能瞎写，应该根据文档的规定来编写有些属性有属性值，有些没有，如果有属性值，属性值应该用引号或者单引号引起来 需要英文哦
例：
<h1>这是我的<font color="red" size="3">第三个</font>网页</h1> 实体/转义字符
在网页编写中 多个空格默认情况会自动被浏览器解析为一个空格
在html中有些时候，我们不能直接书写一些特殊符号比如：多个连续的空格，字母两侧的大于和小于号 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
实体的语法
&实体的名字；
； 空格
>；大于号
<；小于号
©；版权符号
title标签
title的内容会作为搜索结果的超链接上的文字
meta标签
meta标签主要用于设置网页中的一些元数据，元数据不是给用户看的
charset 指定网页的字符集
name 指定的数据的名称
keywords 表示网站的关键字 关键字内容在content中设置 可以同时指定多个关键字，关键字用逗号隔开description 用于指定网站的表述content 指定的数据内容
例：
http-equiv http协议相关内容
<mata http-equiv="refresh" content="3;url=https://www.baidu.com" >将页面3秒后跳转到百度语义化标签
在网页中HTML专门负责网页的结构 所以在使用html的标签时，应该关注标签的语义，而不是他的样式，因为其所表现的形式都可以通过css进行改变
块元素（block element）
在网页中一般通过块元素来对页面进行布局
标题标签
在页面中独占一行的元素称为块元素（block element）
h1-h6一共有六级标题 从h1到h6总要性递减 h1最重要 h6最不重要 h1在页面中的重要性仅次于title标签，一般情况下一共页面中只会有一个h1 一般情况下标题标签只会使用到h1-h3 h4-h6很少用
hgroup标签
用来为标题分组，可以将一组相关的标题放入hgroup标签内
p标签
p标签表示页面中的一个段落 p标签也是一个块元素
blockquote标签
表示一个长引用，表示该内容是引用内容会自动缩进
br标签
换行标签，是自结束标签
行内元素（inline element）
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素在放款元素
块元素中基本上什么都能放但是p元素中不能放任何块元素
但是浏览器在解析网页时，会自动对网页中不符合规定内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除了head和body以外的子元素
header标签
表示网页的顶部
main标签
表示网页的主体部分 一个页面中只有一个main
footer标签
表示网页的底部
nav标签
表示网页中的导航
aside标签
表示和主体相关的其他内容（侧边栏）
article标签
表示一个独立的文章
sesction标签
表示一个独立的区块，上边的标签不能表示的时候使用section
div标签
没有语义，就用来表示一个区块，目前来讲div还是我们的主要分布元素
span标签
行内元素，没有任何语义，一般用于网页中选中文字
列表标签
在在html中也可以创建列表，html列表中有三种 三种之间可以互相嵌套
使用 li 表示列表项
1.无序列表 使用 ul 标签来创建有序列表
2.有序列表 使用 ol 标签来创建有序列表
3.定义列表 使用 dl 标签来创建一个定义列表
使用dt来表示定义的内容 用dd来对内容进行解释
例：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页中的结构</dd>
</dl>a标签
虽热它是行内元素 但是可以嵌套除它自身外的任何元素
超链接标签
使用a标签来定义超链接属性：href 用来指定跳转的目标路径，跳转的值可以是一个外部网站的地址，也可以是一个内部页面的地址例：<a href="https://www.baidu.com">百度</a>相对路径
当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径 相对路径都会使用./或../开头
./表示当前文件所在的目录 ./可以省略不写，如果不写./也不写../则相当于写了./
../表示当前文件所在目录的上一级目录target属性：用来指定超链接打开的位置
不设置该属性则默认在当前页面中打开超链接
可选值：
_self 默认值 在当前页面中打开超链接_blank在一个新的页面中打开超链接<a href="https://www.baidu.com" target="_blank">百度</a>超链接回到页面指定位置的写法
可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部位置
例： <a href="#" >回到顶部</a>可以跳转到页面的指定位置，只需将href属性设置#目标元素id的属性值
id属性（唯一不重复的）
每一个标签都可以加一个id属性
id属性是元素的唯一标识，同一个页面中不能出现重复的id属性 id属性值是区分大小写的
<a href="#between" >去中间位置</a>
<a id="between" href="#">去顶部</a>在开发中我们常将#作为超链接的路径的展位符但是仍会回到页面顶部，或者也可以用javascript：；作为超链接的路径的展位符 来作为href的属性，这时候点击不会发生任何事情。
例： <a href="javascript:;">这是一个超链接</a>em标签
用于表示语音语调的一个加重
strong标签
表示强调，重要的作用
q标签
表示一个短引用
图片标签
图片标签属于一种替换元素 基于块和行内元素之间用于向当前页面引入一个外部图片 使用img标签来引入外部图片，img标签是一个自结束标签
属性：
src属性 指定的是图片的路径（路径规则和超链接是一样的）alt 属性 对图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示搜索引擎会根据alt中的内容来识别图片如果不写alt属性则图片将不会被搜索引擎所收录
width 图片的宽度（单位是像素）height 图片的高度（单位是像素）宽度和高度中如果只修改了一个，则会等比例缩放 一般情况在pc端，不建议修改图片大小需要多大的图 片裁多大，但是在移动端，经常需要对图片进行缩放（大图缩小）例：<img src="./img/1.jpg" alt="路飞" width="200" height="200">图片的格式
jpeg（jpg）
支持的颜色比较丰富 不支持透明效果 不支持动图一般用来显示照片gif
支持颜色比较少，支持简单透明，支持动图适合表示颜色单一的图片，动图png
支持颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明图（专为网页而生）webp
这种格式是谷歌推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还 特别小 NB666！！ 缺点：兼容性不太好base64格式
将图片使用base64进行编码 可以直接将图片转换为字符，通过字符的形式来引入图片，一般都是需要和网页一 起加载的图片才会使用base64图片格式选择规则：效果一样用占存小的 效果不一样用效果好的
iframe标签 (内联框架标签)
内联框架标签用于向当前页面中引入其他页面
属性：
src 指定要引入的网页的路径
frameborder 指定内联框架的边框 属性值为0或1
<iframe src="https://www.qq.com" width="800" height="800" frameborder="0"></iframe>audio标签
用于向页面中引入一个外部音频文件
音频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
src 指定要引入的音频文件路径
controls 是否允许用户控制播放 这个属性是如果写上去就有 不写就没有这个 不用写值
autoplay 音频文件是否自动播放 这个属性是如果写上去就有 不写就没有这个 不用写值
loop 是否循环播放 这个属性是如果写上去就有 不写就没有这个 不用写值
如果设置了autoplay 则音乐在打开页面时会自动播放但是大部分浏览器都不会自动对音乐进行播放
例： <audio src=“ ” controls autoplay>写法样例</audio>除了可以通过src来指定外部文件路径以外，还可以通过source来指定文件来适配不同新旧浏览器
<audio controls>
对不起您的浏览器不支持播放音频 请升级浏览器
<source src=“ .mp3”>
<source src=“ .ogg”>
<embed src=“ ”type=“audio/mp3” width= “300” height="100" >（适配老浏览器）
</audio>video标签 视频标签
使用方式和音频标签基本一样
适配不同新旧浏览器的解决方式
<video controls>
<source src=“.webm”>
<source src=“.mp4”>
<embed src=“.mp4 type=“video/mp4”>
</video>