HTML常用標(biāo)簽

TML常用標(biāo)簽有：a標(biāo)簽、table標(biāo)簽、img標(biāo)簽、form標(biāo)簽和input標(biāo)簽。

a標(biāo)簽

作用

跳轉(zhuǎn)到外部網(wǎng)頁
跳轉(zhuǎn)到內(nèi)部錨點(diǎn)
跳轉(zhuǎn)到郵箱或電話等

屬性

（一）href

href是hyper reference的縮寫，超鏈接的意思。

用于指定鏈接目標(biāo)的ur地址，(必須屬性)當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能；
href=“#”表示這是一個空鏈接；
如果href里面地址是—個文件或者壓縮包,會下載這個文件。

<a href="https://google.com">超鏈接到google網(wǎng)站的主頁</a>
 <a href="https://google.com">超鏈接到google的主頁</a>
 <a href="//google.com">超鏈接到google的主頁</a>

展現(xiàn)形式：

點(diǎn)擊此鏈接，即可到達(dá)google的主頁

a標(biāo)簽href的取值：

1、上述代碼中的網(wǎng)址的取值(推薦使用第三行的代碼)

<a href="//google.com">超鏈接到google的主頁</a>

由于此方式能夠自動補(bǔ)齊相關(guān)的網(wǎng)絡(luò)地址，前面兩種寫錯就會報(bào)錯，所以推薦使用。

2、路徑

/a/b/c 或者是a/b/c

當(dāng)前路徑下的a里面的b，b里面的c

index.html 以及./index.html

在當(dāng)前目錄下尋找index.html文件

3、偽協(xié)議

javascript：代碼；（冒號與分號一定要寫）

<a href="javascript：;">點(diǎn)擊后無任何點(diǎn)擊或刷新等動作的反應(yīng)</a>

錨點(diǎn)鏈接

<a href="#要跳轉(zhuǎn)的元素的id"></a>

點(diǎn)擊鏈接的時(shí)候，會跳轉(zhuǎn)到指定元素所在的位置。

mailto：郵箱

<a href="mailto:abcdefg@163.com ">發(fā)郵件給我</a>

tel：手機(jī)號

<a href="tel:12345678901">打電話給我</a>

（二）targe

用于指定鏈接頁面的打開方式

a的target取值

1、內(nèi)置名字

_blank 在空白頁打開

_self 在當(dāng)前頁面打開

_parent 在父級窗口打開

_top 在最頂級的窗口打開

<a href="//google.com" target="_blank">超鏈接到google網(wǎng)站的主頁在空白頁打開</a>

2、程序員的命名

window：name（在xxx頁面打開）

iframe的name（iframe現(xiàn)在已經(jīng)很少使用了，是指內(nèi)嵌窗口）

（三）download

下載頁面，但目前很少用，有的瀏覽器不支持，尤其是手機(jī)瀏覽器可能不支持。

table標(biāo)簽

1、table標(biāo)簽的語法：

thead:表頭

tbody:表的內(nèi)容，用于定義

tfoot:表的腳部

tr:table row,表格里的行

th:表格的表頭部分，其中的文本內(nèi)容字體加粗居中顯示

td:table data,表格數(shù)據(jù)，用于定義表格中的單元格

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小紅</th>
          <th>小黃</th>
          <th>小藍(lán)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>數(shù)學(xué)</th>
          <td>90</td>
          <td>60</td>
          <td>80</td>
        </tr>
        <tr>
          <th>語文</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
        <tr>
          <th>英語</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>總分</th>
          <td>266</td>
          <td>250</td>
          <td>274</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

第一行的th標(biāo)簽為空

2、table的樣式

table-layout：auto；自動計(jì)算每一行的寬高

table-layout：fixed；通過列表的寬度來決定平均寬度

border-collapse：collapse；合并邊框(默認(rèn)邊框與邊框之間不合并)

border-spacing：0；邊框?yàn)?.(邊框與邊框之間的距離)。

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

作用：發(fā)出get請求，展示一張圖片。

<img src="1.JPG" alt="頭像" width="400" />

當(dāng)前路徑下的1.jpg，確定寬度為400，只寫寬度高度會自適應(yīng)

屬性

alt：alternate的縮寫，替換的意思。替換文本，圖像不能顯示的文字。

路徑錯誤顯示alt內(nèi)容

title：提示文本。鼠標(biāo)放到圖像上，顯示的文字。

響應(yīng)

max-width：100% 所有的圖片在手機(jī)上都自適應(yīng)寬度，寬度最大為100%。

事件

