HTML常用標(biāo)簽

準(zhǔn)備工作：

英語小課堂
hyper：超級
target：目標(biāo)
reference：引用
frame：邊框雷蹂、框架
entrance：入口
load：加載
canvas：畫布
永遠(yuǎn)不要雙擊打開html！
正確步驟
法一：
1.新建終端主经、2.輸入yarn global add http-server下載插件（下載過的可省略這步）岩齿、3.輸入http-server -c-1(可簡寫hs -c-1)得到地址入篮，隨便訪問一個(gè)谨垃、4.在地址后面輸入路徑（如：//192.168.3.4:800/a-href.html)
法二：
新建終端垢袱，輸入yarn global add parcel 安裝parcel 墓拜，然后輸入parcel a-href.html，直接得到一個(gè)地址请契，點(diǎn)擊即可打開咳榜。

a標(biāo)簽的用法

屬性：
href：hyper（超級）+refer（引用）=超級鏈接
<a >百度</a>
效果是在當(dāng)前頁面打開鏈接。
target：可以指定在哪個(gè)窗口（頁面）打開鏈接
<a target="_blank">百度</a>
代碼效果是爽锥，在空白頁（新標(biāo)簽頁）打開鏈接
download：功能是下載網(wǎng)頁涌韩，但是很多瀏覽器不支持（了解即可）
<a download">百度</a>
rel=noopener：為了防止一個(gè)Bug
作用：

跳轉(zhuǎn)到外部頁面
跳轉(zhuǎn)到內(nèi)部錨點(diǎn)（指定標(biāo)簽）
跳轉(zhuǎn)到郵箱或電話

a的href取值

網(wǎng)址：
https://baidu·com
http://baidu.com
//baidu.com(這是一個(gè)無協(xié)議的網(wǎng)址，它會自動選擇http或者h(yuǎn)ttps氯夷，推薦網(wǎng)址這樣寫）
路徑：絕對路徑/a/b/c.html臣樱，如果雙擊打開c.html那么就是打開根目錄下的c.html，就不能顯示網(wǎng)頁。如果開啟了http-server雇毫，在哪開的服務(wù)哪里就是根目錄玄捕，打開就是打開當(dāng)前目錄下的c.html。
相對路徑a/b/c棚放，就是在當(dāng)前目錄下打開枚粘。
<a href="index.html">百度</a>和<a href="./index.html">百度</a>效果也是一樣的
./意思就是在當(dāng)前目錄下查找。
偽協(xié)議：
javascript:代碼;
<a href="javascript:alert(1);">JavaScript偽協(xié)議</a>
點(diǎn)擊鏈接席吴，就直接執(zhí)行alert(1)這個(gè)javascript代碼

alert(1)執(zhí)行效果

<a href="">xxx</a>
href后面不寫東西赌结，那么點(diǎn)擊xxx頁面就會刷新

假如你想寫一個(gè)a標(biāo)簽，但又想讓他什么也不做（失效）：
<a href="javascript:;">xxx</a>
:;中間留空孝冒，點(diǎn)擊xxx啥也不做柬姚。

小技巧：p{$}*30 +tab快速寫出30個(gè)P標(biāo)簽
如何跳轉(zhuǎn)到內(nèi)部錨點(diǎn)（指定標(biāo)簽）？
...
<p id="xxx">10</p>
...
<a href="#xxx">查看xxx</a>
在你要跳轉(zhuǎn)到的標(biāo)簽里面加上id="xxx"庄涡，在a標(biāo)簽里寫上href="#xxx"量承，點(diǎn)擊即可跳轉(zhuǎn)到指定標(biāo)簽。
mailto郵箱
** <a href="mailto:7157xxxxxx@qq.com">發(fā)郵件給自己</a>**
點(diǎn)擊鏈接后穴店，喚起發(fā)郵件頁面
tel：手機(jī)號
<a href="tel:157xxxxxxxx">打電話給自己</a>
點(diǎn)擊鏈接后撕捍，喚起撥號界面

a的target取值

內(nèi)置名字

_blank：
<a target="_blank">百度</a>
作用：在空白頁打開
_self：
<a target="_self">百度</a>
作用：在當(dāng)前頁面打開（默認(rèn)值）
_top：
<a target="_top">百度</a>
作用：在最頂層的頁面打開鏈接（最上面的窗口）
_parent：
<a target="_parent">百度</a>
作用：在當(dāng)前頁面的上一層窗口打開鏈接

