HTML了解（一）
一、HTML介绍
1.1 HTML简介
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
HTML是用来制作网页的标记语言，当被html中的标记标识之后的文本不再是一个普通的文本。而这些文本可以被浏览器进行识别，并且以不同的形式展示在浏览器上。HTML语言是一种标记语言,不需要编译,直接由浏览器执行，HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀，HTML是对大小写不敏感的,HTML与html是一样的；但是我们一般规定：书写时一律小写，HTML是由W3C组织的维护的。
1.2 HTML学习链接
https://www.w3.org/TR/#tr_HTML #因为是W3C维护嘛，肯定先上官网看一眼，现在HTML已经是HTML 5.3了。
https://w3c.github.io/html/ #页面左侧是目录，如果有想法可以跟着通读一遍，当然可能是没必要的因为太多用不到。
http://www.w3school.com.cn/tags/index.asp #这是个很好的学习网站
1.3 HTML文件的书写规范
HTML整体结构
<!DOCTYPE html> #Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 <html lang="en"> <head> <meta charset="UTF-8"> #Meta(metadata information)，提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词 <title>我要测试</title> </head> <body> <a href="http://www.baidu.com">哈哈</a> </body> </html> #有DOCTYPE和无DOCTYPE的区别：BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式），CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]） #这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是噩梦的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。 #如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。 #Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
#上面是一个例子，上面是一个最基本的HTML结构。html可以分为三部分（html标签，head标签，body标签）建议小写。
首先是html标签，文件应以<!DOCTYPE.....>首行顶格开始，这句话告诉浏览器这是一个什么文件推荐使用<!DOCTYPE html>。用<html></html>把所有页面内容包起来。
然后是head标签，必须在head元素内部的meta标签内声明文档的字符编码charset, 如：<meta charset="UTF-8">，这句代码告诉浏览器应该此HTML文件使用的字符集是什么，如果不加此行代码，那么在浏览器中可能显示为乱码。页面的title是极为重要的不可缺少的一项，Title标签是网页的标题名称。。
最后是body标签，body标签中的代码才会显示在浏览器的窗体中。
https://www.cnblogs.com/Chen-XiaoJun/p/6514143.html #写的规范挺好的
HTML注释
<body> <!-- <a href="http://www.baidu.com">哈哈</a> <a href="http://www.baidu.com">哈哈</a> --> #这个例子是注释多行 <!-- <a href="http://www.baidu.com">哈哈</a> --> #这个例子是注释单行 <a href="http://www.baidu.com">喷你一脸</a> </body>
HTML标签分类
#首先要了解标签有两种关系，一种是嵌套关系，一种是并列关系。
#按照闭合分类呢分为自闭合标签(也叫单标签，例如<meta charset="UTF-8">)和主动闭合标签（也叫双标签，例如<title>哈哈</title>），当然大部分标签都是主动闭合标签用一些工具边写的时候例如Pycharm的时候就可以知道是哪种标签。常见的自闭合标签有<input />、<img />、<area />、<base />、<link />、<br/>、 <hr/>等。
#当然按照标签在文档中的位置特性进行分类的话又可以将元素分为三类：块级元素，行内元素，行级块元素（块级行元素）。
块级元素（block）：
特点： （1）可以设置宽高、内、外边距； （2）独占一行（即前后均有换行)； （3）块级元素如果不设置宽度和高度，则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。 常见的块级元素： div、p、h1、h2......hn，ol、ul、dl、li、form、table
行级元素(inline):
特点： （1）不可设置宽高、上下内、外边距。（左右内、外边距设置有效） （2）其宽度和高度由其内容自动填充。 （3）其他行级元素共处一行； 常见的行级元素：a、span、i、lable等
行内块元素（inline-block）：
特点： （1）可以设置宽高、内外边距； （2）可以与其他行内元素、内联元素共处一行； 常见的内联元素：input、img
#元素之间的转化,可以在行内样式或css样式中改变元素的display将三种元素进行转换:
display:block；(将元素变为块级元素) display:inline； (将元素变为行级元素) display：inline-block；（将元素变为行级块元素）
#就先介绍到这里，你说我还想再了解点当然上面有官网链接，你说想看中文的http://zh.html.net/tutorials/html/ #这个链接也许可以帮助你。
#HTML的元素，参考链接：https://w3c.github.io/html/semantics.html#semantics #详细的请顺着这个链接往下看，我只是简单记录一些我可能会用到的。下面记录的都属于html元素。
二、head标签里面的元素
2.1 Meta(metadata information)
meta元素的作用：提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。
meta标签永远位于head元素内部，元数据总是以名称/值得形式被成对传递的。
第一个例子：页面编码（告诉浏览器是什么编码)
< meta http-equiv="content-type" content="text/html;charset=utf-8"> #这就涉及到另外一个术语，属性，这里http-equiv是可选属性，而content-type就是属性的值，http-equiv是把 content 属性关联到HTTP头部。 #content是必需的属性，定义与 http-equiv或name属性相关的元信息。
第二个例子：刷新和跳转
<meta http-equiv="Refresh" Content="30" /> #是30秒刷新一次页面，这里可以看到值有大小写，其实Html里面是不区分大小写的，不过在其他地方还是尽量写小写。 #http-equiv的值有content-type、expires、refresh、set-cookie <meta http-equiv="Refresh" Content="5; Url=http://www.baidu.com" /> #这个是五秒刷新页面并跳转到指定的url #http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，会先发送许多名称/值对。当然，只有浏览器可以接受这些附加的头部字段 #虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML文档。使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。
第三个例子：关键词
<meta name="title" content="优酷-这世界很酷" /> <meta name="keywords" content="视频,视频分享,视频搜索,视频播放" /> <meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" /> #description表示描述信息 #"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
#上面这是优酷首页的，Google 和百度都已经不把 Meta Keywords 和 Description 作为排名的因素了，但是添加 Meta Description 对网站的流量还有有帮助的，因为 Google 的搜索结果里面直接使用 Meta Description 做该页面的描述，当用户搜索，看到好的描述的时候，更容易来到你的网站，而 Keywords 则基本无效了，有时候用了反而适得其反，百度会认为你有过度 SEO 之嫌也就是不能像以前一样过度堆砌了。
第四个例子：IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> #X-UA-Compatible是针对IE8版本的一个特殊文件头标记，用于为IE8 指定不同的页面渲染模式。由于当下IE6和IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。 或者： <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。
2.2 title
标题元素表示文档的标题或名称。 即使用户在上下文之外使用，例如在用户的历史记录或书签中，或在搜索结果中，作者也应该使用标识其文档的标题。每个文档的标题元素不能超过一个。如果文档没有标题是合理的，则标题元素可能不是必需的。
<title>优酷-这世界很酷</title>
2.3 link
标签定义了文档与外部资源之间的关系。link标签通常用于链接到样式表。
内容属性：
#全局属性 href #超链接的地址 crossorigin #元素如何处理crossorigin请求 rel #这个文件（或subsection/topic）与目标资源的关系 media #适用的媒体 nonce #内容安全策略检查中使用的加密随机数 hreflang #链接资源的语言 type #提示引用资源的类型 referrerpolicy #引用者由元素启动的提取策略 sizes #图标的尺寸（for rel="icon"） as #预加载请求的目标(for rel="preload") #另外，title属性在这个元素上有特殊的语义：链接的标题; 替代样式表集名称。
允许的ARIA角色属性值：
link #（default - 不设置）
下面还是用优酷首页的例子：
<link rel="Shortcut Icon" href="//static.youku.com/v1.0.166/index/img/favicon.ico" /> #第一行是必须的，因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”）； #而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。这样做的结果是所有浏览器都可以理解此代码。给网页添加小图标。 <link href="//img.alicdn.com/tfs/TB1u5jLkMoQMeJjy0FpXXcTxpXa-200-200.jpg" rel="apple-touch-icon-precomposed" /> #以前我们用过favicon在浏览器给网站进行身份标识，现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性， #在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon。 <title>优酷-这世界很酷</title> <link type="text/css" href="//css.ykimg.com/youku/dist/css/find/revision/g_40.css" rel="stylesheet"> <link type="text/css" href="//css.ykimg.com/youku/dist/css/find/revision/main_22.css" rel="stylesheet">
#首先可以看到href的值呢可以是一个url连接地址。
#rel属性的值：
alternate #文档的替代版本（比如打印页、翻译或镜像）。 stylesheet #文档的外部样式表。 start #集合中的第一个文档。 next #集合中的下一个文档。 prev #集合中的上一个文档。 contents #文档的目录。 index #文档的索引。 glossary #在文档中使用的词汇的术语表（解释）。 copyright #包含版权信息的文档。 chapter #文档的章。 section #文档的节。 subsection #文档的小节。 appendix #文档的附录。 help #帮助文档。 bookmark #相关文档。
#如果media属性被省略，则默认是“all”，这意味着默认情况下链接适用于所有媒体。
#如果存在type属性，则用户代理必须假定该资源是给定类型（即使该类型不是有效的MIME类型，例如空字符串）。如果该属性被省略，但外部资源链接类型具有定义的默认类型，则用户代理必须假定该资源是该类型的。
2.4 style
<style> 标签用于为 HTML 文档定义样式信息,也就是说在这里添加CSS样式。直接在标签里写 style ，但不推荐使用，因为太不灵活，后期不好修改，而且也太乱了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style测试</title>
<style>
.i1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="i1">i1的测试</div>
</body>
</html>#上面是一个很简单的小例子，在head头里面的style标签里面定义好了一个样式，然后body标签里面的div标签引用了这个样式。下面是效果图。
2.5 script
<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
......
<script type="text/javascript" charset="utf-8" src="jquery-1.12.4.js"></script> #jquery-1.12.4.js是一个js文件
<script type="text/javascript">
alert("点起来");
$("#btn").click(function(){
alert("abcde");
});
</script>
</head>#上面一个例子是在head里面通过script引用了一个js文件并且谢了一小段js代码，一般js,css这些文件都是在head里面先预先加载的，因为这个页面是先加载head头里面的信息再加载body里面的信息。
http://blog.csdn.net/yy921117/article/details/51982159 #这个链接说的比较详细
#上图是这段js的效果图，大家对于这种弹窗不陌生了哈。
https://w3c.github.io/html/semantics-scripting.html#elementdef-script #官网的这篇链接可以帮助你更加详细的了解。
可选的属性：
#type是必选的属性，指示脚本的 MIME 类型 src #值是URL，规定外部脚本文件的 URL。 charset #外部脚本资源的字符编码 async #规定异步执行脚本（仅适用于外部脚本）。 defer #规定是否对脚本执行进行延迟，直到页面加载为止。 crossorigin #元素如何处理crossorigin请求 nonce #内容安全策略检查中使用的加密随机数[CSP3]
