六 FORM表单
标签： <form></form>
(1) form属性
action 提交的地址
method 提交的方式
get
(1) 默认不写 为get传参 url地址栏可见
(2) 长度受限制 （IE浏览器2k火狐8k）
(3) 相对不安全
post
(1) url地址栏不可见 长度默认不受限制
(2) 相对安全
enctype 提交的类型
enctype属性 在表单有文件上传的时候 需要设置值 值为multipart/form-data
(2) input 标签
<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。
具体在下面有详解：
如：
<input type="text" name="username">
(3) select 标签创建下拉列表。
属性：
- *name属性:定义名称,用于存储下拉值的
- size：定义菜单中可见项目的数目，html5不支持
- disabled 当该属性为 true 时，会禁用该菜单。
- multiple 多选
内嵌标签：
*<option> 下拉选择项标签,用于嵌入到标签中使用的;
属性：
-
*value属性:下拉项的值
-
*selected属性:默认下拉指定项.
(4) *textarea 多行的文本输入区域
属性：
-
* name :定义名称,用于存储文本区域中的值。
-
*cols ：规定文本区内可见的列数。hlc
-
*rows ：规定文本区内可见的行数。
-
disabled： 是否禁用
-
readonly： 只读
注意：
默认值是在两个标签之间
(5) *button 标签定义按钮。
您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
(6) fieldset html5标签–fieldset 元素可将表单内的相关元素分组。
**disabled属性：**定义 fieldset 是否可见。
form属性： 定义该 fieldset 所属的一个或多个表单。
(7) legend html5标签
<legend> html5标签–<legend> 标签为 <fieldset>b<figure> 以及 <details> 元素定义标题。
实例：
<form>
<fieldset>
<legend>健康信息：</legend>
身高：<input type="text" /><br/>
体重：<input type="text" /><br/>
</fieldset>
</form>
(8) optgroup html5标签
<optgroup> html5标签–<optgroup> 标签定义选项组。此元素允许您组合选项
实例：
<select>
<optgroup label="Swedish Cars">
<option vanlue="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
(9) datalist html5标签
html5标签– 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
实例：
<form action="demo_form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
(10) input 标签
搭配label标签使用
label 可以使标签内的区域指向label标签for属性指代的对象的事件。
实例：
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
*type属性:表示表单项的类型:
值如下:
-
text:单行文本框
-
password:密码输入框
-
checkbox:多选框 注意要提供value值
-
radio:单选框 注意要提供value值
-
file:文件上传选择框
-
button:普通按钮
-
submit:提交按钮
-
image:图片提交按钮
<input type=“image” width=“100” height=“100”border=“2”src=“上传图片”/> -
reset:重置按钮, 还原到开始(第一次打开时)的效果
-
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
*name属性 : 表单项名,用于存储内容值的
*value属性 : 输入的值(默认指定值)
size属性 : 输入框的宽度值
maxlength属性 : 输入框的输入内容的最大长度
readonly属性 : 对输入m框只读属性
*disabled属性 : 禁用属性
*checked属性 : 对选择框指定默认选项
placeholder 提示信息
src和alt是为图片按钮设置的
注意：reset重置按钮是将表单数据恢复到第一次打开时的状态，并不是清空
image图片按钮，默认具有提交表单功能。
(11) 作为了解的input h5的新属性
type属性：
- time 时间
- date 日期
- range 区间
- email 邮箱
- url url地址
- color 颜色
- number 数值
- search 搜索
七、HTML中HEAD头部设置
设置网页编码：
<meta charset="utf-8"/>
自动刷新：
<meta http-equiv="refresh" content="时间;url=网址" />
关键字：
<meta name="Keywords" content="关键字" />
描述：
<meta name="Description" content="简介、描述" />
站点作者:
<meta name="author" content="root,[email protected]">告诉搜索引擎你的站点的制作的作者；
网页标题：
<title>本网页标题</title>
导入CSS文件：
<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代码：
<style type="text/css">嵌入css样式代码</style>
JS文件或代码：
<script >。。。</script>
设置网页小图标:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
注意：
头标签中的内容不会显示在浏览器中
八、 HTML5多媒体标签（熟悉）
(1) audio 音频
HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
方式一
实例：
<audio src="./images/beidahuang.mp3" controls="controls">
你的浏览器不支持播放
</audio>
方式二
实例:
<audio controls="controls">
<source src="./images/beidahuang.mp3" type="audio/mpeg" />
你的浏览器不支持播放
</audio>
(2) video 视频
HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
方式一
实例：
<video controls="controls" width="400" height="400">
<source src="./images/fun.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm">
你的浏览器不支持视频播放
</video>
方式二
实例:
<video controls loop poster="tiao.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的破浏览器该扔了，不支持视频标签
</video>
