HTML常用标签

Ranze
127 阅读1分钟

1. a 标签的用法

属性：

href : 给出链接指定的网址

  • href取值为： 网址：
  1. google.com
  2. google.com
  3. //google.com （用此种方式能自动识别是https还是http） 路径：
    /a/b/c以及a/b/c
    index.html以及./index.html
    伪协议：
    1. javascript：代码（以下表示一个什么也不做的a标签）
<a href="javascript:;">查看</a>
  1. mailto:邮箱
  2. tel:手机号 id:
    href=#xxx 跳至xxx

target : 指在哪个窗口创建链接

  • target取值为：
  1. _blank 空白窗口打开
  2. _top 顶级窗口打开
  3. _parent 当前链接上一层窗口打开
  4. _self 自己窗口打开

download: 下载页面（很多浏览器不支持）

作用：

  1. 跳转到外部页面
  2. 跳转到内部锚点
  3. 跳转到邮箱或电话等
   <a href="//baidu.com" target="_blank">超链接</a>
   <a href="index.html">c.html</a>
   <a href="mailto:1234556@qq.com">发邮件给我</a>
   <a href="tel:1234567">打电话给我</a>
   <a href="javascript:;">查看</a>

2. img 标签的用法

  • 作用：发出get请求，展示一张图片 *属性：
<img src="1.png" alt="加载失败则显示">

width:宽
height:高
scr:用来指定图片路径

  • 事件： 监听图片是否加载成功
  1. onload 加载成功
  2. onerror 加载失败
  • 响应式：
img { max-width: 100%;}

使图片适应不同的设备

3. table 标签的用法

相关的标签

table thead tbody tfoot tr td th
用法如下：

<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>
       </tbody>
       <tfoot>
           <tr>
               <td>空</td>
               <td>空</td>
           </tr>
       </tfoot>
   </table>

效果如下：

2.png

相关的样式

table-layout: auto 宽度随字变多而变大
table-layout: fixed 宽度平均
border-collapse: 0 表示border之间的距离
border-spacing: collapse 合并border

4. 其他

input和button的区别

input不支持其他标签，只能有纯文本
button里面能有任何标签

制作跳转目录

nav 用id来识别跳转

<nav>
       <ol>
           <li><a href="#people">个人简介</a></li>
       </ol>
   </nav>
   
 <h1 id="people">个人简介</h1>


资料参考：饥人谷

avatar
文章
阅读
粉丝