ACwing学习——html(4)

120 阅读1分钟

本文参与4月更文挑战,打卡day5,第五篇

7.列表

分为有序列表(order list)和无序列表(unorder list)

  1. 无序列表:每一个项目前方都有一个黑色实心圆圈作为项目符号(也可以看作是一个padding
    <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
    </ul>

  1. 有序列表:类比无序列表,这里的项目符号是数字1. 2. 3. ……
    <ol>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
    </ol>

有序列表和无序列表之间是可以嵌套的

    <ol>
        <li>知识点
            <ul>
                <li>1.1 vscode的安装与配置</li>
                <li>1.2 html基础标签</li>
                <li>1.3 Web官方文档</li>
            </ul>
        </li>
    </ol>
  1. 一种不常用列表
<!-- 不常用列表的开始标志 -->
    <dl>
        <!-- 第一个一级项目 -->
        <dt>name</dt>
        <!-- 第一个一级项目下的第一个子项目 -->
        <dd>稀土掘金</dd>
        <dt>born</dt>
        <dd>2016</dd>
        <dt>birthplace</dt>
        <dd>China</dd>
        <!-- 第四个一级项目 -->
        <dt>color</dt>
        <!-- 第四个一级项目下的第一个子项目 -->
        <dd>blue</dd>
        <!-- 第四个一级项目下的第二个子项目 -->
        <dd>white</dd>
    </dl>


<!-- 一级项目无缩进,其子项目有缩进 -->

8. 表格

标签含义
thead定义表格的第一行
tbody定义一组数据行
tr定义表格中的行,同一行可以同时出现td和th
th表格中的表头单元格
td包含数据的表格单元格
caption定义表格的名称 (可以不加)
  	<table>
				<caption>成绩单</caption>
        <!-- 表头 -->
        <thead>
            <!-- 一行用tr -->
            <tr>
                <!-- 表头的每一项用th -->
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
            </tr>
        </thead>
        <!-- 数据区 -->
        <tbody>
            <tr>
                <!-- 主体部分每个单元格用td -->
                <td>abc</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Alice</td>
                <td>90</td>
                <td>90</td>
                <td>95</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>60</td>
                <td>70</td>
                <td>65</td>
            </tr>
        </tbody>
		</table>

9. 语义标签

定义div盒子的简化版,书写网页常用的一些div的class名组成的新标签。

按照语义标签的意思对书写的页面进行合理划分即可。

10. 特殊符号

HTML源代码显示结果
&lt;<
&gt;>
&amp;&
&quot;"
&reg;® 已注册
&copy;© 版权
&trade;™ 商标
&nbsp;空格