前端的第二天(HTML)

HTML标签学习(下)

目录描述

一、 列表标签

1. 无序列表

无序列表

2.有序列表

有序列表

3.自定义列表

自定义列表

二、 表格标签

1.表格的基本标签

表格的基本标签在这里插入图片描述

2.表格的相关属性

表格的相关属性

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

表格标题和表头单元格标签

4.表格的结构标签(了解)

表格的结构标签(了解)

5.合并单元格

合并单元格

三、 表单标签

1.input系列标签

文本框
在这里插入图片描述
密码框
单选框
复选框
文件选择框
按钮

2.input标签总结

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input系列标签</title>
</head>
<body>
    <form>
        昵称:<input type="text" placeholder="请输入昵称">
        <br><br>
        密码:<input type="password" placeholder="请输入密码">
        <br><br>
        性别:<input type="radio" name="sex"><input type="radio" name="sex"><br><br>
        爱好:<input type="checkbox">敲代码
        <input type="checkbox">熬夜
        <input type="checkbox">掉头发
        <br><br>
        <input type="file" multiple>
        <br><br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>
</body>
</html>

3.button按钮标签

button按钮

4.select下拉菜单标签

select下拉菜单标签

4.textarea文本域标签

在这里插入图片描述

5.label标签

label标签

四、语义化标签

1.没有语义的布局标签

没有语义的布局标签

2.有语义的布局标签

有语义的布局标签

五、字符实体

1.HTML中空格合并现象

字符实体

2.常见字符实体

常见字符实体

综合案例

1.优秀学生信息表格

优秀学生信息表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优秀学生信息表格案例</title>
</head>
<body>        
    <table border="1" width="400" height="400">
        <caption><h3>优秀学生信息表格案例</h3></caption>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高三</td>
            <td>张三</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>赵四</td>
            <td>120</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tr>
    </table>
</body>
</html>

2.会员注册表单

会员注册表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册表单</title>
</head>
<body>
    <h2>青春不常在,抓紧谈恋爱</h2>
    <hr>
    <form>
        <label>昵称:<input type="text" placeholder="请输入昵称"></label>
        <br><br>
        性别:
        <label>
            <input type="radio" name="sex"></label>
        <label>
            <input type="radio" name="sex"></label>
        <br><br>
        生日:<input type="date">
        <br><br>
        城市:<select>
            <option selected>重庆</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
        <br><br>
        婚姻情况:
        <label>
            <input type="radio" name="marry">未婚 
        </label>
        <label>
            <input type="radio" name="marry">已婚
        </label>
        <label>
            <input type="radio" name="marry">保密
        </label>
        <br><br>
        个人介绍:<br>
        <textarea cols="30" rows="10"></textarea>
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁,单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <label>
            <input type="checkbox">我同意所有条款            
        </label>
        <br><br>
        <button type="submit">免费注册</button>
        <button type="reset">重置</button>
    </form>
</body>
</html>

HTML就暂时告一段落了,未来的路还很长
未来可期!!!

猜你喜欢

转载自blog.csdn.net/m0_56901161/article/details/121151987