HTML基本了解
发明时间：html是于1990年左右诞生
发明人：由Tim Berners-Lee发明。
HTML初始格式
HTML语义标签
header标签
<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。如果<header>用在文章的头部，则可以把文章标题、作者等信息放进去。
由于<header>可以用在多种场景，所以一个页面可能包含多个<header>，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，<header>里面不能包含另一个<header>或<footer>
footer标签
<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息,也可以放在文章里面。但是不能嵌套，即内部不能放置另一个<footer>，也不能放置<header>。
main标签
<main>标签表示页面的主体内容，一个页面只能有一个<main>。因为<main>是顶层标签，所以不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。
aside标签
<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置补充信息、评论或注释。
nav标签
<nav>标签用于放置页面或文档的导航信息。一般来说，<nav>往往放置在<header>里面，不适合放入<footer>。另外，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。
<nav>里面通常是列表，但也可以放置其他标签。
article标签
<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）。一个网页可以包含一个或多个<article>，比如包含多篇文章。
section标签
<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。<section>很适合幻灯片展示的页面，每个<section>代表一个幻灯片。
一般来说，<section>都应该有标题，即包含<h1>~<h6>标签。多个<section>可以放置在同一个<article>里面，一个<section>里面也可能包含多个<article>，这取决于<section>和<article>在当前页面的含义。
h1~h6标签
HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级。<h1>是最高级别的标题，<h6>是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个<h1>后面可以有多个<h2>，每个<h2>后面又可以有多个<h3>。标题不应该越级，比如h1下面直接写h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。
默认情况下，浏览器会粗体显示标题。h1的字号比h2大，h2比h3大，以此类推。
hgroup标签
如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。值得注意的是，<hgroup>只能包含<h1>~<h6>，不能包含其他标签。
HTML文本标签
em标签
<em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。虽然浏览器通常会以斜体显示<em>，但无法保证一定如此，所以最好还是用 CSS 指定一下这个标签的样式。
<i>标签与<em>相似，也表示与其他地方有所区别，浏览器会以斜体显示。它是 Italic 的缩写。
strong标签
<strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。<b>与<strong>很相似，也表示它包含的内容需要引起注意，浏览器会加粗显示。它是 Boldface 的缩写。它与<strong>的区别在于，由于历史原因，它没有语义，是一个纯样式的标签，违反了语义与样式分离的原则，因此不建议使用，应该优先使用<strong>标签。
pre标签
<pre>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。注意，HTML 标签在<pre>里面还是起作用的。<pre>只保留空格和换行，不会保留 HTML 标签。
code标签
<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。如果要表示多行代码，<code>标签必须放在<pre>内部。<code>本身仅表示一行代码。
HTML图像标签
img标签
<img>标签用于插入图片。它是单独使用的，没有闭合标签。<img>默认是一个行内元素，与前后的文字处在同一行。图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。
alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。
图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。
一种特殊情况是，width属性和height属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。
<img>导致的图片加载的 HTTP 请求，默认会带有Referer的头信息。referrerpolicy属性对这个行为进行设置。有时，图片和网页属于不同的网站，网页加载图片就会导致跨域请求，对方服务器可能要求跨域认证。crossorigin属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。
简单说，只要打开了这个属性，HTTP 请求的头信息里面，就会加入origin字段，给出请求发出的域名，不打开这个属性就不加。
一旦打开该属性，它可以设为两个值。
anonymous：跨域请求不带有用户凭证（通常是 Cookie）。use-credentials：跨域请求带有用户凭证。
浏览器的默认行为是，只要解析到<img>标签，就开始加载图片。对于很长的网页，这样做很浪费带宽，因为用户不一定会往下滚动，一直看到网页结束。用户很可能是点开网页，看了一会就关掉了，那些不在视口的图片加载的流量，就都浪费了。
loading属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载，这样就节省了带宽。
loading属性可以取以下三个值。
auto：浏览器默认行为，等同于不使用loading属性。lazy：启用懒加载。eager：立即加载资源，无论它在页面上的哪个位置。
由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。
HTML链接标签
a标签
链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。<a>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。
href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。
hreflang属性给出链接指向的网址所使用的语言，纯粹是提示性的，没有实际功能。
title属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。
target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。
target属性的值也可以是以下四个关键字之一。
_self：当前窗口打开，这是默认值。_blank：新窗口打开。_parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。_top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。
rel属性说明链接与当前页面的关系。
下面是一些常见的rel属性的值。
alternate：当前文档的另一种形式，比如翻译。author：作者链接。bookmark：用作书签的永久地址。external：当前文档的外部参考文档。help：帮助链接。license：许可证链接。next：系列文档的下一篇。nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源。noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。prev：系列文档的上一篇。search：文档的搜索链接。tag：文档的标签链接。
referrerpolicy属性用于精确设定点击链接时，浏览器发送 HTTP 头信息的Referer字段的行为。
该属性可以取下面八个值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。
其中，no-referrer表示不发送Referer字段，same-origin表示同源时才发送Referer字段，origin表示只发送源信息（协议+域名+端口）。其他几项的解释，请查阅 HTTP 文档。
ping属性指定一个网址，用户点击的时候，会向该网址发出一个 POST 请求，通常用于跟踪用户的行为。
type属性给出链接 URL 的 MIME 类型，比如到底是网页，还是图像或文件。它也是纯粹提示性的属性，没有实际功能。download属性表明当前链接用于下载，而不是跳转到另一个 URL。
链接也可以指向一个邮件地址，使用mailto协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。如果是手机浏览的页面，还可以使用tel协议，创建电话链接。用户点击该链接，会唤起电话，可以进行拨号。
HTML表格标签
表格（table）以行（row）和列（column）的形式展示数据。
table标签
table>是一个块级容器标签，所有表格内容都要放在这个标签里面。<caption>总是<table>里面的第一个子元素，表示表格的标题。该元素是可选的。
<thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾。这三个元素都是可选的。如果使用了<thead>，那么<tbody>和<tfoot>一定在<thead>的后面。如果使用了<tbody>，那么<tfoot>一定在<tbody>后面。
大型表格内部可以使用多个<tbody>，表示连续的多个部分。
<tr>标签表示表格的一行（table row）。如果表格有<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级。
<th>和<td>都用来定义表格的单元格。其中，<th>是标题单元格，<td>是数据单元格。
单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。
