自学html,part 4

已于 2022-02-06 12:05:30 修改
阅读量361 收藏 1
点赞数 1
文章标签： html5
于 2021-08-07 22:47:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Titijiang233/article/details/119462321
版权

目录

1.注释标签

2.综合训练1

3.表格

 表头标签

表格属性 

 表格结构标签

合并表格 

跨列合并

跨行合并

无序列表

有序列表

自定义列表 

1.注释标签

注解标签是将代码显示在源代码中，但网页中并不会显示

<!-- 注解语句-->    快捷键：ctrl + /

 特殊字符

特殊字符

描述

字符的代码

空格符

&nbsp;

<

小于号

&lt;

>

大于号

&gt;

&

和号

&amp;

￥

人民币

&yen;

©

版权

&copy;

®

注册商标

&reg;

°

摄氏度

&deg;

±

正负号

&plusmn;

✖

乘号

&times;

➗

除号

&divide;

²

平方²

&sup2;

³

立方³

&sup3;

2.综合训练1

使用了

标签

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>北京烤鸭 （菜肴）</h1>
    <a href="#history">历史缘由</a><br>
    <a href="#classify">流派分类</a><br>
    <p>烤鸭是具有世界声誉的北京著名菜式，起源于中国南北朝时期，《食珍录》中已记有炙鸭，在当时是宫廷食品。
        用料为优质肉食鸭北京鸭，果木炭火烤制，色泽红润，肉质肥而不腻，外脆里嫩。
        北京烤鸭分为两大流派，而北京最著名的烤鸭店也即是两派的代表。
        它以色泽红艳，肉质细嫩，味道醇厚，肥而不腻的特色，被誉为“天下美味”。</p>
    <h2 id=history>历史缘由</h2>
    <p>相传，<a href="dark.html" target="_blank">烤鸭</a>之美，是源于名贵品种的北京鸭，它是当今世界最优质的一种肉食鸭。据说，这一特种纯北京鸭的饲养，约起于千年前左右，是因辽金元之历代帝王游猎，偶获此纯白野鸭种，后为游猎而养，一直延续下来，才得此优良纯种，并培育成今之名贵的肉食鸭种。即用填喂方法育肥的一种白鸭，故名“填鸭”。不仅如此，北京鸭曾在百年以前传至欧美，经繁育一鸣惊人。因而，作为优质品种的北京鸭，成为世界名贵鸭种来源已久。</p>
    <p>明初年间，老百姓爱吃南京板鸭，皇帝也爱吃，据说明太祖朱元璋就“日食烤鸭一只”。
        宫廷里的御厨们就想方设法研制鸭馔的新吃法来讨好万岁爷，于是也就研制出了叉烧烤鸭和焖炉烤鸭这两种。叉烧烤鸭以“全聚德”为代表，而焖炉烤鸭则以“便宜坊”最著名。金陵烤鸭是选用肥大的草鸭为原料，净重要求在2．5公斤左右。</p>
<p>据说，随着明成祖（即朱棣）篡位迁都北京后，也顺便带走了不少南京里烤鸭的高手。
    在嘉靖年间，烤鸭就从宫廷传到了民间，老“便宜坊”烤鸭店就在菜市口米市胡同挂牌开业，这也是北京第一家烤鸭店。
    而当时的名称则叫“金陵片皮鸭”，就在老“便宜坊”的市幌上还特别标有一行小字：金陵烤鸭。</p>
<p>在1864年，京城名气最大的“全聚德”烤鸭店也挂牌开业，烤鸭技术又发展到了“挂炉”时代。
    它是用果木明火烤制并具有特殊的清香味道，不仅使烤鸭香飘万里而且还使得“北京烤鸭”取代了“南京烤鸭”，
    而“金陵片皮鸭”只能在港澳、深圳、广州等南方几个大城市的菜单上才能见到。</p>
    <img src="t1.jpg" alt="" width="400" height="400">
