我使用的是Sublime Text3。按下！和Tab键后会自动生成简单的摸板。 可以看到HTML中的标签一般都是成对出现的，内容就在标签之中。还有一个是单标签的，比如换行。 首先来看一下刚才的文本在浏览器中的显示效果。 接下来解释一下刚才的HTML代码中各部分的含义： <!--This is the comment place-->是注释语句。注释的内容就在<!-- -->中。因为Markdown中可以直接使用HTML的语法规则，如果你直接在Markdown中写 ，其实你是看不到的，如图。 所以应该将这部分比变成代码片段才可以显示。
因为Markdown中可以使用HTML的语法，所以当你发现需要在Markdown中段首空两格却没有找到选项时，你可以这样写 每个 相当于半个空格，四个就相当于两个空格了。 同样，你可以让你的博客中出现彩色字体来便于区分。如下图展示：
I am red 还可以玩出很多花样，等HTML学了一些基础内容之后就可以尝试了。
代码的第二行：<!DOCTYPE html>，这表明该文本是一个HTML文本文件，当你写XML文件时，你的声明就可能写成：<!DOCTYPE book SYSTEM "book.dtd">。关于XML的部分可以参考这里：点我传送。
<html> <head> <title></title> </head> <body> </body> </html>上面可以理解成HTML的基本骨架。上面的标签基本都是自解释的，即我们通过观看其名字来大致推测出其含义。 <head></head>标签对存放的是一个头部信息。 <title></title>标签对存放的是网页的标题。 <body></body>标签对中存放的就是网页主体中的部分。 <br>单标签用于换行。写这个标签不用另起一行，下面这种写法也是允许的。
<body> Here is the line1.<br> here is the line2. </body>下面这样也是可以的
<body> Here is the line1.<br>here is the line2. </body>全部写到一行仍然可以
<body>Here is the line1.<br>here is the line2.</body>但是这样书写会给之后的代码浏览和代码维护等方面带来极大的不便，所以在一开始编写代码时就要有一个良好的书写习惯。
标题一般行式为<hn>TitleName</hn>，其中n的取值范围是1-6.并且从1->6，标签逐渐减小。 一般网页默认显示的大小是h3字体的大小。
<!DOCTYPE html> <html> <head> <title>TitleTest</title> </head> <body> <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6> </body> </html>显示效果如下：
段落部分使用的标签为<p>Content</p>。不同的段落之间是默认换行的。
<!DOCTYPE html> <html> <head> <title>TitleTest</title> </head> <body> <p>Paragraph1</p> <p>Paragraph2</p> </body> </html>通过设置属性，可以把标签内容的位置进行调整。方法是对align属性进行设置。 例如<h2 align="center">Title</h2>是把标题设置为居中显示。 <p align="center">Paragraph</p>即把段落内容居中显示。 这个属性的设置对今后用到的图片等属性都是适用的。 如果想要居左显示，则设置align="left",如果居右显示则设置align="right"。
<!DOCTYPE html> <html> <head> <title>TitleTest</title> </head> <body> <h2 align="center">Title</h2> <p align="center">我在中间</p> <p align="left">我在左边</p> <p align="right">我在右边</p> </body> </html>运行截图如下 出现这个界面不要慌张，首先可以确定是我们设置的位置是正确的，但是为什么显示的是乱码而不是汉字呢？ 这是编码的问题，在前端的一些显示中，编码问题有时候是让人很头疼的，因为默认的编码不支持中文显示，所以为了能让中文正常显示，我们需要在<head></head>属性中添加这样一行：<meta charset="UTF-8">。 这样：
<html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <h2 align="center">Title</h2> <p align="center">我在中间</p> <p align="left">我在左边</p> <p align="right">我在右边</p> </body> </html>再次运行： 现在就可以正常显示了。
水平线使用的标签为<hr>,这是一个单标签属性。 常见的属性包括 size：设置宽度，单位是像素 width：设置长度，默认为页面长度，单位可以是像素也可以是是百分制 align：对齐方式，与上面使用方式一样 noshade：没有属性值，若设置，表示线段为实心线段, color：设置颜色， 请看代码示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <hr size="30"><!--设置大小为30pix--> <hr size="30" color="red"><!----> <hr size="30" width="50%" color="yellow"><!--设置宽度为50%，即页面宽度的一半--> <hr size="30" width="50%" color="green" align="left"><!--设置颜色，并且居左显示--> <hr size="30" width="50%" color="blue" noshade><br><!--这里设置大小、宽度、颜色、实心线--> <hr> <!--这里是默认显示--> </body> </html>其中color也可以通过#RRGGBB显示，R、G、B的大小都为0-F。例如红色可以表示的color="#FF0000"。 size还有一种写法，例如size="+1"表示size=4,因为默认显示的大小为size=“3”,所以size="+1"就是表示在数字3的基础上再加一号。这种表示方法中最小可以设置为size="-2"，最大为size="+4"。
设置字体类型：通过设置face属性的值。 默认的字体类型为宋体。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <font face="楷体_GB2312">我是楷体吗？可能是吧</font><br> <font >我是楷体吗？可能是吧</font> </body> </html>可以看到这里并没有变成楷体，这是因为需要计算机中安装的字体库中安装该字体才可以使用。如果没有找到，就采用默认的显示。 注：Windows的字体库一般在C:\Windows\Fonts目录下 你可以在这里对字体进行添加、修改、删除等操作。 关于字体还有以下常用标签。 Content：将文字设置为粗体 Content：给文字加上下划线 Content：将内容设置为斜体 Content：将内容设置为上标 Content：将内容设置为下标 Content：将内同设置为闪烁（现在好像不支持了）。 这次不用HTML显示了，我们可以在Markdown中看到显示效果。 标签的属性是可以组合使用的，例如：
<html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <hr size="20" width="40%" align="center" color="#FFFF00"> <p align="center"><h1 align="center"><sup><font color="red">Wow</font></sup></h1></p> <p align="center"><h1 align="center"><sup><font color="red">I am red!</font></sup></h1></p> <hr size="20" width="40%" align="center" color="00FFFF"> </body> </html>无序标签：<ul>无序内容</ul> 有序内容：<ol>无序内容</ol> 无论有序还是有序，列表中的列表项都是<li>列表项</li>. 代码示例：
需要用到的标签：<table>定义表格</table> 表格标题：<caption>表格标题</caption> 表格行：<tr>表格行</tr> 表格表头：<th>表头</th> 表格表元：<td>元素</td>
示例代码：
<!--This is the comment place--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <table><!-- 定义表 --> <caption>表格标题</caption> <tr><!-- 定义行 --> <th>Table row1</th> <th>Table rou2</th> </tr> <tr> <td>element1</td> <td>element2</td> </tr> </table> </body> </html>但是这样并不好看，我们可以通过设置表格的属性来美化表格。常用的属性有： align:设置对齐方式，课本上说默认是左对齐，但是在使用的Edge浏览器中，默认的对齐方式是居中对齐。所以建议你在代码中写清楚对齐方式，防止因浏览器默认方式不同带来的隐患。 bgcolor:设置背景颜色 border:设置边框宽度，默认为0，即没有宽度。 width:设置表格的宽度 height:设置表格的高度 代码示例：
<!--This is the comment place--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <table bgcolor="#FF3399" border="2" width="400"><!-- 定义表 --> <caption>表格标题</caption> <tr bgcolor="#FFFF99" align="left"><!-- 定义行 --> <th>Table row1</th> <th>Table row2</th> </tr> <tr height="100"> <td>element1</td> <td bgcolor="#white">element2</td> </tr> </table> </body> </html>下面来介绍一些关于表格的高级属性： bordercolor:设置表格边框的颜色，默认为黑色。 cellpadding：设置边框的宽度。 cellpspacing:设置表元与表格边框之间的宽度。
<!--This is the comment place--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <table bgcolor="#FF3399" border="5" width="400" bordercolor="yellow" cellpadding="5" cellspacing="20"><!-- 定义表 --> <caption>表格标题</caption> <tr bgcolor="#FFFF99" align="left"><!-- 定义行 --> <th>Table row1</th> <th>Table row2</th> </tr> <tr height="100"> <td>element1</td> <td bgcolor="#white">element2</td> </tr> </table> </body> </html>如果想要合并单元格则需要用到rowspan和colspan这两个属性。这两个属性术语<td></td>标签。 <td rowspan="2">纵向合并</td>代表纵向合并两个单元格。横向合并同理，通过设置右边数值的大小来控制合并单元格的个数。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <table border="5" width="400"> <tr> <td rowspan="2">纵向合并</td> <td >element1</td> <td >element2</td> </tr> <tr> <td>element3</td> <td >element4</td> </tr> </table> <hr> <table border="5" width="400"> <tr> <td colspan="2">横向合并</td> </tr> <tr> <td >element5</td> <td >element6</td> </tr> <tr> <td>element7</td> <td >element8</td> </tr> </table> </body> </html>（超）链接使用到的标签是<a>content</a>. 例如跳转到另一个同一目录下的HTML文件，可以写成<a herf="test.html">跳转到test</a>
a.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <a href="test.html">Jump to test</a> </body> </html>test.html
<!DOCTYPE html> <html lang="en"> <head> <title>page</title> </head> <body> <p>This is test page</p> </body> </html>也可以跳转到网址： 例如下面代码所示，需要注意的是网址的写法，前面的http(s)://不可以省略。
<!--This is the comment place--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <a href="http://www.kingdeguo.com">Jump to MyWebsite</a> </body> </html>
使用到的标签是<img src="imgpath">。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <img src="img.jpg"> </body> </html>但是直接这样写会发现图片太大了不美观。 这就需要用到图片标签的一些属性。 其中height、width、border和align与前文说到的一样。 另外还有一个alt属性，用于对图片载入失败时进行说明。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <img src="img.jpg" width="400" height="200" border="10" bordercolor="yellow" align="top" alt="Unable load" /> </body> </html>表单基本格式如下：
<form action="submit place"> <!-- 表单内容--> </form>表单中最基本的属性是<input>标签。 其中他的type属性决定了表单元素的类型。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <form> 输入账号(文本框)：<input type="text"><br> 输入密码(密码框)：<input type="passward"><br> 选择性别(单选）： <input type="radio" name="sex" checked>男 <input type="radio" name="sex">女<br> 选择爱好(复选框): <input type="checkbox">篮球 <input type="checkbox">乒乓球 <input type="checkbox">游泳 <input type="checkbox">吉他 <br> 提交：<input type="submit"> 清空：<input type="reset"> 普通按钮：<input type="button"> </form> </body> </html>高级属性还有<textarea></textarea>,使用rows 和cols指定行数和列数。 和下拉菜单<select><select>,其中使用的是<option></option>标签。如果设置multiple属性，则表示可以多选。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TitleTest</title> </head> <body> <form> 输入账号(文本框)：<input type="text"><br> 输入密码(密码框)：<input type="passward"><br> 选择性别(单选）： <input type="radio" name="sex" checked>男 <input type="radio" name="sex">女<br> 选择爱好(复选框): <input type="checkbox">篮球 <input type="checkbox">乒乓球 <input type="checkbox">游泳 <input type="checkbox">吉他 <br> 自我介绍：<br><textarea rows="6" cols="5"></textarea><br> 选择城市：<br><select size="3" multiple> <option>上海</option> <option>北京</option> <option>郑州</option> </select> <br> 提交：<input type="submit"> 清空：<input type="reset"> 普通按钮：<input type="button"> </form> </body> </html>框架的作用是将一个网页分为几个部分来显示，便于网站的开发与维护。 框架的写法如下：
<frameset> <frame src="left.html" noresize scrolling="no" name="left"></frame> <frame src="right.html" noresize scrolling="no" name="right"></frame> </frameset>其中：noresize表示不可被用户改变大小。scrolling="no"表示无滚动条。
a.html
<!DOCTYPE html> <html> <frameset rows="20%,80%" border="0"> <frame src="top.html" noresize scrolling="no" name="top"></frame> <frameset cols="30%,70%"> <frame src="left.html" noresize scrolling="no" name="left"></frame> <frame src="right.html" noresize scrolling="no" name="right"></frame> </frameset> </frameset> </html>top.html
<!DOCTYPE html> <head> <title>Document</title> </head> <body> 这是上框架。 </body> </html>left.html
<!DOCTYPE html> <head> <title>Document</title> </head> <body> 这是左框架。 </body> </html>right.html
<!DOCTYPE html> <head> <title>Document</title> </head> <body> 这是右框架。 </body> </html>style属性用于设置div元素的行内样式，class属性用于引用CSS的类选择器；
<span>标签：实现行内块的定义， <span>标签属千行内元素，用来选择特定文本，以便赋予特殊的样式；当句子或段落中某一个部分需要分组时，就可以使用<span>标签。锚点连接：一份大型文档（例如科普文章、网络小说等）可能包含多个小节，读者要找到自己感兴趣的内容比较麻烦。此时，在文档的每个小节处设置一个书签，通过文档顶部或侧方导航栏中的链接指向每一小节，用户便可快速定位到所期望的小节；在HTML页面中，该书签又被称作＂铀点(anchor)", 用户单击想要访问的铀点链接时，可以到达期望的目标位置。。 <a href="#myname">跳转</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br>多使用一些换行为为了使效果更加明显<br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a id="myname">锚点位置</a>如果是跨页面的连接，则使用如下方式
<a href="/chap01/demo.html#myname"></a> 图片热区连接：是指在同一个图片中不同的部分链接到不同的目标位置，比一般的图片链接更加灵活。通过在图片中设置“热区“，为图片的特定部分创建超链接区域，然后再设置链接的目标位置。 <map id="mymap"> <area shape="circle" coords="32,35,31" href="https://www.baidu.com"/> <area shape="rect" coords="62,8,103,66" href="https://#"/> <area shape="poly" coords="114,73,133,11,107,11" href="#"/> </map> <img src="../../images/11.jpg" usemap="#mymap" border="0"/> 空连接<a href="#"></a>.Email连接:<a href="mailto:XXXX@qq.com"></a>javaSrcipt超链接:<a href="JavaScript:alert('nice to meet you')">点我试试</a>target的几个参数设置：_blank:在新建窗口中打开标签, _self：默认值，在相同的框架中打开, _parent：在夫框架集中打开, _top：在整个窗口中打开, frameName：在制定的框架中打开。除了表格主体（行与列）外，表格还提供了标题、表头和表尾部分，使得表格的内容更加 丰富，数据的组织更加清晰。使用< thead >、< tfoot >、< tbody >、<caption>标签可以对表格进行横向分组：< thead >标签定义表头，用千创建表格的头部信息。 < tfoot >标签定义表尾，用千创建表格的脚注部分；< tbody >标签定义表格主体，用于表示表格的主体部分， <caption>标签定义表格标题，显示在整个表格的上方。表格可以包含多个< tbody >标签，用千对表格主体部分的数据进行横向分组；而< thead >和< tfoot >标签在表格中只能出现一次。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Kingdeguo</title> </head> <body> <table> <caption> 企业员工薪水绩效表 </caption> <thead> <tr> <th>员工编号</th> <th>员工岗位</th> <th>基本工资</th> <th>本月绩效</th> </tr> </thead> <tbody> <tr> <td>TF0016</td> <td>Java高级工程师</td> <td>6000</td> <td>3000</td> </tr> </tbody> <tbody> <tr> <td>TF0016</td> <td>Java高级工程师</td> <td>6000</td> <td>3000</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>总计</td> <td>10W</td> </tr> </tfoot> </table> </body> </html> 对于大型数据表格而言，尽量将< tfoot >放在< tbody >之前，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。如果表格数据过长，无法在屏幕中完整显示，此时可以通过< thead >、< tbody >、< tfoot >标签对表格进行行分组。分组可以使浏览器有能力支持独立表头和表尾的表格正文滚动。当打印一个较长的表格时，表格的表头和表尾会被打印在包含表格数据的每一页中。表格除了可以按行分组之外，还可以纵向分组（又称列分组）。在HTML中提供了< colgroup >标签，该标签可以将表格按列进行分组，框架集虽然可以创建一个单独的滚动区域，但由于框架集固有的行列设计布局，限制了框架集布局的灵活性。而内联框架（又称行内框架）可以出现在页面的任何位置，比框架集更加灵活。内联框架是嵌入到页面中的一个区域，通过< iframe >标签引入另外一个页面资源，无需< frameset >标签协助。< iframe >标签的语法格式如下。如需同时提交多个表单，则须使用JavaScript的异步交互方式来实现。表单中的onreset 标签用于重置表单数据之前，执行其指定的JavaScript脚本程序get 方式：将数据作为URL 的一部分发送给服务器。URL 由地址部分和数据部分构成，两者之间用问号"?“隔开，数据以“ 名称＝值”的方式成对出现，且数据与数据之间通过”&"符号进行分割。get 方式的请求数据可以被缓存，能够保留在浏览器历史记录中，还能作为书签被收藏。由于get 请求数据会出现在URL 中，因此安全性比较低；而URL 地址栏长度有限，最长不能超过255 个字符，所以get 方式有长度限制。post 方式：将数据隐藏在HTTP 的数据流中进行传输；请求数据不会出现在地址栏 中，安全性比get 方式要高，并且对数据长度没有限制。在网页之间传递数据时，有些数据不希望用户在页面中看到，此时可以通过隐藏域来实 现。在HTML中，通过将标签的type属性设为hidden来创建一个隐藏域，语法格 式如下。在浏览器中，隐藏域并没有显示出来。但是在网页的＂ 源代码”中可以找到相应代码. 隐藏数据也可以通过CSS中的display属性或visibility属性来实现。 < input type= "hidden" name = " ... " value = " ... " /> <textarea>标签中的wrap属性用千指定文本内容大于文本宽度时的显示方式.默认是off，即当内容增多时会自动增加滚动条。virtual属性是自动换行，但是给服务器发送的数据是只有当用户按下回车键时才会换行。physical是自动换行，并且发送给服务器的内容也是换行的。用户若输入更丰富的内容时，可以采用富文本框RTE(Rich Text Editor)来实现，当前比较流行的富文本框有ckEditor、UEditor以及kindEditor等。< optgroup >标签，用千对列表项进行分组。该标签的label 属性用于指定每个分组的名称，且分组名不能被选择； disabled 属性用千设置该分组是否被禁用。 <select> <optgroup label="name"></optgroup> <option>name1</option> <option>name2</option> <option>name3</option> <optgroup label="age"></optgroup> <option>1</option> <option>2</option> <option>3</option> </select> 大型表单容易在视觉上产生混淆，通过表单的分组可以将表单上的控件在形式上进行 组合，达到一目了然的效果。常见的分组标签有< fieldset >和<legend>标签。< field set>标签可以看作表单的一个子容器，将所包含的内容以边框环绕方式显示；而<legend>标签则是为< fieldset >边框添加相关的标题。