一、表格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个部分构成。
- 表单控件:
<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" />
- 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 进行查看
- 文档类型设定以及字符设定:
- 常用新标签:
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>
视频标签