HTML回首
今天开始系统回顾总结HTML，记录文章以后再选择性截取做课程ppt，计划时间为一周，当然以后会不断完善的。废话少说，直接上干货。。。
简介：
①超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
②您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析
③HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页
什么是标签？
HTMl是标记语言，也就是一套标记标签，标记标签通常也被称为HTML 标签 (HTML tag)
标签一般是成对出现的，包括开始标签和结束标签，也叫开放标签和闭合标签。（这里拓展下单标签和双标签）
双标签：
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签：
<br><hr><img><input><param><meta><link>
HTML编辑器：
之前用过的代码编辑器有pycharm，webstorm，Sublime Text3(Windows)，这里我推荐使用webstorm，优点不多说
HTML基础：
标题---通过 <h1> - <h6> 等标签进行定义
段落---通过 <p> 标签进行定义
链接---通过 <a> 标签进行定义
图像----通过 <img> 标签进行定义
<img src="w3school.jpg" width="104" height="142" />
注意：图像的名称和尺寸是以属性的形式提供的
HTML元素：
①大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）
②不要忘记结束标签，即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。而且未来的HTML版本不允许省略闭合标签
③空元素：空元素（没有内容的HTML元素）是在开始标签中关闭的，例<br> 标签定义换行，即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
④小写标签：HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，并且在未来 (X)HTML 版本中强制使用小写。
HTML属性：
属性总是以名称 / 值对的形式出现的，并且在开始标签中规定
HTML颜色值：
HTML字符集：
HTML文本格式化：
HTML框架：
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
【使用框架的坏处：】
①开发人员必须同时跟踪更多的HTML文档
②很难打印整张页面
【框架结构标签：】
①框架结构标签（<frameset>）定义如何将窗口分割为框架
②每个 frameset 定义了一系列行或列
③rows/columns 的值规定了每行或每列占据屏幕的面积
<frameset cols="120,*"> <frame src="http://www.w3school.com.cn/example/html/html_contents.html"> <frame src="http://www.w3school.com.cn/example/html/frame_a.html" name="showframe"> </frameset>
<iframe>内联框架：
用于在网页内显示网页
（1）Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
（2）Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
（3）使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：
<iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" name="iframe_a"> </iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p> <p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>
HTML脚本：
①<script> 标签用于定义客户端脚本，比如 JavaScript
②<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容
【如何应付老式的浏览器】
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
例子：
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script><script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>【拓展】
VBScript 是一种脚本语言，脚本语言是一种轻量级的编程语言
VBScript 是微软的编程语言 Visual Basic 的轻量级的版本，这个以后有机会再了解下
HTML头部元素：
（1）<head>元素：所有头部元素的容器
<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>
（2）<title>元素：定义文档的标题
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：定义浏览器工具栏中的标题；提供页面被添加到收藏夹时显示的标题；显示在搜索引擎结果中的页面标题
（3）<base> 元素：为页面上的所有链接规定默认地址或默认目标（target）
（4）<link> 元素：定义文档与外部资源之间的关系，常用于连接外部样式表
（5）<style> 元素：为 HTML 文档定义样式信息，常用于定义内部样式表
（6）<meta> 元素：不会显示在页面，机器可读性
提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务
页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />
【HTML 头部元素】
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
HTML实体字符：
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
【优缺点：】
优点：使用实体名而不是数字的好处是，名称易于记忆
缺点：浏览器也许并不支持所有实体名称（对实体数字的支持却很好）
具体详解我在后面文章里做了总结
HTML的URL：
URL 也被称为网址，可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
【URL Schemes（格式）】
以下是其中一些最流行的 scheme（格式）：
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
URL字符编码：
URL 编码会将字符转换为可通过因特网传输的格式。URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
HTML Web Server（网络服务器）
【1】托管网站，在自己的服务器上托管网站始终是一个选项。有几点需要考虑：
硬件支出
如果要运行“真正”的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。
软件支出
请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。
人工费
不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒，以确保您的服务器时刻正常地运行于一个“任何事都可能发生”的环境中。
【2】使用因特网服务提供商（ISP）
从 ISP 租用服务器也很常见。
大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：
①连接速度：大多数 ISP 都拥有连接因特网的高速连接。
②强大的硬件：ISP 的 web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。
③安全性和可靠性：ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护
【3】选择 ISP 时的注意事项
①24 小时支持
②每日备份
③流量
④带宽或内容限制
⑤E-mail 功能
⑥数据库访问
HTML 颜色
①颜色值：颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）
②颜色名：大多数的浏览器都支持颜色名集合
【提示】：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值
③Web安全色：数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用
其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）
HTML文档类型：
<!DOCTYPE> 不是 HTML 标签
作用：为浏览器提供一项声明，即 HTML 是用什么版本编写的
HTML 版本
从 Web 诞生早期至今，已经发展出多个 HTML 版本：
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
【常用的声明】
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML详解：
通俗理解就是：以 XML 格式编写的 HTML，关于XML日后再做介绍
【官方解析】
XHTML是2001年发布的W3C推荐标准，指的是可扩展超文本标记语言；与 HTML 4.01 几乎是相同的；是更严格更纯净的 HTML 版本；以 XML 应用的方式定义的 HTML
【兼容】
目前得到所有主流浏览器的支持
【由来】
今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释“糟糕”的标记语言的资源和能力。
所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML
【与HTML区别】
①文档结构
XHTML DOCTYPE 是强制性的；<html> 中的 XML namespace 属性是强制性的；<html>、<head>、<title> 以及 <body> 也是强制性的
②元素语法
元素必须正确嵌套；元素必须始终关闭；元素必须小写；文档必须有一个根元素
③属性语法
属性必须使用小写；属性值必须用引号包围；属性最小化也是禁止的
【如何从 HTML 转换到 XHTML】
向每张页面的第一行添加 XHTML <!DOCTYPE>；向每张页面的 html 元素添加 xmlns 属性；把所有元素名改为小写；关闭所有空元素；把所有属性名改为小写；为所有属性值加引号
【元素语法规则举例】
XHTML 元素必须小写
这是错误的：
<BODY> <P>This is a paragraph</P> </BODY>
这是正确的：
<BODY> <P>This is a paragraph</P> </BODY>
【属性语法规则举例】
禁止属性简写
这是错误的：
<input checked> <input readonly> <input disabled> <option selected>
这是正确的：
<input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" />
H5详解：
HTML5 是最新的 HTML 标准，拥有新的语义、图形以及多媒体元素
【优势】
①提供的新元素和新的 API 简化了 web 应用程序的搭建；
②跨平台，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行
【注意】
①H5默认的字符编码是UTF-8；
【新特性】
HTML5 的一些最有趣的新特性：
①新的语义元素，比如 <header>, <footer>, <article>, and <section>；
②新的表单控件，比如数字、日期、时间、日历和滑块；
③强大的图像支持（借由 <canvas> 和 <svg>）；
④强大的多媒体支持（借由 <video> 和 <audio>）；
⑤强大的新 API，比如用本地存储取代 cookie
【H5被删元素】
以下 HTML 4.01 元素已从 HTML5 中删除：
<acronym>，<applet>，<basefont>，<big>，<center>，<dir>，<font>，<frame>，<frameset>，<noframes>，<strike>，<tt>