<!DOCTYPE HTML>
<html>
<!--Html5文档头部声明简洁多了-->
<head>
<meta charset="utf-8">
<title>Html5新增练习1</title>
</head>
<style type="text/css">
header,nav,section,footer{
width:400px;
height:40px;
border:solid 1px #333333;
margin-bottom:10px;
margin:10px auto;
}
aside,article{
width:150px;
height:35px;
border:solid 1px #000000;
float:left;
margin-left: 10px;
}
</style>
<body>
<!--Html5新增语义标签-->
<header>头部</header>
<nav>导航</nav>
<section>
<aside>左侧</aside>
<article>文章</article>
</section>
<footer>底部</footer><br>
<div align="center">
<form name="fom">
<!--Html5 新增input 属性 不同的浏览器效果不同
required 通过浏览器 验证效果不同
placeholder 默认显示内容
autofocus 自动获取焦点
-->
姓名:<input type="text" name="username" required placeholder="请输入姓名" autofocus><br><br>
<!-- 新增input type 类型 通过浏览器 验证效果不同 -->
邮件:<input type="email" name="email"><br><br>
日期:<input type="date" name="mydate"><br><br>
网址:<input type="url" name="myurl"><br><br>
手机:<input type="number" name="phone"><br><br>
亮度:<input type="range" name="du" min="0" max="255" value="200">255<br><br>
颜色:<input type="color" name="color" ><br><br>
地址:
<select>
<optgroup label="江西">
<option>南昌市</option>
<option>赣州市</option>
</optgroup>
<optgroup label="湖南">
<option>长沙市</option>
<option>岳阳市</option>
</optgroup>
</select><br><br>
<!--新增 datalist 数据列表 标签 需要加id 跟 input list关联才能生效-->
搜索车型:<input type="text" list="car">
<datalist id="car">
<option>奥迪</option>
<option>大众</option>
</datalist>
<!-- type="submit" 信息才能提交 type="button" 不能提交 -->
<input type="submit" name="submit" value="提交">
</form>
</div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-971351.html
