1.图片自适应容器
- 图片自适应的样式
- 样式如下：
<div> <img> </div> <style> div{ width:500px; } img{ /*宽度等于父元素宽度的100% */ width: 100%; /*高度由图片的宽高比例等比例缩放*/ height: auto; /*因为行内块元素的原因，底部会产生缝隙，防止图片底部产生缝隙*/ display: block; } </style>
- 样式如下：
2.input标签
1.控件类型
-
输入类型
-
<input type="text" >- 单行文本输入框：只能单行输入
- value属性：默认输入在文本框的内容
- placeholder属性：当文本没输入时，起到提示作用的文本占位符
-
<input type="password" >- 密码输入框
- 密码框输入不可见，保密性很低，真正的密保性还得看后端，对于前端来说，不可见是形同虚设的
-
<input type="number" >- 数字输入框
-
<input type="tel" >- 手机输入框
- pattern属性：规定输入规则，限制某种文本格式输入不对会弹窗
-
<input type="email" >- 邮箱输入框
-
<input type="url" >- 链接输入框
-
<input type="search" >- 搜索输入框
-
小结：规定了type属性的类型，输入框就会有一定的规则，若要改规则可使用pattern属性进行改
-
-
按钮类型
-
<input type="button" >- 普通按钮
-
<input type="submit" >- 提交按钮
- 配合表单使用才生效
-
<input type="reset" >- 重置按钮
- 配合表单使用才生效
-
<input type="image" >- 图片按钮
- 配合表单使用才生效，起到提交的作用
- 使用图像按钮在表单提交时，点击该按钮，提交的参数会带上鼠标在图片上点击的坐标
-
-
复选框
<input type="checkbox" >- 复选框
-
单选框
-
<input type="radio" >- 实现单选需要相同的控件名称，例如：
<div> /*单选框(name属性相同，才可以实现单选功能)*/ 男<input type=" radio" name="sex"> 女<input type="radio" name="sex"> </div>
-
-
日期类型
<input type="date" >- 日期
<input type="time" >- 时间
<input type="datetime-local" >- 日期和时间
<input type="month" >- 月份
<input type="week" >- 周
-
文件域
<input type="file" >- 上传文件按钮
-
隐藏域
<input type="hidden" >- 隐藏按钮，没有什么用
-
图像域
<input type="image" >- 图像按钮
- 放在form表单里起到提交按钮的作用
- 使用图像按钮在表单提交时，点击该按钮，提交的参数会带上鼠标在图片上点击的坐标
-
滑块
<input type="range" >- 滑块
- 其中的step属性：每移动一步的长度
-
颜色
<input type="color" >- 颜色选择
2.属性
- type属性：控件类型
- value属性：输入框的值
- placeholder属性：占位符
- disabled属性：禁用的（非键值对属性）
- 加了disabled属性的按钮不可以点
- readonly属性：只读不写（非键值对属性）
- 不允许修改文本框内容
- 一般type="text"才起作用
- hidden属性：可以隐藏元素（非键值对属性）
- checked属性：默认选中（非键值对属性）
- 一般type="checkbox"或"radio"才起作用
- autofocus属性：自动获取焦点（非键值对属性）
- 一般type="text"才起作用
- 一个页面只能有一个输入框自动获取焦点，设置了多个也只有一个生效
- name属性
- form表单的提交作用只会提交带有name属性的元素内容，即有name属性的文本框才能传输文本框内容
- 输入框的历史记录会对应name属性，调换两个name属性，两个输入框的历史记录就会调换,一般含有提交按钮的表单中的文本输入框才会有历史记录
- autocomplete属性：是否自动填充历史记录
- 属性值有：on/off
- pattern属性：文本匹配模式的规定
- 一般控件type=password,tel,text等特别规定时会用到
- 属性值要使用正则表达式的写法
- accept属性：限制我们上传的文件类型
- 一般控件type=file时才起作用
- step属性：限制滑块的步长
- 一般控件类型type=range时才起作用
- min属性：控制最小值
- type=number,range是才起作用
- max属性：控制最大值
- type=number,range是才起作用
- minlength属性：限制最小输入长度
- maxlength属性：限制最大输入长度
3.form表单
- form表单提交有阉割版ajax的作用
- 属性
- action属性：请求地址
- method属性：表单数据提交的方式
- get:明文传输，能看见传输内容
- post：看不见传输内容
- target属性：服务器返回的数据 如何打开
- _self当前窗口打开
- _blank新窗口打开
- name属性:是表单控件的名称, 提交数据时 会以 “控件名称=控件值” 的方式提交数据
<!-- 提交数据, 需要要表单里面的控件 有name属性 --> <!-- name属性是表单控件的名称, 提交数据时 会以 "控件名称=控件值" 的方式提交数据 --> <div>用户名: <input type="text" placeholder="请输入用户名" name="username"> </div> <div class="pwd">密 码: <input class="pwd_ipt" type="password" placeholder="请输入密码" name="password"> </div> <div>性别: <input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女 </div> <div>兴趣 <input type="checkbox" name="hobby" value="唱歌">唱歌 <input type="checkbox" name="hobby" value="跳舞">跳舞 <input type="checkbox" name="hobby" value="游泳">游泳 </div> <div> 上传头像: <input type="file" name="file"> </div> <div> <!-- 提交和重置按钮要搭配form表单才可以生效 --> <input type="submit"> <input type="reset"> <input type="button" value="普通按钮"> <!-- <input type="image" src=""> --> </div> </form>```
- 属性
4.label标签
-
用法
- label标签没有任何样式
- 用label标签包裹文字和输入框，可以点击文字激活输入框，提高用户体验(此时不能使用for属性，否则不生效)
- 利用label标签的for属性，for=“某个输入框的id”,label包裹文字，可以点击该包裹文字激活对应id的输入框
- 例如：(点击文字手机号码会激活id=phone的输入框)
<label for="phone">手机号码</label> <input id=" phone" type="te1" placeholder=" 请输入手机号码">
<label for="id">男</label> <input id="id" type="radio" name="sex"> <label><input type="radio" name="sex"> 女 </label> </div>```
5.文本域（多行文本输入框）textarea标签
- 用法
- 可以进行多行文本的输入
<textarea></textarea>
- 属性
- cols属性：文本框的宽度
- rows属性 文本框的高度
- cols与rows不建议使用
- 不同浏览器对上述两个属性的理解不同，所表现出来的尺寸也不同，建议用width和height替代(所有浏览器对像素px的理解是相同的)
- 被
<textarea>括住的内容会保留文本格式输出到文本框内 - 其不具备value属性
6.按钮标签
<button></button>- 与
<input type="button">的比较：- button按钮可以使用图片，更多文字等信息，它可以创建更加丰富的按钮样式
- 在form标签中建议使用input的按钮
- 使用button标签不能忘记添加type属性，因为不同浏览器的button默认type值不一样，type值不一样代表button标签的功能不一样
7.下拉框标签
- 用法
<select></select>下拉框<option></option>下拉项<optgroup></optgroup>下拉分组- 用label属性作下拉分组的组名
- 例子：
<select>
<optgroup label="第一组">
<option value="">第一组1选项</option>
<option value="">第一组2选项</option>
</optgroup>
<optgroup label="第二组">
<option value="">第二组1选项</option>
<option value="">第二组2选项</option>
</optgroup>
</select>
- option的value属性中的值是表单提交时被发送到服务器的值
-
select的属性
- size属性：下拉菜单显示几条选项
- multiple属性：让下拉菜单可以多选（非键值对属性）
- 含有name属性的select，它的数据在form表单中是可以提交的，当option有value时，提交value的值，没有value时，提交的是option标签包裹的值
-
option属性
- selected属性：默认选中状态（非键值对属性）
-
下拉框的第一个选项可以这样写去起到提示作用
<option disabled selected hidden>请选择你的选项</option>
8.fieldset、legend标签 不推荐使用
<!-- 边框 -->
<fieldset>
<!-- 标题 -->
<legend>登录</legend>
<div>用户名: <input type="text"></div>
<div class="pwd">密 码: <input type="password"></div>
<input class="ipt" type="submit">
</fieldset>```
用
<!-- 边框 -->
<fieldset>
<!-- 标题 -->
<legend>登录</legend>
<div>用户名: <input type="text"></div>
<div class="pwd">密 码: <input type="password"></div>
<input class="ipt" type="submit">
</fieldset>```
1121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
