当前位置：首页 > wzjs >正文

宁波企业网站优化推广wordpress图片存到七牛云

wzjs 2025/9/14 9:07:44

宁波企业网站优化推广,wordpress图片存到七牛云,壹互联是网站公司吗,app注册推广任务平台文章目录 1、input1.1 input的占位文案1.2 单选框1.3 上传文件1.4 多选框 2、下拉菜单3、文本域：多行输入4、label标签：说明与增大点击范围5、按钮与form表单6、无语义布局标签7、有语义的布局标签8、字符实体9、练习：注册页面 1、input in…

文章目录

1、input
- 1.1 input的占位文案
- 1.2 单选框
- 1.3 上传文件
- 1.4 多选框
2、下拉菜单
3、文本域：多行输入
4、label标签：说明与增大点击范围
5、按钮与form表单
6、无语义布局标签
7、有语义的布局标签
8、字符实体
9、练习：注册页面

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>

在这里插入图片描述

1.1 input的占位文案

在这里插入图片描述
文本框和密码框都可以使用，placeholder中写预设的提示文案

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

示例：

昵称：<input type="text" placeholder="请输入注册昵称">
<br><br>
密码：<input type="password" placeholder="请输入密码">

在这里插入图片描述

1.2 单选框

在这里插入图片描述

如下，name属性值自定义，name相同，说明是同一组的选项，checked表示默认选中，可以不要checked：

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

在这里插入图片描述

1.3 上传文件

文件上传表单控件默认只能上传一个文件，添加multiple属性实现文件多选

<input type="file" multiple>

Command按住多选文件：
在这里插入图片描述

1.4 多选框

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

示例：

兴趣爱好：
<input type="checkbox" checked>Java 
<input type="checkbox">Python
<input type="checkbox">Golang

在这里插入图片描述

2、下拉菜单

select 嵌套 option，父子关系，select 是下拉菜单整体，option是下拉菜单的每一项，默认显示第一项，selected属性实现默认选中功能

在这里插入图片描述
效果：

在这里插入图片描述

VSCode生成代码的name和id属性，以及option的属性，是用于后面传值用的，先忽略

<select name="" id=""><option value=""></option>
</select>

3、文本域：多行输入

textarea标签，用于多行输入文本（上篇看到，input的text属性不换行）

在这里插入图片描述

<textarea>请输入自我评价</textarea>

在这里插入图片描述

后面CSS设置文本域尺寸并禁用右下角拖拽变大功能

4、label标签：说明与增大点击范围

用于网页中，某个标签的说明文本，之前，写说明文本“昵称”是这么写的：

昵称：<input type="text" placeholder="请输入注册昵称">

使用label后：

<label>昵称：</label><input type="text" placeholder="请输入注册昵称">

label还可以绑定文字和表单组件的关系，用于增大表单的点击范围，如下面这个单选框，本来要点到小圆点上才生效，修改后，可以让其点到男、女两个字上时也生效，以提高用户体验

在这里插入图片描述

写法一：label标签只包裹内容，不包裹表单组件标签，要求label的for属性，等于表单标签的id属性

在这里插入图片描述

写法二：label标签包裹文字和表单标签，不需要属性

在这里插入图片描述

对比下原始未增大和两种增大写法：

性别：
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex">女性别：
<input type="radio" name="sex" checked id="man">
<label for="man">男</label> 
<input type="radio" name="sex" id="woman">
<label for="woman">女</label>
<br><br>性别：
<label><input type="radio" name="sex" checked> 男</label>
<label><input type="radio" name="sex">女</label>
<br><br>

注意，支持label标签增大点击范围的表单组件只有：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等

5、按钮与form表单

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

type属性取值：

在这里插入图片描述

按钮需配合 form 标签(表单区域)才能实现对应的功能，如重置、提交，form用于包裹多种表单输入组件标签：

<form action=""></form>

<body><form action=""><label>昵称：<input type="text" placeholder="请输入注册昵称"></label><br><br>密码：<input type="password" placeholder="请输入密码"><br><br>性别：<label><input type="radio" name="sex" checked> 男</label><label><input type="radio" name="sex">女</label><br><br>兴趣爱好：<input type="checkbox" checked>Java <input type="checkbox">Python<input type="checkbox">Golang<br><br>上传文件：<input type="file" multiple><br><br>居住地：<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option></select><br><br><textarea>请输入自我评价</textarea><br><br><button type="reset">重置填写</button><br><br><button type="submit">注册/登陆</button></form>
</body>

点击重置填写，所有信息恢复默认

在这里插入图片描述

6、无语义布局标签

用于布局网页，也就是划分网页区域，摆放内容

div：独占一行，是一个大盒子
span：不换行，是一个小盒子

直观感受下区别：

<body><div>这是div标签</div><div>这是div标签</div><span>这是span标签</span><span>这是span标签</span>
</body>

在这里插入图片描述

7、有语义的布局标签

在这里插入图片描述

8、字符实体

在网页中显示预留字符时，用右边的实体名称，一般&开头；结尾

在这里插入图片描述

lt 是 less than 的缩写
gt 是 greater than 的缩写

9、练习：注册页面

写一个注册页面：

在这里插入图片描述
代码：

<!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><form action=""><h1>注册信息</h1><!--个人信息 --><h2>个人信息</h2><label>昵称：</label><input type="text" placeholder="请输入注册昵称"><br><br>密码：<input type="password" placeholder="请输入密码"><br><br>确认密码：<input type="password" placeholder="请再次确认密码"><br><br><label>性别：</label><label><input type="radio" name="sex" checked> 男</label><label><input type="radio" name="sex">女</label><br><br><label>居住地：</label><select><option>北京</option><option selected>上海</option><option>广州</option><option>深圳</option><option>武汉</option></select><br><br><label>兴趣爱好：</label><input type="checkbox" checked>Java <input type="checkbox">Python<input type="checkbox">Golang       <br><br><label>评价：</label><textarea>请输入自我评价</textarea><br><br>附件：<input type="file" multiple><br><br><!-- 教育经历 --><h2>教育经历</h2><label>最高学历：</label><select><option>博士</option><option>硕士</option><option selected>本科</option><option>专科</option></select><br><br><label>学校名称：</label><input type="text" placeholder="请输入学校名称"><br><br><label>所学专业：</label><input type="text" placeholder="请输入所学专业"><br><br><label>在校时间：</label><select><option>2015</option><option>2016</option><option>2017</option><option>2018</option></select>--<select><option>2016</option><option>2017</option><option>2018</option><option selected>2019</option></select><br><br><!-- 工作经历 --><h2>工作经历</h2><label>公司名称：</label><input type="text" placeholder="请输入公司名称"><br><br><label>工作内容：</label><textarea>请输入具体内容</textarea><br><br><input type="checkbox"><label>我已阅读并同意以下协议：</label><ul><li><a href="#" target="_blank">《用户服务协议》</a></li><li><a href="#" target="_blank">《隐私协议》</a></li></ul><br><br><button type="submit">免费注册</button><button type="reset">重置填写</button></form></body>
</html>