iframe
通常用于在网页中嵌入另一个网页。
iframe是一个可替换元素。
- 通常时行盒。
- 通常显示的内容取决于属性。
- css不能完全控制其中的样式。
- 具有行快盒的特点。（盒模型中各个尺寸是可以设置的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
iframe {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="myfram">百度</a>
<a href="https://www.taobao.com" target="myfram">淘宝</a>
<iframe name="myfram" src="https://www.baidu.com" frameborder="0"></iframe>
</body>
</html>
在页面中使用flash
用来在网页中嵌入小游戏。有两种方式
- 通过 object元素，
data属性表示资源地址，type属性表示资源类型。（可以通过百度百科搜索MIME(多用途互联网邮件类型)，搜索文件后缀名来查看资源类型） - 通过 embed元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
object {
width: 300px;
height: 300px;
}
embed {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<object data="test.swf" type="application/x-shockwave-flash">
<!-- 可以传递参数 -->
<param name="" value="">
</object>
<embed src="test.swf" type="application/x-shockwave-flash"></embed>
<!-- 兼容写法 -->
<object data="test.swf" type="application/x-shockwave-flash">
<param name="movie" value="test.swf">
<embed src="test.swf" type="application/x-shockwave-flash"></embed>
</object>
</body>
</html>
表单元素
一系列元素，用来收集用户的信息。
input元素
输入框。
-
type属性：表示输入框的类型。
取值：
text：普通文本输入框。password：密码框。date：日期选择框，有兼容性问题。search：搜索框，有兼容性问题。range：滑块 ，可以通过 min和max属性去设置最小值和最大值。color：颜色选择。number：数字输入框，通过min和max属性设置最大值和最小值，step属性设置步进。checkbox：多选框，通过name属性辨别是哪个组，默认选中使用checket。radio：单选框，通过name属性辨别是哪个组，默认选中使用checket。file：表示选择文件。
-
value属性：表示输入框的值。
-
placeholder属性：显示提示的文本，文本框没有内容时显示。
select元素
下拉列表选择框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 添加属性multiple可以选择多项 -->
请选择城市：
<select name="" id="" >
<option value="1">北京</option>
<option value="2">上海</option>
<!-- 默认选中添加 seleted属性 -->
<option value="3" selected>广州</option>
<option value="4">深圳</option>
</select>
<!-- 分组 -->
请选择喜欢的主播：
<select name="" id="" multiple>
<optgroup label="男主播">
<option value="1">男主播1</option>
<option value="2">男主播2</option>
</optgroup>
<optgroup label="女主播">
<option value="3">女主播1</option>
<option value="4">女主播2</option>
</optgroup>
</optgroup>
</select>
</body>
</html>
textarea元素
文本域，多行文本网框。placrholder属性，cols属性：多少列 ，rows属性：多少行。默认显示内容需要写在标签里面。
按钮元素
button。
type属性：reset，submit，button，默认值是submit。
表单状态
readonly布尔属性，表示只读，不会改变表单样式。
disabled布尔属性，是否禁用，会改变表单样式。
配合表单元素的元素
label
普通元素，通常配合单选和多选框来使用。for属性表示关联到哪一个表单元素，值是表单元素的id。也可以直接将表单元素放在label元素里面。
datalist
数据列表，子元素 option。（通过id来关联到文本框的list属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
请输入你常用的浏览器：<input list="userAgent" type="text"></p>
<datalist id="userAgent">
<option value="chrome">chrome</option>
<option value="firefox">firefox</option>
<option value="opera">opera</option>
<option value="safari">safari</option>
</datalist>
</body>
</html>
form元素
通常，会将表单元素包裹，作用是提交表单时，会将form元素内部的表单内容，以合适的方式提交到服务器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- action 提交给谁 method 提交方式 要求表单元素都要写name属性 -->
<form action="https://www.baidu.com" method="get" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" placeholder="请输入用户名" required>
<input type="password" name="password" placeholder="请输入密码" required>
<input type="file" name="file" multiple>
<input type="checkbox" name="hobby" value="1">篮球
<input type="checkbox" name="hobby" value="2">足球
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
filedset
分组元素，将表单元素分组。里面有个legend元素，可以写分组名称。
美化表单样式
新的伪类
- focus：元素聚焦是的样式。是所有元素都有的伪类，可以通过键盘的tab键来聚焦，可以通过给元素添加一个
tabindex属性，来控制tab的切换顺序。
需要覆盖的默认样式：outline（外边框），浏览器默认设置了outline-offset偏移，如果要覆盖，也得重写这个样式。
- checked：单选或多选被选中的样式。通过这个伪类可以修改选中的样式。
常见用法
- 重置表单元素样式
input,textarea,button,select{
border: none;
}
input:focus,textarea:focus,button:focus,select:focus{
outline: none;
outline-offset: 0;
}
-
设置 textarea 元素是否允许调整尺寸。
css resize属性调整；
- both：默认值，水平垂直都可以调整。
- none：不能调整。
- horizontal：水平方向可以调整。
- vertical：垂直方向可以调整。
-
文本框文字到边缘的距离：
- 通过padding
- text-index 首行缩进
-
控制单选和多选的样式
通过自己写元素来实现，通过checked伪类来选中元素，最后将单选框或者多选框隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.radio-item {
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid #000;
border-radius: 50%;
}
input[type="radio"]:checked+.radio-item {
border: 2px solid #008c8c;
}
input[type="radio"]:checked+.radio-item::after {
content: "";
display: block;
width: 6px;
height: 6px;
background-color: #008c8c;
border-radius: 50%;
margin: 2px;
}
input[type="radio"]:checked+.radio-item+span {
color: #008c8c;
}
input[type="radio"] {
display: none;
}
</style>
</head>
<body>
<p>
请选择性别：
<label>
<input type="radio" name="sex" id="">
<span class="radio-item"></span>
<span>男</span>
</label>
<label>
<input type="radio" name="sex" id="">
<span class="radio-item"></span>
<span>女</span>
</label>
</p>
</body>
</html>
开发技巧：在制作登录输入框输入错误的时候，可以给form-item添加一个错误类样式来统一控制。这样就很方便，也方便控制输入框的样式，比如说边框边红，将错误提示的元素设置为display：block。
表格元素
表格术语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 100%;
/* 合并相邻边框 */
border-collapse: collapse;
}
table caption {
font-size: 20px;
font-weight: bold;
}
table th,
td {
border: 1px solid #000;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>这是表格的标题</caption>
<!-- 表头 -->
<thead>
<!-- 行 -->
<tr>
<!-- 表头 -->
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<!-- 单元格 跨越2行-->
<td rowspan="2">单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<!-- 合并单元格，跨域5列 -->
<td colspan="5">合并：xxx</td>
</tfoot>
</table>
</body>
</html>
其他元素
- meta元素：
可以用于搜索引擎优化。
- link元素：
用于链接外部资源（css，图标）。
rel属性：链接的资源和当前网页的关系。
