表单
表单使用表单标签 <form> 来设置
<form action=""method="post" enctype="multipart/form-data">
其中action是服务器地址，method中post是添加进服务器，get是从服务器中取数据。如果要添加文件，必须在后面加enctype="multipart/form-data"
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。
| 标签 | 描述 |
|---|---|
| [<form>] | 定义供用户输入的表单 |
| [<input>] | 定义输入域 |
| [<text>] | 定义文本域 |
| [<textarea>] | 定义文本域 (一个多行的输入控件) |
| [<label>] | 定义了 <input> 元素的标签，一般为输入标题 |
| [<fieldset>] | 定义了一组相关的表单元素，并使用外框包含起来 |
| [<legend>] | 定义了 <fieldset> 元素的标题 |
| [<select>] | 定义了下拉选项列表 |
| [<optgroup>] | 定义选项组 |
| [<option>] | 定义下拉列表中的选项 |
| [<button>] | 定义一个点击按钮 |
| [<datalist>] | 指定一个预先定义的输入控件选项列表 |
| [<keygen>] | 定义了表单的密钥对生成器字段 |
| [<output>] | 定义一个计算结果 |
以用户注册页面为例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单的例子 - 注册</title>
</head>
<body>
<form action=""method="post" enctype="multipart/form-data">
<p>用户名:
<input type="text" name="username" size="20" placeholder="用户名由6-20个字符构成" required>
</p>
<p>密码:
<input type="password" name="password"required>
</p>
<p>确认密码:
<input type="password" name="password1"required>
</p>
<p>性别:
<input type="radio"name="sex" value="1" checked>男
<input type="radio"name="sex" value="0">女
</p>
<p>爱好:
<input type="checkbox" name="fav" value="阅读">阅读
<input type="checkbox" name="fav" value="旅游">旅游
<input type="checkbox" name="fav" value="美食">美食
<input type="checkbox" name="fav" value="运动">运动
<p>省份:
<select name="province">
<option value="510000">四川</option>
<option value="120000">天津</option>
<option value="310000">上海</option>
<option value="110000">北京</option>
<option value="500000">重庆</option>
</select>
</p>
<p>生日:
<input type="date" name="birthday">
</p>
<p>邮箱:
<input type="email" name="email"required>
</p>
<p>头像:
<input type="file" name="photo">
</p>
<p>自我介绍:
<textarea cols="30" rows="10" name="intro"></textarea>
</p>
<p>
<input type="submit" value="确认注册">
<input type="reset" value="重新填写">
</p>
</form>
</body>
</html>
注意:每一个都需要对其赋值，以便于传入服务器。
audio&video
HTML中通过<audio>和<video>标签在网页中显示音频和视频。
<audio controls autoplay loop> <!--controls控制按键 loop循环播放-->
<source src="audio/test-audio.mp3"></source>
</audio>
<video controls>
<source src="video/puppy.mp4"></source>
</video>
controls控制按键 loop循环播放 autoplay自动播放
叠层样式表(css)
1.通配符选择器
清除边框边距(一般都要先写)
* {
margin: 0;
padding: 0;
}
2.标签选择器
通过标签{}来定义标签的属性，比如h1{},h2{}...
属性:定义标签的width宽度，height高度，margin边距
auto居中，background-color背景颜色等，查菜鸟教程。
3.类选择器
添加class = "a" 通过.a{}来定义属性
4.ID选择器
添加id = "header" 通过#header{}来定义属性，一个id只能对应一个样式
5.内部样式表
放在<head>中的<style></style>称为内部样式表
6.外部样式表
将样式表单独写在一个文件里，当要使用时直接导入该文件
<link rel="stylesheet" href="css/style.css">
一般情况下网站的首页会使用内部样式表 - 首页正常渲染
其他的页面可以共享一个或者多个外部样式表 - 代码复用/减少对带宽和流量的占用
7.不冲突的样式会叠加，有冲突的样式遵循三条原则
1.就近原则
2.具体性原则 优先执行ID
3.重要性原则 ! importtant
