<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header{
width: 1200px;
height: 50px;
background-color: #e20c3a;
margin: 0 auto;
}
nav{
width: 1200px;
height: 50px;
background-color: pink;
margin: 0 auto;
}
footer{
width: 1200px;
height: 50px;
background-color: yellow;
margin: 0 auto;
}
fieldset{
width: 300px;
height: 200px;
/*background-color: yellow;*/
margin: 0 auto;
}
.input{
margin-top: 40px;
margin-bottom: 40px;
margin-left: 10px;
}
[title=input]{
margin-left: 27px;
}
legend{
margin: 0 auto;
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<footer></footer>
<input type="text"value="请输入明星" list="star"> //list属性值与datalist id对应
<datalist id="star">
<option value="周润发">周润发</option>
<option value="刘海">刘海</option>
<option value="周星驰">周星驰</option>
<option value="刘德华">刘德华</option>
<option value="成龙">成龙</option>
<option value="刘欢">刘欢</option>
<option value="胡歌">胡歌</option>
</datalist>
<fieldset> //fiedset文件设置
<legend>用户登录</legend> //标题在先中间
用户名:<input type="text" class="input"><br/>
密码:<input type="password" title="input"><br/>
</fieldset>
</body>
</html>新增属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--//占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回-->
<input type="text" placeholder="请输入用户名"><br/>
<input type="text" placeholder="请输入用户名"><br/>
<!--//规定当页面加载时 input 元素应该自动获得焦点-->
<input type="text" autofocus><br/>
<!--//多文件上传-->
<input type="file" multiple><br/>
<!--//规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 <br/>2.这个表单您必须给他名字-->
<input type="text" autocomplete="off"><br/>
<input type="submit">
<!--//必填-->
<input type="text" required><br/>
<!--//规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式-->
<input type="text" accesskey="s">
</body>
</html>结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div:nth-child(1){*/
/*background-color: #e20c3a;*/
/*}*/
div:nth-child(2n){
background-color: #e20c3a;
}
div:nth-child(2n-1){
background-color: pink;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>表单type的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
margin: 0 auto;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>您的邮箱</td>
<td><input type="email"></td>
<td>不可修改</td>
</tr>
<tr>
<td>您的电话</td>
<td><input type="tel"></td>
<td>不可修改</td>
</tr>
<tr>
<td>您的网址</td>
<td><input type="url"></td>
<td>不可修改</td>
</tr>
<tr>
<td>您的座机</td>
<td><input type="number"></td>
<td>不可修改</td>
</tr>
<tr>
<td>搜索</td>
<td><input type="search"></td>
<td>不可修改</td>
</tr>
<tr>
<td>滑动</td>
<td><input type="range"></td>
<td>不可修改</td>
</tr>
<tr>
<td>小时分钟</td>
<td><input type="time"></td>
<td>不可修改</td>
</tr>
<tr>
<td>年月日</td>
<td><input type="date"></td>
<td>不可修改</td>
</tr>
<tr>
<td>时间</td>
<td><input type="datetime"></td>
<td>不可修改</td>
</tr>
<tr>
<td>月年</td>
<td><input type="month"></td>
<td>不可修改</td>
</tr>
<tr>
<td>年周</td>
<td><input type="week"></td>
<td>不可修改</td>
</tr>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>视频音频（source为了兼容问题）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio controls loop>
<!--// ogg ie不支持-->
<source src="mp3/1.ogg">
</audio>
<video autoplay controls loop width = "1000">
<source src="movie/movie01.mp4">
</video>
</body>
</html>