例子1
<html> <body> <h1>英雄联盟（电子竞技类游戏）</h1> <p> <strong>《英雄联盟》</strong>（简称lol）是由美国<i>Riot games</i>开发， 中国大陆地区由腾讯游戏运营的网络游戏。 </p> <p><strong>《英雄联盟》</strong>除了即时战略、团队作战外，还拥有一百多位特色各异的英雄，丰富的地图及玩法、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。<ins>[1]</ins> </p> <p>2016年1月，根据官方数据显示，LOL全球最高同时在线已经突破<del>750</del>900万，全球日活跃高达2700万，全球月活跃已达6700万，注册用户亿计，LOL已经成为当今世界最具人气和影响力的网络游戏之一。<ins>[2]</ins></p> </body> </html>
标题
<h1>....<h5>
段落
<p> </p>
粗体
<strong>或者<b>
斜体
<em>或者<i>
删除效果
<del>
下划线
<ins>
表格
<table border="1" width="200px"> <tr align="middle"> <td width="30%" valign="top">1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>a<br/>c<br/>d</td> <td>b</td> </tr> </table>
表格：由<table>标签包含。tr表示行(table row)，td(table data)定义这一行中的每一个元素。有3个元素则该<tr>中包括3个<td>
表格边框：border属性可以设置表格的边框宽度
表格宽度：table的width属性表示整个表格的宽度。而在td中设置width属性，其同一列的td元素会继承该td的宽度。width属性可以使用px，也可使用百分比
单元格水平对齐：align为水平对齐属性，取值为left center right。水平对齐即控制元素的左右移动。在td内设置水平对齐则仅仅控制该格子本身，在tr设置水平对齐则控制整行元素。
单元格垂直对齐：属性为valign，取值为top middle bottom。 垂直对齐即控制元素的上下移动。
表格2
<table border="1" width="200px"> <tr align="middle"> <td colspan="2">1</td> </tr> <tr > <td>3</td> <td>4</td> </tr> </table>
横跨两列：设置td的属性colspan，取值为跨的列数，表示该td元素横着占两列。对应的，该行的td元素应该只有1个。
<table border="1" width="200px"> <tr align="middle" > <td rowspan="2">1</td> <td>2</td> </tr> <tr > <td>4</td> </tr> </table>
横跨两行：仍然是在td上设置属性，只是设置属性为rowspan，表示该td元素竖着占两行。对应的列应该少一个元素。
背景色：bgcolor属性，可在td或tr上设置。
列表
<ol> <li>aaa</li> <li>bbb</li> </ol> <ul> <li>ccc</li> <li>ddd</li> </ul>
有序列表：ol
无序列表：ul
span和div
1）都是布局元素，本身没有意义也不会显示在页面中。
2）两者的区别：div是块元素，两个div之间会自动换行；类似的块元素还有h1，table，p
span是内联元素，不会自动换行，类似的还有img，a，b，strong
内联元素的宽度随着内容长度的变化而变化，而块元素则不会
内联框架<iframe>
iframe可以使得浏览器中有一个小浏览器，打开新的页面。
<iframe src="baidu.com" width="200px" height="150px"> </iframe>
例子2
<h3>英雄技能</h3> <table border="2" width="900px"> <tr> <td witdh="6%"><strong>技能名</strong></td> <td width="5%"><strong>触发</strong></td> <td width="15%"><strong>技能属性</strong></td> <td width="50%"><strong>技能效果</strong></td> <td width="10%" align="middle"><strong>图标</strong></td> </tr> <tr> <td><strong>坚韧</strong></td> <td><strong>被动</strong></td> <td colspan="2">概论在如果在9秒内不受到任何伤害，之后的每秒都会回复自己最大生命值的0.4%。小兵的伤害不会中断坚韧效果。</td> <td align="middle"><img src="images/skill1.png"/></td> </tr> <tr> <td><strong>致命打击</strong></td> <td><strong>Q</strong></td> <td>冷却时间</td> <td>盖伦移除身上的所有减速效果，并获得30%移动速度加成，持续1.5/2/2.5/3/3.5秒。在接下来的4.5秒内，他的下次普通攻击会造成30/60/90/120/150(+1.4AD)物理伤害，并沉默目标1.5秒。</td> <td align="middle"><img src="images/skill2.png"/></td> </tr> <tr> <td><strong>勇气</strong></td> <td><strong>W</strong></td> <td>冷却时间：24</td> <td><strong>被动：</strong>击杀一个单位会永久提供0.25护甲和魔法抗性加成，最大值：40。<br/><strong>主动：</strong>盖伦加固他的勇气2/3/4/5/6秒。在最初的0.75秒里，他少承受60%伤害并获得60%韧性。在剩余的持续时期里，他少承受30%伤害。 </td> <td align="middle"><img src="images/skill3.png"/></td> </tr> <tr> <td><strong>审判</strong></td> <td><strong>E</strong></td> <td>冷却：9</td> <td>盖伦快速地旋舞大剑，持续3/3/3/3/3秒，在持续期间对周围敌人总共造成物理伤害——14/18/22/26/30上他总攻击力的36/37/38/39/40%，5次(英雄每升3级加1次）。【审判】会在攻击单个敌人时造成33/33/33/33/33%额外伤害。取消【审判】会返还相当于剩余持续时长的冷却时间。审判可以暴击，并造成额外伤害。审判对小兵的伤害会减少25%.能够在旋转时使用【提亚玛特】/【贪欲九头蛇】现在，在旋转时右键到目标身上，会让你更靠近你的目标。</td> <td align="middle"><img src="images/skill4.png"/></td> </tr> <tr> <td><strong>德玛西亚正义</strong></td> <td><strong>R</strong></td> <td>冷却：120</td> <td><strong>被动：</strong>最近获得最多击杀数的敌人会成为大反派。盖伦的E【审判】和普攻会对大反派造成额外真实伤害，伤害值为大反派1%的最大生命值。<br/><strong>主动：</strong>盖伦召唤德玛西亚之力，试图斩杀一名敌方英雄，目标损失的生命越多，则此技能造成的伤害越高。造成175/350/525魔法伤害加上目标已损失生命值的28/33/40%。对大反派造成真实伤害。</td> <td align="middle"><img src="images/skill5.png"/></td> </tr> </table>
图像
插入图像：<img src="..abc.png" />
同级目录图片：src="文件名"
上级目录图片：src=“../文件名”
绝对路径：src="file://c:/abc/文件名"
设置图片大小：width和height属性
图像居中：一般将图像放在div中，然后设置div的水平对齐和垂直对齐
alt属性：当图像无法显示时，alt会出现作为提醒。<img src="abc.png" alt="图像无法显示">
外部链接
建立外链：<a href="http://baidu.com"> 百度</a>
鼠标在链接上悬停时显示提示：tittle属性，<a href="http://baidu.com" title="跳转到百度">百度</a>
用图片作为外链：<a href="http://baidu.com" > <img src="c://pic.png"/></a>