HTML语义化标签
在网页中HTML专门用来负责网页的结构
使用在使用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>
<!--
标题标签：
h1~h6 一共有六级标题
从h1~h6重要性递减，h6最不重要
h1在网页中的重要性仅次于title标题，一般情况下一个网页中只会有一个h1
一般情况下标题标签只会使用h1~h3，h4~h6很少使用
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
hgroup标签：用来为标题分组，可以将一组相关的标题同时放入到hgroup
-->
<hgroup>
<h1>相关标题一</h1>
<h2>相关标题二</h2>
</hgroup>
<!--
p标签表示网页中的一个段落
-->
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<!--
em标签用于表示语音语调的一个加重
strong表示强调
-->
<strong>你好</strong>, <em>世界</em>!
<!--
blockquote表示一个长引用
q表示一个短引用
-->
<blockquote>这是一个长引用。</blockquote>
<q>这是一个短引用。</q>
<!--
br标签表示页面中的换行
-->
<br>
我被<br>换行了。
<!--
布局标签：结构化标签。
header：表示网页的头部。
main：表示网页的主体部分。(一个页面中只会有一个main)
footer：表示网页的底部。
nav: 表示网页的导航。
aside: 表示网页的侧边栏。(主体相关的其他内容)
article：表示一个独立的文章。
section: 表示一个独立的区块。(上边的标签都不能表示时使用section)
div：表示一个区块，没有语义。(使用最多)
span: 行内元素，没有语义。(一般用于在网页中选中文字)
-->
<header>
网页的头部
<nav>网页的导航</nav>
</header>
<main>
网页的主体
<aside>网页的侧边栏</aside>
<article>独立的文章</article>
<div>一个区块, 没有语义。</div>
<span>行内元素, 没有语义。</span>
</main>
<section>独立的区块</section>
<footer>
网页的底部
</footer>
</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
在网页中一般通过块元素来对页面进行布局。
行内元素：inline element
在网页中一般主要用来包裹文字。
一般情况下：
在块元素中会放行内元素，不会在行内元素中放块元元素。
块元素中基本上什么都能放。
p元素中不能放任何的块元素。
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。
标签写在了根标签的外面。
p元素中嵌套了块元素。
根元素中出现了除head和body以外的子元素。
-->
<p>
<h1>p是块元素</h1>
<p>p标签里面的p标签</div>
</p>
<p>p标签</p>
</body>
</html>HTML列表
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>
<!--
有序列表：使用ul标签来创建有序列表
使用li表示列表项。
无序列表：使用ol标签来创建无序列表
使用li表示列表项。
定义列表：使用dl标签来创建定义列表
使用dt表示定义的内容。
使用dd表示对内容进行解释说明。
列表之间可以互相嵌套。
-->
<!-- 有序列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<!-- 无序列表 -->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>结构</dt>
<dd>结构说明</dd>
</dl>
<!-- 列表相互嵌套 -->
<ul>
<li>
<ol>
<li></li>
</ol>
</li>
<li></li>
</ul>
</body>
</html>HTML超链接
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>
<!--
超链接：
可以让我们从一个页面跳转到其他页面
或者是跳转到当前页面的其他位置。
使用a标签来定义超链接。
超链接是一个行内元素，在超链接a标签中可以嵌套任何元素。
属性：
herf: 指定跳转的目标路径。
值可以是一个外部网站的地址。
也可以是一个内部网页的地址。
target: 用来指定超链接打开的位置。
_self: 默认值，在当前页面中打开超链接。
_blank: 在一个新的页面中打开超链接。
id: 唯一不重复的标识。
路径：
绝对路径
相对路径
当我们需要跳转一个服务器内部的网页时，一般都会使用到相对路径。
相对路径都会使用./或者../开头
./ 表示当前文件所在的目录，可以省略不写。
../ 表示当前文件所在目录的上一级目录。
可以直接将超链接的href属性设置为#，这样点击超链接之后页面不会发生跳转
而是转到当前页面的顶部的位置。(使用id属性)
可以将#作为超链接的路径的占位符来使用。
可以将javascript:;作为超链接的href属性，点击超链接什么都不会发生。
-->
<a>我是一个超链接</a>
<a>
<div>我超链接是行内元素</div>
</a>
<a href="#top" id="buttom">回到底部</a>
<a href="https://www.banq.ink/">半晴Miko</a>
<a href="#">半晴Miko</a>
<a href="javascript:;">半晴Miko</a>
<a href="https://www.banq.ink/" target="_self">半晴Miko</a>
<a href="https://www.banq.ink/" target="_blank">半晴Miko</a>
<a href="01.html结构.html">跳转到内部</a>
<a href="./01.html结构.html">跳转到内部</a>
<a href="../01.html结构.html">跳转到内部</a>
<a href="#buttom" id="top">回到顶部</a>
</body>
</html>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: 指定的是外部图片的路径。
路径有绝对路径也有相对路径。
alt: 图片的描述。(在图片加载失败的时候出现)
搜索引擎会根据alt中的内容来识别图片
width: 图片的宽度(单位是像素)
height：图片的高度
高度和宽度如果只修改了一个，那么另一个会等比例缩放。
PC端一般不建议修改图片的宽高度。
图片的格式：
jpeg(jpg)
支持的颜色比较丰富，不支持透明效果，不支持动图。
一般用来显示图片。
gif
支持的颜色比较少，支持简单透明效果，支持动图。
颜色单一的图片、动图
png
支持的颜色丰富，支持复杂的透明效果，不支持动图。
颜色丰富、复杂透明图片
webp
谷歌专门用来表示网页中图片的一种格式。
base64
将图片使用base64编码，将图片转为字符，通过字符的形式来引入图片。
-->
<img src="./images/1.png" alt="这是图片描述" />
<img src="./images/1.png" alt="这是图片描述" height="200" width="150"/>
</body>
</html>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>
<!--
内联框架：用于向当前页面中引入一个其他页面。
使用iframe标签
属性：
src: 指定要引入的网页路径
frameborder：指定内联框架的边框
-->
frameLabelStart--frameLabelEnd
</body>
</html>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标签用来向页面中引入一个外部的音频文件
音视频文件引入时，默认情况下不允许自己控制播放停止
属性：
controls：允许控制播放停止。
autoplay: 是否自动播放。(在打开页面时自动播放)
loop：是否循环播放。
-->
<audio src="./xxxx.mp3" controls autoplay></audio>
<!--
video标签用来向页面中引入一个外部的视频文件
使用与audio标签一致。
-->
<video src="./xxxx.mp4"></video>
</body>
</html>