HTML常用标签

2020-05-07 164 阅读2分钟

a标签

a标签常见属性：

href：规定被下载的超链接目标名
target：指定在何处显示链接的资源
download：指示浏览器下载 URL
ref=noopener

a的href取值：

网址

    <a href="">空链接，当前页面跳转，刷新页面</a>
    <a href="//www.google.com" target="_blank">打开新窗口，跳转到谷歌</a>
    <a href="//goole.com">会自动选择是http还是https<a/>

路径

可以是绝对路径也可以是相对路径
<a href=/a/b/c>打开根目录下的a目录下的b目录下的c文件</a>
<a href=a/b/c>打开a目录下的b目录下的c文件</a>
<a href=index.html>打开同页面的index.html文件</a>
<a href=./index.html>打开当前目录的index.html文件</a>

伪协议

  <a href="javascript:void(0)" >不跳转，网页上常用于button作用的a标签设置点击事件，阻止跳转</a>
  <a href="mailto:123@qq.com">发送邮件【mailto：会自动检测本机系统是否安装邮箱，如果有就会自动打开邮箱，没有则会提示用户选择邮箱或者没提示】</a>
  <a href="tel:123456789">一键拨打电话</a>
  <a href="sms:123456789">一键发送短信</a>
  <a href="#">空锚点，回到最顶端，不刷新页面</a>
  <a href="#xxx">跳转到xxx</a>
  <p id="xxx">锚点</p>

a的target取值：

 <a href="//www.google.com" target="_self">默认self,在当前页面打开谷歌</a>
 blank【在新窗口打开】 
 parent【在父窗体中打开链接】
 top【在当前窗体打开链接，并替换当前的整个窗体(框架页)】
 framename【在指定的框架中打开被链接文档，把frame看做内置浏览器】

img 标签的用法

作用：发送get请求，展示一张图片

属性：alt/height/width/src

事件：onload加载成功/onerror加载失败

响应式：max-width:100%

<img src="1.jpg" alt="图片1" width="400">

table 标签的用法

<table>
    <thead>
        <tr>
            <th >姓名</th>
            <th >性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

<tr>元素定义表格行<th>元素定义表头<td>元素定义表格单元<thead><tbody><tfoot> 把表格分成多个逻辑区域

最简单的表格

其他

简单的整理了一下常用的标签，要想真正记住还是得不断地实践，可以做做简单的网页去加深记忆。