頁面可以用iframe引用另一個(gè)頁面

編輯a-target.html代碼：

<body>
    <a  target="_top">百度</a>
    <div>
      <iframe
        width="500"
        height="500"
        src="a-target-iframe.html"
        frameborder="0"
      ></iframe>
    </div>
  </body>

編輯a-target-iframe.html代碼：

<body style="background-color: red">
    我是iframe
    <iframe src="a-target-iframe-2.html" frameborder="0"></iframe>
  </body>
</html>

編輯a-target-iframe-2.html代碼：

<body style="background-color: green">
    我是 iframe 2:
    <hr />
    這里有個(gè)a標(biāo)簽
    <a  target="_parent">parent</a>
  </body>

點(diǎn)擊parent，在上一層窗口打開鏈接泣洞。
因?yàn)榘俣鹊膖arget是_top忧风，所以點(diǎn)擊百度則在頂層頁面打開鏈接。

iframe標(biāo)簽

作用：內(nèi)嵌窗口球凰，較少使用狮腿。

iframe的name：
<iframe src="https://baidu.com" name="xxx"></iframe>

window的name：
給鏈接命名后，在開發(fā)者界面輸入window.name后可以得到當(dāng)前頁面的名稱

iframe與target聯(lián)用呕诉，可以做一個(gè)嗶哩嗶哩/百度切換的頁面
方法一（分兩個(gè)窗口）：

方法二（一個(gè)窗口）：

table標(biāo)簽（表格）

table只有<thead>（頭部）標(biāo)簽缘厢、<tbody>（身體）標(biāo)簽、<tfoot>（腳部）標(biāo)簽甩挫，三個(gè)標(biāo)簽贴硫。

<tr>標(biāo)簽，tr=table row(行)：表格里的行
<th>標(biāo)簽伊者，th=table heading：表格里的表頭
<td>標(biāo)簽英遭，tr=table data：表格里的數(shù)據(jù)
這三種標(biāo)簽只能寫在<thead>、<tbody>亦渗、<tfoot>三個(gè)標(biāo)簽里
例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小紅</th>
          <th>小明</th>
          <th>小曾</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>數(shù)學(xué)</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>語文</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>英語</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>總分</th>
          <td>200</td>
          <td>200</td>
          <td>200</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

左上側(cè)為表頭的成績表.png

table-layout:auto/fixed:
layout(布局)

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 500px;
        table-layout: auto/fixed;            <!--auto或者fixed二選一挖诸，
                                     auto為根據(jù)文本內(nèi)容自動調(diào)整表格寬度、
                                     fixed則是使每個(gè)表格的寬度盡量平均-->
      }
    </style>
  </head>

auto布局.png

fixed布局 .png

boder-spacing:x;
x可以是任意值央碟， spacing(間隔)
作用：定義表格之間的間隔

給表格加邊框大小為1px，顏色為紅色
設(shè)置表格間隔為10px

表格加邊界設(shè)置樣式.png

style一般加在head里面，head一般用來放些看不見的東西

表格邊界效果.png

boder-collapse：
border-collapse:collapse;
作用：合并邊界亿虽，一般用來合并表格間隙菱涤。

合并邊界代碼.png

邊界合并.png

img標(biāo)簽(圖片)

作用：發(fā)送一個(gè)get請求，展示一張圖片

src屬性：

<img src="dog.png" alt="" />
src=source(來源)洛勉，src可以是絕對路徑/相對路徑
alt=alternative可代替的

get請求.png

alt屬性：

圖片加載失敗粘秆，提示alt“一只狗”，報(bào)錯(cuò)404
<img src="dog1.png" alt="一只狗" />

404報(bào)錯(cuò).png

