html入门、结构、标签、列表、表格

最新推荐文章于 2024-07-25 11:52:08 发布

衣冠小兽

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量255

点赞数 6

文章标签： html 列表 vscode

本文链接：https://blog.csdn.net/maojiaolin/article/details/117450353

版权

1.【关卡前提】
掌握HTML结构
掌握HTML常用标签的使用
掌握HTML列表标签
掌握HTML表格标签
2.【关卡要求】
使用HTML标签完成《糖醋排骨》菜谱练习
使用HTML标签完成《楚乔传》网页练习
扩展：点击集数跳转到详细介绍
完成《列表标签》练习
完成《小说排行榜》练习)
3.【关卡效果】
（1）《糖醋排骨》菜谱练习效果图如下：
在这里插入图片描述

（2）《楚乔传》练习效果图如下：
在这里插入图片描述
（3）《列表标签》练习效果图如下：

（4）小说排行榜练习效果如下：

4.代码块
（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>《糖醋排骨》的制作方法</title>
</head>
<body>
     <strong>菜名名称：糖醋排骨</strong>
        <br>
        <strong>市场价格:</strong>
        <b style="color:rgb(255, 0, 255)">26</b>
        <br>
        <strong>会员价格:</strong>
        <b style="color:red">24</b>
        <br>
    <strong>使用配料:</strong>
    <b>排骨、糖、醋</b>
    <br>
    <br>
    <strong><em><u>做法:</u></em></strong>
    <br>1.猪小排洗净，晾干水份备用。</br >
    <br>2.锅内俱少量油，烧热之后，爆香菱片。</br >
    <br>3.放入排骨，一直煸炒到排骨变色后，表面金黄微焦。</br >
    <br>4.此时就可以放入黄金比例中的调料了，顺序是，先放一汤勺料酒，接着两汤勺酱油，三汤勺米醋最后四汤勺白糖，炒匀。</br >
    <br>5.再倒入能没过排骨的开水，调中小火狗20分钟。</br >
    <br>6.20分钟后调入盐，开大火收汁，收到汁浓色亮时，撇入芝麻点綴即可出锅(锅里剩下的姜片丢掉不用，最后大火收计时注意多翻动锅内的排骨，避免烧焦喲! ) 。</br >
    <hr></hr>
    <br>@2015 阿婆私房菜</br >
</body>

</html>

（2）《楚乔传》练习

<!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>《楚乔传》</title>
</head>
<body>
    <strong>楚乔传</strong>
    <br>中国大陆 67集（TV版）/58集（DVD版）<br>
    <br>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。
    由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演，邓伦、金士杰特邀出演，王彦霖、牛骏峰、
    黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。[1]    </br>
    <img src="1.jpg"width=auto/>
    <br> <a href="#end1">第1集 </a>
    <a href="#end2">第2集 </a>
    <a href="#end3">第3集 </a>
    <a href="#end4">第4集 </a>
    <a href="#end5">第5集 </a>  
    </br>
    <div id="end1">
        <br><strong>第1集（分集以TV版为准</strong>）</br>
        <p> 摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。
        </p>
    </div>
    <div id="end2">
        <br><strong>第2集（分集以TV版为准</strong>）</br>
        <p>楚乔伤病还未痊愈，便被宋大娘遣来干活。大姐汁湘为楚乔求情，却被宋大娘骂了一通。</p>
    <div id="end3">
        <br><strong>第3集（分集以TV版为准</strong>）</br>
        <p>青山院灵堂肃穆，宇文玥一身孝衣，沉静的面色里透出几分隐隐的忧伤。宇文玥刚刚下令封棺，便被院子里闯进来的一位不速之客阻拦。
           </p>
    </div>
    <div id="end5">
        <br><strong>第5集（分集以TV版为准</strong>）</br>
        <p>楚乔一觉醒来，忽觉身边有些异样，那躺在不远处的不就是冷脸面瘫的宇文玥嘛，尖叫声不经思考就脱口而出。
           </p>
    </div>

</body>
</html>

（3）《列表标签》练习