onload/onerror 監(jiān)聽圖片是否加載成功，加載成功時(shí)用onload，不成功是用onerror事件。確保在onerror事件能夠補(bǔ)救。

<body>
 <img id="xxx" src="dog.jpg" alt="一只小狗">
<script>
xxx.onload = function () {
console.log("圖片加載成功");
 };
xxx.onerror = function () {
console.log("圖片加載失敗");
xxx.src = "/404.jpg";
 };
</script>
</body>

監(jiān)聽成功時(shí)，打印出成功

監(jiān)聽失敗時(shí)，先打印出監(jiān)聽失敗并且開始執(zhí)行加載失敗是的挽救圖片。404.jpg文件執(zhí)行

感想：

a標(biāo)簽的默認(rèn)樣式可以設(shè)置清除，href屬性可以有好多種取值，a標(biāo)簽的意義也不僅僅是跳轉(zhuǎn)到一個網(wǎng)址，還可以發(fā)郵件打電話。
給img標(biāo)簽設(shè)置寬度和高度時(shí)，不能讓圖片變形
table標(biāo)簽必須按照thead,tbody,tfoot的結(jié)構(gòu)去寫，先劃分好結(jié)構(gòu)，再往里填充內(nèi)容，即使tfoot寫在前面，也會顯示在頁面的尾部

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

們先來看個例子：

在這個網(wǎng)頁中，同時(shí)在一個頁面中展示了三個網(wǎng)站：千鋒教育官網(wǎng)、千鋒教育HTML5大前端官網(wǎng)、千鋒教育HTML5大前端好程序員官網(wǎng)。這是如何做到的呢？

其實(shí)也不難，使用 iframe 就可以實(shí)現(xiàn)了。 iframe的作用是，用來在一個網(wǎng)頁中顯示另一個網(wǎng)頁。

iframe 是個雙標(biāo)簽，基本語法為：尖角號iframe，尖角號 /iframe。

iframe 標(biāo)簽有五個基本屬性：

src 屬性，資源的意思，用以引入其他網(wǎng)站的頁面，值是一個頁面路徑。

width 屬性，寬度的意思，用以控制引入頁面的寬度，值是一個數(shù)字。

height 屬性，高度的意思，用以控制引入頁面的高度，值是一個數(shù)字。

frameborder 屬性，框架邊框的意思，默認(rèn)引入的框架帶有邊框，通常情況下將該屬性值設(shè)置為0，來取消框架的邊框。

scrolling[?skr??l??] 屬性，滾動的意思，用來控制是否顯示框架的滾動條，值有三個：

auto，在需要的情況下出現(xiàn)滾動條，也是默認(rèn)值。

yes，始終顯示滾動條。

no，從不顯示滾動條。

我們來做個例子。

打開編輯器，新建一個 iframe-demo.html 文件，補(bǔ)全基礎(chǔ)代碼，在 body 里添加 iframe 標(biāo)簽，首先定義 src 屬性，值為 http://www.qfedu.com，frameborder 屬性的值設(shè)置為1，顯示邊框。保存頁面。

在瀏覽器中打開頁面。千鋒教育的官網(wǎng)在 iframe 的默認(rèn)大小的窗口里顯示了。

返回編輯器，給 iframe 定義屬性 width 等 800，height 等于 600，保存。

回到瀏覽器，刷新，iframe 的窗口變大了。可以通過滾動條查看網(wǎng)站內(nèi)容。

返回編輯器，如果給iframe 定義一個scrolling 屬性，值為 no 的話，滾動條就不見了。

回到瀏覽器，刷新。此時(shí)就不能查看窗口隱藏的內(nèi)容了。

iframe 也可以作為一個鏈接的目標(biāo)框架。鏈接的 target 屬性必須設(shè)置為 iframe 的 name 屬性。

比如給 iframe 定義 name 屬性的值為 iframe_a，鏈接 a 的 target 屬性值也設(shè)置為 iframe_a。這樣，當(dāng)點(diǎn)擊鏈接時(shí)，千鋒教育的官網(wǎng)就在這個 iframe 窗口里打開了。

我們再來看個例子，當(dāng)點(diǎn)擊三個鏈接，iframe 里顯示了相應(yīng)鏈接的網(wǎng)站。

我們來實(shí)現(xiàn)這個例子。

回到編輯器，創(chuàng)建一個 iframe-example.html 文件，補(bǔ)全基本代碼，在 body 里添加一個 div 容器，在容器里添加一個 iframe，定義屬性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。

在瀏覽器中打開頁面，一個 iframe 框架做好了。

