HTML简介

HTML（HyperText MarKup Languare, 超文本标记语言），用于构建网页基本结构及其内容的标记语言

超文本：文本中包含指向其他文本的链接
标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文本编码，如：HTML、XML、KML、Markdown等

发展历史

伯纳斯-李在1989年提出了基于互联网的超文本系统
1993年IETF（互联网工程任务组）发布首个HTML提案，由此HTML第一版诞生
在经历过几个草案之后HTML2.0于1995年发布，包括了基于表单的文件上传、表格、国际化等功能
1994年W3C成立，随后接管了HTML的标准化工作，并在1997年发布了HTML3.2
随后发布的HTML4.0采用了许多特定浏览器的元素类型和属性
2014年HTML5作为W3C推荐标准发布

语言特点

超文本标记语言文档制作支持不同数据格式的文件镶入，这也是万维网盛行的原因之一，其主要特点如下：

简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便
可扩展性：超文本标记语言增加了标识符等要求，还采取子类元素的方式，为系统扩展带来保证
平台无关性：超文本标记语言可以广泛使用在任何平台，这也是万维网盛行的原因之一
通用性：超文本标记语言是网络的通用语言，一种简单、通用的全置标记语言

HTML结构

HTML文档包含多个HTML元素，元素具备不同的特性
HTML元素=开始标签+结束标签+元素内容
一些元素只有一个标签，如img、input、br等
HTML元素标签不区分大小写
元素可以嵌套在其他元素中间
元素可以拥有属性，属性包含元素的额外信息

<!DOCTYPE html>      
<html>      
    <head>    
        <meta charset="utf-8">
        <title>我的测试站点</title>
    </head>
    <body>    
        <p class="editor-note">我的猫咪脾气暴</p>
        <img src="cat.png" alt="猫咪照片" />
    </body>
</html>

代码解析
<!DOCTYPE html>:放在HTML文档最前面的位置，加上之后会按照W3C的HTML5的标准来解析渲染页面
<html>:根元素，包含整个页面的内容
<head>:对用户不可见，其中包含例如面向搜索引擎的关键字，页面描述，字符编码声明，CSS样式
<body>:该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等
<title>:元素描述文档的标题

页面结构

<meta>页面元信息
<meta>:charset/name/http-equiv
<meta charset="utf-8"/>定义文档字符编码
<meta name="keywords" content="HTML"/>关键字
<meta name="description content="HTML基础"/>页面描述
<meta name="viewport" content="width=device-width"/>主要用于移动端，定义设备屏幕上用来显示网页的区域
<meta http-equiv=""refresh content="5"/>每5秒刷新一次页面

<link>链接
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon >"当前页面的favicon
<link rel="stylesheet" href="my-css-file.css">链接到样式表
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">可替换的样式表

<script>可执行脚本
<script type="text/javascript" scr="javascript.js">

属性
defer：立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行，只对外部脚本有效。有defer属性的脚本会阻止DOMContentLoaded事件，直到脚本被加载并且解析完成。
async：立即下载脚本，不妨碍其他操作，比如下载其他资源或加载其他脚本，只对外部脚本有效。

常用元素

内联元素

只占据它对应标签的边框所包含的空间
只能容纳文本或其他内联元素
只能通过修改水平边距，边框或者行高的方式修改尺寸
常用的内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块级元素

占据其父元素的整行，总体从新行上开始
能容纳其他块元素或内联元素
可以控制宽高，行高，边距，边框等改变其尺寸
常用的块级元素：<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

行内块级元素

元素在行内排列，不会独占一行
支持设置宽高以及垂直边距、边框
常见的行内块级元素：<img>、<input>、<td>

语义化

根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好的解析。

<!--语义化代码-->
<header></header>
<section>
    <article>
        <figure>
            <img>
            <figcaption></figcaption>
        </figure>
    </article>
</section>
<footer></footer>

优点

使HTML的结构更加清晰
代码的可读性与可维护性较好
搜索引擎可以根据标签的语言确定上下文的权重
移动设备的支持度更好

语义化--区块

<header>

展现介绍性信息
通常包含一组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等
不能放在<footer>、<address>或者另一个<header>元素内部

<header>
    <h1>HTML</h1>
    <p><time pubdate datetime="2021-8-15"></time></p>
</header>

<nav>

在当前文档或其他文档中提供导航链接，如菜单、目录、索引等
用来放置一些热门的链接，不常用的链接通常放到footer里置于底部

<nav>
    <ol>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JS</a></li>
    </ol>
</nav>

<article>

独立的文档、页面、应用、站点
可独立分配的或可复用的结构，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等

