目录
这篇文章将为大家讲解一下构成我们html的一些简单并且常用的标签及其使用。
- HTMl标签的关系
（一）嵌套关系
（二）并列关系
前面我们讲过html，就是这个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
hello world
</body>
</html>
在上面的代码中可以看到，<html>包含着<head>和<body>像这种的就被称作是嵌套关系。而上面代码<body>与<head>这种并列在一起的就称作并列关系。
建议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键位。如果是并列关系，最好是上下对齐。如同上面的代码一样。
2. HTMl的骨架
还是上面的代码，其中<html>被称作为根标签。<head>被称作头标签。<title>被称作标题标签。<body>被称作主题标签。
不过在这个骨架里面有标签是能辨认身份的。没有错，就是<！DOCTYPE html>这个标签存在就意味着这个网页是html5网页。
还有一个字符集标签，就是<meta charset=“UTF-8”>这个的意思就是使用UTF-8进行编码。其实还有很多的编码格式。像gb2312，GBK等，但是相对于UTF-8来说还是美中不足，因为UTF-8包含了世界上所有国家的字符。
- 编译器webstrom
其实市面上存在好多编译器，像dw等，但是之所以说webstrom是因为为了后面js部分的学习而做准备学习webstrom的使用。
如图这就是webstrom，下面先教大家如何简单的创建我们上面的那个代码页面。
（一）进入之后先点击File里的Open去选择任意的一个文件夹。
（二）在project下面就会出现你选择的文件夹，然后右键文件夹选择New里面的HTML File
（三）会弹出一个输入框，输入名字即可。
完成上面的三步之后上面代码的页面就创建好了，然后点击右上角附近优浏览器选择，点击电脑里常用的浏览器运行就可以了。
- 排序标签
（一）标题标签<h1>,<h2><h3><h4><h5><h6>如图所示
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
建议：在真正的页面布局的时候，尽量少用h1，h1一般是用来操作logo使用的。
（二）段落标签 <p>
我们尝试着去把一段话放入body中看看效果
<body>
我愿意同走路的人一同行走。 我不愿站住看着队伍走过。
考学生背了多少谎言毫无意义
夕阳落下，霞光散尽，然后便是漫漫长夜。 但还会升起，化朝霞满天，紫气东来。
你自己，没有多大能量。但你可以做一根火柴，使命不是燃烧自己，而是点燃人群中的热情。这样，火柴的价值才最大化。
鸿雁在云鱼在水，惆怅此情难寄
胜利属于最坚忍的人。
生活其实也很简单，喜欢的就争取，得到的就珍惜，失去了就忘记！
我们常常会为了一个眼前的人义无反顾，却很难为了一个说不清会不会到来的未来和梦想而万死不辞。
</body>
我们想把这句话显示在我们的浏览器上，于是你这样写，但是结果可能不会太尽人意。尝试过后你会发现，浏览器的效果变成了这样子。
我的天啊，谁愿意看到这样的一句话，都密密麻麻的挤在了一起了，难受啊。这时，我们的<p>就起了左右，我们稍微的修改一下代码。
<body>
<p>我愿意同走路的人一同行走。 我不愿站住看着队伍走过。</p>
考学生背了多少谎言毫无意义
夕阳落下，霞光散尽，然后便是漫漫长夜。 但还会升起，化朝霞满天，紫气东来。
你自己，没有多大能量。但你可以做一根火柴，使命不是燃烧自己，而是点燃人群中的热情。这样，火柴的价值才最大化。
鸿雁在云鱼在水，惆怅此情难寄
胜利属于最坚忍的人。
生活其实也很简单，喜欢的就争取，得到的就珍惜，失去了就忘记！
我们常常会为了一个眼前的人义无反顾，却很难为了一个说不清会不会到来的未来和梦想而万死不辞。
</body>
此时的效果巨变，变成了这样。
这样，你们看，是不是舒服多了，其实这就是段落标签的用法
（三）水平线标签<hr/>------单标签
其作用就是画一条水平的直线。
（四）换行标签<br/>------单标签
其作用就是能换行，不同的是，段落标签也能换行，但是会产生多余的间距，一般换行都用换行标签。到了css部分就能通过样式解决了。
（五）div span标签 是我们网页布局的两个盒子。------重点！！！！！！
（六）文本格式化标签
<b></b>------<strong></strong>------加粗
<i></i>------<em></em>------斜体
<s></s>------<del></del>------删除线
<u></u>------<ins></ins>------下划线
5. 标签属性
<标签名 属性1=“” 属性2=“”>内容</标签名>
注意：标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
6. 图像标签
<img src=" "/>单标记
这里说一下这个src是图片的路径。而路径分为相对路径和绝对路径。简单说一下。
相对路径：（一）位于同级，即在同一个文件夹里面，src直接写照片的名字就行。如<img src="haha.jpg">
（二）照片位于下一级，即在一个大文件夹里面，照片位于大文件夹的小文件夹里面，此时应该<img src="images/haha.jpg">
（三）照片位于上一级，此时与上一条相反，<img src="../haha.jpg">
绝对路径：就是直接在src上写这幅照片位于电脑的绝对地址即可。一般不推荐使用！！！！！！
- 链接标签
<a href=""></a>
注意：（一）链接必须有href这个属性
（二）链接地址必须以http://开头。
8. 锚点定位
在我们一篇很长的文章中，如果不提供锚点，读者读起来会非常的不方便的，那么，什么叫做锚点呢。其实非常的简单。
<a href="#id"></a>
这就是锚点，然后将你要跳转的地方加上id属性即可。
9. 常用的特殊字符
空格------
<------<
>------>
¥------¥
©------©
10. 注释
注释对于我们程序员来说是非常重要的，尤其是团队开发的时候好的注释更能起到出其不意的效果。
<!-- 注释内容 -->
这就是html页面里面的注释，当然还有注释快捷键
（一）单行注释------ctrl+/
（二）多行注释------ctrl+shift+/