1.1.1 HTML简介及发展史
HTML是用来描述网页的一种语言，它是一种超文本语言，也就是说，HTML不是一种编程语言，仅是一种标记语言（MarKup Language）
1.1.2 HTML的优势
1.世界知名浏览器厂商的支持
2.市场需求
3.跨平台
1.1.3 W3C标准
1.使用W3CW3C标准的原因
随着浏览器市场的激烈竞争，各大浏览器厂商为了吸引用户，都在早期HTML版本的基础上扩展各类标签，个浏览器厂商之间互不兼容，导致HTML编码规则混乱，
违背了HTML发明的初衷，因此需要一个组织来制定和维护统一的国际化Web开发标准，确保多个浏览器都兼容，HTML内容结构都是语义化的。
万维网联盟（Word Wide Web Consortium）简称W3C， 诞生了，因此有W3C组织制定和维护的Web开发标准，也成为W3C标准。它是Web技术领域最权威和具有影响力的
国际中立性技术标准机构。
2.W3C标准的介绍
W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要由三部分组成，即结构（Sructure），表现（Presentation），和行为（Behavior）。
小结：W3C标准包括结构化标准语言（HTML,XML），表现标准语言（CSS），行为标准（DOM,ECMAScript）。
1.1.4 网页编辑工具
使用WebStrom编辑HTML文档的步骤如下。
（1）打开WebStrom编辑器后，选择FIle→New→HTML File命令，打开“HTML File”对话框，
（如果是第一次安装WebStorm的话）不会出现这个界面，可以首先在出现的那个界面上单击Create New Project（创建一个新的项目文件），然后这个文件夹就会随之在WebStrom
左边出现，接下来要开发的项目子文件就可以放在这个文件下面了。）
（2）在“Name”文本框中输入HTML的文件名为“my_FirstPage”,在“kind”下拉列表框中选择“HTML 5 file”选项，单机“OK”按钮即可创建一个HTML5页面的模板。
（3）在body元素和title元素中添加网页内容。
（4）网页内容添加完成后，鼠标移动到WebStorm编辑器右上方，会出现几个常见的浏览器图标，单击Chrome浏览器图标即可打开该页面。
（使用Chrome浏览器测试，前提是本机安装了Chrome浏览器，其他浏览器也是同理。）
1.1.5 HTML5 文件的基本结构
HTML是一种超文本标记语言，如网页的一个标题，一个段落，一张图片等，这些都是利用一个个HTML标记完成的。最基本的语法就是<标记>内容</标记>。
<html> <head> <title>我的第一个网页</title> //头部部分 </head> <body> 我的第一个网页 //主体部分 </body> </html>
1.1.6 网页的基本信息
1.DOCTYPE声明
约束HTML文档结构，检验是否符合相关Web标准，告诉浏览器使用哪种规范来解释这个文档的代码
<!DOCTYPE html>
2.<tltle>标签
描述一个标题，使读者有兴趣读下去。
<title>搜狐--中国最大的门户网站</title>
3.<>meta>标签
<meta>标签描述的内容并不明显，其目的是方便浏览器解析或利于搜索引擎搜索。
（1）文档内容类型，字符编码信息书写如下。
<meta charset="UTF-8">
属性：charset表示字符集编码，常用的编码有以下几种。
gd2312：简体中文，一般用于包含中文和英文的页面。
ISO-885901：纯英文，一般用于之包含英文的页面。
big5：繁体，一般用于带有繁体字的页面。
UTF-8:国际性同用的字符编码，同样适用于中文和英文的页面。和gd2312编码相比，国际通用性更好。
（ 在保存文件是编码方式一定要与HTML5 页面中<meta>标签中的编码方式保持一致，否则，将会出现乱码。）
（2）搜索关键字哈内容描述信息书写如下。
<meta name="Keywords" content="北大青鸟，IT培训"/>
<meta name="description" content="北大青鸟是国内最大的IT教育集团，致力于为中国培养优秀的IT技术人才"/>
（使用WebStorm工具自动生成的HTML基本结构中的<head>标签里有个属性lang=“en”，它的意思是表示本页面是英文的。Chrome之类的浏览器会提示是否需要翻译）
1.2.1 标题标签
标题标签表示一段文字的标题或主题，并且支持多层次的内容结构。例如，一级标题采用<h1>,二级标题则采用<h2>,其他级别标题以此类推。HTML共提供了六级标题<h1>~<h6>,
并赋予了标题一定的外观，所以标题字体加粗，<h1>字号最大，<h6>字号最小。
<html> <head> <title>不同标题标签的对比</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html>
1.2.2 段落标签和换行标签
段落标签<p>......</p>表示一段文字等内容。
<html> <head> <title>段落标签的应用</title> </head> <body> <h1>北京欢迎你</h1> <P>北京欢迎你，有梦想谁都了不起！</P> <p>有勇气就会有奇迹。</p> </body> </html>
（使用<h1>标签来表示标题，使用<p>标签表示一个段落，这里就对应了上面介绍的HTML内容的语义化。）
换行标签<br/>表示强制换行显示，该标签比较特殊，没有结束标签，直接使用<br/>表示标签的开始和结束。
<html> <head> <title>换行标签的应用</title> </head> <body> <h1>北京欢迎你</h1> <P> 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。<br/> 北京欢迎你，为你开天辟地 流动中的魅力充满朝气。<br/> 北京欢迎你，在阳光下分享呼吸 让黄土地刷新成绩。<br/> 北京欢迎你，像音乐感到你 让我们都加油超越自己。<br/> </p> </body> </html>
1.2.3 水平线标签
水平线标签<hr/>表示一条水平线，注意该标签与<br/>标签一样，比较特殊，没有结束标签。
<html> <head> <title>换行标签的应用</title> </head> <body> <h1>北京欢迎你</h1> <br/> //水平线标签 <P> 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。<br/> 北京欢迎你，为你开天辟地 流动中的魅力充满朝气。<br/> 北京欢迎你，在阳光下分享呼吸 让黄土地刷新成绩。<br/> 北京欢迎你，像音乐感到你 让我们都加油超越自己。<br/> </p> </body> </html>
1.2.4 字体样式标签
使用<stong>标签让字体变粗，<em>标签让文字倾斜。
(<strong>标签不但能让字体加粗，实际上<strong>标签还有一个更重要的“身份”，它是一个带有语义化的标签，它有强调，加强语气的作用)
1.2.5 注释和特殊符号
HTML中的注释是为了方便代码阅读和调试。当浏览器遇到注释是会自动忽略注释内容。
语法：
<!--注释内容--
| 特殊符号 | 字符实体 |
| 空格 | &内部碎片; |
| 大于号(>） | > |
| 小于号(<) | < |
| 引号（“”） | " |
| 版权符号（©） | © |
1.3.2 图像标签的基本语法
语法：
<img src="图像地址" alt="图像代替的文字" title="鼠标悬停提示的文字" width="图片宽度" heigth="图像高度"/>
1.4.1 超链接的基本用法
语法：
<a href=“链接地址” target=“目标窗口位置”>链接文本和图像</a>
href：表示链接地址的路径。
target：指定链接在哪个窗口打开，常用的取值有_self(自身窗口)，_blank（新建窗口）。
根据链接地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径。
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。
相对路径：相对于当前页面的路径，一般指向本站点内的文件，所以一般不需要一个完整的URL地址的形式。
（当超链接href链接路径为“#”时，表示空链接，如<a href="#">首页</a>）
1.4.2 超链接的应用场合
根据链接的应用场合，可以把链接分为三类。
（1）页面间链接：A页到B页，最常用，用于网站导航。
（2）锚链接：A页甲位置到A页乙位置到B页乙位置。
（3）功能性链接：在页面中调用其它程序功能，如电子邮件，QQ，MSN等。
锚链接：
（1）在页面的乙位置设置标记。
语法：
<a name="marker">目标位置乙</a>
name为<a>标签的属性，marker为标记名，其功能类似于古时固定船的锚，所以也称锚名。
（2）设置甲位置链接路径href属性为“#标记名”
语法：
<a href="#marker">当前位置</a>.