1. iframe标签
- 作用：嵌套界面
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx href="http://qq.com">QQ</a>
- 可以在嵌套界面里打开指定界面QQ
-
frameborder="0"设置隐形边框
- 嵌套界面支持相对路径
-
src="./index2.html"
可以支持嵌套本地相对路径的文件
2. a标签(anchor定义锚)
- 作用：跳转页面（HTTP GET 请求），href 属性指示链接的目标。
- target属性：
-
<a href="http://qq.com" target="_blank">blankQQ</a>
_balnk在空界面打开 -
<a href="http://qq.com" target="_self">selfQQ</a>
_self在本界面打开 -
<a href="http://qq.com" target="_parent">parentQQ</a>
_parent在父亲界面打开，意思就是如果该标签在嵌套的iframe里面，则打开它的上一级界面 -
<a href="http://qq.com" target="_top">topQQ</a>
_top如果存在iframe三级嵌套，就在最top界面打开
- download属性
<a href="http://qq.com" download>下载</a>
会直接下载HTML文件（有时候会出现浏览器兼容问题） - href属性
-
href ="http://qq.com"跳转http协议下的某个域名 -
href="//qq.com"表示与当前文件协议相同，当前文件如果是file协议，如果想成功访问http://qq.com，需要将当前页面变成http协议，
方法1：上传至github，使用页面预览功能
方法2：下载一个工具http-server,命令行输入hs -c-1，相当于运行一个node.js服务器，访问http协议下的IP地址http://127.0.0.1:8080/ -
href=#xxx跳转页面内的锚点，#表示锚点 -
href="?name=qq"查询字符串,自动发起GET请求 -
href="./xxx.html"跳转本地路径的的文件 -
href="JavaScript: alert(1);"/href="JavaScript:;"JS伪协议，点击可以出现有一个对话框，或者满足一种需求，点击一个标签，不要跳转。
3. form标签
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form action="users" method="post">
<label for="yyy">用户名</label>
<input type="text" name="用户名" id="yyy">
<label >密码<input type="password" value="密码"></label>
<br>
喜欢的水果
<label><input type="checkbox" name="fruit" value="apple">苹果</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>
<hr>
爱我
<label><input type="radio" name="loveme" value="yes">爱</label>
<label><input type="radio" name="loveme" value="no">不爱</label>
<select name="group" multiple>
<option value="">--</option>
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option>
<option value="4" selected>第四组</option>
</select>
<br>
<textarea name="爱好" style="resize: none;width: 100px;height:50px;"></textarea>
<!-- <textarea name="爱好" cols="30" rows="10"></textarea> -->
<input type="submit" value="提交">
</form>
</body>
</html>
- 作用：<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段（textarea）、复选框(checkbox)、下拉菜单（select）、单选框(radio)、提交按钮(submit)等等。只有声明name属性才能提交：name表示提交名字，value表示提交的值，表单用于向服务器传输数据。（发送HTTP POST 请求）
<form action="users" method="POST">
<input type="text" name="用户名">
<input type="password" value="密码">
<input type="submit" value="提交">
</form>
- target属性和<a>一样，可以支持iframe标签
- input标签里的type
- submit/button
必须要有提交按钮，否则表单内的内容无法提交
<input type="submit" value="提交">,<input type="button" value="提交">
type="submit"表示提交，type="button"只表示普通按钮，
但是只有<button>button</button>时默认为提交。 - text
表示输入的用户名用户名<input type="text" name="用户名" > - password
表示输入的密码密码<input type="password" value="密码"> - checkbox(复选框)
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
- radio(单选框)
<input type="radio" name="loveme" value="yes">爱我
<input type="radio" name="loveme" value="no">不爱
name设置相同时设置单选
-
text/password/checkbox/radio设置文字与输入或选中部分相关联的两种方法
1 用<label></label>将input包含（常用）
<label><input type="checkbox" name="fruit" value="apple">苹果</label>
2 设置label的for与input的id对应
<label for="yyy">用户名</label>
<input type="text" name="用户名" id="yyy">
- select(下拉菜单)
<select name="group" multiple>
<option value="">--</option>
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option>
<option value="4" selected>第四组</option>
</select>
默认选择：selected，不可选：disabled，可多选：multiple
- textarea(文本字段)
<textarea name="爱好" style="resize: none;width: 100px;height:50px;"></textarea>
<!-- <textarea name="爱好" cols="30" rows="10"></textarea> -->
设置文本框大小：用CSS精确设置；或者用默认的cols和rows（不精确）
4. table标签（表格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="2">
<colgroup>
<col width =100>
<col width =50 bgcolor= gray>
<col width =150>
</colgroup>
<tbody>
<tr>
<th>姓名</th><th>班级</th><th>分数</th>
</tr>
<tr>
<td>小明</td><td>1</td><td>95</td>
</tr>
<tr>
<td>小红</td><td>2</td><td>96</td>
</tr>
</tbody>
</table>
</body>
</html>
border="2"设置边框粗细
tabel是逐行写的：<tbody>表示主题，<tr>每行，<th>标题，<td>数据
<colgroup>设置每一列的宽和颜色
<style>里设置每列距离为0
5. 几种列表
- 描述列表<dl>，通常用于展示词汇表或者元数据 (键-值对列表)。
<dl>
<dt>年龄</dt> (Description Term)
<dd>18</dd> (Description Details)
<dt>所在城市</dt>
<dd>北京</dd>
</dl>
- 有序列表<ol>
<ol>
<li>HTML 5 & CSS 3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue</li>
<li>React</li>
<li>HTTP</li>
</ol>
- 无序列表
<ul >
<li><a href="#">关于</a></li>
<li><a href="#">技能</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">日历</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">其他</a></li>
</ul>
