<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <a href="//www.runoob.com">这是一个链接</a> <link rel="stylesheet" type="text/css" href="mystyle.css"> <title>练习</title> </head> <body> <img src="..\cat.jpg"width="500px" height="300px"> <!-- 相对路径:..\*** 绝对路径:右键copy path(idea里) 重命名:右键refactor*rename --> <hr><!--水平线--> <h1>我的第一个标题</h1> <p>我的第一个段落</p> <b>加粗文本</b> <br><!--换行--> <i>斜体文本</i> <br> <code>电脑自动输出</code> <br> 这是<sub>下标</sub>和<sup>上标</sup> <br> <strong>这个文本是加粗的</strong> <br> <big>这个文本字体放大</big> <br> <small>这个文本是缩小的</small> <br> <pre> 此例演示如何使用 pre 标签 对空行和 空格 进行控制 </pre> <kbd>键盘输入</kbd> <br /> <tt>打字机文本</tt> <br /> <samp>计算机代码样本</samp> <br /> <var>计算机变量</var> <br /> <p> <b>注释:</b>这些标签常用于显示计算机/编程代码。 </p> <p>跳出框架</p> <a href="http://www.runoob.com/" target="_top">点击这里!</a> <p> 这是一个电子邮件链接: <a href="mailto:744151913@qq.com? Subject=Hello%20again" target="_top"> 发送邮件</a> </p> <p> <b>注意:</b> 单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。 </p> <hr><!--表单--> <h4>有边框的表格</h4> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr><!--这是标题--> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <a href="//www.runoob.com/html/html-tables.html">其他类型表格</a> <!--列表--> <hr> <h4>大写字母列表:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>圆圈列表:</h4> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>嵌套列表:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> <h4>一个自定义列表:</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> <a href="//www.runoob.com/html/html-lists.html">不同类型列表</a> <a href="//www.runoob.com/html/html-forms.html">表单和输入</a> </body> </html>
HTML复习
最新推荐文章于 2021-10-14 08:11:06 发布