width/height屬性：
給圖片加個(gè)寬度收毫，只寫寬度的話高度會自適應(yīng)攻走；
同理，只寫高度此再，寬度自適應(yīng)昔搂。
<img width = "400" src="dog.png" alt="" />
<img height = "400" src="dog.png" alt="" />
既寫寬度又寫高，圖片會變形输拇。
永遠(yuǎn)不能讓圖片變形摘符！
onload/onerror事件：
dog圖片加載成功時(shí)，提示加載成功策吠；
dog圖片加載失敗逛裤，顯示備用404圖片，提示404圖片加載成功猴抹。
這種做法可以優(yōu)化用戶體驗(yàn)带族。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="xxx" width="400" src="dog1.png" alt="一只狗" /> //這里dog1是故意寫錯(cuò)
    <script>
      xxx.onload = function () {
        console.log("圖片加載成功");
      };
      xxx.onerror = function () {
        console.log("圖片加載失敗");
        xxx.src = "/404.png";
      };
    </script>
  </body>
</html>

404備用圖片效果.png

響應(yīng)式max-width:100%
在head里面加上style標(biāo)簽
效果：讓圖片隨著頁面大小的改變而改變

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

模型.png

響應(yīng)式效果.png

form標(biāo)簽

作用：發(fā)送get或post請求，然后刷新頁面蟀给。

屬性action
action作用與img的src一樣蝙砌，后面跟路徑。

 <body>
    <form action="/xxx">    //action后面跟路徑
      <input type="text" />
      <input type="submit" />
    </form>
  </body>

action里面寫什么坤溃，點(diǎn)擊后就會請求到哪個(gè)頁面

method屬性
method是控制用get還是post來請求的

<body>
    <form action="/yyy" method="POST">  
//可以通過改變action里面的內(nèi)容來改變請求的頁面拍霜，可以把/yyy變成/xxx
      <input type="text" />
      <input type="submit" />
    </form>
  </body>

method.png

autocomplete屬性
顯示用戶表單操作，其中autocomplete="on/off"可以是on打開也可以off關(guān)閉

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

target屬性

target告訴瀏覽器我要提交到哪個(gè)頁面薪介，哪個(gè)頁面需要刷新祠饺，效果是點(diǎn)擊提交，因?yàn)閠arget設(shè)置blank在新標(biāo)簽打開汁政，所以點(diǎn)擊提交會打開一個(gè)新的標(biāo)簽道偷。
target屬性和標(biāo)簽<a/>里的target值是一樣的，也是控制在哪個(gè)地方打開新的網(wǎng)頁记劈。

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

input標(biāo)簽

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

button和submit類型
設(shè)置輸入框提交按鈕樣式勺鸦，有兩種方法，一種是加value目木，一種是設(shè)置button按鈕换途，二者皆可。

<body>
    <form action="/yyy" method="POST" autocomplete="off" target="a">
      <input name="username " type="text" />
      <input type="submit" value="搞起" />
      <button type="submit">搞起</button>
    </form>
</body>

兩個(gè)按鈕.png

value和button的區(qū)別:
button里面可以用標(biāo)簽，比如加粗標(biāo)簽<strong>军拟，甚至還能加圖片
value則不行剃执，只能加純文本

    <body>
    <form action="/yyy" method="POST" autocomplete="off" target="a">
      <input type="text" />
      <input type="submit" value="<strong>搞起</strong>" />
      <button type="submit">
        <strong>搞起</strong>
        <img width="100" src="dog.png" alt="" />
      </button>
    </form>
  </body>

區(qū)別.png

type類型

<input type="text" />效果為文本框

在后面加required為文本框必須填寫內(nèi)容，否則提交不了懈息。
<input type="text" required />

color顏色肾档，效果為顏色框，可以自己選擇顏色辫继。
<input type="color" />

密碼框怒见，輸入內(nèi)容為小圓點(diǎn)，看不見輸入內(nèi)容
<input type="password" />

出現(xiàn)小圓點(diǎn)可點(diǎn)擊選擇
<input type="radio" />

出現(xiàn)兩個(gè)小圓點(diǎn)可以同時(shí)選擇
<input type="radio" />男<input type="radio" />女

兩個(gè)選項(xiàng)二選一怎么操作姑宽？同時(shí)給兩個(gè)input命名就只能選擇一個(gè)了遣耍。

<input name="gender" type="radio" />男
<input name="gender" type="radio" />女

方形選框：
<input type="checkbox" />

方形選框多選，但是瀏覽器不知道這幾個(gè)選項(xiàng)是一組的：