回到編輯器，在 body 里的第一行再添加一個 div 容器，在容器里書寫 emmet 命令：a 中括號 href 空格 target 等于 iframe_a 大于號 b 乘以 3， a[href target=iframe_a]>b*3 按下 tab 鍵自動補(bǔ)全代碼。很明顯，這不是我們要的代碼。

這怎么辦呢？聰明的你一定想到了，在小學(xué)數(shù)學(xué)里，通過添加小括號來設(shè)置運(yùn)算優(yōu)先級的法則。

我們在 a 的前面，b 的后面填上一對括號， (a[href target=iframe_a]>b)*3 我們把這個 emmet 放到注釋里保存一下。

將光標(biāo)移至 emmet 語句的結(jié)尾，按下 tab。期望的代碼生成了。

如果你是完美主義者，這個代碼你也不滿意，能不能換行顯示三個 a 標(biāo)簽?zāi)兀看蠹腋乙黄鹱觯?/span>

點(diǎn)擊 VSCode 左下角的齒輪圖標(biāo)，再點(diǎn)擊設(shè)置，打開設(shè)置窗口。

點(diǎn)擊擴(kuò)展菜單，再點(diǎn)擊 emmet，找到 Syntax(森太課思) Profiles，在 settings（賽ten 思）.json 中編輯。

在這里輸入 html 冒號大括號，在大括號里寫入 inline_break 冒號 2，表示標(biāo)簽數(shù)大于兩組，就折行顯示。

"html": {

"inline_break": 2

關(guān)閉設(shè)置。

把剛才保存的 emmet 命令再拷貝過來，按下 tab 鍵，完美的代碼生成了！

給三個a 標(biāo)簽填好鏈接地址和文本內(nèi)容。

這里需要注意，a 鏈接的地址可以是互聯(lián)網(wǎng)的網(wǎng)站地址，也可以是你自己制作的本地頁面地址，這些頁面都可以在 iframe 中顯示。

我們發(fā)現(xiàn)三個鏈接的target屬性都指向了同一個iframe。保存一下頁面。

回到瀏覽器，刷新。分別點(diǎn)擊三個鏈接，iframe 里分別顯示了三個網(wǎng)站的頁面。

文章配套視頻鏈接「鏈接」

s 雙冒號(::)運(yùn)算符：一場對靜態(tài)方法和屬性的探索

引言

在前端開發(fā)領(lǐng)域，JavaScript作為Web的核心語言之一，其重要性不言而喻。隨著ES6及后續(xù)版本的推出，JavaScript引入了許多新特性，極大地豐富了語言的表達(dá)能力和功能。本文旨在探討一個相對較少被提及的特性——雙冒號(::)運(yùn)算符，它用于訪問類的靜態(tài)成員。雖然這個特性尚未在所有環(huán)境中得到廣泛支持，但了解它有助于我們更好地理解JavaScript的未來發(fā)展方向以及如何利用這些新特性優(yōu)化我們的代碼。

技術(shù)概述

雙冒號運(yùn)算符是ECMAScript提案的一部分，旨在為JavaScript類提供更直觀的靜態(tài)方法和屬性訪問方式。這個運(yùn)算符允許我們在類的實(shí)例上調(diào)用靜態(tài)方法或訪問靜態(tài)屬性，這在其他面向?qū)ο蟮恼Z言中是很常見的做法。

核心特性和優(yōu)勢

直觀的靜態(tài)成員訪問：無需通過類名直接調(diào)用，而是可以通過實(shí)例引用，使得代碼更加靈活和易讀。
封裝性增強(qiáng)：靜態(tài)成員的訪問更加自然，有助于封裝和模塊化代碼。
減少全局污染：不需要將靜態(tài)方法暴露為全局函數(shù)，降低了命名沖突的風(fēng)險(xiǎn)。

代碼示例

class MyClass {
  static myStaticMethod() {
    return 'Called static method';
  }

  static myStaticProperty = 'Static property value';
}

const instance = new MyClass();
console.log(instance::MyClass.myStaticMethod()); // 'Called static method'
console.log(instance::MyClass.myStaticProperty); // 'Static property value'

技術(shù)細(xì)節(jié)

雙冒號運(yùn)算符的實(shí)現(xiàn)涉及到JavaScript引擎對類和原型鏈的理解。當(dāng)使用::運(yùn)算符時(shí)，JavaScript引擎會在類的構(gòu)造函數(shù)上查找靜態(tài)方法或?qū)傩裕皇窃趯?shí)例的原型鏈中查找。

特性分析

