HTML常用标签
-
a 标签的用法：标签定义超链接，用于从一张页面链接到另一张页面。主要属性有href、target、download、rel等，href指示超链接目标，可以取网址、相对路径、绝对路径、伪协议进行跳转，target属性规定在何处打开链接。
<a href="//google.com">超链接</a>
<a href="./index.html">找当前目录下的index.html</a>
<a href="javascript:alert(1);">javascript伪协议</a>
<a href="mailto:258976882@qq.com">发邮件给xx</a>
<a href="tel:15889294177">打电话给xx</a>
- 通过iframe标签的src属性可实现页面嵌套
a-target.html
<iframe width="700" height=" 700" src="a-target-iframe.html"frameborder="0"></iframe>
a-target-iframe.html
<body style="background: red;">
我是 iframe
<iframe src="a-target-iframe-2.html"></iframe>
</body>
a-target-iframe.html
<body style="background: green;">
我是 iframe:2
<hr />
里面有一个 a 标签
页面嵌套
2.通过target="_parent"属性可以将页面加载到上一级嵌套页面中
<a href="http://baidu.com" target="_parent">parent</a> </body>
3.通过设置同一个target可实现百度、google（目前不支持）快速切换
<a href="https://baidu.com" target="xxx">baidu</a>
<a href="https://google.com" target="xxx">google</a>
<hr />
<iframe style="border: none; width: 100%; height: 800px;"src=""name="xxx"></iframe>
4.或者设置不同target将二者合并到同一页面
<a href="https://baidu.com" target="xxx">baidu</a>
<a href="https://google.com" target="yyy">google</a>
<hr />
<iframe style="border: none; width: 800; height: ;"src="" name="xxx"></iframe>
<hr />
<iframe style="border: none; width: 800; height: ;"src=""name="yyy"></iframe>
-
img 标签的用法：发出get请求展示一张图片。主要属性有alt、height、width、scr等，scr指示图源，alt表示一个替代字，height、width设定高、宽且只写高或宽一项图片可自适应，注意不要让图片变形。
<body>
<img id="xxx" width="800" height="" src="gouzi.jpg" alt="一只狗子" />
<!-- alt表示显示一个代替字 只写高度或宽度会自适应，永远不要让图片变形 -->
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "404.png";
};
</script>
</body>
alt属性加载失败后显示文字
onload事件加载成功
onerror事件加载失败用其他元素替换
-
table 标签的用法：用于表格的展示，下一级标签thead、tbody、tfoot表示表格的头、身、尾，tr、td、th定义表格基本单元的行、元素项、头。务必按照层次使用各级标签，以防浏览器自己生成格式。
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
width: 600px;
table-layout: auto; //auto自动自适应间距，fixed自动固定间距
border-spacing: 0px; //边界线粗细
border-collapse: collapse; //合并边界线
}
td,
th {
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>小小小红</th>
<th>小明</th>
<th>小颖</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>61</td>
<td>91</td>
<td>85</td>
</tr>
<tr>
<th>语文</th>
<td>79</td>
<td>82</td>
<td>82</td>
</tr>
<tr>
<th>英语</th>
<td>100</td>
<td>97</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
</tfoot>
</table>
</body>
感想：HTML功能越来越丰富，学习过程需要抓住业务中的高使用频率及重点的标签和功能结合代码实践进行学习，其他低频次冷门标签功能依靠掌握好查询资源如MDN、google、知乎、百度来进行补缺，长此以往方能高效学习，不断精进。
