HTML学习笔记2

前端学习

列表，表格，表单，语义化，字符实体。

列表

列表分类：无序列表、有序列表、定义列表。

无序列表

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    ......
</ul>

注意事项：

• ul 标签里只能包裹 li 标签
• li 标签里面可以包裹任何内容

有序列表

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    ......
</ol>

注意事项：

• ol 标签里只能包裹 li 标签
• li 标签里面可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的详情。

<dl>
    <dt>列表标题</dt>
    <dd>列表详情</dd>
    <dd>列表详情</dd>
    ......
</dl>

注意事项：

• dl 里面只能包含 dt 和 dd
• dt 和 dd 里面可以包含任何内容

表格

标签：table 嵌套 tr，tr 嵌套 td/th。

• table：表格
• tr：行
• th：表头单元格
• td：内容单元格

border 属性可以为表格添加边框线。

<table border="1">
    <tr>
        <th>姓名</th>
    </tr>
    <tr>
        <td>张三</td>
    </tr>
    <tr>
        <td>李四</td>
    </tr>
</table>

合并单元格

会保留最上最左的单元格，添加属性（取值是数字，表示需要合并的单元格数量）：

• 跨行合并，保留最上单元格，添加属性 rowspan
• 跨列合并，保留最左单元格，添加属性 colspan
• 不能跨表格结构标签合并单元格

表单

input标签基本使用

<input type="...">

占位文本：<input type="..." placeholder="提示信息">

单选框常用属性：

上传文件常用属性：默认情况只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option 是下拉菜单的每一项。selected 属性实现默认选中功能。

文本域

标签：textarea，双标签，多行输入文本。

label标签

增大表单控件的点击范围。

按钮

标签：button，双标签。

语义化

字符实体