WEB前端之HTML基础（三）

六 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,root@xxxx.com">告诉搜索引擎你的站点的制作的作者；

网页标题：

<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>