<h2 id="classify">流派分类</h2>
<p>后，北京烤鸭的声誉与日俱增，更加闻名世界。</p>
    据说xxx十分欣赏和关注这一名菜，宴请外宾，品尝烤鸭。</p>
    <p>为了适应社会发展需要，而今鸭店的烤制操作已逾加现代化，风味更加珍美。
    烤鸭家族中最辉煌的要算是全聚德了，是它确立了烤鸭家族的北京形象大使地位。</p>
    <p>“全聚德”的创始人杨全仁早先是个经营生鸡生鸭生意的小商，积累资本后开创了全聚德烤鸭店，聘请了曾在清宫御膳房当差的一位烤鸭师傅，用宫廷的“挂炉烤鸭”技术精致烤鸭，使得“挂炉烤鸭”在民间繁衍开来。
    全聚德采取的是挂炉烤法，不给鸭子开膛。只在鸭子身上开个小洞，把内脏拿出来，然后往鸭肚子里面灌开水，然后再把小洞系上后挂在火上烤。这方法既不让鸭子因被烤而失水又可以让鸭子的皮胀开不被烤软，烤出的鸭子皮很薄很脆，成了烤鸭最好吃的部分。
    挂炉有炉孔无炉门，以枣木、梨木等果木为燃料，用明火。果木烧制时，无烟、底火旺，燃烧时间长。烤出的鸭子外观饱满，颜色呈枣红色，皮层酥脆，外焦里嫩，并带有一股果木的清香，细品起来，滋味更加美妙。严格地说，只有这种烤法才叫北京烤鸭。</p>
    <p>比起挂炉烤鸭，以便宜坊为代表的焖炉烤鸭似乎在人们的印象中不那么深刻了，好在有着近600年历史的老字号便宜坊，已经以焖炉烤鸭技艺申请了“国家非物质文化遗产保护”。
        创始于明永乐年间的便宜坊焖炉烤鸭，相对于全聚德的名气，其实历史更早，至今已近600年历史。 所谓“焖炉”，其实是一种地炉，炉身用砖砌成，大小约一米见方左右。</p>
    <p>其制作方法最早是从南方传入北京的，特点是“鸭子不见明火”，是由炉内炭火和烧热的炉壁焖烤而成。因需用暗火，所以要求具有很高的技术，掌炉人必须掌好炉内的温度，温度过高，鸭子会被烤煳，反之则不熟。
        焖炉烤鸭外皮油亮酥脆，肉质洁白、细嫩，口味鲜美。焖炉烤鸭是便宜坊的招牌，只是烧秫秸的焖炉早已改成了电焖炉。如今，使用焖炉的烤鸭店很少，大部分的烤鸭店采用的是全聚德挂炉的烤制方法。
        焖炉烤鸭口感更嫩一些，鸭皮的汁也明显更丰盈饱满些。而挂炉烤鸭带有的果木清香，似乎更能让人体会到人类最早掌握的“烤”的烹饪方法的智慧。</p>
<p>如今挂炉烤鸭和焖炉烤鸭是北京的烤鸭两大流派。就好像当年北京烤鸭扬弃地改良了山东烤鸭，很多做烤鸭的餐厅，也分别对传统上的这两大流派，做了适合现代口味和消费思想的改进。
    比如对烤鸭吃皮的重点演绎，比如小王府对鸭子品种的特别精选，甚至包括很多地方将葱丝换成了黄瓜条，这些形变而不失神的改良都不错，至于有的地方搞出的什么金箔烤鸭，就有一点故弄玄虚的味道了。当然，正宗的烤鸭店味道自然很好。</p>
<img src="t2.jpg" alt=""><br>
    <a href="https://www.baidu.com" target="_blank">百度查询更多</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>烤鸭</h1>
<p>烤鸭是北京和南京的一道特色名菜，属于北京菜或金陵菜，该菜品以色泽红艳，肉质细嫩，味道醇厚，肥而不腻的特色，
    被誉为“天下美味”而驰名中外，其色泽略黄，柔软淡香，夹卷其他荤素食物食用，为宴席常用菜点，更是家常风味美食。</p> 
<p>烤鸭历史悠久，起源于中国南北朝时期的建康，当时《食珍录》中已记有炙鸭。
    朱元璋建都应天（南京）后，明宫御厨便取用南京肥厚多肉的湖鸭制作菜肴。
    为了增加鸭菜的风味，厨师采用炭火烘烤，成菜后鸭子吃口酥香，肥而不腻，受到人们称赞，即被宫廷取名为“南京烤鸭”。</p>
<img src="t3.jpg" alt="" height="400"><br>
<a href="https://www.baidu.com" target="_blank">百度查询更多</a>
</body>
</html>

效果

 点击烤鸭以后跳出来的页面

3.表格

<table></table>   表格的标签

 <tr></tr>   代表一行

 <td></td>  代表一个单元格

表格的框架如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table><tr><td>账号</td><td>密码</td><td>注册日期</td></tr>
        <tr><td>titijiang233</td><td>20000627</td><td>2021-08-07</td></tr>
    </table>
</body>
</html>

    <table><tr><td>账号</td><td>密码</td><td>注册日期</td></tr>

        <tr><td>titijiang233</td><td>20000627</td><td>2021-08-07</td></tr>

    </table>

 表头标签

<th></th>   表头标签

<table><tr><th>账号</th><th>密码</th><th>注册日期</th></tr>

        <tr><td>titijiang233</td><td>20000627</td><td>2021-08-07</td></tr>

    </table>

文字居中且加粗显示 

表格属性 

属性名属性值描述
alignleft、center、right规定表格相对周围元素的对齐方式
border1或""规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度

