今天开始学h5和css3的新特性,边学边持续更新。
1.语义化标签:
header,nav,main,article,aside,footer
(1)IE9可能支持h5,但是行级元素在设置宽度的时候是失效的。并不是所有的浏览器都能够识别出 <main>,需要给它转换为块级元素:
display:block;
(2)IE8以及IE8以下不支持h5:不认识语义标签,完全无效;解决方法:
a.手动创建标签:document.createElement("header");所创建的标签都是行级元素,需要在样式里加display:block;
b.引入第三方插件:html5.shiv.min.js,引入后可以做到兼容:
<script src="../js/html5.shiv.min.js"></script>
<!-- html5shiv.js和respond.js IE8支持HTML5元素和媒体查询 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
补充一个:之前学vue的时候,如果不用vue-cli,链接vue的是<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
(3)IE10全部支持。
2.表单标签
.新增type属性,之前的是text,password,新增有email,tel,url,number,search,range,color,time,date,datetime-local,month,week
email提供验证,包含@+域名;
tel没有验证,在移动端可以打开数字键盘;
url验证,必须包含http://
number,只能输入数字(可小数),有上调下降箭头调整,可以设置max,min,value默认值
<input type="number" value="60" max="100" min="0">
search,提供人性化体验,最后有个x全部删除
range,设置范围max,min拉动条
color,颜色选取
time,点击选取--:--
date,箭头下拉有日历控件选择 年/月/日
datetime,大多数浏览器不支持,只有safari支持。
datetime-local:浏览器支持
month,week,生成月,周
3.表单其他属性
placeholder:提示文本,提示占位,“请输入xxx”
autofocus:自动获取焦点,不用鼠标去点
autocomplete:自动补全,但是有两个前提:
(1)必须成功提交过
(2)加autocomplete的这个元素必须有name属性
用户名:<input type="text" name="usrname" placeholder="请输入用户名" autofocus autocomplete="on">
required:必须输入
pattern:正则表达式验证,
回顾:
*:任意个
?:0个或1个
+:1个或多个
手机号码:pattern=“^(\+86)?1\d{10}$”
手机:<input type="tel" required pattern=“^(\+86)?1\d{10}$”>
multiple:
(a) type为file:上传文件,加multiple可以上传多个文件
(b) type为email:多邮箱之间用逗号分割,加multiple可实现
form:指定表单id,不在表单内,但是提交也可以随着该表单的提交一起提交。
4.表单新增元素
(1)实现可输入,可选择:datalist,但是不同浏览器支持不一样,应该少使用
(2)实现一个表单
其中用到定位绑定用for。
<!DOCTYPE html>
<html lang="">
<head>
<title>myhtml</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<form>
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入学生姓名"><label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><label for="useremail">邮箱地址:</label>
<input type="email" name="useremail" id="useremail" required><label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择">
<datalist id="cList">
<option value="前端学院"></option>
<option value="后端学院"></option>
<option value="C++学院"></option>
</datalist><label for="score">入学成绩:</label>
<input type="number" name="score" id="score" max="100" min="0" value="0"><label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime">
<label for="leaveTime">毕业日期:</label>
<input type="date" id="LeaveTime" name="LeaveTime"><input type="submit" id="submit">
</fieldset></form>
<script>
document.getElementById("score").οninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
</html>
css样式:
*{
margin:0;
padding: 0;
}
form{
width:600px;
margin:20px auto;
}
form > fieldset{
padding: 10px;
}
form > fieldset > meter,
form > fieldset > input {
width:100%;
height: 40px;
line-height: 40px;
margin:10px 0;
border:none;
border:1px solid #CCC;
border-radius: 4px;
padding-left: 5px;
font-size: 16px;
/*width=内容+padding+border*/
box-sizing: border-box;
}
form > fieldset > meter{
padding-left: 0;
}#submit{
background-color: red
}
最后效果: