HTML常用標(biāo)簽02

HTML重點(diǎn)標(biāo)簽介紹

a標(biāo)簽

1. 屬性

· 1. href

取值：

a.網(wǎng)址

        https://google.com

        http://google.com

        //google.com

b.路徑

     /a/b/c以及a/b/c

     index.html以及./index.html

c.偽協(xié)議

       i. javascript:代碼;

       ii. mailto:郵箱

       iii.tel:手機(jī)號(hào)

       iiii.id

2. 作用：

a. 跳轉(zhuǎn)外部頁(yè)面

<a >點(diǎn)擊跳轉(zhuǎn)Google</a>

b. 跳轉(zhuǎn)內(nèi)部錨點(diǎn)

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width, initial-scale=1.0">
        <title>超鏈接</title>
    </head>

    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p id="xxx">17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
        <p>27</p>
        <p>28</p>
        <p>29</p>
        <p>30</p>
        <a href="#xxx">點(diǎn)此跳轉(zhuǎn)至17</a>
    </body>

</html>

c.跳轉(zhuǎn)到郵箱或電話等

1.什么都不執(zhí)行的偽代碼：

<a href="javascript:;">點(diǎn)擊，頁(yè)面不進(jìn)行任何操作</a>

2.跳轉(zhuǎn)到郵箱：

<a href="mailto:txgzlove@gmail.com">點(diǎn)擊進(jìn)入發(fā)郵件操作</a>

3.跳轉(zhuǎn)到電話：

<a href="tel:18012345678">點(diǎn)擊進(jìn)入電話操作</a>

· 手機(jī)頁(yè)面點(diǎn)擊，跳轉(zhuǎn)至撥號(hào)界面，直接可撥打電話

========================================================

· 2. target

取值：

a.內(nèi)置名字

i. _blank --> 在新頁(yè)面打開(kāi)網(wǎng)址

<a target="_blank">新頁(yè)面打開(kāi)網(wǎng)站</a>

ii. _top --> 在最頂級(jí)頁(yè)面打開(kāi)網(wǎng)址
<a target="_top">新頁(yè)面打開(kāi)網(wǎng)站</a>

iii. _parent--> 在所在頁(yè)面（上一層級(jí)）直系父級(jí)頁(yè)面打開(kāi)網(wǎng)址

<a target="_parent">新頁(yè)面打開(kāi)網(wǎng)站</a>

iiii. _self --> 在所在頁(yè)面打開(kāi)網(wǎng)址

<a target="_self">新頁(yè)面打開(kāi)網(wǎng)站</a>

· 注："_top","_parent"一般出現(xiàn)在頁(yè)面含有iframe框架的網(wǎng)頁(yè)中

b.程序員命名

1.window的name

舉例：

·效果：點(diǎn)擊打開(kāi)Google，頁(yè)面將在名稱為xxx的頁(yè)面打開(kāi)，若沒(méi)有名稱為xxx的頁(yè)面，瀏覽器將自主創(chuàng)建名稱為xxx的網(wǎng)頁(yè)，這時(shí)點(diǎn)擊打開(kāi)Baidu，頁(yè)面將在名稱為xxx的頁(yè)面打開(kāi)。

1.<a target="xxx">打開(kāi)Google</a>

2.<a target="xxx">打開(kāi)Baidu</a>

html頁(yè)面代碼：

<a  target="xxx">打開(kāi)Google</a>

<a  target="xxx">打開(kāi)Baidu</a>

2.iframe的name

<a  target="xxx">打開(kāi)Google</a>

<a  target="yyy">打開(kāi)Baidu</a>
<hr>
<iframe style="border: none; width:100%; height: 800px;" src="" name="xxx"></iframe>

table標(biāo)簽

i.相關(guān)標(biāo)簽

<table>
<thead>
<tbody>
<tfoot>
<tr>
<td>
<th>

ii.相關(guān)樣式

<style>
{
   table-layout:auto;         //表格布局
   border-collapse:collapse;  //邊界去除
   border-spacing: 0;         //邊界間隙
}
</style>

示例：

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>table測(cè)試</title>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>語(yǔ)文</td>
        <td>數(shù)學(xué)</td>
        <td>美術(shù)</td>
        <td>英語(yǔ)</td>
        <td>英語(yǔ)</td>
      </tr>
      <tr>
        <th>2</th>
        <td>體育</td>
        <td>數(shù)學(xué)</td>
        <td>美術(shù)</td>
        <td>英語(yǔ)</td>
        <td>體育</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td>空</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

iframe 標(biāo)簽

i.嵌套頁(yè)面(目前很少用，幾年前經(jīng)常使用)

<iframe src="http://qq.com" frameborder="0"> </iframe>

