简介
HTML全称是超文本标记语言 (
Hyper
Text
Markup
Language)，不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，用来描述网页。
目前最新的HTML版本是H5，要了解它和之前版本的不同，可以看我之前的这篇：
Youky：【翻译整理】What's new in HTML5zhuanlan.zhihu.com
因为HTML是标记语言，所以无需运行环境，直接用浏览器打开文件即可看到预期结果
HTML的注释格式是：<! >
标签
按照不同的分类标准，可以把标签分为不同的类别，如block元素和inline元素等等，我这里将HTML标签分为两类：表示页面元素的标签，和各种功能性标签。
页面元素标签
文本标签<p>：最常用的，段落标签，用来表示一段话。
注意：p标签内的多个空格会被自动去掉，只保留一个。要表示多个空格，在文字中用 代替空格，或使用pre标签
<h>：标题标签，共有六级标题，分别是<h1>一直到<h6>，字号逐渐减小
<span>：没有特别含义，将其他标签内的一部分文字放入span标签内，可用于方便的改变部分文字的样式
<pre>：pre标签内部的文字会保留格式
<abbr title="全称">缩写</abbr>：页面上会显示缩写,将鼠标移动到缩写上会显示全称
<em>：内部字体用斜体显示
<strong>：内部字体加粗
<sup>：内部的内容显示为上角标
<hr>：分割线
<br>：换行
盒子模型<div>：这个无疑是页面布局中使用最多的标签了，表示一个盒子区域，多用作容器
H5中语义化的盒子模型：
- section表示章节
- article定义有意义的独立内容
- nav表示导航栏链接
- aside表示侧边栏
- header表示顶部
- footer表示底部
这些语义化的标签都相当于是起了id的div，并没有本质区别，只是为了更好的可读性、对搜索引擎的优化以及更好的适配无障碍阅读
表格<table>：表格的最外层
<th>：首行的title
<tr>：表格中的每一行
<td>：每一行的每一个单元格
：表单类型的标签有很多，最外层都要有一个form标签，意义是将内部的标签定义为同一个表单，这样才可以使用提交/重置按钮，action属性定义了用来处理输入数据的脚本的服务器页面。因此，下面的表单元素在没有form标签时实际也是可以使用的
2. 输入框：
<
- type=text时为文本框
- type=password时为密码框，即无法看到输入的内容
：
<
文字会出现在文本编辑区内作为提示性文本
4. 按钮：<input type=”submit|reset ” value=”按钮要显示的文字”/>
- submit表示提交按钮
- reset表示重置按钮
:
<
- radio表示单选框，checkbox表示复选框
- 单选的name值要相同,复选的可以不同
- 若某一个选项中checked=”checked”,则该项为默认选项
- value为选择框会传回后端的值，因此要为每个选项设置不同value值
<label for = "id" >：与单选框和复选框一起使用，for属性的值取为表单中某个选项的值，则点击label中文字的时候会选中这个选项。
6. 下拉列表<
selected="selected"的那一项为默认选择且显示
添加了disabled的那一项无法选中
7. 日期控件：
-
- <input type="date" value = '2020-07-15' >
-
- <input type="datetime-local" value = '2020-07-15T14:00:00'>
：<input type="color" value = '#ff0000'>
：<input type='file'>
<
href属性表示跳转到的地址，有三种情况：
- 网址
- 本地目录
- #，表示无效的超链接。在后期要为此处添加链接时，前期可以先使用#作为占位
target属性表示打开该地址的方式，取值为_blank时会在新的页面中打开超链接。默认在当前页面打开
图片<
图片的路径可以是本地目录也可以是网址，当图片找不到时会显示alt中的文字
功能性标签
<head>：头部元素的容器
<linkrel="stylesheet" href="css路径" target="_blank" rel="external nofollow"
>：引入CSS样式文件
<style>：在页面中书写内嵌样式
<script>：引入JS脚本文件，或是书写内嵌JS脚本
- script标签可以放在head标签中，也可放在body标签中。推荐放在body标签中，这样可以避免进行DOM操作时页面尚未渲染的问题
- 默认情况下，解析script标签时其他内容的解析将停止
- 在script标签中有 defer属性时，页面完成解析后脚本才开始解析
- 在script标签中有aysnc属性时，脚本与页面同时解析，但脚本解析完后将执行
：定义网页标题
<meta>：提供有关页面的元信息（meta-information）
常用的有下面这些：
<
：网页中其他地址将从给出的基本url下寻找相对url
其他
元素嵌套规则
前面已经说过，元素分为块级元素（block）和行内元素（inline），在元素嵌套中：
- 块级元素可以包含行内元素，但不一定能包含块级元素（如p，h标签内部不能包含块级元素）
- 行内元素 一般 不能包含块级元素。a元素内部可以嵌套块级元素，因为在检查嵌套关系时会自动跳过a标签
src和herf的区别
- src是source的缩写，表示引用资源替换当前内容
- herf是Hypertext Reference的缩写，表示超文本引用，用于在当前文档和引用资源之间建立联系
- 浏览器解析到src时会停止其他资源的处理，直接将该资源处理完毕，而对herf不会
标签自闭和
通常，一个标签的尖括号内最后一个字符为斜杠 /
但根据最新的HTML5规定，形如<img>、<br>、<hr>这样的标签，标签内部是没有内容的（对于img标签，图片是属性而不是内容），在以前版本的HTML中，img标签是这样写的<img/>，但现在不需要了，写为<img>足矣。
以上
相关文章：
Youky：前端知识总结（二）CSS基础篇：添加样式与选择器zhuanlan.zhihu.com