引言
前端开发主要是实现网页制作等前端页面及其功能
实现网页制作的主要技术就是“三件套”--HTML、CSS和JS，现在先介绍HTML
HTML简介
HTML（Hyper Text Markup Language，超文本标记语言），用于构建网页结构及其内容的标记语言
超文本：文本中包含指向其他文本的链接
标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构，如：HTML、XML、KML、Markdown等
HTML结构
- HTML文档包含多个HTML元素，元素具备不同的特性
- HTML元素 = 开始标签 + 结束标签 + 元素内容
- 标签用 <标签名> 表示，成对出现，以</标签名>结束
- 一些元素只有一个标签，如img、 input、 br等
- HTML元素不区分大小写，如头标签可以写作
<head>或<Head> - 元素可以嵌套在其他元素中间，如
<p>、<img>等标签嵌套在<body>内
上图为HTML代码段，从中可以看出:
-
元素可以拥有属性，属性包含元素的额外信息，如 p 元素内增加了
class属性，表示该段落的名称 -
<！DOCTYPE html>：放在HTML文档最前面的位置，加上之后就会按照W3C的HTML5标准来解析渲染页面 -
<head>：对用户不可见，其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等 -
<body>：该元素包含能够被拥护访问到的内容，包括文本、图像、视频、游戏、音频等
页面结构
-
<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,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">：主要用于移动端，定义设备屏幕上用来显示网页的区域 -
<link>：定义文本与外部资源的关系，最常见的用途是链接样式表
link 元素是空元素，它仅包含属性
此元素只能存在于 head 部分，不过它可出现任何次数
<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" src="javascript.js">属性：
-derfer:立即下载，延迟执行（表示脚本可以等到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>
展现介绍信息
通常包含一组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名等
不能放在
<footer>、<address>或者另一个<header>元素内部
运行后时间不显示：
<nav>
在当前文档或其他文档中提供导航链接，如菜单、目录、索引等
用来放置一些热门链接，不常用的链接放到footer里置于底部
运行后在标题下面显示链接列表：
<article>
独立的文档、页面、应用、站点
可独立分配的或可复用的结构，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等
运行后显示：
<section>
按主题将内容分组，通常会有标题
<section>通常出现在文档大纲中不要把
<section>作为普通容器来使用，比如说用于美化片段样式，此时用<div>更合适如果元素里面是独立的整块的内容，可以单发布，则更适合用
<article>
运行后与article类似：
<aside>
表示一个和其余页面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容
通常放在侧边栏，用于展示广告、tips、引用内容等
运行：
<footer>
表示最近一个章节的页脚
通常包含该章节作者、版权数据或者文档链接等信息
footer内的元素不属于章节内容，不包含在大纲中
运行后该部分内容在页面末尾：
整个语义化区块结构分布：
语义化--分组
<figure>/<figcaption>
<figure>包裹被独立引用的内容：图表、插图、代码等，通常会有一个标题
<figcaption>与其相关联的图表的说明/标题，通常位于<figure>的第一个或最后一个
图片破损时显示破损的图片标识及alt内对图片的描述信息：
图片完好时只显示该图片：
<blockquote>
块级引用元素
cite属性用来表示该来源的url
运行后得到两侧都有缩进的文本：
<dl>/<dt>/<dd>
用于描述一组键值对
通常用于元数据、术语定义等场景
运行后：
语义化--文本
<cite>
<cite>元素通常用于引用作品标题包括论文、文件、书籍、电影等的引用
代码与运行图同上面figure。
<time>
机器可读的时间和日期
datetime表示此元素关联的时间日期，若不指定则该元素不会被解析为日期
-
- 运行时不显示datetime里的时间：
<address>：某个人或组织的联系信息<mark>：在引用中使用，表示需要引起注意<code>：代码片段<small>：免责声明、注意事项等
多媒体元素
- 图片
<img>
src属性是必须的，嵌入图片的文件路径
alt属性包含一条对图像的文本描述，非强制。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。图像无法加载时（网络错误、内容被屏蔽或链接过期时），浏览器会在页面上显示alt属性中的文本
decoding解码方式：异步、同步
loading懒加载
运行后：
<picture>
元素通过包含零或多个
<source>和一个<img>元素来为不同的显示/设备场景提供相应的图像版本media属性：依据的媒体条件渲染相应的图片，类似媒体查询
type属性：MIME类型，根据浏览器支持性渲染相应的图片
运行后根据浏览器是否与media匹配结果，显示不同的图片：
同理，type的亦是如此：
支持picture元素的浏览器：
- 音视频
<video>/<audio>
src属性是必须的，嵌入视频文件路径
controls是否展示浏览器自带的控件，可以创建自定义控件
autoplay是否自动播放
source元素表示视频的可替代资源（不同格式、清晰度，读取失败或无法解码时可以依次尝试）
HTML解析
DOM(文档对象模型)：对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问，将web⻚面和脚本语言连接起来
步骤：
- 构建DOM树
- 样式计算，构建CSSOM树
- 将DOM和CSSOM组合成一个Render树
- 布局计算
- 绘制
PS:蓝色框为节点；灰色框为内容
小结
待续...
