目录
1、HTML 简介
HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它是一种标识性的语言，包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。简单来说，我们上网所看到的网页界面基本上都用 HTML 编写的。
HTML 与 1990 年左右诞生，发明人蒂莫西·约翰·“蒂姆”·伯纳·李爵士（Tim Berners-Lee），英国计算机科学家，他是万维网（World Wide Web）的发明者，2017年，他因发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法而获得 2016 年度的图灵奖。1990 年 12 月 25 日，他和他的队友在一起成功通过 Internet 实现了 HTTP 代理与 服务器 的第一次通讯，从某种意义上说，如果没有他当时的这一举动，就不会有如今互联网的前后端岗位，可以说这是我们的祖师爷了，快来膜拜一下。
2、HTML 起手式
HTML 起手式的意思是，写 HTML 时所必须的基本格式， 它包括文档类型，字符集编码，语言以及浏览器兼容等。
3、HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)，它是由尖括号包围的关键词，比如： <html>、<head>、<body>。HTML 标签通常是成对出现的，其中一个是开始标签，一个是结束标签，比如：<html></html>、<head><head>，<body></body>，开始和结束标签也被称为开放标签和闭合标签。除了上述的双标签之外也存在单标签，比如：<img>、<input>。
| 英文 | 翻译 | 标签 | 英文 | 翻译 | 标签 |
| heading | 标题 | <header></header> | order | 顺序、秩序 | |
| body | 身体、正文 | <body></body> | ordered | 有顺序的 | <ol></ol> |
| paragraph | 段落 | <p></p> | unordered | 无顺序的 | <ul></ul> |
| section | 章、节 | <section></section> | description | 描述 | <dl></dl> |
| article | 一篇文章 | <article></article> | term | 术语 | <dt></dt> |
| main | 主要 | <main></main> | data | 数据 | <dd></dd> |
| aside | 旁边的 | <aside></aside> | quote | 引用 | |
| anchor | 锚、定点 | <a></a> | block | 块 | |
| strong | 强壮、重要 | <strong></strong> | inline | 行内、内联 | |
| emphasis | 强调、重读 | <em></em> | break | 打断 | <br> |
4、常用的章节标签
在 HTML5 版本中，新增了很多语义标签，常见的有：article、header、footer、nav、aside 和 section 标签。
| 标签 | 描述 |
| <h1>~<h6> | 标题，h1~h6 分别表示一级标题~六级标题，字体大小逐级递减。 |
| <section> | <section> 标签用来定义文档的某个区域，它和 div 标签不一样，不是用来定义局域样式的，而是用来定义一个明确的主题，通常含有一个标题（h1~h6）。但如果是文章，通常会使用 article 标签来代替。 |
| <article> | <article> 标签是用来定义独立于文档且有意义的来自外部的内容，比如：一些投稿文章、新闻记者的文章，或者是摘自其它博客、论坛的信息等。 |
| <main> |
<main> 标签规定文档的主要内容，<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。 |
| <aside> | <aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。 |
5、常用的内容标签
6、追加一些小知识
| 知识 | 描述 |
| contenteditable 属性 |
当标签被添加这个属性后，该标签的内容可以直接在前端页面进行编辑，这就很神奇了。 |
| style 标签的内容可显示 | style 样式标签，如果将其放置到 body 标签内，可以通过 display=block 的方式在页面上显示出来，如果再给 style 标签设置上 contenteditable 属性，就可以做到在前端界面修改样式后，绑定样式的元素就可以直接同步过来，这也太神奇了。 |
| tabindex 属性 | tabindex 是用来控制 tab 的顺序的，值是 number 类型，tab 访问顺序从 1 开始依次往后，0 最后访问，负数不访问。 |
| 文本行末省略 | 样式设置：white-space:nowrap；text-overflow:ellipsis；overflow:hidden；如果想鼠标移动显示全部的值，可以设置 title 属性等于全部的文本值。 |
| 默认样式reset | 浏览器的默认样式不符合我们的需求，所以我们可以通过 CSS reset 将浏览器样式干掉。推荐一篇文章：css reset 。 |
| 大厂reset样式 | 比如找到淘宝，通过控制台检查 element、找到 h1h2 字样的演示右上角的 index 标识复制到自己的项目命名为 reset.css。class 的属性都删掉，剩下的就是默认样式了。鸡贼的呦。 |
| table样式设置 | table { border-collapse:collapse；border-spacing:0 }，不然 table 表格的样式真的很丑的，老弟。 |