在上一篇文章中，我们简单介绍了HTML，CSS和JaveScript的关系，HTML的文件结构和<title>标签和<p>标签的使用。那么这次就在介绍介绍HTML文件中的常用标签以及CSS的部分用法。
< h>标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h1-h6标题标签</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>
网页效果：
Snip20161214_1.png
< strong>和< em>标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>strong和em标签</title>
</head>
<body>
//这两个标签都表示强调某写文字
<em>斜体字</em>
<strong>粗体字</strong>
</body>
</html>
网页效果：
Snip20161214_2.png
< span>标签
注意：<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
//在这里设置样式，还有两种设置会在以后介绍
span{
color:blue;
}
</style>
</head>
<body>
<!--这里就可以为“秋风”二字设置单独样式-->
<p>就让<span>秋风</span>带走她的思念带走她的泪</p>
</body>
</html>
网页效果：
屏幕快照 2016-12-14 17.21.26.png
< br>标签
由于html中没有回车的概念，所以就有了
标签来替代回车
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hr标签使用</title>
</head>
<body>
<!--与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />-->。
<p>第一行</p><br /><p>第二行</p>
</body>
</html>
网页效果：
屏幕快照 2016-12-14 17.31.43.png
< hr>标签
在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。所以就用到了
标签。<hr />标签和< br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hr标签使用</title>
</head>
<body>
<p>第一部分</p>
<hr />
<p>第二部分</p>
</body>
</html>
网页效果：
Snip20161214_3.png
< code>标签和< pre>标签
在显示计算机语言编程代码时，我们会使用到这两个标签，他们的区别在于前者是标记单行代码，后者为标记多行代码，这里只给< code>标签的使用，< pre>标签类似：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hr标签使用</title>
</head>
<body>
<p>下面为OC代码</p><br />
<p><code>NSString * str = @"test";</code></p>
</body>
</html>
网页效果：
Snip20161214_4.png
< ul>和< ol>标签
< ul>可以定义一个无序列表，< ol>可以定义一个有序列表。使用如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>标签</title>
</head>
<body>
<ui>
<li>无序第一个列表信息</li>
<li>无序第二个列表信息</li>
<li>无序第三个列表信息</li>
</ui>
<ol>
<li>有序第一个列表信息</li>
<li>有序第二个列表信息</li>
<li>有序第三个列表信息</li>
</ol>
</body>
</html>
网页效果：
Snip20161214_7.png
< div>标签
<div>标签我们可以把它理解为一个容器，或者网页中的一个版块。
我们通常会给<div>一个id属性来标识它，目的就是为了利用css或者js来修改它的样式，位置以及动态效果。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div标签</title>
</head>
<body>
<div id="div1">
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div id="div2">
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</div>
</body>
</html>
网页效果：
Snip20161214_8.png
< table>标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
</head>
<body>
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
网页效果：
Snip20161214_9.png
< caption>标签
通常用于给table添加标题。
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
网页效果：
Snip20161214_11.png
< a>标签
1.使用< a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
</head>
<body>
<!--href：要跳转的页面-->
<!--title：鼠标划过的时候显示设置的文字-->
<!--target：若为_blank或跳转到新页面-->
<p> <a href="http://www.baidu.com" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a></p>
</body>
</html
网页效果：
Snip20161214_14.png
< img>标签
这个不多说，往页面插入图片，具体写法如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>标签</title>
</head>
<body>
</body>
</html
网页效果:
Snip20161214_16.png