<article class="forecast">
    <h1>Weather forecast for Beijing</h1>
    <article class="day-forecast">
        <h2>15 August 2021</h2>
        <p>Rain.</p>
    </article>
    <article>
        <h2>16 August 2021</h2>
        <p>Periods of Rain.</p>
    </article>
</article>

<section>

按主题将内容分组，通常会有标题
<section>通常出现在文章的大纲中
不要把<section>作为普通容器来使用，比如说用于美化片段样式，此时用<div>更合适
如果说元素里面是独立整块的内容，可以单发布，则更适合用<article>

<h1>Choosing an Apple</h1>
    <section>
        <h2>Introduction</h2>
        <p>This document provides a guide to help with the important task of choosing the correct Apple</p>
    </section>
    
    <section>
        <h2>Introduction</h2>
        <p>This document provides a guide to help with the important task of choosing the correct Apple</p>
    </section>

<aside>

表示一个和其余页面内容几乎无关的部分，或者说单独拆分出来不会影响整体的内容
通常放在侧边栏，用于展示广告、tips、引用内容等

<p>我今天要去参加字节跳动青训营...</p>
    <aside>
        <h4>青训营</h4>
        <p>青训营是字节跳动技术团队发起的技术系列培训&人才选拔项目...</p>
    </aside>

<footer>

表示最近一个章节的页脚
通常包含该章节作者，版权数据或者文档链接等信息
footer内的元素不属于章节内容，不包含在大纲中

<footer>
    <p>Posted by:ByteFE</p>
    <p><time pubdate datetime="2021-8-15"></time></p>
</footer>

语义化--分组

<figure>/<fircaption>

<figure>包裹被独立引用的内容：图表、插图、代码等，通常会有一个标题
<fircaption>与其相关联的图表的说明/标题，通常位于<figure>的第一个或最后一个

<figure>
    <img 
    src="cat.png"
    alt="cat">
   <figcaption>猫咪照片</figcaption>
</figure>

<blockquote>

块级引用元素
cite属性表示该来源的url

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like x-rays.</p>
    </blockquote>
    <figcaption>-Aldous huxley,<cite>Brave New World</cite></figcaption>
</figure>

<dl>/<dt>/<dd>

用于描述一组键值对
通常用于元数据、术语定义等场景

 <dl>
     <dt>Firefox</dt>
     <dd>A free,open source cross-platform.</dd>
 </dl>

语义化--文本

<cite>

元素通常用于引用作品的标题
包括论文、文件、书籍、电影等的引用

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like x-rays.</p>
    </blockquote>
    <figcaption>-Aldous huxley,<cite>Brave New World</cite></figcaption>
</figure>

<time>

机器可读的时间和日期
datetime表示此元素关联的时间日期，若不指定则该元素不会被解析为日期

<p>The concert took place on<time datetime="2021-8-15">May 15</time></p>

<address>：某个人或组织的联系信息
<mark>：在引用中使用，表示需要引起注意
<code>：代码片段
<small>：免责声明，注意事项等

多媒体元素

<img>:图片

src属性是必须的，嵌入图片的文件路径
alt属性包含一条对图像的文本描述，非强制。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义，图像无法加载时（网络错误，内容被屏蔽或链接过期时），浏览器会在页面上显示alt属性中的文本
decoding解码方式：异步、同步
loading懒加载

 <img src="cat.png" alt="cat">

<picture>图片

元素通过包含零个或多个<source>元素和一个<img>元素来为不同的显示/设备场景提供相应的图像版本
media属性：依据的媒体条件渲染相应的图片，类似媒体查询
type属性：MIME类型，根据浏览器支持性渲染相应的图片

<picture>
    <source srcset="cat.png" media="(min-width:600px)">
    <img src="cat.png" alt="cat">
</picture>

<picture>
    <source srcset="cat.png" type="image/webp">
    <img decoding="async" loading="lazy" src="cat.png">
</picture>

<video>/<audio>音频

src属性是必须的，嵌入视频文件路径
controls是否展示浏览器自带的控件，可以创建自定义控件
autoplay是否自动播放
source元素表示视频的可替代资源（不同格式，清晰度，读取失败或无法解码时可以依次尝试）

<video controls>
    <source src="/flower.webm" type="video/webm">
    <source src="/flower.mp4" type="video/mp4">
</video>

<audio controls src="/***.mp3">
    Your browser does not support the <code>audio</code> element.
</audio>

<video controls src="/friday.mp4">
    <track default kind="captions" srclang="en" src="/friday.vtt">
</video>

HTML解析

DOM（文档对象模型）：对节点结构化描述，并定义了一种方式可以使程序对该结构进行访问，将web页面和脚本语言连接起来

创建DOM树
样式计算，构建CSSOM树
将DOM和CSSOM组合成一个Render树
布局计算
绘制

【青训营】-- HTML基础笔记