HTML进阶

列表

作用：布局内容排列整齐的区域。

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

无序列表

作用：布局排列整齐的不需要规定的区域。

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

<h2>无序列表</h2>
    <ul>
        <li>水果</li>
        <li>歌曲</li>
        <li>书籍</li>
    </ul>
    <ul>

注意：1. ul标签里面只能放li标签

​ 2. li标签里可以放任何标签

有序列表

作用：布局排列整齐的需要规定顺序的区域。

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

<h2>有序列表</h2>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ol>

注意：1. ol标签里面只能放li标签

​ 2. li标签里可以放任何标签

定义列表

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

<h2>定义列表</h2>
    <dl>
        <dt>北京市</dt>
        <dd>东城区</dd>
        <dd>西城区</dd>
        <dd>朝阳区</dd>
    </dl>

注意：1. dl里面只能包含dt和dd

​ 2. dt和dd里面可以包含任何内容

表格

基本使用

作用：展示数据。

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

提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

表格内部真正的布局如下图所示：

<!-- border 边框 给表格加边框 -->
<table border="1">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>

运行结果如下图所示：

表格结构标签

作用：用表格结构标签把内容划分区域。

提示：表格结构标签可以省略。

<h2>表格结构标签</h2>
    <table border="1">
        <!-- 表格头部 -->
        <thead>
            <tr>
                <td>姓名</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
            </tr>
        </thead>
        <!-- 表格主体部分 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <!-- 表格底部 -->
        <tfoot>
            <tr>
                <td>平均分</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tfoot>
    </table>

运行结果如下图所示：

合并单元格

作用：作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：

1. 明确合并的目标
2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
   • 跨行合并，保留最上单元格，添加属性 rowspan
   • 跨列合并，保留最左单元格，添加属性 colspan
3. 删除其他单元格

<h2>合并单元格</h2>
    <table border="1">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td rowspan="2">100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>总结</td>
            <td colspan="3">全市第一</td>
          </tr>
    </table>

运行结果如下图所示：

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。

表单

作用：收集用户信息。

使用场景：

• 登录页面
• 注册页面
• 搜索区域

input标签

input 标签 type 属性值不同，则功能不同。

<h2>表单</h2>
    <!-- text 文本框 -->
    姓名：<input type="text">
    <br>
    <!-- password 密码框 -->
    密码：<input type="password">
    <br>
    <!-- radio 单选框 name属性必须相同 -->
    性别：<input type="radio" name="sex">男
        <input type="radio" name="sex" >女
    <br>
    <!-- checkbox 复选框 -->
    爱好：<input type="checkbox">打球
        <input type="checkbox">踢足球
        <input type="checkbox">打篮球
    <br>
    <!-- submit 提交按钮 -->
    <input type="submit" value="提交">

运行结果如图所示：

input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

<!-- text 文本框 placeholder属性 提示信息 -->
姓名：<input type="text" placeholder="请输入姓名">

单选框 or 复选框

常用属性

性别：<input type="radio" name="sex" checked="checked">男
        <input type="radio" name="sex" >女
爱好：<input type="checkbox" checked>打球
        <input type="checkbox">踢足球
        <input type="checkbox">打篮球

提示：name 属性值自定义。

上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

<input type="file" multiple>

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

selected 属性：默认显示第一项，selected 属性实现默认选中功能。

<h3>下拉框</h3>
    <!-- selected 默认选中 -->
    籍贯：
    <select name="" id="">
        <option value="">吴川市</option>
        <option value="" selected>北京市</option>
        <option value="">天津</option>
        <option value="">武汉</option>
    </select>

文本域

作用：多行输入文本的表单控件。

<h3>文本域</h3>
    评论：
    <textarea name="" id="">请写下你的评论</textarea>

注意点：

• 实际开发中，使用 CSS 设置 文本域的尺寸

• 实际开发中，一般禁用右下角的拖拽功能

label 标签

作用：网页中，某个标签的说明文本。

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一

• label 标签只包裹内容，不包裹表单控件
• 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

<!-- label 标签 第一种写法-->
    <label for="name">姓名：</label>
    <input type="text" placeholder="请输入姓名" id="name">

• 写法二：使用 label 标签包裹文字和表单控件，不需要属性

 <!-- label 标签 第二种写法 -->
    <label >密码：<input type="password" placeholder="请输入密码" ></label>

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮

<button type="">按钮</button>

<!--form 表单区域 action 表单提交地址 -->
<form action="">
        <h2>表单</h2>
    <!-- text 文本框 placeholder属性 提示信息 -->
    <!-- label 标签 第一种写法-->
    <label for="name">姓名：</label>
    <input type="text" placeholder="请输入姓名" id="name">
    <br>
    <!-- password 密码框 -->
    <!-- label 标签 第二种写法 -->
    <label >密码：<input type="password" placeholder="请输入密码" ></label>
    <br>
    <!-- radio 单选框 name属性必须相同  checked属性默认选中-->
    性别：
    <label ><input type="radio" name="sex" checked="checked">男</label>
    <label ><input type="radio" name="sex" >女</label>
    <br>
    <!-- checkbox 复选框 -->
    爱好：
    <label ><input type="checkbox" checked>打球</label>
    <label ><input type="checkbox">踢足球</label>
    <label ><input type="checkbox">打篮球</label>
    <br>
    <button>登录</button>
    <button type="reset">重置</button>
    <input type="submit" value="提交">
    </form>

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

语义化

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

• div：独占一行
• span：不换行

<h3>语义化</h3>
<div>盒子</div>
<span>小盒子</span>

有语义的布局标签

字符实体