1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <h1>我是一级标题</h1> 9 <h2>我是二级标题</h2> 10 <h3>我是三级标题</h3> 11 12 <p> 13 第一段：好好学习天天向上 14 </p> 15 <p> 16 第二段：好的<br />没问题 17 </p> 18 19 <!--注释的写法，浏览器不会进行任何的操作，快捷键crtl / --> 20 21 <p> 22 大小于号的写法：<br /> 23 3 < 5 <br /> 24 10 > 5 <br /> 25 4<6 <br /> 26 7>1 <br /> 27 空格1 空格2 空格3 空格4 28 </p> 29 30 <p> 31 <!--图片显示--> 32 <img src='http://i02.pictn.sogoucdn.com/a1bbd31d4f7df270' alt="产品图片"/> 33 <img src="images/pic.jpg" alt="加载图片失败，妹妹睡觉去了"/> <br /> 34 <img src='http://i04.pictn.sogoucdn.com/c86564260dc87a3c'/> 35 <img src="http://i01.pictn.sogoucdn.com/97e326743ea33368"/> 36 <!--以上均为绝对路径，相对路径如下--> 37 <!--相对路径指的是相对html文件的路径--> 38 <!-- ./表示当前文件所在目录下 ../表示当前文件所在目录下的上一级目录--> 39 <img src="./images/1.jpg" alt="在当前路径下有个images文件夹，里边存放了1.jpg"/> 40 </p> 41 42 <p> 43 <!--点击文字的超链接--> 44 双11节提前开始了 45 <a href="http://www.taobao.com">点击下面的链接，优惠50%</a> 46 <!--点击图片的超链接--> 47 <a href="https://www.cnblogs.com/"><img src='https://www.cnblogs.com/images/logo_small.gif' alt="图片"/></a> 48 <!--以上均为绝对路径，相对路径如下--> 49 <!--相对路径指的是相对html文件的路径--> 50 <a href="./images/1.jpg">点击回到本地1.jpg</a> 51 <!-- target属性：target="blank"或者"_blank"，点击链接会在一个新的页面显示 target="_self"，点击链接会原页面显示--> 52 <a href="http://www.jd.com" target="_blank"><img src="https://p.ssl.qhimg.com/t01fdadfd1706f7d040.jpg"></a> 53 <a href="http://www.cnblogs.com/tianqizhi/p/" target="_self">点击跳转到我的博客</a> 54 <!-- target不写，默认会在原页面显示--> 55 <!--属性：title 注： 可用于换行--> 56 <a href="http://www.cnblogs.com/tianqizhi/p/" title="鼠标放在上边 第二行 ">鼠标放在上边会显示本句</a> 57 <!--name属性--> 58 59 <p> 60 <a href="#C6">参见第10章</a> 61 </p> 62 63 <a name="C1"><h2>第1章</h2></a> 64 <p>这是齐1</p> 65 66 <a name="C2"><h2>第2章</h2></a> 67 <p>这是齐2</p> 68 69 <a name="C3"><h2>第3章</h2></a> 70 <p>这是齐3</p> 71 72 <a name="C4"><h2>第4章</h2></a> 73 <p>这是齐4</p> 74 75 <a name="C5"><h2>第5章</h2></a> 76 <p>这是齐5</p> 77 78 <a name="C6"><h2>第6章</h2></a> 79 <p>这是齐6</p> 80 81 <a name="C7"><h2>第7章</h2></a> 82 <p>这是齐1</p> 83 84 <a name="C8"><h2>第8章</h2></a> 85 <p>这是齐2</p> 86 87 <a name="C9"><h2>第9章</h2></a> 88 <p>这是齐3</p> 89 90 <a name="C10"><h2>第10章</h2></a> 91 <p>这是齐4</p> 92 </p> 93 94 <ol> 95 <!--有序列表--> 96 <li>列表文字一</li> 97 <li>列表文字二</li> 98 <li>列表文字三</li> 99 </ol> 100 101 <ul> 102 <!--无序列表--> 103 <li>列表文字一</li> 104 <li>列表文字二</li> 105 <li>列表文字三</li> 106 </ul> 107 108 <h3>定义列表</h3> <!--本行不用写--> 109 <dl> 110 <dt>术语题目</dt> 111 <dd>术语的解释</dd> 112 <dt>多个题目</dt> 113 <dd>多个解释</dd> 114 </dl> 115 116 <table border="0" cellpadding="0" cellspacing="0"> <!-- 声明表格,border可以不写，默认不显示表格。若写上，baoder的大小定义的是表格的边框 --> 117 <!-- cellpadding定义单元格内内容与边框的距离，cellspacing定义单元格与单元格之间的距离--> 118 <tr> <!-- 表示一行 --> 119 <th>name</th> <!-- th表示表头单元格（相对比普通单元格会加粗） --> 120 <th>性别</th> <!-- 表示一列 --> 121 <th>age</th> 122 </tr> 123 124 <tr> <!-- 表示一行 --> 125 <td>小齐</td> <!-- td表示普通单元格 --> 126 <td >男</td> <!-- 表示一列 --> 127 <td >24</td> 128 </tr> 129 130 <tr> <!-- 表示一行 --> 131 <td>小郭</td> 132 <td rowspan="2">女</td> <!-- rowspan设置单元格垂直合并，数值代表合并的单元格数目，相应的删去该列以下每行对应的单元格 --> 133 <td>33</td> 134 </tr> 135 136 <tr> <!-- 表示一行 --> 137 <td align="right">小xu</td> <!-- align设置单元格中内容的水平对齐方式，设置值：left、center、right --> 138 <td valign="bottom">43</td> <!-- valign设置单元格中内容的垂直对齐方式，设置值：top、middle、bottom --> 139 </tr> 140 141 <tr> <!-- 表示一行 --> 142 <td colspan="3">小qiu</td> <!-- colspan设置单元格水平合并，数值代表合并的单元格数目，相应的删去其该行以右每列对应的单元格 --> 143 </tr> 144 </table> 145 146 <form> <!--表单：用于提交数据--> 147 姓名：<input type="text"> <!--单行文本输入框,也可以这样写：<input type="text" name="yourname"> --> 148 密码：<input type="password"> <!--输入框--> 149 爱好： 150 <input type="checkbox">苹果 <!--复选框,也可以这样写： <input type="checkbox" shuiguo="fruit" value="apple"> --> 151 <input type="checkbox" shuiguo="fruit" value="orange">橘子 152 <input type="checkbox" checked>香蕉 <!--用checked表示默认的选项--> 153 性别： 154 <input name="sex" type="radio" >男 <!--单选框 注：用户checked表示缺省已选的选项，可省略--> 155 <input name="sex" type="radio">女 <!--没有xinbie="sex"命名这一项不会成为单选框,命名必须相同，因为二选一 --> 156 <input name="sex" type='radio' checked>正常人 <!-- 注：用户checked表示缺省已选的选项--> 157 你最爱的水果是：<!--下拉框--> 158 <select name="fruit"> 159 <option value="apple">苹果</option> 160 <option value="prange">橘子</option> 161 <option value="mango">芒果 <!-- </option>可以不写 --> 162 </select> 163 请提出宝贵意见：<!--多行输入框（textarea），cols表示宽度，rows表示高度--> 164 <textarea name="yoursuggest" cols="'50" rows="3"></textarea> 165 <!--提交：将表单Form里的信息提交给表单里action所指向的文件--> 166 <input type="submit" title="提交"> 167 </form> 168 </body> 169 <!--html内嵌框架，放在body之外--> 170 <!-- <iframe>标签会创建包含另外一个html文件的内联框架（即行内框架）， 171 src属性来定义另一个html文件的引用地址，frameboder属性定义边框，scrolling属性定义是否有滚动条--> 172 <iframe src="http://www.taobao.com" frameborder="0" scrolling="yes"></iframe> 173 <iframe src="http://www.taobao.com" frameborder="0" scrolling="no" name=“myframe”></iframe> 174 <!--内嵌框架与a标签的配合使用：a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中--> 175 <a href="http://www.taobao.com" target="myframe">页面一：淘宝</a> 176 <a href="http://www.jd.com" target="myframe">页面二：京东</a> 177 <a href="http://www.dangdang.com" target="myframe">页面三：当当</a> 178 </html>
结果：
