--前端三件套之一HTML（Hypertext Markup Language）超文本标记语言；HTML命令可以说明文字，图形，动画，声音，链接，表格等，它是我们用来进行网页的布局以及内容展示的主要语言。
[TOC]
HTML
1.标签
<h1>有朋自远方来</h1><h2>图片没有就不放了</h2>
<img src="./img/1.png">
有朋自远方来
图片没有就不放了
这里我们会发现标签存在标签会 成对出现（一般），但是也会存在一些自结束标签。
2.meta标签
<meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货">
上面这行代码是我们经常能在一些网站上看到的；这里的meta标签主要用于设置网页中的一些元数据，元数据不算给用户看的，是给浏览器或者搜索引擎看
charset 指定网页的字符集
name 指定数据的名称
content 指定数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字用，隔开
当然这些好像和搜索引擎没关系把不用急往下看
<meta name="description" content="苏宁易购-综合网上购物平台，商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快，正品行货、全国联保、可门店自提，全网更低价，让您放心去喜欢！">
这里的 description 用来指定网站的描述，网站的描述会显示在搜索引擎的搜索结果上，就我们搜索东西的特点，浏览器会搜索这些含带这些数据的网站进行返回。
3.语义化标签
网页中HTML专门来负责网页的结构，所以在使用HTML标签时，硬干关注的是标签的语义，而不是它的样式；在页面中独占一行的元素成为块元素（block element）；相反，在页面中不hi独占一行的元素被成为行内元素（inline element）。
1.h1~h6
标题标签 ：h1~h6 一供有六级标题；从h1~h6重要性递减，h1最重要，h6最不重要；h1在网页中的重要性仅次于title标签；标题标签都是块元素
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.hgroup
hgroup标题用来为标题分组，可以将一组相关的标题同时放入到hgroup中
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
3.p标签
p标签表示页面中的一个段落，所以p标签也是一个块元素
少小离家老大回
乡音无改鬓毛衰
儿童相见不相识
笑问客从何处来
在p标签中的内容就表示一个段落
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>在p标签中的内容就表示一个段落</p>
4.em标签
em标签用于表示语言语调的一个加重
今天天气真不错！
<p>今天天气<em>真</em>不错！</p>
5.strong标签
strong表示强调，重要的内容！
你今天一定要加油
<p>你今天一定要<strong>加油</strong></p>
6.blockquote标签和q标签
这句话我是从来没有说过的！
子曰：学而时习之，乐呵乐呵！
<!--blockquote 表示一个长引用-->
<blockquote>
这句话我是从来没有说过的！
</blockquote>
<!--q 表示一个短引用-->
子曰：<q>学而时习之，乐呵乐呵！</q>
7.br标签、samll标签、sub标签
br标签用于在页面中换行，small标签会定义小号文本，sub标签hi定义下标文本，b标签可以加粗内容，i标签可以给文字加上斜体
<br>
<br>
今天饭菜不好吃
<br>
<!--br标签表示页面中的换行-->
<br>
<b>今天太阳不太好</b>
<!--b标签可以加粗内容-->
<br>
<br>
<i>今天天气不太好</i>
<!--i标签可以给文字加上斜体-->
<br>
<br>
<small>我要上天</small>
<!--small标签会定义小号文本-->
<p>666</p>
<sub>我要玩游戏</sub>
<!--sub标签会定义下标文本-->
我要玩游戏
我上钻石了
今天天气不太好今天太阳不太好
8.布局标签
-
header 表示网页的头部，
-
main 表示网页的主体部分（一个页面中只会有一个main），
-
footer 表示网页的底部，
-
nav 表示网页中的导航，
-
aside 和主体相关的其他内容（侧边栏），
-
article 表示一个独立的文章，
-
section 表示一个独立的区块，上面的标签都不能表示时使用section，
-
div 没有语义，就是用来表示一个区块，目前来讲div还是主要的布局元素，
-
span是一个行内元素，没有语义，一般用于在网页中选中文字。
4.列表
在html中也可以创建列表，html列表一共有三种：
-
1.有序列表
-
2.无序列表
-
3.定义列表
无序列表，使用ul标签来创建无序列表
-
使用li来表示列表项
-
有序列表，使用ol标签来创建有序列表
-
使用ol来表示列表项
-
定义列表，使用dl标签来创建定义列表
-
使用dt来表示定义的内容
-
使用dd来对内容进行解释说明
-
列表之间可以互相嵌套
<!--
列表（list）
1.铅笔
2.尺子
3.橡皮
-->
<ul>
<li>高兴</li>
<li>高兴</li>
<li>不高兴</li>
</ul>
<ol>
<li>不高兴</li>
<li>不高兴</li>
<li>高兴</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
- 高兴
- 高兴
- 不高兴
- 不高兴
- 不高兴
- 高兴
- 结构
- 结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
5.超链接
超链接可以让我们从一个页面跳转到其他页面 或者是当前页面的其他位置。 使用 a 标签来定义超链接 属性： href 指定跳转的路径 url可以是一个外部网站的地址
超链接 a标签也是一个行内元素，在a标签中可以嵌套任何的元素
<a href="https://www.baidu.com/">嘻嘻</a>
<!--
target属性，用来指定超链接打开的位置
可选值：
_self 默认值 在当前网页打开超链接
_blank 在一个新的网页中打开超链接
-->
<a href="07.列表.html" target="_blank">新开网页</a>
6.图片标签
图片标签用于向当前页面中引入一个外部图片 使用img标签来引入外部图片，img标签是一个自结束标签
- img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点） 属性：
- src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
- 搜索引擎会根据alt中的内容来识别图片
图片的格式：
- jpeg（jpg） 支持的颜色比较丰富，不支持透明效果，不支持动图 一般用来显示照片
- gif 支持的颜色比较少，支持简单透明，支持动图 适合颜色单一的图片，动图
- png 支持的颜色丰富，支持复杂透明，不支持动图 颜色丰富，复杂透明图片（专为网页而生）
- webp 这种格式是谷歌推出的专门来表示网页中的图片的一种格式 它具备其他图片格式的所有优点，而且文件还特别小 缺点：兼容性不好
- base64： 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片 一般都是需要和网页一切加载的图片 才会使用base64
<!--
width 图片的宽度（单位是像素）
height 图片的高度
宽度和高度只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片单独大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
效果一样，用小的
效果不一样，用效果好的
-->
7.内联框架 内联框架，用于向当前页面中引入一个其他页面。 src 指定要引入的网页的路径 frameborder 指定内联框架的边框
<iframe src="https://www.ctfhub.com/" width="800" height="600" frameborder="0"></iframe>
这是我第一次进行总结这些知识，如果有那些不足请见谅！
