html标签(a)

405 阅读4分钟

a

<a href="http://www.baidu.com" target="_blank" ping="http://127.0.0.1:8081/ping">test</a>

作用

创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接.

属性

  • download(HTML5)

    <a href="URL" download="name">download</a>
    

    download属性为html5新增属性,该属性指示浏览器下载url而不是导航。download属性允许用户输入一个值,并将该值作为下载文件的名字保存(/\会被转换为下划线),

    download属性仅支持同源url,对于不同源url,downlaod属性不起作用,标签仍是导航作用。

    接受blod:url和data:url,方便用户下载js生成的内容(创建a标签)

  • href

    href表示用户希望导向的url,允许的值包括web文档,锚元素,以及浏览器支持的任何协议

    • 允许javascipt语句(不推荐)
    • #+"id":跳转到对应id元素位置,会引发hash的变化
    • url,跳转或唤起email,tel等
  • hreflang

    支持语言,无内置功能

  • ping

    <a href="http://www.baidu.com" target="" ping="http://127.0.0.1:8081/ping">test_ping</a>
    
    //对应报文一部分
    { host: '127.0.0.1:8081',
    'ping-from': 'http://127.0.0.1:8081/public/index.html',
    'ping-to': 'http://www.baidu.com/',}
    

    由浏览器发送带有正文ping的POST请求,常用于跟踪, 对应的ping-from,ping-to可用来统计。

    ping属性还可以用来进行DOS攻击

    <script>
        let link = document.createElement("a");
        link.href = "";
        link.ping = "http://127.0.0.1:8081/ping";
        document.head.appendChild(link);
        link.click();
    </script>
    

    只需对含有ping-from的属性进行请求进行屏蔽

  • rel

  • target

    指定在何处显示链接的资源,

    • _self:当前页面加载

    • _blank:新窗口打开,

      但在使用该属性取值时,需添加rel="noopener"来防止window.opener API的恶意行为。因为新打开的窗口与原窗口共用进程,可访问原窗口的window对象。

    • _parent

    • _top

默认样式(chrome)

注意事项

a标签不支持嵌套,在使用嵌套时,浏览器将嵌套关系解析为相邻关系,因此若要使用嵌套连接时,除了使用js进行控制之外,还可以使用area标签。

abbr

<abbr>Html</abbr>

作用

用于展示缩写,并且可以通过可选的title属性进行完整的描述,若使用title属性,则必须且仅包含完整的描述内容

属性

仅支持全局属性

默认样式(chrome)

address

<address>
    <a href="mailto:jim@rock.com">jim@rock.com</a><br>
    <a href="tel:+13115552368">(311) 555-2368</a>
</address>

作用

表示其中的HTML提供了某个人或者某个组织的联系信息(这个元素不能包含除联系信息之外的任何信息)

属性

全局属性

默认样式(chrome)

area

  <img src="test.jpg" alt=".." usemap="#MM">
  <map id="MM" name="MM">
    <area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
    <area shape="circle" coords="200,50,50" href="#circle" alt="圆形">
    <area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多边形">
  </map>

作用

在图片上定义一个热点区域,可以关联一个超链接。 可用来模拟链接标签的嵌套,或者类似于地图上不规则热点区域

属性

  • alt:未显示时替代的字符串
  • coords:与shape共同使用
  • download
  • href(HTML4中需要制定,html5中不需要)
  • hreflang
  • media
  • rel
  • shape
  • target

默认样式(chrome)

article

  <article>
    这是一篇文章
  </article>

作用

表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构

属性

全局属性

默认样式(chrome)

aside

  <aside>
    与主要内容无关
  </aside>

作用

示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。

默认样式(chrome)

audio

  <audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay controls
    Your browser does not support the <code>audio</code> element.
  </audio>

作用

插入音频

属性

  • autoplay(默认值为false):自动播放,使用时覆盖preload
  • buffered: 获取已缓冲的资源的时间段信息,该属性包含TimeRanges对象。(用途,自定义控制时,可以用来制作缓冲条)
  • controls:浏览器提供控制栏
  • loop:循环播放
  • muted:静音
  • preload:none表示音频不会被缓存,metadata表示获取元数据是有必要的(默认值),auto
  • src:音频url
  • volume:音量(0-1);

默认样式(chrome)