這個特性的一個關(guān)鍵點(diǎn)在于，即使是在類的實(shí)例上調(diào)用了靜態(tài)方法或?qū)傩裕琂avaScript引擎仍然能夠正確地找到這些靜態(tài)成員。這對于那些習(xí)慣了在實(shí)例上調(diào)用靜態(tài)方法的開發(fā)者來說是一個福音，因?yàn)樗峁┝伺c許多其他面向?qū)ο笳Z言相似的行為。

難點(diǎn)

然而，這個特性也帶來了一些挑戰(zhàn)。例如，由于并非所有JavaScript環(huán)境都支持雙冒號運(yùn)算符，因此在生產(chǎn)環(huán)境中使用它可能會導(dǎo)致兼容性問題。此外，過度依賴此類特性可能會使代碼難以維護(hù)，特別是對于那些不熟悉這一特性的開發(fā)者。

實(shí)戰(zhàn)應(yīng)用

在實(shí)際項(xiàng)目中，我們可以利用雙冒號運(yùn)算符來簡化靜態(tài)成員的調(diào)用，尤其是在處理復(fù)雜的類層次結(jié)構(gòu)時(shí)。例如，在一個游戲引擎中，我們可能有一個Game類，其中包含多個靜態(tài)方法用于初始化和配置游戲設(shè)置。

代碼示例

class Game {
  static initialize(config) {
    // 初始化游戲配置
  }

  static start() {
    // 開始游戲
  }
}

const gameInstance = new Game();
gameInstance::Game.initialize({ width: 800, height: 600 });
gameInstance::Game.start();

優(yōu)化與改進(jìn)

雖然雙冒號運(yùn)算符為訪問靜態(tài)成員提供了便利，但在使用時(shí)仍需謹(jǐn)慎。考慮到瀏覽器和運(yùn)行時(shí)環(huán)境的兼容性，我們應(yīng)當(dāng)在代碼中添加適當(dāng)?shù)臋z測和回退機(jī)制，以確保在不支持該運(yùn)算符的環(huán)境中也能正常運(yùn)行。

代碼示例

if ('myStaticMethod' in MyClass.prototype) {
  const result = instance.myStaticMethod();
} else if (instance::MyClass.myStaticMethod) {
  const result = instance::MyClass.myStaticMethod();
} else {
  throw new Error('Static method not supported');
}

常見問題

問題：在不支持雙冒號運(yùn)算符的環(huán)境中，如何訪問靜態(tài)成員？

解決方案：直接通過類名訪問靜態(tài)成員，或者使用polyfill來模擬雙冒號運(yùn)算符的行為。

// Polyfill 示例
if (!Object.prototype.__proto__) {
  Object.defineProperty(Object.prototype, '__proto__', {
    get: function () {
      return this.constructor.prototype;
    },
    configurable: true,
  });
}

if (!Object.prototype['::']) {
  Object.defineProperty(Object.prototype, '::', {
    value: function (target, prop) {
      return target[prop];
    },
    configurable: true,
  });
}

總結(jié)與展望

雙冒號運(yùn)算符為JavaScript帶來了更接近傳統(tǒng)面向?qū)ο缶幊陶Z言的靜態(tài)成員訪問方式。盡管目前它的支持有限，但隨著ECMAScript標(biāo)準(zhǔn)的演進(jìn)，我們有理由期待這一特性的廣泛采納。掌握這一特性不僅能夠幫助我們寫出更優(yōu)雅、更可讀的代碼，還能夠讓我們在未來的項(xiàng)目中更加自信地應(yīng)對新的技術(shù)挑戰(zhàn)。

總之，雙冒號運(yùn)算符是JavaScript向前邁出的又一步，它展示了語言設(shè)計(jì)者們致力于提升開發(fā)者體驗(yàn)的決心。隨著更多現(xiàn)代瀏覽器和運(yùn)行時(shí)的支持，我們期待看到這一特性在實(shí)際項(xiàng)目中的廣泛應(yīng)用，進(jìn)一步推動前端開發(fā)領(lǐng)域的創(chuàng)新和發(fā)展。

在線咨詢

上一篇：創(chuàng)建漂亮的 CSS 按鈕的 10 個代碼片段
下一篇：清新漂亮簡約好看的個人博客網(wǎng)站模板

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML常用標(biāo)簽

a標(biāo)簽

table標(biāo)簽

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

感想：

s 雙冒號(::)運(yùn)算符：一場對靜態(tài)方法和屬性的探索

引言

技術(shù)概述

核心特性和優(yōu)勢

代碼示例

技術(shù)細(xì)節(jié)

特性分析

難點(diǎn)

實(shí)戰(zhàn)應(yīng)用

代碼示例

優(yōu)化與改進(jìn)

代碼示例

常見問題

總結(jié)與展望

您的項(xiàng)目需求