HTML常用标签
a标签的用法
属性
harf：跳转外部页面，规定链接指向的页面的 URL，可用于跳转到邮箱或者电话target：跳转内部锚点，在指定的窗口打开超链接。<a href="https//goole.com" target="_blank">超链接</a>
作用
- 网址
<a href="https//goole.com"></a>
<a href="http//goole.com"></a>
<a href="//goole.com"></a>
eg:只要写网址，就写 //google.com,会自动选择使用http还是https路径
<!--绝对路径 就是硬盘上文件的路径-->
<a href="/a/b/c.html"></a>
<!--相对路径 就是相对于当前文件的路径。-->
<a href="c.html">同目录下文件间互相链接</a>
伪协议
<!--:alert(1)可以直接使用js -不推荐使用-->
<a href="javascript:alert(1)">javascript伪协议</a>
<!--点击之后不会跳转的标签 -推荐使用-->
<a href="javascript:;">查看</a>
<!--IP地址后面会加上#XXX,同时会跳转到指定的标签-->
<a href="#xxx;">查看xxx</a>
<p></p>
<p id="xxx"></p>
<p></p>
<!--发送邮件：mailto:邮箱-->
<a href="mailto:123456@qq.com">发邮件给poly</a>
<!--tel:手机号-->
<a href="tel:12345678901">打电话给poly</a>
- a的target取值
<!--target="_blank" 连接跳转到新的页面-->
<a href="http://baidu.com" target="_blank">百度</a>
<!--target="_self" 连接在当前页面打开连接-->
<a href="http://baidu.com" target="_self">百度</a>
<!--target="_top" 打开时忽略所有的框架-->
<a href="http://baidu.com" target="_top">百度</a>
<!--target="_parent" 在父窗口中打开。-->
<a href="http://baidu.com" target="_parent">百度</a>
table标签的用法
相关的标签
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超级</td>
</tr>
<tr>
<td>target</td>
<td>目标</td>
</tr>
<tr>
<td>reference</td>
<td>引用</td>
</tr>
<tr>
<td>frame</td>
<td>边框、框架</td>
</tr>
<tr>
<td>error</td>
<td>错误</td>
</tr>
</tbody>
</table>
相关的样式
table-layout：CSS属性定义了用于布局表格单元格，行和列的算法。
border-collapse:属性是用来决定表格的边框是分开的还是合并的。
border-spacing属性指定相邻单元格边框之间的距离
table {
width: 600px;
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
img标签的用法
作用 发出get请求，展示一张图片
- 属性
alt图片加载失败后显示的提示文字
width 给图片设置宽度 只写宽度，高度为自适应
height 给图片设置高度 只写高度，宽度为自适应
- 事件
<!--onload/onerror图片加载失败可替换其他图片-->
<body>
<img src="3.jpg" alt="lisa" id="xxx">
</body>
<script>
xxx.onload = function () {
console.log('图片加载成功');
}
xxx.nerror = function () {
console.log('图片加载失败');
xxx.src = '2.png';
}
</script>
</html>
- 响应式
<!--max-width: 100%;自适应所有浏览器页面-->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
form标签
- 发get或post请求，然后刷新页面
action 请求到路径的页面
method 控制get或者post请求页面
<body>
<form action="/yyy">
<form action="/yyy" method="POST">
<input type="submit"></form>
</body>
autocomplete="on" 浏览器能够根据用户之前在表单里输入的值自动补全。
target="_balck"用来指示在提交表单之后，在哪里显示收到的回复.
<form action="/yyy" method="POST" autocomplete="on" target="_balck">
<input name="username" type="text">
<input type="submit"></form>
<input type="submit" value="提交">
<button type="submit"><strong>提交</strong></butto>
