day03
目录
前言
第三天学习开始
一、常用标签
1.表格标签
1.table标签，是整个表格的最外层标签，table是拥有一套完整标签体系的父标签
2.thead表头标签
3.tbody表主体
4.tr行标签，可以存在于thead、tbody或者直接存在于table中
5.th和td都是列，但th有文字加粗功能，一般用在表头里当做标题列
6.表格的样式特点
1.每一行的其中一个列宽度会影响所有行的对应变化这一列的所有列都会变宽
2.每一竖列都会参照最宽的展现宽度
3.每一行的其中一个列高度会影响整个行的所有列高
4.每一行都会参照最高的那个列展现高度
7.合并单元格
1.在同一行中合并相邻的列叫做“跨列合并” colspan="x"
2.在同一个竖列中“跨行”合并列 rowspan="x"
3.先删单元格，删好了在写属性跨，千万不要先跨再删
练习 ：完成以下表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>xx班篮球三人赛</h1>
<table>
<tbody>
<tr>
<td rowspan="3">1组</td>
<td>甲</td>
</tr>
<tr>
<td>乙</td>
</tr>
<tr>
<td>丙</td>
</tr>
<tr>
<td rowspan="3">2组</td>
<td>甲</td>
</tr>
<tr>
<td>乙</td>
</tr>
<tr>
<td>丙</td>
</tr>
<tr>
<td rowspan="3">3组</td>
<td>甲</td>
</tr>
<tr>
<td>乙</td>
</tr>
<tr>
<td>丙</td>
</tr>
<tr>
<td colspan="2">冠军：2组</td>
</tr>
</tbody>
</table>
</body>
</html>2. 表单标签
1.form表单标签，在html中用于搜集不同类型的用户输入（不是唯一的方式）
2.action=""属性，指将表单中收集的用户信息，提交到后台的哪个接口地址。后台工程师给前台一个接口地址
3.method=""向后台提交数据使用的方式，GET/POST方式。
<form action="后台给的接口地址" method="GET"></form>3.input标签
1.input标签是一个单标签，行内标签
2.type属性是input标签的必要属性，默认值是text文本类型
3.type类型有很多，分别可以成为多种功能，主要用于收集用户信息
4.type="text"文本输入框，用于用户输入任何信息
5.type="password"密码输入框
6.placeholder="输入框的提示文字"，当用户开始输入提示文字消失
7.type="radio"单选框，多个单选框需要一个属性关联name属性，name值相同代表是一组单选
8.value=""代表初始值，或者用户选取的内容，用户输入的内容。value是input标签默认值，没有任何设置和输入的时候是空
9.type="checkbox"多选框，也必须有name值相同代表是一组多选
10.type="fifile"文件上传
1. multiple属性，选取多个，直接加在input中可以代表多文件上传，多列选择，按住ctrl选取多个
11.type="submit" 提交，必须要写在form表单中才能有提交功能
12.type="reset"重置，必须写在form表单中，点击之后输入内容全部清空
13.type="button"是一个普通按钮，可以用js赋予其他功能
14.html5新增的type类型有兼容问题，如果不考虑效果统一可以使用
1.type="color"颜色选取选框
2.type="number"数字选框
3.min="x"最小值
4.max="x"最大值
5.type="date"日期选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表单标签 -->
<form action="后台给的接口地址" method="GET">
<input type="text">
<input type="submit" value="百度一下">
<input type="reset" value="重置">
</form>
<!-- input -->
<input type="text" value="">
<input type="button" value="百度一下">
<!-- 密码框 -->
<input type="password" placeholder="输入框的提示文字">
<!-- 单选框 -->
<input type="radio" name="sex" value="0" id="a">
<label for="a">男</label>
<input type="radio" name="sex" value="1" id="b">
<label for="b">女</label>
<br>
<!-- 多选框 -->
<input type="checkbox" name="study" value="0">html
<input type="checkbox" name="study" value="1">css
<input type="checkbox" name="study" value="2">javascript
<br>
<!-- 文件上传 -->
<input type="file" multiple>
<br>
<!-- 按钮 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮"> <br>
<!-- 以下是html5新增的一些类型 -->
<!-- 兼容性 -->
<!-- 颜色 -->
<input type="color" value="#ff0000">
<input type="number" min="1" max="100">
<input type="date">
</body>
</html>4. label标签
1.label双标签，行内标签
2.for属性非常重要，可以关联某个input 的id属性值，这样label这个描述就可以和input相关联了
<input type="radio" name="sex" value="0" id="a">
<label for="a">男</label>5.下拉菜单
1.select标签 下拉菜单
2.option标签菜单项
3.value="x"是菜单项的必写属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 下拉菜单 -->
<select id="">
<!-- 菜单项 -->
<option value="0">请选择</option>
<option value="1">西安</option>
<option value="2">成都</option>
<option value="3">内蒙</option>
</select>
</body>
</html>6.文本域
1.textarea文本域，多文本的输入框。
2.cols="列（多少个字符）" rows="行"
3.style="resize: none;"实用样式加入不要改变尺寸的属性
<!-- 文本域 -->
<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>7.iframe
1.iframe标签内联框架 把其他的html页面嵌入到当前的html页面中
2.src属性：引入的页面地址
3.width：宽度属性，整个标签的宽度
4.height：高度属性，整个标签的宽度
<iframe src="https://www.taobao.com/" frameborder="0" width="1100px" height="900px">
</iframe>8.html5新增的一些标签
结构标签 ( 虽然不怎么用但是单词记下来以后当类名用 )
<header>网页的头部内容</header>
<footer>网页的页脚内容</footer>
<nav>网页的导航内容</nav>多媒体标签
<!-- controls控制面板 -->
<video src="视频路径" controls></video>
<audio src="音频路径"></audio>总结
第二天学习结束
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
