day03 表格标签，表单标签，HTML5新标签与特性，多媒体标签

html学习目标：
–学习表格标签
–学习表单标签
–学习音频表单标签

表格标签

表格时常用的一种标签，但不是用来布局，常用来处理现实表格数据

创建表格

创建表格的代码及基本语法，如下：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

创建表格有三队基本标签缺一不可,分别为 <table> </table>, <tr> </tr>, <td> </td>

1.table 用语定义的一个表格整体
2.tr 是定义表格中的一行，必须在table中，table中有几对tr，表格就有几行
3.td 就是单元格，必须在tr标签中，一对tr中有几对td就代表这行表格中有几个单元格

注意

tr中只能嵌套td或者th
td和th中可以有任意元素

表格属性

border	边框 默认值为0	像素值（px）
cellspacing	设置单元格之间的距离	像素值
cellpadding	设置单元格内内容与单元格的距离	像素值
width	表格的宽度	像素值
height	表格的高度	像素值
align	表格的对其方式	center，left，rught

表头

表头一般用于表格的第一行，其文本加粗居中，设置方式是将表格第一行中的td标签替换成th标签

表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：
<thead></thead>：用于定义表格的头部。
必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

表格标题

表格的标题： caption
定义和用法
caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

合并单元格（难点，重点）

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

​将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

​ 公式： 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

表格总结

1.html提供的表格是数据的方法

2.表格由行中的单元格组成

3.表格没有列元素，列的个数由单元格个数决定

4.表格不要纠结外观，css来管

表格学习要求：能手写表格结构，并且能合并单元格

表单标签

现实中的表单，类似我们填的单子。

目的是为了收集用户信息。

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：

​ 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

​ 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

​ 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input控件（重点）

单标签： br，hr，input

在上面的语法中，<input/>标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input/>标签还可以定义很多其他的属性，其常用属性如下表所示。

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	多选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认值
size	正整数	控件在页面中显示的宽度
checked	checked	定义选择控件中默认被选中的项
maxlength	正整数	控件允许输入的最大字符数

label标签（理解）

label 标签为 input 元素定义标注（标签）。
datalist 和input结合使用
fielest 分组标签
legent 标题

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

具体演示代码如下：

<label for="name">姓名：</label><input id="name" type="text" placeholder="请输入学生姓名">

textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行的字符数" rows="显示的行数">
			
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select name="" id="school">
	<option value="">请选择学院</option>
	<option value="">浙江大学</option>
	<option value="">宁波大学</option>
	<option value="">浙江工贸职业技术学院</option>
</select>

注意：
1.<select></selcet>中至少包含一对<option></option>
2.在option 中定义selected =" selected "时，当前项即为默认选中项。

HTML5新标签与特性

1993标记语言第一版

1995 2.0

1996 3.2 w3c推荐标准

1999 4.0

2000 XHTML1.0 相比与html，更严格，扩展了html

2001 xhtml1.1

2008 HTML5

文档类型设定

HTML: 输入 html:4s
XHTML: 输入 html:xt
HTML5 输入 html:5

字符设定

<meta http-equiv="charset" content="utf-8">：HTML与XHTML中建议这样去写
<meta charset="utf-8">：HTML5的标签中建议这样去写

常用新标签

w3c 手册中文官网 : http://w3school.com.cn/

• header：定义文档的页眉 头部

• nav：定义导航链接的部分

• footer：定义文档或节的页脚 底部

• article：定义文章。

• section：定义文档中的节（section、区段）

• aside：定义其所处内容之外的内容 侧边

• datalist 标签定义选项列表。请与 input 元素配合使用该元素

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

新增的input type属性值：

类型	使用示例	含义
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框（体现语义化）
range	<input type="range">	自由拖动滑块
time	<input type="time">	小时分钟
date	<input type="date">	年月日
datetime	<input type="datetime">	时间
month	<input type="month">	月年
week	<input type="week">	星期 年

常用新属性

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名">	占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus	<input type="text" autofocus>	规定当页面加载时 input 元素应该自动获得焦点
multiple	<input type="file" multiple>	多文件上传
autocomplete	<input type="text" autocomplete="off">	规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required	<input type="text" required>	必填项 内容不能为空
accesskey	<input type="text" accesskey="s">	规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式

多媒体标签

• audio：播放音频

• video：播放视频

多媒体 audio

HTML5通过<audio>标签来解决音频播放的问题。

使用相当简单，如下图所示

并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay 动播放

controls 是否显不默认播放控件

loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环

多媒体 video

HTML5通过<audio>标签来解决音频播放的问题。

同音频播放一样，<video>使用也相当简单，如下图

同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

总结

会使用表格 — 掌握常用表单 – html5的新特性