HTML代码示例和介绍

it2026-08-15 7

HTML基本的格式

<!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF-8">  <title>第一个项目</title>  </head> <body> <p>这个p是段落。可以把很多文字放到里面去。比如这是一段文字。</p> <p>这是另一个段落。</p> <h1>这是h1标题</h1> <h2>这是h2标题</h2> <h3>这是h3标题</h3> <h4>这是h4标题</h4> <h5>这是h5标题</h5> <h6>这是h6标题</h6> <hr> <p>这是一个段落。插入图片</p> <a href="www.baidu.com">这是跳转到的百度链接</a>  <br> <img src="images/one.jpg" alt="" width="500" height="500">  <img src="images/two.jpg" alt="" width="500" height="500"> <hr>  <b>这是一句话。定义粗体</b> <em>这是一句话。定义着重文字</em> <i>这是一句话。定义斜体</i> <small>这是一句话。定义小字号</small> <strong>这是一句话。定义加重语气</strong> <p>插入<sub>这是一句话</sub>定义下标字</p> <p>插入<sup>这是一句话</sup>定义上标字</p> <ins>这是一句话。定义插入字</ins> <del>这是一句话。定义删除字</del>  <hr> <p>这是计算机输出标签</p> <code >#定义计算机代码print("hello world!") </code> <br> <kbd>定义键盘码</kbd> <br> <samp>定义计算机代码样本</samp> <br> <var>定义变量</var> <pre>定义预格式文本</pre> <p><b>注释：</b>这些标签常用于显示计算机/编程代码。</p>  <hr> <abbr title="">定义缩写</abbr> <address>定义地址</address> <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> <blockquote>定义长的引用</blockquote> <q>定义短的引用</q> <br> <cite>定义引用、引证</cite> <br> <dfn>定义一个定义项目</dfn> </body> </html>

页面的展示：

头文件标签的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个标题</title> <base href="www.baidu.com">  <link rel="stylesheet" href="lesson01.html"> <meta name="lizhe" content="web开发"> <script></script> <style></style>  </head> <body> </body> </html>

HTML图片的运用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> </head> <body> <b>来自本地文件夹的图片</b> <p>这是一张图片</p> <img src="images/three.jpg" alt="view" width="300" height="200"> <p>这是一张动图</p> <img src="images/haha.gif" alt="do" width="300" height="200"> <hr> <p>来自网站的图片</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603976446&di=919d66677c39ad3198f97c54cc1d1982&imgtype=jpg&er=1&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F213205624b29002ace7d11f2c546016400c10750.png" alt="" width="300" height="100"> <p>这是一个微笑 <img src="images/smile.jpg" align="bottom" alt="smile" width="70" height="70"> 这是一个微笑</p> <p>这是一个微笑 <img src="images/smile.jpg" align="middle" alt="smile" width="70" height="70"> 这是一个微笑</p> <p>这是一个微笑 <img src="images/smile.jpg" align="top" alt="smile" width="70" height="70"> 这是一个微笑</p> <p>注意:在HTML 4中 align 属性已废弃 HTML5已不支持该属性可以使用 CSS 代替。</p> <p>创建图片链接<a href="www.baidu.com"><img border="5" src="images/smile.jpg" alt="smile" width="50" height="50" align="middle"></a></p> <hr> <p>map的使用</p> <img src="images/four.jpg" alt="pepple" width="400" height="400" usemap="#view"> <map name="view"> <area shape="rect" coords="0,0,100,100" href="images/smile.jpg" alt="01"> <area shape="circle" coords="300,300,100" href="images/smile.jpg" alt="02"> <area shape="circle" coords="300,100,10" href="images/smile.jpg" alt="03"> </map> </body> </html>

表格和列表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table and list</title> </head> <body> <h3 style="color:green">下面开始建立一个表格</h3> <table border="1" cellpadding="10" cellspacing="10">   <caption><b>学生基本信息</b></caption>  <tr> <th>姓名</th> <th>年龄</th> <th>体重(kg)</th> </tr> <tr> <td>小明</td> <td>20</td> <td>67</td> </tr> <tr> <td>大白</td> <td>23</td> <td>75</td> </tr> <tr> <td>李白</td> <td>28</td> <td>80</td> </tr> </table> <h3 style="color:green">跨行或跨列的表格</h3> <table border="1"> <tr> <th>职业</th> <th>收入</th> <th colspan="3">手机号两个到三个联系方式</th> </tr> <tr> <td>老师</td> <td>5000</td> <td>182222</td> <td>182222</td> <td>182222</td> </tr> <tr> <td>医生</td> <td>7000</td> <td>19999</td> <td>19999</td> <td>-</td> </tr> </table> <br> <table border="1"> <tr> <th>姓名</th> <td>小黑</td> </tr> <tr> <th rowspan="3">电话号</th> <td>182222</td> </tr> <tr> <td>189999</td> </tr> <tr> <td>133333</td> </tr> </table> <h3 style="color:green">表格内的标签</h3> <table border="1"> <tr> <td> <p>这是一个段落</p> <p>另一个段落</p> </td> <td> <p>这个段落中还有一个表格</p> <table border="1"> <tr> <td>姓名</td> <td>qq/微信/电话</td> </tr> <tr> <td>baby</td> <td>我不加你哈哈</td> </tr> </table> </td> <td>How are you！</td> </tr> <tr> <td><p>这里面还有一个列表</p> <ul> <li>red</li> <li>blue</li> <li>black</li> </ul> </td> <td> <img src="images/smile.jpg" alt="" width="50" height="50"> <p>这是一张图片</p> </td> <td> <p>这是一个链接</p> <a href="www.baidu.com">百度一下吧</a> </td> </tr> </table> <h3 style="color:blue">下面是列表的使用</h3> <b>无序列表：</b> <ul> <li>apple</li> <li>banana</li> <li>pear</li> </ul> <b>有序列表：</b> <ol> <li>apple</li> <li>banana</li> <li>pear</li> </ol> <ol type="A">  <li>apple</li> <li>banana</li> <li>pear</li> </ol> <ul style="list-style-type:circle"> <li>apple</li> <li>banana</li> <li>pear</li> </ul> <h4>嵌套列表：</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</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>fruit</dt> <dd>- apple</dd> <dd>- banana</dd> <dt>food</dt> <dd>- dumping</dd> <dd>- hamburger</dd> </dl> </body> </html>

网页示例：

最新回复(0)