Html 第二章

学习内容：列表、表格、表单

01列表

作用：布局内容排列整齐的区域。
列表分为：无序列表、有序列表、定义列表。

1.1无序列表

作用：布局排列整齐的不需要规定顺序的区域。
应用场景：
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

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

注意事项：
- ul 标签里只能包裹 li 标签。
- li 标签里面可以报过任何内容。

1.2有序列表

作用：布局排列整齐的需要规定顺序的区域。
应用场景：
标签：ol 嵌套 li ， ol 是有序列表，li 是列表条目。

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

注意事项：
- ol 标签里只能包裹 li 标签。
- li 标签里可疑包裹任何内容。

1.3定义列表

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

        <dl>
            <dt>列表标题</dt>
            <dd>列表描述/详情</dd>
            ……
        </dl>

注意事项：
- dl 里面只能包裹 dt 和 dd
- dt 和 dd里面可以包含任何内容

02表格

2.1表格-基本用法

网页中的表格与Excel表格类似，用来展示数据。应用场景：

标签：table 嵌套 tr ，tr 嵌套 td/th。
提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。
案例：

<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>

案例效果：

2.2表格结构标签-了解

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
标签：

案例：

    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>总分</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>99</td>
                    <td>100</td>
                    <td>199</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>98</td>
                    <td>100</td>
                    <td>198</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>总结</td>
                    <td>全市第一</td>
                    <td>全市第一</td>
                    <td>全市第一</td>
                </tr>
            </tfoot>
        </table>
    </body>

2.3合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。
合并单元格的步骤：
1. 明确合并的目标
2. 保留最左上 的单元格，添加属性(取值是数字， 表示需要合并单元格的数量)
  - 跨行合并，保留最上单元格，添加属性 rowspan
  - 跨列合并，包留最左单元格，添加属性 colspan
3. 删除其他单元格。

跨行合并：

案例代码：

    <body>
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <!-- <td>100</td> -->
                <td>198</td>
            </tr>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </table>
    </body>

案例效果：

跨列合并：

案例代码：

   <body>
       <table border="1">
           <thead>
               <tr>
                   <th>姓名</th>
                   <th>语文</th>
                   <th>数学</th>
                   <th>总分</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>张三</td>
                   <td>99</td>
                   <td>100</td>
                   <td>199</td>
               </tr>
               <tr>
                   <td>李四</td>
                   <td>98</td>
                   <td>100</td>
                   <td>198</td>
               </tr>
           </tbody>
           <tfoot>
               <tr>
                   <td>总结</td>
                   <td colspan="3">全市第一</td>
                   <!-- <td>全市第一</td>
                   <td>全市第一</td> -->
               </tr>
           </tfoot>
       </table>
   </body>

案例效果：

注意：不能跨结构合并(tboby不能和thead、tfoot合并)

03表单

作用：收集用户信息。
使用场景
- 登陆页面
- 注册页面
- 搜索区域

3.1 input 标签基本使用

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

<input type="……">

案例代码：

    <body>
        文本框：<input type="text">
        <br><br>
        密码框：<input type="password">
        <br><br>
        单选框：<input type="radio">
        <br><br>
        多选框：<input type="checkbox">
        <br><br>
        上传文件：<input type="file">
    </body>

案例效果：

3.2 input 标签占位文本

占位文本：提示信息。

<input type="……" placeholder="提示信息">

文本框和密码框都可以使用。

代码案例：

    用户名：<input type="text" placeholder="请输入用户名">
     <br><br>
    密码：<input type="password" placeholder="请输入密码">

代码效果：

3.3单选框 radio

常用属性：

案例代码：

    性别：<input type="radio" name="gender">男<input type="radio" name="gender">女

案例效果：

3.4上传文件 file

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

<input type="file" multiple>

效果：

3.5多选框 checkbox

多选框也叫复选框。默认选中：checked

<input type="checkbox" checked>敲前端代码

案例代码：

<input type="checkbox" checked>敲Html代码
<input type="checkbox">敲Css代码
<input type="checkbox">敲javascript

案例效果：

04 下拉菜单

标签：select嵌套option,select下拉菜单整体，option是下拉菜单的每一项。slected是默认选中属性

<body>
    工作城市:
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">深圳</option>
        <option value="">武汉</option>
        <option value="">唐山</option>
    </select>
</body>

效果图：

05 文本域

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

标签： textarea，双标签。

<textarea>默认提示文字<、textarea>

效果：
注：右下角有拖拽功能，未来都会禁用。

06 label 标签-增大点击范围

作用：网页中，某个标签的说明文本。
经验：用label标签绑定文字和表单控件的关系，增大表单控件的电机范围。
写法一：
- label 标签只包裹内容，不包过表单控件
- 设置 label 标签的 for 属性值和表单控件的 id 属性值相同。
写法二：
- 使用 label 标签包裹文字和表单控件，不需要属性。
提示：支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、下拉菜单、文本域等等。

07 button-按钮

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

type属性值：

08 无语义的布局标签

作用：布局网页 （划分王爷区域，摆放内容）
- div：独占一行
- span: 不换行

<div>div标签，独占一行</div>
<span>span标签，不换行</span>

09 字符实体

作用：在网页中显示预留字符。

小学毕业都能学会的2023前端教程Html第二章

Html 第二章

01列表

1.1无序列表

1.2有序列表

1.3定义列表

02表格

2.1表格-基本用法

2.2表格结构标签-了解

2.3合并单元格

03表单

3.1 input 标签基本使用

3.2 input 标签占位文本

3.3单选框 radio

3.4上传文件 file

3.5多选框 checkbox

04 下拉菜单

05 文本域

06 label 标签-增大点击范围

07 button-按钮

08 无语义的布局标签

09 字符实体