HTML_出入小白二

一、表格table的使用
1. 创建表格：
tr 行 td 单元格

		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

2.表单属性：

3.表头标签：

表头一般位于表格的第一-行或第一 列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td> </td>即可。

<tr>
				<th>性别</th>
				<th>年龄</th>
				<th>地址</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>男</td>
				<td>20</td>
				<td >九江</td>
			</tr>
			<tr>
				<td>女</td>
				<td>20</td>
				<td >南昌</td>
			</tr>
			<tr>
				<td>女</td>
				<td>20</td>
				<td >上饶</td>
			</tr>

效果表头标签变粗了

4.表格结构：

<thead></thead> 表的头部

<tbody></tbody>表的主体

5.表格标题：

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

表格标题是在表格<table></table>里面且和表格一起联动

6.合并单元格：

跨行合并： rowspan

			<tr>
				<td>男</td>
				<td>20</td>
				<td  rowspan="2">九江</td>
			</tr>
			<tr>
				<td>女</td>
				<td>20</td>
				
			</tr>

跨列合并：colspan 也是同样的道理

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

1. 表单控件：<input /> 控件 单标签
   在上面的语法中，标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标签还可以定义很多其他的属性，其常用属性如下表所示。
   
   文本框：用户：<input type="text" />
   密码框：密码：<input type="password" />maxlength设置字符长度
   单选按钮：性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>
   复选按钮：爱好：<input type="checkbox" name="hoby" />游戏<input type="checkbox" name="hoby" />运动<input type="checkbox" name="hoby" />躺尸
   默认选中项:checked=checked
   
   input按钮组：
   1.button按钮：<input type="button" value="普通按钮" />
   2.submit提交按钮：<input type="submit" value="提交按钮"/>
   3.image图像形式的提交按钮：<input type="image" src="https://img.alicdn.com/tfs/TB1WLwef639YK4jSZPcXXXrUFXa-1190-90.jpg" data-spm-anchor-id="a231o.13503973.28744943.i0.140568edNAmWTj">"
   4.file文件域：<input type="file" />
   
2. label标签：<label></label>
   如果 label里面有多个表单 想定位到某个 可以使用 for id 格式来实现

<label for="two">账号：<input type=""password"/></label><label><input type=""password" id="two"/></label>

效果：点击账号是主动焦点到第二个文本框

2. textarea <textarea></textarea> 控件 文本域 (用来发表言论 留言之类)

3. 下拉菜单

		<select>
			<option>北京</option>
			<option selected="selected">上海</option>
			<option>广州</option>
			<option>南昌</option>
	    </select>

4.表单域
注：如果你写的这个页面需要提交或者换到另一个页面 我们都需要通过form表单域来提交 通常提交方式有get和post俩种方式。

三、 HTML5新标签与特性 可以登入https://www.w3school.com.cn/index.html 进行查看

1. 文档类型设定以及字符设定：
   
2. 常用新标签：
   
   datalist 标签的使用：

 <input type="text" list="phone" />
	    <datalist id="phone">
	    	<option>小米4
	    	<option>小米5
	    	<option>小米6
	    	<option>小米7
	    	<option>小米8
	    </datalist>

效果：

注：<datalist ></datalist > datalist标签作用效果与 <selcet></select> select 标签相似 都具有下拉菜单功能，但是其功能比select强大 具有提示。option可以写成单标签形式。

• <fieldset></fieldset>fieldset 标签的使用 fieldset 元素可将表单内的相关元素分组，打包 与 legend 标签搭配使用

 <fieldset>
    <legend>健康信息</legend> 此处为标题
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>

效果：

3.新增的 input type 属性值
4.常用新属性：
placeholder效果：

autocomplete使用条件：1.首先需要提交按钮 2.必须给表单名字

5.多媒体标签：
<embed></embed>
<audio></audio> 音频标签

<video></video>视频标签