目录
1 怎么学习HTML？
2 基础知识
3 HTML 历史
4 HTML的语义化
5 标签
5.1 标签分类
5.1.1 常见的块级标签
5.1.2 常见的行级标签
5.1.3 常见的行内块标签
5.2 头部区域内的标签讲解
5.3 链接标签
5.4 图像标签
5.5 布局标签
5.6 表格标签
5.7 表单标签
6 HTML中的缩写
7 网页布局常用配置
怎么学习HTML？
- HTML 中的不同标签具有不同的含义，学习 HTML 其实就是学习各个标签的含义，根据实际场景的需要，选择合适的标签，从而制作出精美的网页。
- 学HTML5学的就是结构和含义（structure and meaning）。
基础知识
- HTML元素名不区分大小写。
- HTML标签是由尖括号包围的关键词。
HTML 历史
HTML是什么？ HTML是超文本标记语言: HyperText Markup Language。HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息。HTML 是一种计算机语言，但它不能编程，只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等。
- 1990年HTML诞生。
- 1997年HTML4成为互联网标准。
- 2000年HTML4.01发布。HTML 4 适应了 PC 互联网时代。
- 2012年HTML5发布。HTML 5 适应了移动互联网时代。
- HTML 5 在 HTML 4 的基础上增加了很多语义化的标签，功能更加强大，除了较低版本的 IE 浏览器，几乎所有其它浏览器都能很好地支持 HTML 5。
- HTML5可以让我们不借助第三方插件就可以实现多媒体。
HTML的语义化
- 语义：除了语义本身外，还会被搜索引擎和屏幕阅读器识别。例如，em元素不但可以让文档读起来更有趣，还可以被屏幕阅读器识别，并以不同的语调发出。
- 在万维网W3C标准（即web标准）中，网页由结构（structure）、表现（presentation）、行为（behavior）三个方面构成。HTML用于描述页面的结构，CSS用于控制页面中元素的样式，JavaScript用于响应用户的操作。web标准提出的最佳方案是：结构、表现、行为相分离。
- Web标准化的优点
- 易于维护：只需更改CSS文件，就可以改变整站的样式
- 页面响应快：HTML文档体积变小，响应时间短
- 可访问性：语义化的HTML编写的网页文件，更容易被屏幕阅读器识别
- 设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
- 搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名
标签
标签分类
常见的块级标签
div,p,h1-h6,ul,li,dl,dt,dd
常见的行级标签
a，span,strong,u,em
常见的行内块标签
img,input,textarea
头部区域内的标签讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- HTML文件的前四行标签，分别告诉浏览器页面制作 用的HTML版本、页面显示 用的语言、页面保存 用的字符集。
- !DOCTYPE：
<!DOCTYPE>是标签，但不是HTML标签，它就是一个文档类型声明标签，它是一条"信息"，告知浏览器期望的文档类型。HTML文档必须以<!DOCTYPE html>声明开头。doctype 声明不区分大小写。 <html lang="zh-CN">：页面语言为中文，告诉人们这是中文网站，如果是en则是英文网站。lang是全局属性。- UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码。
- !DOCTYPE：
链接标签
- 链接分类
- a：超链接a是单词anchor的缩写，意为"锚"。 -self为默认值(当前页面打开），-blank为在新窗口中打开。
- href：指定链接，hypertext reference的缩写，即超文本引用。
图像标签
- 设置了image的宽度和高度后，图像不是进行截取，而是整体进行缩放。另外，设置图像映射时，图像映射参考的尺寸是图像的原始尺寸，而不是设置的image的显示尺寸。
- ：image的缩写。
- img标签中的alt属性：alternate的缩写，含义：adj. 供选择的，备用的。
布局标签
- 用于布局的标签：div、span、ul和li。
- div和span标签是没有语义的，它们就是一个盒子，用来装内容的。他们的区别是：
- div布局：一行只能放一个div，可以理解为一个超大的盒子。
- span布局：一行上可以放多个span，可以理解为小盒子。
- div和span标签是没有语义的，它们就是一个盒子，用来装内容的。他们的区别是：
- ul中只能放li元素。li相当于一个容器，可以容纳所有元素。
- div：division的缩写，表分割。
- span：意为跨度，跨距。之所以是跨度、跨距，是因为它是横着显示的。
- li：list item，列表项目。
- dl：定义列表
- dt：define term：定义列表中的术语。Defines a term/name in a description list. term的意思是"名词、术语"。
- dd：decription for term：对术语的描述。
表格标签
- table：现在还是较为常用的一种标签，但不是用来布局，而是用来显示、展示表格式数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。
- HTML 5在努力让页面的结构变得更清晰，因此出现了表格的结构：thead、tbody、tfoot。
- thead：表头区域。thead和tbody的作用是为了让表格有更好的语义。
- 表格是用来显示数据的，列表是用来布局的。列表最大的特点是整齐、整洁、有序，它作为布局会更加自由和方便。
- tr：table row。
- td：table data，表格数据。
- th：table head，表头单元格。
表单标签
-
表单域：包含表单元素的区域。
-
name 是表单元素的名字，所有单选按钮和复选框要有相同的name值。name的作用是区别同一个表单中不同的表单元素，因此，在同一个表单域中，不同的表单元素的名字不能相同。name就是键值对中的键，value就是键值对中的值，name和value组成了键值对。
-
label标签：为input元素做标注。
HTML中的缩写
说明：此处展示的是未分类的一些标签的缩写，已经分类的标签的缩写放到了各个章节中。
- abbr：定义缩写，是abbreviation的缩写。
- br：break的缩写。
- hr：Horizontal Rules，水平规则。
- em：emphasize的缩写，语义是表示强调。
- del：delete的缩写。
- ins：insert的缩写。
- pr：preformatted，预格式化文本标签。
- rel="stylesheet"：rel是relationship的缩写，意思是"关系"。
- src：source的缩写。
- strong： strong importance，强烈的重要性。
网页布局常用配置
- 页面常用字体大小：14号
- 清除浮动常用的类名：.clearfix