[TOC] ## 用例源码 [点击下载](http://pan.baidu.com/s/1bp1eGxD) # 常见标签 ~~~ <a> 定义超链接。 <h1> to <h6> 定义标题 1 到标题 6。 <b> 定义粗体文本。 <button> 定义按钮。 <hr> 定义水平线。 <br> 插入换行符。 <i> 定义斜体文本。 <label> 定义表单控件的标注。 <div> 定义文档中的节。 <img> 定义图像。 <small> 定义小号文本。 <span> 定义文档中的 section。 <strong> 定义强调文本。 <sub> 定义下标文本。 <sup> 定义上标文本。 <del> 定义删除文本。 <em> 定义强调文本。 <p> 定义段落。 <pre> 定义预格式化文本。 <iframe> 定义行内的子窗口(框架)。 <form> 定义表单。 <input> 定义输入域。 <textarea> 定义 textarea。 <select> 定义可选列表。 <option> 选择列表 <table> 定义表格。 <caption> 定义表格标题。 <thead> 定义表头。 <tbody> 定义表格的主体。 <tfoot> 定义表格的脚注。 <th> 定义表头。 <td> 定义表格单元。 <tr> 定义表格行。 <ul> 定义无序列表。 <ol> 定义有序列表。 <li> 定义列表的项目。 ~~~ # 属性 ~~~ style 规定元素的行内 CSS 样式。 class 规定元素的一个或多个类名(引用样式表中的类)。 Id 规定元素的唯一 id。 title 规定有关元素的额外信息。 data-自定义 ~~~ # 事件 ~~~ onblur 元素失去焦点时运行的脚本。 onchange 在元素值被改变时运行的脚本。 Onclick 元素上发生鼠标点击时触发。 ondblclick 元素上发生鼠标双击时触发。 ~~~ # 示例1 ~~~ <!doctype html> <html> <head> <!--设置字符集--> <meta charset="utf-8" /> <!--浏览器的标题--> <title>title1111</title> <!--样式--> <style type="text/css"></style> <!--脚本--> <script type="text/javascript"> function demo_click(e) { console.error(e, e); } </script> </head> <body> <!-- > < --> &gt;&nbsp;&lt; <a title="title" target="_top" href="http://www.baidu.com">baidu</a> <h1 onclick="demo_click('h1')">h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <h7>h6</h7> stdb <br /> <hr /> <b onclick="demo_click('b')">content</b> <button onclick="demo_click('btn')">button</button> <i title="">i</i> <label id="">label</label> <div>jjj</div> <img style="height:200px;width:200px" src="DJI_0108.JPG" alt="bujianl" /> <small>small</small> <span>span</span><p>p</p> <strong>content</strong> <sub>sub</sub>std<sup>sup</sup> <del>del</del> <em>em</em> <pre> int main(){ int i,j; }</pre> <iframe style="width:100%;height:500px;border:1px solid red" src="iframe.html" frameborder="0"></iframe> </body> </html> ~~~ * * * * * # 示例2 #### 效果 ![](https://box.kancloud.cn/078819a11e67046ed485681c48a82674_435x430.png) ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> table { width: 400px; height: 400px; } table td{ border:1px solid #679454; } </style> </head> <body> <table> <tr> <td colspan="2">1</td> <td rowspan="2">2</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td colspan="2">1</td> </tr> </table> </body> </html> ~~~