html学习之路4-CSDN博客

本文链接：https://blog.csdn.net/weixin_44855464/article/details/102960593

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1><strong>好美味小吃</strong></h1>
    <ul>
        <li><strong>小吃类</strong></li>
    <ul>
        <li>煮粉干</li>
        <li>拌青菜</li>
        <li>蛋炒粉</li>
        <li>煎蛋</li>
        <li>米饭</li>
    </ul>
    </ul>
    <ul>
        <li><strong>卤味类</strong></li>
       <ul>
        <li>鸭肠</li>
        <li>面筋</li>
        <li>牛肚</li>
       </ul>
    </ul>
    <ul>
        <li><strong>套餐类</strong></li>
        <ul> 
        <li>卤面筋饭</li>
        <li>猪肉肉饭</li>
        <li>猪耳朵饭</li>
        </ul>
    </ul>
    <ul>
        <li><strong>炖罐类</strong></li>
        <ul>
        <li>猪蹄黄豆</li>
        <li>猪肚莲子</li>
        </ul>
    </ul>
<p>亲，20元以上可送餐</p>
</body>
</html>

在这里插入图片描述
<ul></ul>配合<li></li>标签形成一个无序列表，用粗体圆点（典型的小黑圆圈）进行标记。
类似：
<ol><ol>配合<li></li>标签形成有序列表，列表项目使用数字进行标记。
<dl></dl>配合<dt></dt>和<dd></dd>标签形成自定义列表。

点击了解更多列表属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewreport" consent="width=device-width,initial scale=1.0">
        <meta http-equiv="X-UA-Compatible" ie="idge">
        <title>天气预报</title>
    </head>
<body>
    <table>
        <caption>天气预报</caption>
        <thead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        </thead>
    <tbody>
         <tr>
             <td>2019.11.6</td>
             <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573025663871&di=2def28ca4a290643c11612555836375e&imgtype=0&src=http%3A%2F%2Fimg.jk51.com%2Fimg_jk51%2F334960874.jpeg"  alt="天气晴朗"></td>
             <td>天气晴朗 适合出行</td>
         </tr>
         <tr>
             <td>2019.11.7</td>
             <td><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1152237903,1687089532&fm=26&gp=0.jpg" alt="微有小雨"></td>
             <td>天气小雨 建议带伞</td>
         </tr>
    </tbody>
     <tfoot></tfoot>
    </table>
</body>
</html>

在这里插入图片描述
表格制造

<table>元素：定义一个表格
<caption>元素：定义表格主题
<thead>元素：定义表格的页眉
<tr>元素：定义一个表格行
<th>元素：定义表格开头
<tbody>元素:定义表格主题
<td>元素:定义表格数据
<tfoot>元素:定义表格页脚