<input type="checkbox" />唱 <input type="checkbox" />跳
<input type="checkbox" />rap <input type="checkbox" />籃球

要想讓四個(gè)選項(xiàng)成為一組數(shù)據(jù)低千，就給他們命名：

<input type="checkbox" name="hobby" />唱
<input type="checkbox" name="hobby" />跳
<input type="checkbox" name="hobby" />rap
<input type="checkbox" name="hobby" />籃球

上傳電腦文件（只能上傳一個(gè)）：
<input type="file" />

選擇文件.png

上傳電腦文件（上傳多個(gè)）：
<input type="file" multiple />

hidden:
用來給JS輸入一些看不見的東西配阵。。示血。比如ID棋傍、字符串啥的
<input type="hidden" />

形成一個(gè)可以顯示填寫多行的文本，右下角可拖動調(diào)整大小
<textarea></textarea>

加上resize:none就不能調(diào)整大小了
<textarea style="resize: none"></textarea>
還可以設(shè)置固定的高度难审、寬度瘫拣，設(shè)置成固定的大小以供用戶填寫，這種設(shè)置比較常見：
<textarea style="resize: none; width: 50%; height: 300px"></textarea>

形成一個(gè)長方形的可選框：value是真正的值告喊，"星期一"是給用戶看的內(nèi)容

<select>
     <option value="">-可選擇-</option>
     <option value="1">星期一</option>
     <option value="2">星期二</option>
     <option value="3">星期三</option>
     <option value="4">星期四</option>
</select>

本文為本人的原創(chuàng)文章麸拄，著作權(quán)歸本人和饑人谷所有，轉(zhuǎn)載務(wù)必注明來源

最后編輯于：2021.01.15 13:18:44

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末黔姜，一起剝皮案震驚了整個(gè)濱河市拢切，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌秆吵，老刑警劉巖淮椰，帶你破解...
沈念sama閱讀 212,383評論 6贊 493
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異纳寂，居然都是意外死亡主穗，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,522評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門毙芜，熙熙樓的掌柜王于貴愁眉苦臉地迎上來忽媒，“玉大人，你說我怎么就攤上這事腋粥』抻辏” “怎么了录淡？”我有些...
開封第一講書人閱讀 157,852評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵种冬，是天一觀的道長挎挖。經(jīng)常有香客問我洛退，道長，這世上最難降的妖魔是什么夹抗？我笑而不...
開封第一講書人閱讀 56,621評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮纵竖，結(jié)果婚禮上漠烧，老公的妹妹穿的比我還像新娘。我一直安慰自己靡砌，他們只是感情好已脓，可當(dāng)我...
茶點(diǎn)故事閱讀 65,741評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著通殃，像睡著了一般度液。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上画舌，一...
開封第一講書人閱讀 49,929評論 1贊 290
城市分裂傳說
那天堕担，我揣著相機(jī)與錄音，去河邊找鬼曲聂。笑死霹购，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的朋腋。我是一名探鬼主播齐疙，決...
沈念sama閱讀 39,076評論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼旭咽！你這毒婦竟也來了贞奋？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,803評論 0贊 268
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤穷绵，失蹤者是張志新（化名）和其女友劉穎轿塔，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體请垛，經(jīng)...
沈念sama閱讀 44,265評論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡催训，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,582評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了宗收。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片漫拭。...
茶點(diǎn)故事閱讀 38,716評論 1贊 341
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖混稽，靈堂內(nèi)的尸體忽然破棺而出采驻，到底是詐尸還是另有隱情审胚，我是刑警寧澤，帶...
沈念sama閱讀 34,395評論 4贊 333
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布礼旅，位于F島的核電站膳叨，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏痘系。R本人自食惡果不足惜菲嘴，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 40,039評論 3贊 316
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望汰翠。院中可真熱鬧龄坪，春花似錦、人聲如沸复唤。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,798評論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽佛纫。三九已至妓局，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間呈宇，已是汗流浹背好爬。一陣腳步聲響...
開封第一講書人閱讀 32,027評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留甥啄，地道東北人抵拘。一個(gè)月前我還...
沈念sama閱讀 46,488評論 2贊 361
代替公主和親
正文我出身青樓，卻偏偏與公主長得像型豁，于是被迫代替她去往敵國和親僵蛛。傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,612評論 2贊 350