Day-01 HTML 列表、表格、表单

26 阅读1分钟

1. 列表

  • 布局内容排列整齐的区域
  • 分类:无序列表、有序列表、定义列表

1.1 无序列表

image.png

1.2 有序列表

image.png

  • 动手实践 image.png

1.3 定义列表

image.png

  • 动手实践 image.png

2.表格

image.png

  • 动手实践 image.png

2.1 表格结构标签 thead tbody tfoot

  • 加这个标签看不出效果的,了解一下就行

image.png

2.2 合并单元格

  • 不能跨结构标签合并

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border = "1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>90</td>
            <td>95</td>
            <td>88</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>85</td>
            <td>100</td>
            <td>91</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>78</td>
            <td>100</td>
            <td>86</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>

    </table>
<!-- 跨行合并 -->
    <table border = "1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>90</td>
            <td>95</td>
            <td>88</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>85</td>
            <td rowspan="2">100</td>
            <td>91</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>78</td>
           
            <td>86</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>

    </table>

    <!-- 跨列合并 -->
    <table border = "1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>90</td>
            <td>95</td>
            <td>88</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>85</td>
            <td>100</td>
            <td>91</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>78</td>
            <td>100</td>
            <td>86</td>
        </tr>
        <tr>
            <td>总结</td>
            <td colspan="3">优秀</td>
            
        </tr>

    </table>
    
</body>
</html>

3.表单

  • 作用:收集用户信息,如登录界面,注册界面,搜索区域

3.1input标签

  • 单标签

image.png

  • 动手实践 image.png

3.1.1 input标签占位文本

  • placeholder添加提示内容就可以了 image.png

3.1.2 单选框radio、

  • name相同的radio是一组
  • checked属性可以让单选框直接选中

image.png

3.1.3 上传文件

image.png

3.1.4 多选框

image.png

3.2 下拉菜单

image.png

3.3 文本域标签

  • 作用:多行输入文本的表单控件

image.png

3.4 label标签

image.png

  • 两种增大点击范围的写法:可用于文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域

image.png

3.5 按钮标签

image.png

3.6 布局标签div和span

image.png

3.7 字符实体

  • 作用:在网页中显示预留字符
image.png

image.png

1