20220309_HTML标签学习03

最新推荐文章于 2024-06-16 14:48:26 发布

苏轼嘟嘟改了名

最新推荐文章于 2024-06-16 14:48:26 发布

阅读量175

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_33316697/article/details/123373265

版权

一、表单标签

1.input系列标签

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input，input标签可以通过type属性值的不同，展示不同效果。

type属性值：

text——文本框，用于输入单行文本

属性：placeholder——提示信息

password——密码框，用于输入密码

radio——单选框，用于多选一

属性：name——分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中

checked——默认选中

checkbox——多选框，用于多选多

file——文件选择，用于之后上传文件

属性：multiple——多文件选择

submit——提交按钮，用于提交

reset——重置按钮，用于重置

属性：value——用于改变提交和重置的文字内容

button——普通按钮，默认无功能，之后配合js添加功能

2.button标签

属性同input，谷歌浏览器默认button是提交按钮

button标签是双标签，更便于包裹其他内容：文字、图片等

3.select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

常见属性：

selected：下拉菜单的默认选中

4.textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

注意点：

右下角可以拖拽改变大小

实际开发时针对样式效果推荐用CSS设置

5.label标签

场景：常用于绑定内容与表单标签的关系

标签名：label

使用方法①：

（1）使用label标签把内容包裹起来

（2）在表单标签上添加id属性

（3）在label标签的for属性中设置对应的id属性值

使用方法②：

（1）直接使用label标签把内容和表单标签一起包裹起来

（2）需要把label标签的for属性删除即可

<!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>Document</title>
</head>
<body>
    性别：
    <input type="radio" name="gender" id="man"><label for="man">男</label>
    <label><input type="radio" name="gender">女</label>
</body>
</html>

二、语义化标签

1.无语义的标签：div和span

无任何特殊效果

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

2.有语义的标签：

手机端常用：

header——网页头部

nav——网页导航

footer——网页底部

aside——网页侧边栏

section——网页区块

article——网页文章

三、字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体代替

结构：&英文；

常见字符实体：

主要记空格—— 

四、综合练习

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>Document</title>
</head>
<body>
    <table border="1" width="500" height="300">
        <caption><h1>优秀学生信息表格</h1></caption>
        <thead><tr><td>年级</td><td>姓名</td><td>学号</td><td>班级</td></tr></thead>
        <tbody><tr><td rowspan="2">高三</td><td>张三</td><td>110</td><td>三年二班</td></tr>
        <tr><td>赵四</td><td>120</td><td>三年三班</td></tr></tbody>
        <tfoot><tr><td>评语</td><td colspan="3">你们都很优秀</td></tr></tfoot>
    </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>Document</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    昵称：<input type="text" placeholder="请输入昵称">
    <br><br>
    性别：<input type="radio" name="gender">男
         <input type="radio" name="gender">女
    <br><br>
    所在城市：<select><option>上海</option><option>北京</option><option>广州</option><option>深圳</option></select>
    <br><br>
    婚姻状况：<input type="radio" name="marrying situation">未婚
             <input type="radio" name="marrying situation">已婚
             <input type="radio" name="marrying situation">保密
    <br><br>
    喜欢的类型：<input type="checkbox" name="personality">可爱
               <input type="checkbox" name="personality">性感
               <input type="checkbox" name="personality">御姐
               <input type="checkbox" name="personality">萝莉
               <input type="checkbox" name="personality">小鲜肉
               <input type="checkbox" name="personality">大叔
    <br><br>
    个人介绍：
    <br><br>
    <textarea  cols="80" rows="10"></textarea>
    <h2>我承诺</h2>
    <ul><li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li></ul>
    <input type="checkbox">我同意所有条款
    <br><br>
    <input type="button" value="免费注册">
    <input type="reset" value="重置">
</body>
</html>

网页结果

苏轼嘟嘟改了名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20220309_HTML标签学习03

一、表单标签1.input系列标签场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页标签名：input，input标签可以通过type属性值的不同，展示不同效果。type属性值： text——文本框，用于输入单行文本属性：placeholder——提示信息 password——密码框，用于输入密码 radio——单选框，用于...
复制链接

扫一扫