HTML学习总结
1.什么是HTML
HTML（HyperText Mackeup Language）又叫超文本标记语言，HTML不是编程语言，直接由浏览器解析成页面。
HTML是负责描述文档语义的语言
html是一个纯本文文件，用一些标签或者标签对来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”。
2.HTML的规范
- HTML是一个弱势语言
- HTML不区分大小写
- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
由于HTML是弱势语言，所以一些不规范的写法在浏览器中也可以正确的解读出来。更推荐使用XHTML：
（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>
（2）所有的标记都必须小写。
（3）所有的标记都必须关闭。
（4）所有的属性值必须加引号。<font color="red"></font>
（5）所有的属性必须有值。<hr noshade="noshade">、<input type="radio" checked="checked" />
（6）XHTML文档开头必须要有DTD文档类型定义
3.HTML的结构
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。<!doctype html>是HTML5标准。
- head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
- body部分：我们所写的代码必须放在此标签內。
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
1）文档声明头
<!DOCTYPE ……
一个标准的HTML页面肯定是以上面这句话开头，这是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。如果DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
- 标准模式下：页面排版和JS运作模式都是以该浏览器支持的最高标准运行。
- 兼容模式下：页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
HTML4.01一共有3种DTD，说白了，HTML第一行语句一共有3种：
HTML 4.01 Strict
表示“严格的”，这种模式里面的要求更为严格。包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
HTML 4.01 Transitional
表示“普通的”，这种模式就是没有一些别的规范。包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
HTML 4.01 Frameset
表示“框架”，在框架的页面使用。
HTML5极大的简化了doctype的声明：
<!DOCTYPE html>
2）头标签
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>
-
<title>：指定整个网页的标题，在浏览器最上方显示，提供页面被添加到收藏夹时显示的标题以及显示在搜索引擎结果中的页面标题 -
<base>：为页面上的所有链接规定默认地址或默认目标（target）。 -
<meta>：提供有关页面的基本信息，典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 -
<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。 -
<link>：定义文档与外部资源的关系。 -
<style>：用于为 HTML 文档定义样式信息，一般不写在此标签内，而是通过<link>标签引入外联样式。
-
<script>：标签用于定义客户端脚本，比如 JavaScript。一般会放在body标签之后。
3）常用的标签
标签的划分可分为两种，：
-
文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
-
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
也可以分为块级元素、行内元素以及行内块元素：
- 行内元素：head meta title lable span br a style em b i strong。行内元素不换行，宽度即为内容的宽度、padding的4个方向都有效（从span标签可以看出）、margin只有水平方向有效、不可以设置width和height属性。
- 块级元素：body from select textarea h1-h6 html table button hr p ol ul dl cnter div。块级元素新开启一行（即使是设置了width属性也是独占一行）、尽可能撑满父级元素的宽度，可以设置width和height属性；table元素浏览器默认的display属性为table。
- 行内块元素： img input td 。行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。
4.HTML5
HTML5 是下一代 HTML 标准，HTML , HTML 4.01的上一个版本诞生于 1999 年。目前HTML5 仍处于完善之中，但是大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
1）废弃标签
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
2）新增标签
| 标签 | 描述 |
|---|---|
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