<! frameborder(浮動(dòng)框架的邊緣），一般使用iframe,frameborder都給零，否則很難看。

和a標(biāo)簽一起使用：

示例：

    <iframe name=xxx src="#" name="xxx"></iframe>
    <a target=xxx >QQ</a>
    <a target=xxx http://target (面向...對(duì)象)

ii.和a標(biāo)簽一起使用：

示例：

<iframe name=xxx src="#" name="xxx"></iframe>
<a target=xxx >QQ</a>
<a target=xxx 
//target (面向...對(duì)象)

img 標(biāo)簽

a.作用: 發(fā)送GET請(qǐng)求，顯示一張照片

b.屬性:

  1. alt //當(dāng)圖片加載失敗時(shí)，顯示alt的內(nèi)容

成功加載：

    <img src="http://webjike.com/images/logo.png" alt="一個(gè)風(fēng)車">

加載失?。?/p> 

    <img src="http://webjike.co/images/logo.png" alt="一個(gè)風(fēng)車">
  1. height-->img圖片的高
<img height="400" src="http://webjike.co/images/logo.png" alt="一個(gè)風(fēng)車">
  1. width -->img圖片的寬
<img width="400"src="http://webjike.co/images/logo.png" alt="一個(gè)風(fēng)車">

注：不能同時(shí)設(shè)置寬和高

  1. src //圖片地址
<img src="http://webjike.co/images/logo.png" alt="一個(gè)風(fēng)車">

c.事件:

  1. onload
    javascript代碼：
<script>
    xxx.onload =function(){
        console.log("圖片加載成功！");
    }
</script>
  1. onerror
    javascript代碼：
<script>
    xxx.onerror =function(){
        console.log("圖片加載失敗！");
    }
</script>
  • 圖片響應(yīng)式：max-width:100%;

form 標(biāo)簽

    1. 作用： 發(fā)get或post請(qǐng)求，然后刷新以頁(yè)面
    1. 屬性：

    a。 action--> action=""中寫入什么，form表單就會(huì)向誰(shuí)發(fā)起請(qǐng)求

    舉例：

         <form action="/xxx.html">
         <input type="text"> // 輸入框
         <input type="submit"> //提交按鈕
     </form>

當(dāng)點(diǎn)擊提交按鈕時(shí)，form表單向xxx.html發(fā)起請(qǐng)求

b。 autocomplete--> 控制form表單輸入?yún)^(qū)是否自動(dòng)填充

舉例：

①：自動(dòng)填充

<body>
    <form action="/xxx" method="POST" autocomplete="on">
        <input name="username" type="text">
        <input type="submit">
    </form>
</body>

②：非自動(dòng)填充

<body>
    <form action="/xxx" method="POST" autocomplete="off">
        <input name="username" type="text">
        <input type="submit">
    </form>
</body>

c。method--> 控制form表單向xxx.html發(fā)起請(qǐng)求方式為get或post

舉例：

  1. form表單向xxx.html發(fā)起請(qǐng)求方式為post 
     <body>
     <form action="/xxx" method="POST">
         <input type="text">
         <input type="submit">
     </form>

</body>



2. form表單向xxx.html發(fā)起請(qǐng)求方式為`get`
  ①：
   ```html
    <body>
        <form action="/xxx" method="get">
            <input type="text">
            <input type="submit">
        </form>
</body>

 ②：

```html
    <body>
        <form action="/xxx" >
            <input type="text">
            <input type="submit">
        </form>
</body>

d。target-->控制瀏覽器數(shù)據(jù)提交至哪個(gè)頁(yè)面或?qū)λ⑿履膫€(gè)頁(yè)面
①。瀏覽器數(shù)據(jù)提交至新開(kāi)頁(yè)面

<body>
   <form action="/xxx" method="POST" target="_blank">
       <input type="text">
       <input type="submit">
   </form>
</body>

②。瀏覽器數(shù)據(jù)提交x,刷新name名為iframe的開(kāi)頁(yè)面

<body>
   <form action="/x" method="POST" target="a">
       <input type="text">
       <input type="submit">
   </form>
   <iframe name="a" src="a-target-iframe.html" frameborder="0"></iframe>
</body>

    1. form 標(biāo)簽里面一般會(huì)有輸入框和按鈕；

      form 標(biāo)簽一定要有type=“submit”，不然不能進(jìn)行提交請(qǐng)求；

      form標(biāo)簽相關(guān)使事件
      1、onsubmit --> 在提交時(shí)觸發(fā)此事件
      2、<input type="submit" >和<button type="submit" >的區(qū)別？
      input標(biāo)簽里面不能再加其他標(biāo)簽，而button標(biāo)簽可以加任何標(biāo)簽再進(jìn)行修飾。

input 標(biāo)簽

1. 作用：讓用戶輸入內(nèi)容

2. 屬性：

a. text-->文本輸入框

<input type="text">

b. button-->按鈕

 <input type="button" value="">

c. checkbox-->復(fù)選框

<input type="checkbox" name="hobby" id="">拉

<input type="checkbox" name="hobby" id="">吹

<input type="checkbox" name="hobby" id="">彈

<input type="checkbox" name="hobby" id="">唱

<input type="checkbox" name="hobby" id="">跳

· 注："input type="checkbox"使用時(shí)若需區(qū)分是否同為一組，則理應(yīng)保持input 中name一致

d. file-->文件

i：?jiǎn)挝募蟼鳎?/p> 

<input type="file" >

ii：多文件上傳，添加multiple

<input type="file" multiple >

e. password-->密碼框

<input type="password" name="" id="">

f. radio-->單選框

<input type="radio" name="gender" id="">男

<input type="radio" name="gender" id="">女

· 注："input type="radio"使用時(shí)須保持input 中name一致

······

3.事件：

onchange //當(dāng)用戶輸入改變時(shí)觸發(fā)事件

onfocus //當(dāng)鼠標(biāo)聚焦時(shí)觸發(fā)

onblur //當(dāng)鼠標(biāo)從當(dāng)前離開(kāi)時(shí)觸發(fā)事件

4.驗(yàn)證器：

HTML5新增功能，一些編輯器自帶驗(yàn)證功能

舉例：

如：required: input輸入框

<input type="password" required name="" id="">

······

其他輸入 標(biāo)簽

①.select>option-->下拉選項(xiàng)

<body>
    <select>
        <option value="">- 請(qǐng)選擇 -</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
        <option value="3">星期三</option>
    </select>
</body>

②.textarea-->多行文本框

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

· ！!!注意：

a。一般不監(jiān)聽(tīng)input的click事件；

b。form里面的input要有name；

c。form里面要放一個(gè)type=submit才能觸發(fā)submit事件。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容