1.a标签
a标签的属性与功能
1.href指定一个网址<a href="https://taobao.com">淘宝网</a>
href的取值：
1.<a href="https://baidu.com">百度搜索</a>
2.<a href="http://baidu.com">百度搜索</a>
3.<a href="//baidu.com">百度搜索</a> <!--无协议网址-->
4.<a href="/filea/fileb/index.html">网页</a>
<!--第一个“/”表示当前目录，因为http服务是在当前目录打开的，不表示硬盘根目录-->
5.<a href="file1/file2/index.html">网页</a>
<!--可以不加“/”，此时为相对路径-->
6.<a href="index.html">网页</a>
7.<a href="./index.html">网页</a>
<!--都是在当前目录下寻找并打开index.html-->
8.<a href="javascript:alert(1);">JavaScript伪协议</a>
<!--点击链接后弹出一个对话框-->
<a href="javascript:;">空的伪协议</a>
<!--点击链接后，没有任何变化-->
<a href="#">查看</a>
<!--点击链接后，页面跳转到顶部-->
<a href="#xxx">查看</a>
点击链接后，页面跳转到id为xxx的标签上
<a href="mailto:unizhoulu@gmail.com">发邮件给鲁鲁</a>
<a href="tel:131****5200">打电话给鲁鲁</a>
2.target指定在什么窗口打开超链接
<a href="https://taobao.com" target="_blank">淘宝网</a>
<!--在空白页打开淘宝网-->
<a href="https://taobao.com" target="_self">淘宝网</a>
<!--在当前页面打开淘宝网-->
<a href="https://taobao.com" target="_top">淘宝网</a>
<!--在最顶层的窗口打开淘宝网，此处引入新概念“iframe”-->
<a href="https://taobao.com" target="_parent">淘宝网</a>
<!--在父级窗口打开淘宝网-->
3.download属性，下载网页，很多浏览器不支持
4.rel=noopener
使用bash终端打开html网页的方法
1.安装工具yarn global add parcel
2.使用parcel打开网页parcel index.html
2.iframe标签
用于在一个网页中内嵌另一个网页，已经极少使用
3.table标签
语法如下
<table>
<thead> <!--表头-->
<tr> <!--一行-->
<th>日期</th> <!--表头-->
<th>销售额</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020/05/28</td>
<td>12432元</td>
</tr>
<tr>
<td>2020/05/29</td>
<td>29652元</td>
</tr>
</tbody>
<tfoot> <!--表尾-->
</tfoot>
</table>
4.img标签
<img src="./1.png">
作用
发出get请求，展示一张图片
属性
1.<img src="1.png" alt="图片1">
<!--src为图片地址；如果图片加载失败，alt属性会提示图片名称为“图片1”-->
2.<img src="1.png" width="100">
<img src="1.png" width="100">
<!--写宽度，高度会自适应；高度同理；同时规定高度和宽度，可能会使图片变形（切忌让图片变形）-->
事件
onload/onerror：监听图片是否加载成功
<img id="xxx" src="1.png" alt="图片1">
<script>
xxx.onload = function(){
consolo.log("图片加载成功");
};
xxx.onerror = function(){
consolo.log("图片加载失败");
xxx.src = "./2.png" <!--如果图片加载失败，则显示当前目录下的图片2-->
};
</script>
响应式
让页面中所有的图片都为响应式
<head>
<style>
img{
max-width:100%; <!--让所有图片响应式展示-->
}
</style>
</head>
5.form标签
表单
作用
发出get或者post请求，然后刷新页面
属性
action
autocomplete：控制自动填充
method
target：控制提交到哪个页面
<form action="./xxx" method="POST" autocomplete="on" target="_blank"> <!--action相当于img标签中的src属性，控制请求哪个页面;method属性控制使用“GET”或“POST”来请求页面-->
<input name="username" type="text"> <!--输入框-->
<input type="submit"> <!--提交按钮-->
</form>
事件
onsubmit：想要触发submit，form标签中必须有type为submit的标签
<form>
<!--form标签必须有一个类型为submit的标签-->
<input type="text">
<input type="submit" value="登录">
<!--value属性可以更改按钮文案-->
<button type="submit"><strong>登录</strong></button>
<!--相对于input的提交标签，button提交标签中可以增加更多标签-->
<!--button的type默认为submit-->
</form>
6.input标签
作用
让用户输入内容
事件
1.<input type="text">
<!--用户可以输入文本-->
2.<input type="color">
<!--用户可以选择颜色-->
3.<input type="password">
<!--用户可以输入密码，显示为*****-->
4.<input name="gender" type="radio">男
<input name="gender" type="radio">女
<!--用户可以单选-->
5.<input name="hobby" type="checkbox">唱歌
<input name="hobby" type="checkbox">跳舞
<input name="hobby" type="checkbox">画画
6.<input type="file">
<!--用户可以上传一个文件-->
7.<input type="file" multiple>
<!--用户可以上传多个文件-->
8.<input type="hidden">
<!--给js自动填写id使用-->
9.<textarea style="resize:none;width:50%;height:300px"></textarea>
<!--用户可以多行输入，规定了样式：输入框大小不能改变，宽度50%，高度300像素-->
10.<select>
<option value="">请选择</option>
<option value="1">一月</option>
<option value="2">二月</option>
</select>
<!--用户可以在下拉框中选择一个值-->
