前言
在做web开发时，我们必不可少的要使用到Html,因为它包含了最基础的网页结构，虽然Html只能帮助我们构建静态网页，但是却是我们最不能缺少的部分，如果把网页比作一个房子，那么Html就是地基，也就是第一件要做的事，可见它的重要性。那么，现在大家就跟随我的脚步去学习下吧。
一、Html基本语法
要想知道Html的语法规则，首先我们得创建一个以Html为后缀的文件，当然也可以是Htm或者是XHtml,这里不讲述它们的区别。
在写Html之前容我给大家介绍一个神器，它拥有所见即所得的神器效果，也就是说有了它，我们可以编写Html代码边看结果，完全不用浏览器，可以说是相当方便，它就是ExHtmlEditor。
下载解压后即可使用，无需安装，方便快捷。
下面就让我们通过这个软件来正式敲开Html的大门吧。
1.标题
我们经常写文章的时候，常会使用标题，可以发现标题的字体一般比段落的字体要大，因为它要突出整篇文章的核心，用最简短的文字描绘出来。Html中设置标题的相关代码就是<h1>~<h6>,注意一定要写</h1>关闭它们，否则会引发位置的错误。我们常常将这些尖括号里的东西叫做标签，下面我们来看下：
可以看到，标题的字体越来越小。
2.段落
一篇文章除了标题，当然就是一个个段落了，段落中我们常常使用的标签有p标签，写法同上，只是标签名不同而已。
3.段落中的文本样式
我们都知道，一个段落里的文字总是比较多的，这就不乏会有一些比较大的引人注目的文字，也会有比较小的文字，更有带颜色的文字。那么这是怎么实现的了，下面我们来看看：
<b>粗体</b><big>大号字</big><em>着重文字</em><i>斜体字</i><small>小号字</small><strong>加重语气</strong><sub>下标</sub><sup>上标</sup><ins>插入字</ins><del>删除字</del><u>下划线</u><code>计算机代码</code><kbd>键盘文本</kbd><samp>计算机代码样本</samp><tt>打字机代码</tt><var>变量</var><pre>预格式文本</pre><abbr>缩写</abbr><address>地址</address><acronym>首字母缩写</acronym><bdo>文字方向</bdo><blockquotecite='www.baidu.com'>长引用</blockquote><q>短引用</q><cite>引用</cite><dfn>定义项目</dfn>
别看着挺多的内容就被吓到了，其实这些东西很好学的，主要是现在的Html编辑器都有自动提示功能，所以你根本不需要记住它们的全称就可以很轻松写出代码来，不过，光是这样还不行。
4.换行，水平线
当我们写文章时必须要换行，有时候还要使用水平线进行分割才能让文章显得更有层次感，那么该怎么做了，也是很简单的。
5.注释代码
在写代码时难免会写注释，这个时候我们需要写一写注释来说明代码的作用。格式为：
<!--这是注释--><!--注释完毕-->
6.链接
我们在浏览网页时点击一个地方的按钮它会跳到另一个地方，那么这就是所谓的链接了。
一般它用a标签包裹，里面有标签名，标签跳转的地址等信息，我们来看看。
1).链接的表现形式
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接
2).链接的跳转方式
另外，它还可以定义你打开的页面是当前页面还是新的页面或者说是上一个页面：
<ahref="https://www.baidu.com"target="_blank">百度</a>#新窗口打卡百度<ahref="https://www.baidu.com"target="_top">百度</a>#上一个窗口打开百度<ahref="https://www.baidu.com"target="_parent">百度</a>#父窗口打开百度<ahref="https://www.baidu.com"target="_self">百度</a>#当前窗口打开百度
3).锚链接
它可以快速定位页面中的某些标题，可以通过设置name属性来设置锚链接。
<ahref='#mao'>锚链接创建</a><p><aname='mao'>这是一个锚链接</a></p>
7.图片
为了美化我们的网页，有时候肯定会添加图片，那么该怎样添加图片了，下面请看：
1).插入图片
#我们只需输入图片地址即可，后面两项为鼠标放在图片上显示的内容和图片显示不出来的时候的替代文本<img src="1.jpg"title='图片' alt='图片无法显示'/>
2).设置背景图片
需要在body标签中设置背景为图片地址。
<bodybackground="1.jpg">
3).图片映射
通过点击图片跳转到相应链接页面。
<ahref="https://www.baidu.com"><img src="1.png"title='图片' alt='图片无法显示'/></a>
8.表格
有时候我们也需要插入表格来展示一些数据，表格的制作稍微有点麻烦，不过用SublimeText3它可以十分轻松的创建表格。表格一般由表头，表的标题，表的内容组成。最常用的就是Table标签了。
<!--表格边框1px,单元格边距5px,单元格间距10px,背景颜色灰色,背景图片1.jpg--><tableborder="1"cellpadding="5"cellspacing="10"bgcolor="gray"background='1.jpg'><colbgcolor='red'/><!--设置表格列的属性--><colgroupbgcolor='blue'></colgroup><!--设置表格列组的属性--><caption>表格标题</caption><!--页眉--><thead><tr><!--表格的行--><thcolspan="2">1--one</th><!--表格表头，相当于列跨两行--><th>2--two</th><th>3--three</th><th>4--four</th></tr></thead><!--表格主体--><tbody><tr><td>a</td><!--表格单元--><td>b</td><td>c</td><td>d</td></tr></tbody><!--表格页脚--><tfoot><tr><td>h</td><td>j</td><td>k</td><td>l</td></tr></tfoot></table>
9.列表
列表就是我们常常见到的一篇文章的目录，它一般以一种树型状存在着，它可以分为有序列表和无序列表。
1).有序列表
以标签ol为主体，li为父目录，具体表现为：
<ol><li>任性</li><li>90后</li><li>boy</li></ol><olstart="45"><li>90后</li><li>boy</li><li>任性</li></ol><oltype="a"><li>90后</li><li>boy</li><li>任性</li></ol><oltype="A"><li>90后</li><li>boy</li><li>任性</li></ol><oltype="I"><li>90后</li><li>boy</li><li>任性</li></ol><oltype="i"><li>90后</li><li>boy</li><li>任性</li></ol>
可以看出有序列表支持多种排序前缀，它就好比Word中的项目符号一样。
2).无序列表
与有序列表唯一不同的就是没有数字也没有字母，只有图形，也是犹如项目符号一样。
<!--这是注释--><!--注释完毕-->0
可以看出无序列表的默认项目符号就是类型就是黑圆圈
3).自定义列表
<!--这是注释--><!--注释完毕-->1
可以看到自定义列表由我们自己定义列表项目符号，项目的内容
10.块级元素和内联元素
1).块级元素
什么是块级元素，其实就是这个元素在进行显示后会换行输出下一个元素，比如我们的P标签，还有Blockquote标签都是，不过今天我们要说的是Html中运用的最广的块级元素，它就是Div。
<!--这是注释--><!--注释完毕-->2
可以看到在Div中的块级元素都换行了，然而内联元素都没有换行。
2).内联元素
<!--这是注释--><!--注释完毕-->3
<!--这是注释--><!--注释完毕-->4
注意:Span标签是没有Align属性的。
11.框架
框架是什么？框架就是在一个窗口可以显示多个页面内容的一个容器。框架又分为垂直和水平框架。
1).垂直框架
不可与Body标签同时出现
<!--这是注释--><!--注释完毕-->5
2).水平框架
不可与Body标签同时出现
<!--这是注释--><!--注释完毕-->6
3).内联框架
<!--这是注释--><!--注释完毕-->7
4).判断是否支持框架
<!--这是注释--><!--注释完毕-->8
12.表单元素
这个算是Html中的重中之重了，因为用的比较多，基本上所有的表单元素都包含在Form标签中。每一个表单中的空间要么独立存在，要么处于Input中，下面我们来详细了解下：
<!--这是注释--><!--注释完毕-->9
13.Html头部，标题
之所以现在讲这个，是不想一开始就长篇大论，增加一些没必要的修饰，免得扰乱学习的进度。
我们都知道Html，既然是Html，怎么可以没有Html标签了，当然是有的，只是我一开始没有写罢了，当然也可以不用写，不过为了美观为了不出错，建议写上。浏览器标题在浏览器头部里面被它包裹着。
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接0
14.音、视频
在Html中也是可以播放音频和视频的，不过这项功能添加在了Html最新版5.0版中的，下面来看看：
1).音频
比如说我们经常熟知的Mp3,Wav,可以通过Audio标签来进行播放。
1)).embed
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接1
2)).object
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接2
3)).audio
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接3
4)).a标签
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接4
2).视频
1)).embed
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接5
2)).object
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接6
3)).video
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接7
4)).a标签
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接8
15.Html5中的文章布局
可以帮我们省去一些不必要的排版标签，利用新式布局标签会显得更加专业，而且代码量更少。
<ahref="https://www.baidu.com">百度</a>#可以是一个url地址，点击即可打开百度首页<ahref="1.Html">百度</a>#也可以是一个Html文件<ahref="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接9
<ahref="https://www.baidu.com"target="_blank">百度</a>#新窗口打卡百度<ahref="https://www.baidu.com"target="_top">百度</a>#上一个窗口打开百度<ahref="https://www.baidu.com"target="_parent">百度</a>#父窗口打开百度<ahref="https://www.baidu.com"target="_self">百度</a>#当前窗口打开百度0
可以看到，文章结构紧凑，排版更加让人觉得一目了然。
二、总结
虽然Html总体来说，可能难度不是很大，但是要想学好，也不是一件容易的事，把一件小事做好，定能出彩。