HTML常用标签

255 阅读3分钟

a标签的用法

  • href的用法

  1. 最常见的用法是取值为一个网址时,网页上点击google会弹出取值里的网站
 <a href="//google.com" >google</a>
  1. 打开一个路径,可以用这种方法打开c.html
   <a href="/a/b/c.html">c.html</a>
  1. 跳转到内部锚点,此时点击a链接页面锚点变为aaa,使用锚点可以实现当前页面的跳转。具体可以举个例子,比如说你网页写了很多个P标签,你想实现点击aaa这个连接可以直接跳转回你写的第10个P标签,就可以用这个功能
<p10 id="xxx">10</p>
<a href="#aaa">aaa</a>

4.伪协议

<a href="javascript: alert(1);"></a> 

会执行href中的JavaScript代码

<a href="javascript:;"></a>

将不会执行任何操作

target用法

  1. _self:加载当前页面,如果没有指定属性,则此值为默认
  2. _top:加载响应进入顶层页面,如果没有父级框架或页面,效果与self相同
  3. _parant:在父级页面打开地址
  4. _blank:在新窗口打开

target属性的部分值需要有iframe配合使用。

  • table 标签的用法

table标签的学习直接上实例,比如说你想做一个这样的表格

以下是实现代码

 <body>
    <table>
      <thead>
        <th></th>
        <th>xixi</th>
        <th>haha</th>
      </thead>
      <tbody>
        <th>数学</th>
        <th>99</th>
        <th>87</th>
      </tbody>
      <tbody>
        <th>英语</th>
        <th>87</th>
        <th>88</th>
      </tbody>
    </table>
  </body>

thead:表头

tbody:表格内容

tfoot:表格底部(实例没有)

tr: 元素定义表格行(实例没有)

th: 元素定义表头

td: 元素定义表格单元(实例没有)

简单来说就是先用thead、tbody、tfoot定好框架,在每个框架里写th代表这个框架里的第一行元素,框架可以看作狭义的列。

相关的样式有

table-lyout:定义了用于表格单元格行列的算法,说白了就是设置数据怎么对齐之类的

border-collapse:设置边框

border-spacing:定义边框之间的距离

比如想做这样一个表格:

只要加上相应的样式就可以实现,样式多种,可以自行尝试

table {        table-layout: auto;        border-spacing: 20px;        border-collapse: ;       /**表格合并的话在冒号后加collapse*/      }      th {        border: 1px solid chocolate;      }

img标签

  • 作用:发出get请求,展示一张图片
  • 属性:

src:图片路径

alt:图片加载失败的时候显示的文字

height/width:设置宽高(一般只设置宽,高度会自适应)

<img width="" src="xxx.png" alt="" />

  • 响应式:若想图片在PC和手机端自适应,可以加这段操作

<style>      * {        margin: 0;        padding: 0;        box-sizing: border-box;      }      img {        max-width: 100%;      }    </style>


这些主要的属性还会有各种小分支,是关于细节方面的,多去了解尝试会做出更好看的页面。