永远不要双击打开HTML文件，必须通过输入网址打开
方法一：用http-server
①新建终端
②终端输入命令：yarn global add http-server
③终端输入命令：http server . -c-1（会出现几个地址，http server可以缩写为hs）
④把地址输入浏览器，加上路径访问如：http://192.168.0.104:8081/a-herf.html
方法二：用parcel
①新建终端
②终端输入命令：yarn global add parcel
③终端输入命令：parcel a-href.html
④把得到的地址输入浏览器http://localhost:1234
HTML常用的几个重要标签
1.a 标签
a标签的作用
-
跳转到外部页面
-
跳转到内部锚点
-
跳转到邮箱或电话等
a标签属性
- a的href取值
(1)网址
-//google.com（最高级，自动选用http或者https协议，推荐选用，不容易出问题）
<a href="//google.com">超链接</a>
(2)路径（相对路径和绝对路径，动手多操作几遍）
-/a/b/c 以及 a/b/c
-index.html 以及 ./index.html
(3)伪协议
-javscript:连接到js
-mailto:发送邮件
-tel:拨号
-id可以连接到指定id的标签位置
<a href="#123">跳到123</a>
- a的target取值
(1)_blank
新窗口打开
<a =href"//google.com" target="_blank">blank</a>
(2)_top
当前页面顶级窗口打开
(3)_self
当前页面打开
(4)_parent
父级窗口打开
- download
下载页面，不是所有的浏览器都支持，尤其是手机浏览器可能不支持
2.img标签
(1)作用
发出get请求，展示一张图片
<img id=xxx src="dog.png"alt="一只狗"height="800">
(2)属性
src(source):用于指示图片的引用路径
alt(alternative):当图片加载失败的时候可以显示内容，可以文字也可以是其他图片
width：宽度
height：高度 // 设置了高度就不要设置宽度，防止图片变形
(3)事件（监听图片加载成功还是失败）
-onload（图片加载成功）
-onerror（图片加载失败）
(4)响应式布局
max-width:100%;一般在程序上加上这个，便于手机用户查看图片
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
img{
max-width:100%;
}
</style>
3.table标签
table标签的基本结构
<table>
<thead>
<tr>
<th></th>
<th>小红</th>
<th>小明</th>
<th>小敏</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>80</td>
<td>60</td>
<td>70</td>
</tr>
<tr>
<th>语文</th>
<td>85</td>
<td>65</td>
<td>75</td>
</tr>
<tr>
<th>英语</th>
<td>88</td>
<td>68</td>
<td>78</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>253</td>
<td>193</td>
<td>223</td>
</tr>
</tfoot>
</table>
-thead（表头）
-tbody（表中）
-tfoot（表尾，tfoot无论放在tbody前面还是后面都不会有影响）
-tr （table row 行）
-td（table data 数据）
-th （表头单元格）
table的属性
table-layout: auto;
<style>
table{
width: 600px;
table-layout: auto; // 表格单元格的布局取决于内容
}
td,th{
1px solid blue;
}
</style>
table-layout:fixed;
<style>
table{
width: 600px;
table-layout: fixed; // 表格单元格固定
}
td,th{
1px solid blue;
}
</style>
<style>
table{
width: 600px;
table-layout: fixed;
border-spacing: 30px;
border-collapse: collapse; // 边框合并
}
td,
th{
border: 1px solid blue;
}
<style>
table{
width: 600px;
table-layout: fixed;
border-spacing: 10px; // 相隔10px
}
td,th{
1px solid blue;
}
</style>
<style>
table{
width: 600px;
table-layout: fixed;
border-spacing: 30px; // 相隔30px
}
td,th{
1px solid blue;
}
</style>
