本文详细介绍了HTML5中的表单进阶技巧，包括单选框、复选框的使用，上传文件和隐藏字段的处理，以及文本域和下拉菜单的创建。同时，还探讨了CSS3.0的选择器，如层级、属性、结构伪类选择器，以及手风琴效果和各种UI状态伪类选择器的应用。此外，提到了音频和视频标签，以及增强型表单输入和属性。
寒假html 90-120
表单进阶
单选框
<h1>表单进阶-单选框</h1>
<div>你对于京东首页满意度如何</div>
<div>
<input type="radio" name="aaa" checked="checked" >非常满意 <!-- 添加name使其成为单选，否则就是单选 -->
</div>
<div>
<input type="radio" name="aaa">满意
</div>
<div>
<input type="radio" name="aaa">一般
</div>
<div>
<input type="radio" name="aaa">不满意
</div>
<div>
<div>你的性别</div>
<div>
<input type="radio"name="bbb" id="man"><label for="man">男</label> <!-- 使其点击男也可以生效 -->
</div>
<div>
<input type="radio"name="bbb" id ="woman"><lable for="woman">女</lable>
</div>
</div>
checked: 默认选中
复选框
<input type="checkbox" >
同理可以使用name 与label
上传文件和隐藏字段
<input type="file" name="" id="") >
<form<
<input type="img" src=""(通过提交图片实现) >
</form>
注意：此方法必须要套在form表单才可以实现地址的改变！！
不显示按钮
<!--隐藏-->
<input type="hidden"name=""id=""value="带给后端的个人信息，，">
禁用按钮
<input type="disabled"
文本框
<input type="text">支持只读
下拉菜单
<!-- select支持的属性
1.size显示几个
2.multiple选多个（按住shift键)
option支持的属性
1.value，提供给后端需要的value值
2.selected 默认选中
-->
<select size="">
<option>山东</option>
<option>山西</option>
<option>河南</option>
<option>河北</option>
</select>
文本域
cols="10"rows="10"
</textarea cols="10"rows="10" placeholder="">
提前设置好的value（默认值只可以写在双标签内部）
<textarea>
可以通过css设置宽高，事实上可以随意拖拽宽高
placeholder：预制文本
css里面的一个属性：resize:vertical(垂直)/horizental(水平)/both两个方向/none
字段集
<body>
<fieldset>
<legend>
性别
</legend>
<input type ="radio"name="aaa">男<br>
<input type ="radio" name ="aaa">女
</fieldset>
</body>
H5基础与语法
音频
<audio src="./jiejie.wav" controls loop autoplay muted></audio>
<！-- controls 控制栏
loop 循环
autoplay自动播放
muted静音--->
视频
<video src="./jiejie.wav" controls loop autoplay muted poster="./xxx"></audio>
属性同音频
额外属性：
poster海报
width与height
增强表单input
<form action="">
<div>
颜色选择：<input type="color"name="color">
</div>
<div>
邮箱：<input type="email">
</div>
<input type="submit">
</form>
<div>
url地址(完整地址）：<inputtype="url">
</div>
<div>
电话号码：<input type="tel">
</div>
<div>
滑块效果<input type="range" name="range" min="" max="" step="10">
</div>
<div>
数字类型：
<input type="number" min="o" max="10" value="5" step="2">
</div>
<div>
搜索：<inputtype="search">
</div>
<div>
日期选择<input type="date">
月份选择<inputtype="month">
周数选择<inputtype="week">
<input type="datetime-local" name="datetime">
</div>
增强表单选项列表
例：
<body>
<input type="text" list="mylist">
<datalist id="mylist">
<option value="手机"></option>
<optlon value="手表"</option>
<optlon value="手环"></option>
<option value="手镯"></option>
</datalist>
</body>
增强表单属性
autofocus：自动光标在上面
<body>
<form action="">
<div>
用户名：<input type="text"autofocus required>
<！-- autofocus 获取焦点
-->
</div>
<div>
邮箱：<input type="email"name="email"required multiple(可以填写多个邮箱地址，用逗号隔开)>
<！-- required 必填项，不能为空-->
</div>
<input type="submit">
</form>
</body>
CSS3.0
层级选择器
子代选择器：只给box下的后一个li加css
.box>li{}
当前元素后面的第一个兄弟
.child+li{}
属性选择器
通过中括号的方式进行选择
如：
[class]
div【class=box1】{} div这个元素中属性值为box1的
input[name]{
background:
yellow;}
input[type=email][
background:red}
<div>
<h1>注册页面</h1>
用户名：<input type="text"name="username"><br>
密码：<input type="password"name="password"><br>
年龄<input type="number"name="age"><br>
邮箱<input type="email"><br>
</div>
模糊匹配
class=a 以这个开头的
class$=b 以这个结尾
class=b 包含某个字符
结构伪类选择器
.box div:last-child{
margin-right:0;}
.box div:first-child{
margin-right:0;}
box中的最后一个div
可以用来简化代码，不需要再加一个class
/*第几个*/
li: nth-child(){
background:blue;}
/*第几个，偶数*/
li:nth-child(2n)
background:yellow;}
/*第几个，偶数2n(even) 奇数2n+1 2n-1(odd)*/
li:nth-child(odd){
background:yellow;}
目标伪类选择器
手风琴效果
<!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>
<style>
div .content {
display: none;
}
div .content:target {
display: block;
}
</style>
</head>
<body>
<div>
<a href="#aaa">aaa</a>
<div id="aaa" class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga odio
eos natus cupiditate distinctio sequi, dolorum, obcaecati vel
facilis velit provident deleniti inventore tempora iste, aut optio
magnam asperiores non?
</div>
</div>
<div>
<a href="#bbb">bbb</a>
<div id="bbb" class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga odio
eos natus cupiditate distinctio sequi, dolorum, obcaecati vel
facilis velit provident deleniti inventore tempora iste, aut optio
magnam asperiores non?
</div>
</div>
<div>
<a href="#ccc">ccc</a>
<div id="ccc" class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga odio
eos natus cupiditate distinctio sequi, dolorum, obcaecati vel
facilis velit provident deleniti inventore tempora iste, aut optio
magnam asperiores non?
</div>
</div>
</body>
</html>
UI状态伪类选择器（用于表单中）
注：
checkbox浏览器自带默认样式 想要改需要提前清掉
input [type=checkbox]{apparance:none
width:20px;
height:20px;
border:1px solid black;
}
selection效果
否定和动态伪类选择器
比如：
li:not(:first-child){
background:yellow;}
文本阴影
.div{
text-shadow: -10px -10px 1px
red,0 10px 1px yello}
/*
10px水平方向位移
10px垂直方向的位移
1px 模糊程度（模糊距离）
red 阴影颜色
*/
用逗号隔开
盒子阴影
圆角边框
border-radius:10px
接受px或者百分比
v1，四个角一样
v1，v2，左上右下，左下右上一致
v1,v2,v3左上，左下右上右下
v1,v2,v3,v4顺时针
border-top-left-radius:10px;
border-top-right-radius:30px;
border-bottom-left-radius:60px;
border-bottom-right-radius:100px;
垂直方向在前，水平方向在后
/* border-radius: 30px/60px; */
/* 30px/60px水平/垂直 支持border-radius*/
/* border-top-left-radius: 30px/60p; */
圆形设置为盒子的一半；
最简单的是设置为百分之50，就不需要计算盒子的单位
半圆：
border-radius:50px 50px 0 0
扇形：
border-radius:200px 0 0 0 ；
字体引入（css3)
引入浏览器本身不支持的字体
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
