html(超文本标记语言），用于构建网页基本结构及其内容的标记语言。
超文本：文本中包含指向其他信息结合起来，展现出关于文档结构，如：html xml kml markdown等
html文档包含多个html元素，元素具备不同的特性
html元素=开始标签+结束标签+元素内容
一些元素只有一个标签，如img input br
html元素标签没有大小写区分
元素可以嵌套在其他元素中间
元素可以拥有属性，属性包含元素的额外信息
html结构
<!DOCTYPE html>:放在html文档最前面的位置，加上之后就会按照W3C的HTML5标准来解析渲染页面渲染页面
<html>：根元素，包含整个页面的内容
<head>:对用户不可见，其中包含例如面向搜索引擎的关键字，页面描述、字符编码声明、CSS样式等
<body>:该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等
html页面结构
<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">主要用于移动端，定义设备屏幕上用来显示网页的区域，不允许用户缩放，全屏
<meta "http-equiv="expires" content="31 Dec 2021">http头部，expires与缓存相关，设置网页过期时间为：31 Dec 2021
<title>:页面的标题，显示在标签页上
<style>:css样式
<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" src="javascript.js">
属性：
defer:立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后再执行，只对外部脚本有效。有defer属性的脚本会立即阻止DOMContentLoaded事件，直到脚本被加载并解析完成。defer 属性规定当页面已完成加载后，才会执行脚本。
async:立即下载脚本，不妨碍其他操作，比如下载其他资源或者加载其他脚本，只对外部脚本有效。脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
常用元素
内联元素（inline)
- 只占据它对应标签的边框所包含的空间
- 只能容纳文本或其他内联元素
- 只能通过修改水平边距、边框或者行高的方式改变尺寸
- 常用内联元素：<a> <span> <br> <i>（<i> 标签显示斜体文本效果。） <em>（<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。） <strong>（用于强调文本，<strong> 标签中的内容，通常是用加粗的字体） <label> <q>（<q> 标签定义短的引用。浏览器经常在引用的内容周围添加引号。）<var>（<var> 标签表示变量的名称，或者由用户提供的值。<var> 标签是计算机文档中应用的另一个小窍门，这个标签经常与 <code>和 <pre> 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用 <var> 标签标记的文本通常显示为斜体。）<cite> （<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。）<code>
几条去除inline元素和inline-block元素去除间距的方法：
1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。
2、设置margin-right为负值，但要考虑上下文的字体和文字大小。
3、先设定子元素字体，再设置父元素font-size:0px;////chrome中：-webkit-text-size-adjust:none;
4、设置父元素letter-spacing或word-spacing为负值，要考虑字体，子元素有文字也要注意设置letter-spacing或word-spacing的值。
5.float:left;
块级元素(block)
占据其父元素的整行，总是从新行上开始
能容纳其他块元素或者内联元素、
可以控制宽高、行高、边距、边框等改变其尺寸
常用的块级元素：<div> <p> <h1>-<h6>
行内块级元素(inline-block)
元素在行内排列，不会独占一行
支持宽高以及垂直边距、边框
常用的行内块级元素：<img> <input> <td>
html5语义化标签:让机器更好解析，便于开发者阅读
语义化区块：
<header>展示介绍性信息，包含导航 logo 搜索框 作者名称等 不能放在footer address 或另一个header
<nav>在当前文档或其他文档中提供导航链接，如菜单、目录、索引等，用来放置一些热门的链接，不常用的链接通常放在footer里置于底部
<section>按主题将内容分组，通常会有标题，通常出现在文章的大纲中，不要作为独立容器使用（不要给它设置特定样式，可以在其中嵌套一个div进行规定样式）
如果元素里面是独立的整块的内容，可以单发布，则更适合用article
<article>独立文档 页面 应用 站点 可独立分配的或可复用的结构 如论坛帖子 新闻文章 博客 用户提交的评论 交互式组件
<aside>侧边栏，不是一定要放在侧边，用于展示广告、tips、引用内容等信息
<footer>页脚，包含章节作者 版权数据或者文档链接等信息 不包含在大纲中，不属于章节内容
<figure>包含被独立引用的内容：图表、插图、代码等，通常会有一个标题
<figcaption>与其相关联的图标的说明、标题，通常位于<figure>的第一个或最后一个
<blockquote>块级引用元素，cite属性表示该来源的url，长引用
<q>短引用
<dl>/<dt>/<dd>用于描述一组键值对，通常用于元数据、术语定义等场景
<img>图片
decoding解码方式：异步、同步
loading:懒加载
<picture>图片
media属性：依据的媒体条件渲染响应的图片，类似媒体查询
type属性：MIME类型，根据浏览器支持渲染相应的图片
<video>/<audio>音视频
src属性是必须的，嵌入视频文件路径
controls是否展示浏览器自带的控件，可以创建自定义控件
autoplay:是否自动播放
source元素表示视频的可替代资源（不同格式、清晰度、读取失败或无法解码时可以依次尝试）
<track>字幕
<time>机器可读的时间和日期
<address>某个人或组织的联系信息
<mark>在引用中使用，表示需要引起注意
<small>免责声明、注意事项
html如何解析
DOM（文档对象模型）：对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问。将web页面和脚本语言连接起来。
搜索引擎拿到html字节流后
1.构建DOM树
2.样式计算，构建cssom树 与dom树构建
3.将DOM和cssom组合成一个Render树
4.布局计算
5.绘制
html会被浏览器缓存，可以定一些缓存策略
mdn学习
语义化标签的场景：不是强制性，是建议，养成习惯 写纯html页面时建议语义化
框架也可以用语义化 更建议用语义化
怎么样快捷做到代码复用：抽出组件
