首先我们先对HTML简单介绍一下：HTML不是一种编译语言，而是一种超文本标记语言（Hyper Text Markup Lanfuage）,标记语言是一套标记标签，通常是成对出现的，有其实标签就有结束标签，格式是尖括号包围的关键词，比如：<html></html>。HTML用它来描述网页，这些标签不显示在网页中。
接下来要介绍一下我们用什么来写HTML：（1）最简单的就是我们电脑上的记事本（适合初学者，没有代码不全功能，完全靠自己去敲，利于记忆），打开记事本写下HTML标签和内容，另存为.html文件，要注意的就是在另存时选择文件类型是所有文件，保存好后显示的是more吗浏览器的图标，我们双击它就可以通过浏览器来访问它。
我在学习的时候使用的是WebStorm 10.0.3,介绍一下WebStorm简单的用法
首先就是安装，安装好以后双击，点击empty project。进去以后点击file——>new——>Directory，选择文件存储位置，创建一个HTML文件应该这样：右击新建文件夹new——>HTML file，然后这个新的html文件就在你新建的文件夹下面。双击html文件，然后我们就可以在右边写标签和内容啦。
下面我们正式进入HTML学习
首先就是HTML最简单的的主体：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美丽世界</title>
</head>
<body>
我的第一个网页
</body>
</html><meta charset="UTF-8">这是为了防止出现乱码的，这是编码方式
下面我们开始介绍各个标签的作用：
<h1></h1> <h2></h2> <h3></h3> <h4></h4><h5> </h5><h6></h6>标签：用来定义标题，只有这六个，没有其他。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>北京欢迎您</h1>
<h2>北京欢迎您</h2>
<h3>北京欢迎您</h3>
<h4>北京欢迎您</h4>
<h5>北京欢迎您</h5>
<h6>北京欢迎您</h6>
</body>
</html>
<p></p>标签：定义段落的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美丽世界</title>
</head>
<body>
<p>我的第一个网页</p>
<p>我是来自中国的一名学生</p>
</body>
</html>
<a></a>标签：定义超链接，他的主要属性有href，target。href的属性值就是所要链接的网址，target属性是值就是表示连接的新的网页打开是在原来的 窗口下打开，还是在新的窗口打开如果，如果target的属性值为_parent则为在原窗口打开新的页面，如果target属性值为_blank表示在新的窗口打开新的页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target="_parent">百度</a>
<a href="http://www.bing.com" target="_blank">必应</a>
</body>
</html>结果展示：
<img>标签：插入图像时会用到。插入图片时，图片的位置可以是相对路径，也可以是绝对路径，相对路径是所要插入文件相对于当前的html文件的位置，绝对路径是相对于相对于电脑的根目录而言的。
<img src="img/123.png" width="210">
用浏览器打开网页后，图片就在浏览器中显示。注意：我们在改变图片大小时，只写图片的宽度或者高度，不要同时设置宽高，这样可以保证图片正比例缩放。
<br>标签：换行标签
我<br>喜<br>欢<br>你
结果展示：
<table><tr><td><th>标签：用来定义表格的标签。<tr>表示行，<td>表示列，<th>表示的标题，有居中和加粗的效果。
<body>
<table border="1px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>123-4569-7892</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>110-4569-7892</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>女</td>
<td>156-4569-7892</td>
</tr>
</table>
</body>结果展示：
<table>的属性有width，height，border，bordercolor，align，background等等
<body>
<table border="1px" bordercolor="red" width="500px" height="20px" align="center">
<tr bgcolor="red">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td bgcolor="aqua">张三</td>
<td>18</td>
<td>男</td>
<td>123-4569-7892</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>110-4569-7892</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>女</td>
<td>156-4569-7892</td>
</tr>
</table>
</body>结果展示：
cellpadding和cellspacing的区别：他们是table的属性，cellpadding是单元格的填充，cellspacing是单元格与单元格之间的距离
<body>
<table border="1px" bordercolor="red" width="500px" height="20px" align="center" cellspacing="20px">
<tr bgcolor="red">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td bgcolor="aqua">张三</td>
<td>18</td>
<td>男</td>
<td>123-4569-7892</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>110-4569-7892</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>女</td>
<td>156-4569-7892</td>
</tr>
</table>
</body>
<body>
<table border="1px" bordercolor="red" width="500px" height="20px" align="center" cellpadding="20px">
<tr bgcolor="red">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td bgcolor="aqua">张三</td>
<td>18</td>
<td>男</td>
<td>123-4569-7892</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>110-4569-7892</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>女</td>
<td>156-4569-7892</td>
</tr>
</table>
</body>
rowspan和colspan的区别：colspan是跨列，rowspan是跨行。
<body>
<table border="1px" bordercolor="red" width="500px" height="20px" align="center" cellpadding="20px">
<tr bgcolor="red">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td bgcolor="aqua">张三</td>
<td colspan="2">18</td>
<!--<td>男</td>-->
<td>123-4569-7892</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>110-4569-7892</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>女</td>
<td>156-4569-7892</td>
</tr>
</table>
<body>
<table border="1px" bordercolor="red" width="500px" height="20px" align="center" cellpadding="20px">
<tr bgcolor="red">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td bgcolor="aqua">张三</td>
<td>18</td>
<td>男</td>
<td>123-4569-7892</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td rowspan="2">女</td>
<td>110-4569-7892</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<!--<td>女</td>-->
<td>156-4569-7892</td>
</tr>
</table>
</body>
<form>标签：定义一个表单。表单里面包含文本框，密码框，单选按钮组，下拉列表，提交按钮，复选框等。
<form>
<lable for id="user">姓名:</lable>
<input type="text" id="user"><br>
<lable for id="pw">密码:</lable>
<input type="password" id="pw"><br>
性别:<input type="radio" name="sex" checked value="男">男
<input type="radio" name="sex" value="女">女<br>
爱好:<input type="checkbox" value="篮球">篮球<br>
<input type="checkbox" value="羽毛球">羽毛球<br>
<input type="checkbox" checked value="跳舞">跳舞<br>
<input type="checkbox" value="唱歌">唱歌<br>
<select>
<option value="陕西" >陕西</option>
<option value="山东">山东</option>
<option selected value="云南">云南</option>
<option value="四川">四川</option>
</select>省<br>
<select multiple>
<option value="陕西" >陕西</option>
<option selected value="山东">山东</option>
<option value="云南">云南</option>
<option value="四川">四川</option>
</select>省<br>
留言:<textarea rows="10" cols="40"></textarea><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>结果展示：
关于字体变化的标签：<b>、<i>、<strong>、<em>、<small>、<sub>、<sup>
<p>定义粗体文本<b>定义粗体文本</b></p>
<p>定义斜体文本<i>定义斜体文本</i></p>
<p>定义着重字体<em>定义着重字体</em></p>
<p>定义小号字体<small>定义小号字体</small></p>
<p>定义加重语气<strong>定义加重语气</strong></p>
<p>定义下标字：H<sub>2</sub>O</p>
<p>定义上标字：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
<pre>预格式化标签，可以保留空格。<p>标签想要留下空格可以用 ，表示留半角的空格。<p>标签在全角状态下的空格都可以保留，但是半角状态下，不管连续多少个半角空格，只留下一个半角空格。
<hr size="10px" color="red" width="1000px">
<br><hr><br>
<P>预格式化</P>
<pre>你是 一位
很厉害的 人
</pre>
<p>你是 一位
很厉害的 人
</p>
<hr size="10px" color="red" width="1000px">
结果展示：
