HTML基本标签(二)
-
- [表格标签 table](#表格标签 table)
- 媒体元素
-
- [audio 音频](#audio 音频)
- [vido 视频](#vido 视频)
- [form 表单元素](#form 表单元素)
表格标签 table
bash
<!--
caption 代表表格标题
相关属性
border 边框
cellpadding 设置单元格内填充
cellspacing 设置单元格间空隙
width 设置表格宽度,默认是内容撑起来的宽度
子元素
col 虚拟列
相关属性 span 设置合并的列
tr代表行
相关属性 align 设置行中每个单元格中内容的对其方式
子元素
td代表单元格
相关属性 width 设置单元格的宽度,这一列中最宽的单元格的宽度是这一列的宽度
align 对齐方式
rowspan 设置单元格合并的行数
colspan 设置单元格合并的列数
th代表标题单元格(会自动居中加粗)
width 宽度
align 对齐方式
-->
案例:
html
<table border="1" cellpadding="30" cellspacing="0" width="800">
<caption>表格标题</caption>
<!-- 第一列 -->
<col style="background: red;">
<!-- 第二列 -->
<col style="background: blue;">
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
<tr align="center">
<td>r</td>
<td width="400">r</td>
<td>r</td>
</tr>
<tr>
<td rowspan="2">er</td>
<td>er</td>
<td>er</td>
</tr>
<tr>
<td>er</td>
<td>er</td>
</tr>
<tr>
<td colspan="3">er</td>
</tr>
</table>
展示结果
媒体元素
audio 音频
相关属性:
-
src 设置音频资源路径
-
controls 控制音频播放器是否显示
-
autoplay 设置音频自动播放
-
loop 循环播放
vido 视频
相关属性:
- src 设置音频资源路径
- controls 控制音频播放器是否显示
- autoplay 设置音频自动播放
- loop 循环播放
- width 宽
- height 高
注意等比例变化
form 表单元素
html
<!--
form 表单元素
表单控件元素 input
name 设置控件名称
value 设置控件的值
placeholder 提示信息
autofocus 设置表单控件为焦点状态(可以键入的状态),一个表单使用一次
checked 默认选中 (单选复选)
disable 控件是否可用
readonly 只读
type 设置控件类型
text 单行文本框
password 密码框
radio 单选框
checkbox 复选框
file 文件上传器
submit 提交按钮
button 普通按钮
reset 重置按钮
color 颜色拾取器
number 数字输入框(只能输入数字)
min最小 max最大 step步长 (range )
range 滑块
date 日期
time 时间
datetime-local 本地日期时间控件
month 月
week 周
!!!name value 功能性必须要有
select 下拉框
name
size 设置显示下拉项个数
multiple 设置是否多选
子元素
option 下拉选项
value 下拉值
selected 默认下拉项选中
optgroup 选项组
label 下拉项组名
多行文本框textarea
name
cols 设置文本框的宽度
rows 设置多行文本框的高度
filedset元素和legend元素 主要是把表单控件分类
-->
案例:
html
<form action="" style="height: 300px;">
<input type="text" value="文本框">
<input type="password" placeholder="密码">
<input type="radio" id="">
<input type="checkbox">
<input type="file">
<input type="submit">
<input type="button" value="按钮">
<input type="reset">
<input type="color" name="" id="">
<input type="number" name="" id=""><br>
<input type="number" name="" id=""><br>
<input type="range" name="" id=""><br>
<input type="date" name="" id="">
<input type="time" name="" id="">
<input type="datetime-local" name="" id="">
<fieldset>
<legend>
信息
</legend>
<input type="text" value="文本框">
<input type="password" placeholder="密码">
<input type="radio" id="">
<input type="checkbox">
<input type="file">
<input type="submit">
<input type="button" value="按钮">
<input type="reset">
<input type="color" name="" id="">
<input type="number" name="" id=""><br>
<input type="number" name="" id=""><br>
<input type="range" name="" id=""><br>
<input type="date" name="" id="">
<input type="time" name="" id="">
<input type="datetime-local" name="" id="">
</fieldset>
</form>
结果: