快速制作一个有列表标签的网页

2021/6/2 10:51:27

编程Tag： 标签网页列表 3560 百科鬼吹灯 emsp 356

本文主要是介绍快速制作一个有列表标签的网页，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

制作要求

1、掌握HTML列表标签

2、掌握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>列表表格</title>
</head>
<body>
    <font size="5" > 搜索引擎排名 </font><br><!--设置主要字体的大小-->
    <ol type="1" ><!--有序列表标签并设置属性（按1、2、3、···排序）-->
    <li>Google</li><!--有序列表列表项-->
    <li>Baidu</li>
    <li>Bing</li>
    <li>Sogou</li>
    </ol>
    <font size="5" > 软件编程语言 </font><br>
    <ul type="solid"><!--无序列表（type 的属性值有 circle,disc,square 含义分别为：空心圆，实心圆和实心正方形）-->
    <li>Java</li><!--无序列表列表项-->
    <li>C++</li>
    <li>Python</li>
    <li>JavaScript</li>
    </ul>
    <font size="5" > 健康食品 </font><br>
    <dl><!--建立定义列表-->
        <dt>水果</dt> <!--<dt>和</dt>之间就是要解释的名称-->
            <dd>苹果</dd><!--<dd>和</dd>之间则是该名词的具体解释-->
            <dd>香蕉</dd>
        <dt>蔬菜</dt> 
            <dd>西兰花</dd>
            <dd>菠菜</dd>
    </dl><!--<dl>标签和</dl>标签分别定义了定义列表的开始和范围-->

    <table border="2" ><!--table：表格标签（属性：border：边框线大小 width：表格的宽度 height：表格的高度 alight：对齐方式 bgcolor：背景色）-->
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;小说排行榜
        <th>排名</th><!--th：表头标签（自动加粗 居中显示）-->
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
        <tr align="middle"><!--tr：行标签-->
            <td>1</td><!--td：单元格标签-->
            <td>鬼吹灯</td>
            <td><img src=file:///C:/Users/Desktop/新建文件夹/html/up.jpg></td><!--上传照片-->
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">贴吧</a> <!--设置一个链接到百度贴吧的超链接-->
                <a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B9%ED%B4%B5%B5%C6%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000">图片</a> <!--设置一个链接到百度图片的超链接-->
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a><!--设置一个链接到百度百科的超链接-->
            </td>
        </tr>
        <tr align="middle">
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src=file:///C:/Users/Desktop/新建文件夹/html/down.jpg></td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">贴吧</a> 
                <a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B9%ED%B4%B5%B5%C6%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000">图片</a> 
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
            </td>
        </tr>
        <tr align="middle">
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src=file:///C:/Users/Desktop/新建文件夹/html/up.jpg></td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">贴吧</a>
                 <a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B9%ED%B4%B5%B5%C6%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000">图片</a> 
                 <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
                </td>
        </tr>
        <tr align="middle">
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">贴吧</a>
                 <a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B9%ED%B4%B5%B5%C6%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000">图片</a> 
                 <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
                </td>
        </tr>
        <tr align="middle">
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">贴吧</a> 
                <a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B9%ED%B4%B5%B5%C6%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000">图片</a> 
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
            </td>
        </tr>
        <tr align="middle">
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">贴吧</a> 
                <a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B9%ED%B4%B5%B5%C6%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000">图片</a> 
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
            </td>
        </tr>
        <tr align="middle">
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">贴吧</a> 
                <a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B9%ED%B4%B5%B5%C6%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000">图片</a> 
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
            </td>
        </tr>
        </table>
</body>
</html>

效果图如下：

这样一个简单的网页就做好了

具体有疑难的地方我已经在代码中注释了，供大家参考

这篇关于快速制作一个有列表标签的网页的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

快速制作一个有列表标签的网页

相关编程文章