HTML入門2：html經常使用的標籤

時間 2020-04-29

標籤 html 入門經常使用標籤欄目 HTML 简体版

原文原文鏈接

本文爲HTML中經常使用標籤的用法。其中包括a標籤，img標籤，table標籤，from標籤javascript

1、a 標籤的用法

1.屬性

href：跳轉外部頁面，規定連接指向的頁面的 URL，可用於跳轉到郵箱或者電話

<a href="https//goole.com">超連接</a>css

target：跳轉內部錨點，在指定的窗口打開超連接。

<a href="https//goole.com" target="_blank">超連接</a>html

2.做用

一、 a的href的取值

網址：

<a href="https//goole.com"></a>
 <a href="http//goole.com"></a>
 <a href="//goole.com"></a>

複製代碼

路徑

<!--絕對路徑 就是硬盤上文件的路徑-->
<a href="/a/b/c.html"></a>
<!--相對路徑 就是相對於當前文件的路徑。-->
<a href="c.html">同目錄下文件間互相連接</a>
複製代碼

僞協議：

<!--:alert(1)能夠直接使用js -不推薦使用-->
<a href="javascript:alert(1)">javascript僞協議</a>

<!--點擊以後不會跳轉的標籤 -推薦使用-->
<a href="javascript:;">查看</a>

<!--IP地址後面會加上#XXX,同時會跳轉到指定的標籤-->
<a href="#xxx;">查看xxx</a>
<p></p>
<p id="xxx"></p>
<p></p>

<!--發送郵件：mailto:郵箱-->
<a href="mailto:1037533792@qq.com">發郵件給poly</a>

<!--tel:手機號-->
<a href="tel:17722545501">打電話給poly</a>
複製代碼

二、 a的target的取值

<!--target="_blank" 鏈接跳轉到新的頁面-->
 <a href="http://baidu.com" target="_blank">百度</a>
 
<!--target="_self" 鏈接在當前頁面打開鏈接-->
<a href="http://baidu.com" target="_self">百度</a>

<!--target="_top" 打開時忽略全部的框架-->
<a href="http://baidu.com" target="_top">百度</a>

<!--target="_parent" 在父窗口中打開。-->
<a href="http://baidu.com" target="_parent">百度</a>
複製代碼

三、iframe標籤內嵌窗口（不推薦使用）

<iframe style="border: none; width: 100%; height: 800px;" src=""></iframe>
複製代碼

2、table標籤的用法

一、相關的標籤

<table>
     <thead>               //頭部
         <tr>              //行
             <th>英語</th> //表頭
             <th>翻譯</th>
         </tr>
     </thead>
     <tbody> //身體
         <tr>
             <td>hypper</td> //數據/內容
             <td>超級</td>
         </tr>
         <tr>
             <td>target</td> 
             <td>目標</td>
         </tr>

     </tbody>
     <tfoot>                //尾部
         <tr>
             <td>空</td>
         </tr>
     </tfoot>
 </table>
複製代碼

二、相關的樣式

table-layout：CSS屬性定義了用於佈局表格單元格，行和列的算法。java

table-layout:
 <!--auto;表格及單元格的寬度取決於其包含的內容。-->
 <!--fixed:平均寬度-->
   <style>
       table {

           table-layout: auto/fixed;
       }
   </style>
複製代碼

border-collapse:屬性是用來決定表格的邊框是分開的仍是合併的。算法

border-spacing:屬性指定相鄰單元格邊框之間的距離瀏覽器

table {
          width: 600px;
           table-layout: auto;
           border-collapse: collapse;
           border-spacing: 0;
       }
複製代碼

三、img標籤

做用發出get請求，展現一張圖片bash

屬性

alt圖片加載失敗後顯示的提示文字框架

width 給圖片設置寬度只寫寬度，高度爲自適應佈局

height 給圖片設置高度只寫高度，寬度爲自適應post

<img width="400" src="3.jpg" alt="一隻狗子">
複製代碼

事件

<!--onload/onerror圖片加載失敗可替換其餘圖片-->
<body> <img src="3.jpg" alt="lisa" id="xxx"> </body> <script> xxx.onload = function () { console.log('圖片加載成功'); } xxx.nerror = function () { console.log('圖片加載失敗'); xxx.src = '2.png'; } </script> </html>
複製代碼

響應式

<!--max-width: 100%;自適應全部瀏覽器頁面-->
   <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      img {
          max-width: 100%;
      }
  </style>
複製代碼

4、from標籤

做用
發get或post請求，而後刷新頁面

action 請求到路徑的頁面

method 控制get或者post請求頁面

<body>
    <form action="/yyy">
         <form action="/yyy" method="POST">
        <input type="submit"></form>
</body>
複製代碼

autocomplete="on" 瀏覽器可以根據用戶以前在表單裏輸入的值自動補全。 target="_balck"用來指示在提交表單以後，在哪裏顯示收到的回覆.

<form action="/yyy" method="POST" autocomplete="on" target="_balck">
        <input name="username" type="text">
        <input type="submit"></form>
複製代碼

<input type="submit" value="提交">
 <button type="submit"><strong>提交</strong></butto>
複製代碼

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。