<table align="center" border="1" cellspacing="0"><tr><th>账号</th><th>密码</th><th>注册日期</th></tr>

        <tr><td>titijiang233</td><td>20000627</td><td>2021-08-07</td></tr>

    </table>

 运行效果

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table align="center" border="1" cellspacing="0">
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>进入搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>345</td>
        <td>123</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>
    
    <tr>
        <td>2</td>
        <td>撒野</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>233</td>
        <td>122</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>3</td>
        <td>十年一品温如言</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>231</td>
        <td>111</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>4</td>
        <td>柔风</td>
        <td><img src="images/down.png" alt="" width="25" height="25"></td>
        <td>220</td>
        <td>110</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>5</td>
        <td>隐婚100分：总裁老婆嫁一送一</td>
        <td><img src="images/down.png" alt="" width="25" height="25"></td>
        <td>215</td>
        <td>107</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>6</td>
        <td>你好，旧时光</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>205</td>
        <td>100</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>7</td>
        <td>少年谢尔顿</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>200</td>
        <td>93</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>


</body>
</html>

 效果如图

 表格结构标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table align="center" border="1" cellspacing="0">
    <thead>
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>进入搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>345</td>
        <td>123</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>
    
    <tr>
        <td>2</td>
        <td>撒野</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>233</td>
        <td>122</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>3</td>
        <td>十年一品温如言</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>231</td>
        <td>111</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>4</td>
        <td>柔风</td>
        <td><img src="images/down.png" alt="" width="25" height="25"></td>
        <td>220</td>
        <td>110</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>5</td>
        <td>隐婚100分：总裁老婆嫁一送一</td>
        <td><img src="images/down.png" alt="" width="25" height="25"></td>
        <td>215</td>
        <td>107</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>6</td>
        <td>你好，旧时光</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>205</td>
        <td>100</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>

    <tr>
        <td>7</td>
        <td>少年谢尔顿</td>
        <td><img src="images/up.png" alt="" width="25" height="25"></td>
        <td>200</td>
        <td>93</td>
        <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a>&nbsp;<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">图片</a>&nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a> </td>
    </tr>
</tbody>

</body>
</html>

<thead></thead>表头标签

<tbody></tbody>表格内容标签 

合并表格 

跨列合并

<td colspan="2"></td>   

跨行合并

<td rowspan="2"></td> 

合并表格三部曲

1.合并表格的目标表格要么是最上面的，要么是最左边的

2.合并之后删除被合并的表格

 colspan  比如:<td colspan="2"></td>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table align="center" border="1" cellspacing="0" width="300" height="200">
<tr>
    <td colspan="2"></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td rowspan="2"></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</table>
</body>
</html>

效果如图

无序列表

ul表示无需列表，li表示列表项

    <h3>我喜欢吃什么？</h3>

    <ul>

        <li>北京烤鸭</li>

        <li>冬阴功汤</li>

        <li>鱼丸汤</li>

    </ul>

ul里面只能放li，但是li里面可以放任何元素

有序列表

ol表示有序列表，li表示列表项

    <h3>我喜欢吃什么？</h3>

<ol>

    <li>北京烤鸭</li>

    <li>冬阴功汤</li>

    <li>鱼丸汤</li>

</ol>

ol里面只能放li，但是li里面可以放任何元素 

有序列表会自动生成数字序号

 

自定义列表 

dl表示自定义列表，一个dl里面只能有dt和dd

一个dl里面可以有多个dt 和dd，没有数量限制，通常是一个dt对应多个dd

<dl>

    <dt>关注我们</dt>

    <dd>新浪微博</dd>

    <dd>官方微信</dd>

</dl>

