HTML常用标签

367 阅读3分钟

1. <a>标签

作用:可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

<a>的属性:href, target, download.

href属性的用法

  • 跳转外部页面,如

      <a href="https://baidu.com">baidu超链接</a>
      <a href="http://baidu.com">baidu超链接</a>
      <a href="//baidu.com">baidu无协议网址</a>
    
  • 跳转内部锚点,使用锚点#,此时点击<a>标签不发送请求,如 <a href="#aaa">aaa<a/>,此时点击a链接页面锚点变为aaa,使用锚点可以实现当前页面的跳转;

  • <a>标签href内容为空,如 <a href="">baidu</a>,点击a链接会刷新当前页面;

  • 类似 <a href="name=xxx">a链接</a><a>标签,再点击后会发送一个GET请求,请求的值就是 name=xxx

  • 使用路径作为href的值, <a href="main.html">main</a>,点击后会跳转到 main.html

  • 伪协议: <a href="javascript: alert(1);"></a> 会执行href中的JavaScript代码,<a href="javascript:;"></a>将不会执行任何操作;

  • 跳转到邮箱电话,如

      <a href="mailto:lynnlzy@hotmail.com">发邮件给Lynn</a>
      <a href="tel:139653176627">拨打热线</a>
    

target属性的用法

  • _blank:在新窗口打开,如 <a href="https://baidu.com" target="_blank">baidu</a>则会在新窗口打开百度页面。
  • _self:加载当前页面,如果没有指定属性,则此值为默认;
  • _top: 加载响应进入顶层页面,如果没有父级框架或页面,效果与 _self相同;
  • _parent:在父级页面打开地址。

download属性的用法

  • 指示浏览器下载URL,保存到本地。

2. <img>标签

<img>的属性:alt, width, height, scr.

alt属性的用法

用来设定图片的文字说明。图片不显示时(比如下载失败,或用户关闭图片加载),图片的位置上会显示该文本。 <img src="404.jpg" alt="示例图片">alt是图片的说明。图片下载失败时,浏览器会在图片位置,显示文字“示例图片”。

width和height属性的用法

如果只设置一个,另一个没有设置,浏览器会根据图片的原始大小,自动设置对应比例的图片宽度或高度。

响应式

<style>img{max-width:100%}</style>使图片更兼容。

3.<table>标签

<thead>、<tbody>、<tfoot>都都是<table>的一级子元素,分别表示表头、表体和表尾。

<table>
    <thead>... ...</thead>
    <tbody>... ...</tbody>
    <tfoot>... ...</tfoot>
</table>        

<tr>标签表示表格的一行(table row)。<th><td>都用来定义表格的单元格。其中,<th>是标题单元格,<td>是数据单元格。

  <tr>
    <th>学号</th><th>姓名</th>
  </tr>
  <tr>
    <td>001</td><td>小明</td>
  </tr>
  <tr>
    <td>002</td><td>小林</td>
  </tr>
</table>

上面代码中,表格一共有三行。第一行是标题行,所以使用<th>;第二行和第三行是数据行,所以使用<td>