HTML（HyperText Markup Language：超文本标记语言）
- 用于创建网页的标准标记语言。
- HTML是一种基础技术，常和css、js一起搭建网页、网页应用程序以及移动应用程序的用户界面。
- 网页浏览器可以读取HTML文件并渲染成可视化的网页。
参考https://zh.wikipedia.org/wiki/HTML
HTML版本
1997.1 HTML3.2
1997.12 HTML4.0
1999.12 HTML4.01
2014.10 HTML5
一个典型的HTML5页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>HTML5</h1>
</header>
<main></main>
<footer></footer>
</body>
</html>
一个典型的HTML4页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div id="header">
<h1>HTML4</h1>
</div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
4到5加入了一些新标签 并删除了一些废弃标签
4的兼容性好但一般按照5去写 简单 适应性更好
HTML、XML、XHTML
HTML：超文本标记语言，是语法较松散的、不严格的Web语言；
XML：（EXtensible Markup Language）可扩展标记语言，主要用于存储数据喝结构、设计宗旨是传输数据，而非显示数据、标签没有被预定义。需要自行定义标签；
参考http://w3school.com.cn/xml/xml_intro.asp
XHTML：可扩展超文本标记语言，是XML和HTML的结合物基于XML，作用和HTML类似，但语法更严格；
参考http://w3school.com.cn/xhtml/xhtml_why.asp
HTML中表现（HTML）、样式（Css）、行为（Js）分离
- 写HTML时不管样式，重点在html的结构和标签语义化上，让HTML能体现页面结构或内容后再去写样式（css）
- 写JS时，尽量不用js去直接操作样式，通过给元素添加删除class来控制样式变化。
- HTML内不允许出现属性样式，尽量不出现行内样式
HTML语义化
语义化HTML是一种编写HTML的方式，语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，选择合适的标签、使用合理的代码结构，便于开发者阅读的同时也可以让浏览器的爬虫和机器很好的解析。
HTML常见标签、属性
标题标签：h1~h6 h1最大依次递减h6最小
段落标签：p 大段文字用p标签包裹
链接标签：a 链到一个地址 ，如：
- <a href="#">饥人谷.com</a>
- <a href="#about">饥人谷.com</a>配合页面中定位使用（锚链接）如：<p id="about">饥人谷.com</p>
- <a href="/getCourse">饥人谷.com</a>
- <a href="http://jirengu.com" target="_blank" title="饥人谷">饥人谷.com</a>
target属性：
1._blank 在新窗口中打开被链接的文档
2._self 默认，在相同的框架中打开被链接的文档
3._parent 在父框架集中打开被链接文档
4._top 在整个窗口中打开被链接文档
5.framename 在指定的框架中打开被链接文档
title属性：
鼠标悬停在超链接上的时候，显示该超链接的文字注释。如果希望注释多行显示，可以使用
作为换行符。
图片标签：img
<img src="#" alt="头像">
alt属性：
当图片不能正常显示，对图片的描述
div标签：div
如：
<div id="header">...</div>
<div id="content">...</div>
<div class="footer">...</div>
div用于给页面划分区块，让结构更清晰
id和class的区别：class是一类，id具有唯一性
列表标签ul、ol、dl
ul li标签
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>联系</li>
<li>地址</li>
</ul>
</li>
</ul>
ul：insorti list 无序列表
用于表示并列的内容
ul的直接子元素是li
可以嵌套
ol li标签
<h2>把大象关到冰箱的步骤</h2>
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>
ol：order list 有序列表
用于表示有步骤或编号的并列内容
ol的直接子元素是li
可以嵌套
dl dt dd标签
<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器，很贵，易碎</dd>
</dl>
展示一系列“标题：内容…”的场景
按钮标签：button
<button>点我</button>
文字：span strong em
span：正常显示
em：加强
strong：强调性更强
<p>优惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 岁了</p>
iframe标签
用于嵌入一个页面（注意跨域操作问题）
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3Cschool.cc</a></p>
表格标签 table
用于展示表格，不能用做布局
thead tbody tfoot可省略，浏览器会自动添加border-collapse：collapse；用于合并边框
<table>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<table>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
文档声明
<!DOCTYPE> 作用是声明文档的解析类型，声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
声明不是HTML标签，它是指示Web浏览器关于页面使用哪个HTML版本进行编写的指令。
HTML4.01和HTML5有所不同 一般用H5声明
<!doctype html>就是HTML5的声明
浏览器解析模式
严格模式：又称标准模式，是指浏览器按照W3C标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的模式解析代码
如果页面声明<!DOCTYPE html>那么浏览器就按照W3C的标准解析渲染页面，就是严格模式。如果没有，浏览器会按照自己的模式解析渲染页面，也就是混杂模式
<html lang=“zh”>里lang=“zh”表示告诉浏览器当前页面使用的语言，zh为中文意思
常用meta标签
meta标签是HTML里head区的一个辅助性标签
<meta charset="utf-8”>里charset="utf-8”
表示页面用utf-8编码表编码解析，如果不声明浏览器可能会错用其它编码表造成网页乱码
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">表示浏览器渲染内核的方式
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">表示适配移动页面
<meta name="keywords" content="前端 饥人谷">
<meta name="description" content="最有爱的前端学习社区">
name=“”，content=“”是告诉搜索引擎当前页面的内容，对页面的描述
<meta name="referrer" content="never">
所有从当前页面中发起的请求将不会携带 referer
常见的浏览器和内核
IE浏览器的trident
火狐浏览器的gecko
谷歌、opera浏览器的blink
safari浏览器的webkit
网友评论