Study Day03-9.10

HTML第二天

表格、表单、HTML5新属性

上午的学习

表格 table

1.创建表格

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

a、table 用于定义一个表格
b、tr 是定义表格中的一行，必须嵌套在table标签内，table中包含几对tr就有几行表格
c、td 就是单元格，必须嵌套在tr标签内，tr有几个td就表示有几个单元格(就是几列)

2.表格属性

border	边框 默认值为0	像素值(px)
cellspacing	设置单元格和单元格之间的间距	像素
cellpadding	设置单元格内容和单元格的间距	像素
width	表格的宽度	像素
height	表格的高度	像素
align	设置表格的水平对齐方式	left，center，right

3.表格标题

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

4.合并单元格

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

合并单元格的思想：

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

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

合并的顺序 先上 先左

表单标签

表单控件：

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

提示信息：

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

表单域：

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

1.input控件

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

2.label标签

label 标签为 input 元素定义标注（标签）。

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

3.textarea控件(文本域)

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

4.下拉菜单

<select>
	<option></option>
	<option></option>
	...
</select>

5.表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

action:  url地址
method:  提交方式
name :  表单的名称，区分同一界面的多个表单

每个表单都要由自己表单域

HTML5新标签与特性

1.文档类型设定

• document

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

2.常用新标签

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

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

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

• article：定义文章。

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

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

---

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

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

  legend:标题
  3.新增的input type属性

email   <input type="email">
tel    <input type="tel">
date   <input type="date">
month    <input type="month">
week    <input type="week">

多媒体标签

• audio：播放音频
• video：播放视频

autoplay 自动播放

controls 是否显不默认播放控件

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

下午的练习

1.今天讲的标签内容多敲几遍
2.实现截图上的页面

3.将昨天的购物网站用表格布局试着实现