<!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>列表标签</title>
</head>
<body>
    <h2>搜索引擎排名</h2>    
    <ol type="1">        
        <li>Google</li>        
        <li>Baidu</li>        
        <li>Bing</li>        
        <li>Sogou</li>    
    </ol>
    <h2>软件编程语言</h2>    
    <ul type=”disc">        
        <li>Java</li>        
        <li>C++</li>        
        <li>Python</li>        
        <li>JavaScript</li>    
    </ul>
    <h2>健康食品</h2>
    <dl>        
        <dt>水果</dt>        
            <dd>苹果</dd>        
            <dd>香蕉</dd>        
        <dt>蔬菜</dt>        
            <dd>西兰花</dd>        
            <dd>菠菜</dd>    
    </dl> 


    
</body>
</html>

（4）小说排行榜练习

<!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>小说排行榜</title>
</head>
<body>
    <table border="1" width="100%">
        <caption>小说排行榜</caption>         
            <!--第一行-->         
            <tr>                
                <th>排名</th> 
                <th>关键词</th> 
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                 <th>相关链接</th>          
            </tr>        
              <!--第二行-->   
            <tr>                
                <td>1</td> 
                <td>鬼吹灯</td>
                <td> <img src="up.jpg"width=auto/></td>     
                <td>356</td> 
                <td>3560</td> 
                <td> <a href="#end1">贴吧 </a>
                    <a href="#end1">图片 </a>
                    <a href="#end1">百科 </a></td>       
            </tr>   
               <!--第三行-->         
            <tr>                
                <td>1</td> 
                <td>鬼吹灯</td>
                <td> <img src="down.jpg"width=auto/></td>     
                <td>356</td> 
                <td>3560</td> 
                <td> <a href="#end1">贴吧 </a>
                    <a href="#end1">图片 </a>
                    <a href="#end1">百科 </a></td>             
            </tr> 
                    <!--第四行-->         
            <tr>                
                <td>1</td> 
                <td>鬼吹灯</td>
                <td> <img src="up.jpg"width=auto/></td>     
                <td>356</td> 
                <td>3560</td> 
                <td> <a href="#end1">贴吧 </a>
                    <a href="#end1">图片 </a>
                    <a href="#end1">百科 </a></td>             
            </tr> 
             <!--第五行-->         
             <tr>                
                <td>1</td> 
                <td>鬼吹灯</td>
                <td>1 </td>     
                <td>356</td> 
                <td>3560</td> 
                <td> <a href="#end1">贴吧 </a>
                    <a href="#end1">图片 </a>
                    <a href="#end1">百科 </a></td>             
            </tr> 
             <!--第六行-->         
             <tr>                
                <td>1</td> 
                <td>鬼吹灯</td>
                <td>1</td>     
                <td>356</td> 
                <td>3560</td> 
                <td> <a href="#end1">贴吧 </a>
                    <a href="#end1">图片 </a>
                    <a href="#end1">百科 </a></td>             
            </tr> 
             <!--第七行-->         
             <tr>                
                <td>1</td> 
                <td>鬼吹灯</td>
                <td>1</td>     
                <td>356</td> 
                <td>3560</td> 
                <td> <a href="#end1">贴吧 </a>
                    <a href="#end1">图片 </a>
                    <a href="#end1">百科 </a></td>             
            </tr> 
             <!--第八行-->         
             <tr>                
                <td>1</td> 
                <td>鬼吹灯</td>
                <td> 1</td>     
                <td>356</td> 
                <td>3560</td> 
                <td> <a href="#end1">贴吧 </a>
                    <a href="#end1">图片 </a>
                    <a href="#end1">百科 </a></td>             
            </tr> 
             
    </table>
    
</body>
</html>

衣冠小兽

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
html入门、结构、标签、列表、表格

1.【关卡前提】掌握HTML结构掌握HTML常用标签的使用掌握HTML列表标签掌握HTML表格标签2.【关卡要求】使用HTML标签完成《糖醋排骨》菜谱练习使用HTML标签完成《楚乔传》网页练习扩展：点击集数跳转到详细介绍完成《列表标签》练习完成《小说排行榜》练习)3.【关卡效果】（1）《糖醋排骨》菜谱练习效果图如下：（2）《楚乔传》练习效果图如下：（3）《列表标签》练习效果图如下：（4）小说排行榜练习效果如下：4.代码块（1）《糖醋排骨》菜谱练习
复制链接

扫一扫