a 标签的用法
先写一个a标签,<a href="超链接的路径">超链接</a>
效果：超链接
1. 作用
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或电话等
2. a标签有几个属性，href,target,download等。
2.1 href（hyper refrence 超文本引用/链接）
以下几种取值：
<!--网址取值-->
<a href="//google.com">打开google</a>
<!--路径取值-->
<a href="./index.html">打开index.html</a>
<a href="a/b/c.html">打开c.html</a>
<!--伪协议取值-->
<a href="javascript:;">点击啥也不干的javascript伪协议</a><!-- 点击页面不会滚动 -->
<a href="mailto:renyi2009@qq.com">发邮件给renyi2009@qq.com</a>
<a href="tel:1234567890">打电话</a>
<!--锚点取值-->
<!--href="#"+"id名"-->
<a href="#xxx">到id=xxx的锚点</a>
2.2 target属性，取值有_blank,_self,_top,_parent这几种
<a href="//google.com" target="_blank">新窗口打开google</a>
<a href="//google.com" target="_self">本窗口打开google</a>
<a href="//google.com" target="_top">顶层窗口打开google</a>
<a href="//google.com" target="_parent">父级窗口打开google</a>
一般target="_top"和target="_parent"配合iframe标签一起使用
以下代码演示target="_top"和target="_parent"配合iframe使用的效果
<!--a.html页面-->
<body style="background: red;">
<h1>a.html页面</h1>
<a href="//google.com" target="_self">当前窗口打开google</a>
<a href="//google.com" target="_blank">新窗口打开baidu</a>
<iframe src="b.html" frameborder="0"></iframe>
</body>
<!--b.html页面-->
<body style="background: red;">
<h1>b.html页面</h1>
<iframe src="c.html" frameborder="0"></iframe>
</body>
<!--c.html页面-->
<body style="background: green;">
<h1>c.html页面</h1>
<a href="//baidu.com" target="_top">在顶层窗口打开baidu</a>
<a href="//baidu.com" target="_parent">在上一层窗口打开baidu</a>
<a href="//baidu.com" target="_self">在本窗口打开baidu</a>
</body>
以上代码效果如下图（对于c.html页面来说，a.html页面为顶层窗口，b.html页面为父级窗口，c.html页面为本窗口）
2.3 download属性
<a href="//google.com" download>下载页面</a>
a的download作用不是打开页面，而是下载页面。并且不是所有浏览器都支持，尤其是手机浏览器可能不支持。
img 标签的用法
1. 作用
发出 get 请求，展示一张图片。
2. 属性 src alt height width
src用来添加图片路径。
alt在图片没加载出来的情况下，可以给用户展示的一段话或词，不至于他人看到一张裂图还不知道是个啥。
height字面意思，设置图片的高度。
width字面意思，设置图片的宽度。
<!--为了防止图片变形，要么只设置宽度，要么只设置高度-->
<img src="dog.png" alt="狗" width="400px">
如果想要图片响应式效果，通俗讲，就是图片根据显示设备的大小自动缩放宽度，设置 max-width=100%;
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
3. 事件 onload onerror
onload当图片加载 成功 就怎么怎么样
onerror当图片加载 失败 就怎么怎么样
<body>
<img id="xxx" src="dog.png" alt="狗">
<script>
xxx.onload = function () { //图片加载成功
console.log('图片加载成功') //打印出‘图片加载成功’
}
xxx.onerror = function () { //图片加载失败
console.log('图片加载失败'); //打印出‘图片加载失败’
xxx.src = "404.png" //并且显示图片404.png
}
</script>
</body>
table 标签的用法
1. table相关标签 table,thead,tbody,tfoot
<table>和</table>用来包裹表格里面的所有内容。
<thead>,<tbody>,<tfoot>分别是<table>代表表格里面的 头，身，尾。
tr th td分别位于 <thead>,<tbody>,<tfoot>里面。
tr是 table row 的简称，指 表格的行。
th是 table heading 的简称，指 表格的头。
td是 table datacell 的简称，指 表格的单元格。
然后他们的关系如下：
thead >tr>th
tbody>tr>td
tfoot>tr>td
直接用代码来吧
<table>
<thead><!--表头-->
<tr><!--table row 表行-->
<th>成绩单</th>
<th>小小小小红</th>
<th>小明</th>
<th>小梅</th>
</tr>
</thead>
<tbody><!--表身-->
<tr>
<th>语文</th>
<td>90</td><!--表数据-->
<td>80</td>
<td>99</td>
</tr>
<tr>
<th>数学</th>
<td>88</td>
<td>90</td>
<td>85</td>
</tr>
</tbody>
<tfoot><!--表尾-->
<tr>
<th>总和</th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
2. table样式属性
table-layout: fixed/auto; auto会随这字数等其他属性自适应，而fixed 是尽量平均。
border-spacing: 10px; 控制border之间的距离
border-collapse: collapse; 控制border是否合并，默认是不合并的
<style>
table {
width: 600px;
table-layout: auto;/* 随这字数等其他属性自适应 */
border-spacing: 10px;/* 表格之间的10px的间隙 */
border-collapse: collapse;/* 表格间隙合并，border-spacing失效 */
}
td,th {
border: 1px solid rgb(160, 100, 100);
}
</style>
table-layout: auto效果如下：
table-layout: fixed效果如下：