Titijiang233
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
自学使用HTML和CSS进行网站发布
01-10
中文名: 每天一小时自学使用HTML和CSS进行网站发布 (第6版，涵盖HTML5) 原名: Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage, 6th Edition 作者: Laura Le...
javaweb整合开发 完全自学手册 技术文档PartI
02-17
4. **PHP**：PHP（Hypertext Preprocessor）是一种开源的服务器端脚本语言，尤其适合Web开发，能嵌入到HTML中执行。PHP与JavaWeb开发的区别在于，它更倾向于动态内容的生成，与MySQL等数据库结合紧密，广泛应用于...
自学html,part 5
Titijiang233的博客
08-08 113
目录 表单标签 表单控件 <1>input输入表单元素 <2>select下拉表单元素 <3>textarea文本域元素 表单标签 表单组成：表单域、表单控件（也称为表单元素）、提示信息 <formaction=""></form> 表单控件 <1>input输入表单元素 <inputtype="text"> input是单标签 type属性的属性值及其描述如下: 属...
自学html,part3
Titijiang233的博客
08-03 136
1.引用文件夹 点击选择文件夹 2.目录文件夹 和 根目录 新建一个文件夹，这就是目录文件夹 根目录 3.相对路径 <1>同一级路径 和html文件处于同一个文件夹，可以直接引用 <2>下一级路径 <3>上一级路径 4.相对路径 在目录下的绝对位置，直接到达目标位置，通常是从盘符开始的位置 有两种，一种是本人电脑上的位置，例如 <!DOCTYPE html> <...
自学html,part 1
Titijiang233的博客
07-11 62
新建一个txt文件，把后缀改成html 于是就得到一个html文档 所以网页其实就是一个html文档 在把后缀改成html之前，在txt文档里面写入代码，写完以后再把 txt改成html 在visual studio code里面打代码，只需要输入感叹号，然后回车 会自动生成模板 在Document的地方写网页标题 body里面是网页内容 写完以后ctrl + S(保存)，然后单击右键，点Open In Default Browser 于是能看见网页 ...
自学html,part 2
Titijiang233的博客
07-13 70
用的软件是Visual Studio Code 新闻编辑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
自学CSS，part 1
Titijiang233的博客
08-19 96
1.语法规范 · css通常写在head里的最下面 · 写在style里面 ·样式后面加 ; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
自学proe和html,教你如何自学成为proe高手
weixin_26781975的博客
06-09 451
1.不要看到别人的回复第一句话就说：给个part吧！你应该想想为什么。当你自己想出来再参考别人的提示，你就知道自己和别人思路的差异。2.初学者请不要看太多太多的书那会误人子弟的，先找本系统的学，很多人用了很久都是只对部分功能熟悉而已，不系统还是不够的。3.看帮助,不要因为很难而自己是初学者所以就不看；帮助永远是最好的参考手册，虽然帮助的文字有时候很难看懂，总觉得不够直观。4.不要被那些花哨的技巧迷...
自学Vue第三part
weixin_43099774的博客
07-20 163
计算属性的 setter 计算属性默认只有 getter ，不过在需要时也可以提供一个 setter ： // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName ...
自学Vue第一part
weixin_43099774的博客
07-19 193
node -v/node --version均可检测nodeJS是否安装好 $ npm install --global vue-cli 全局安装vue-cli $ vue init webpack my-project 创建一个基于webpack模板的项目 安装依赖 $ cd my-project $ npm install $ npm run dev...
JAVA自学日记——Part Ⅲ
diantantong1303的博客
03-18 117
终于来到了可视化窗口制作的部分了，从学习JAVA之前，到开始入手学习，一直到现在，都在盼望着有一天可以自己写出一款有界面而且是很美观的应用程序，今天算是一个真正开始的时间节点，值得纪念。 内容有很多，首先是Swing和抽象窗口工具包：Swing提供了编写使用图形用户界面的程序所需的一切，是现在应用最广泛的一种GUI。 组件图形用户界面时，需要使用两类对象：组件和容器。组件是用户界面中...
The-Modern-[removed]:books:Javascript自学
04-09
现代JavaScript :link: :magnifying_glass_tilted_left: Part01.The_Javascript_language01.简介02.JavaScript_基础知识核心JavaScript01.吊装var，let，const비교
JSP网络开发实例自学手册源代码
09-16
总的来说，"JSP网络开发PART1"这个资源集合是学习JSP开发的宝贵资料，它将带你逐步走进JSP的世界，提升你的Web开发技能，无论你是刚开始接触JSP还是寻求进一步提升，都能从中受益匪浅。通过实际操作这些实例，你将...
HTML5新增的input元素类型：number、range、email、color、date等
pan_junbiao的博客
07-08 854
HTML5 大幅度地增加与改良了 input 元素的种类，可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。到目前为止，大部分浏览器都支持 input 元素的种类。对于不支持新增 input 元素的浏览器，input 元素被统一视为 text 类型。另外，HTML5 中也没有规定这些元素在浏览器中的外观形式，因此同样的 input 元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些新增的 input 元素的类型。daterange。
HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
pan_junbiao的博客
07-08 457
HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 placeholder 属性：当用户没有输入值时，输入型控件可以通过placeholder 属性向用户显示描述说明或者提示信息。使用placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持placeholder 属性。
html5——列表、表格
jiuyuexixi的博客
07-10 622
html5——列表、表格
大学生创业计划书(11)三篇文件.docx
最新发布
07-11
大学生创业计划书(11)三篇文件.docx
大学生创业计划书(9)三篇文件.docx
07-11
大学生创业计划书(9)三篇文件.docx
02379自学考试计算机网络管理串讲资料(汇总版).doc
12-14
本资料是针对自学考试计算机网络管理(02379)课程的学习资料汇总，主要包括网络管理的基础概念和体系结构。首先，章节一介绍了网络管理的基本概念，包括网络管理的定义，强调其目标是监控和控制网络运行，确保服务的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Titijiang233

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值