html中的表

一.列表

场景:在网页中按照行展示关联性的内容，如:新闻列表、排行榜、账单等
特点:按照行的方式，整齐显示内容
种类:无序列表、有序列表、自定义列表

1.无序列表

一般在网页导航或者相同样式等等内容中使用较多，运用标签为<ul>中嵌套<li>，使用如下：

<h1>水果</h1>
    <!-- 快捷键 ul>li{具体内容}*n  或者内容带数字递增的ul>li{$具体内容}*n $显示成从1开始依次递增-->
    <!-- （无序列表）ul标签中只能放li标签，li标签则没有限制 -->
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li><b>葡萄</b></li>
    </ul>

效果如下:

2.有序列表

一般在类似排行榜中应用较多，运用标签为<ol>中嵌套<li>，快捷键运用类似无序列表，使用如下：

<!-- （有序列表）ol标签中只能放li标签，li标签则没有限制 -->
    <h1>成绩排行榜</h1>
    <ol>
        <li>小明：100</li>
        <li>小红：90</li>
        <li>小亮：80</li>
    </ol>

效果如下：

3.自定义列表

在网页底部导航通常会使用，或者主题带几行描述的副主题也会使用。

使用如下：

 <!-- （自定义列表）dl标签中只能放dt（主题）,dd（内容）标签，而dd,dt标签则没有限制 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账号管理</dd>
        <dd>客服处理</dd>
        <dd>服务进度</dd>
    </dl>

效果如下：

二.表格

1.表格的基本标签

2.表格的相关属性

3.表格的标题和单元格标签

4.表格的结构化标签

让内容分组（头部，主体，底部），使结构更清晰，同时更加语义化。

5.合并单元格

合并单元格步骤如下：

• 1.明确合并哪几个单元格
• 2.通过左上原则，确定保留谁删除谁：
• 上下合并一只保留最上的，删除其他
• 左右合并一只保留最左的，删除其他
• 3.删除其他给保留的单元格设置:跨行合并 (rowspan)或者跨列合并 (colspan)，其属性值为合并多少单元格
  

6.综合案例

代码如下：

    <table border="1" width="400" height="200">
        <caption><h3>优秀学生信息表格</h3></caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>小明</td>
                <td>1</td>
                <td>一班</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>2</td>
                <td>二班</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>评语</td>
                <td colspan="3">你们都很优秀</td>
            </tr>
        </tfoot>
    </table>
   

效果如下：

三.表单

1.input标签系列介绍

一般在网页中显示收集用户信息的表单效果，如:登录页、注册页，会使用标签input
input标签可以通过type属性值的不同，展示不同效果，具体如下

类似效果如下：

如果要在框内有提示用户输入的文本，那么使用placeholder属性

举例：昵称：<input type="text" placeholder="请输入昵称">
效果：

在使用radio单选框时，没法体现出单选的功能，这个时候需要label标签

2.label标签

常用于绑定内容与表单标签的关系，其标签名: label
有两种使用方法（推荐第一种）：

• 1.使用label标签把内容(如: 文本)包裹起
  在表单标签上添加id属性
  在label标签的for属性中设置对应的id属性值
• 2.直接使用label标签把内容(如:文本)和表单标签一起包裹起来
  需要把label标签的for属性删除即可

示例：

性别：<label><input type="radio" name="sex" checked>男</label>
         <label><input type="radio" name="sex">女</label>

即可实现单选功能

3.多文件选择

在网页中显示文件选择的表单控件，type属性值: file，后面再添加属性名multipl
示例：<input type="file" multiple>

4.文本域标签

场景:在网页中提供可输入多行文本的表单控件标签名:
textarea常见属性：

• cols:规定了文本域内可见宽度
• rows:规定了文本域内可见行数

注意点

• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐用CSS设置

示例：<textarea cols="31" rows="11"></textarea>

5.下拉菜单

在网页中提供多个选择项的下拉菜单表单控件标签组成

• select标签:下拉菜单的整体
• option标签:下拉菜单的每一项

常见属性（在option中）:

• selected:下拉菜单的默认选中

示例：

<select>
        <!-- selected表示默认选中 -->
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
        <option>深圳</option>
    </select>

6.button按钮标签

在网页中显示用户点击的按钮，其标签名: button，type属性值 (同input的按钮系列)

示例：

<!-- button无固定功能，在应用中更加广泛 -->
    <button>按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">提交按钮</button>

效果：

四.综合案例

<h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    昵称：<input type="text" placeholder="请输入昵称">
    <br><br>
    性别：<label><input type="radio" name="sex" checked>男</label>
         <label><input type="radio" name="sex">女</label>
    <br><br>
    所在城市：
    <select>
        <option>上海</option>
        <option selected>广州</option>
        <option>北京</option>
    </select>
    <br><br>
    喜欢的类型：
    <input type="checkbox">可爱
    <input type="checkbox">性感
    <input type="checkbox">御姐
    <br><br>
    个人介绍：<br>
    <textarea id="" cols="60" rows="10"></textarea>
    <h3>我承诺</h3>
        <ul>
            <li>年满18</li>
            <li>严肃</li>
            <li>真诚</li>
        </ul>
    <input type="checkbox">我同意
    <br>
    <input type="submit" value="免费注册">
    <button type="reset">重置</button>

效果如下：