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>视频标签
在这里插入图片描述
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页