整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML常用標簽有：a標簽、table標簽、img標簽、form標簽和input標簽。
作用
屬性
（一）href
href是hyper reference的縮寫，超鏈接的意思。
用于指定鏈接目標的ur地址，(必須屬性)當為標簽應用href屬性時，它就具有了超鏈接的功能；
href=“#”表示這是一個空鏈接；
如果href里面地址是—個文件或者壓縮包,會下載這個文件。
<a href="https://google.com">超鏈接到google網站的主頁</a>
<a href="https://google.com">超鏈接到google的主頁</a>
<a href="//google.com">超鏈接到google的主頁</a>展現形式：
點擊此鏈接，即可到達google的主頁
a標簽href的取值：
1、上述代碼中的網址的取值(推薦使用第三行的代碼)
<a href="//google.com">超鏈接到google的主頁</a>
由于此方式能夠自動補齊相關的網絡地址，前面兩種寫錯就會報錯，所以推薦使用。
2、路徑
當前路徑下的a里面的b，b里面的c
在當前目錄下尋找index.html文件
3、偽協議
<a href="javascript：;">點擊后無任何點擊或刷新等動作的反應</a><a href="#要跳轉的元素的id"></a>點擊鏈接的時候，會跳轉到指定元素所在的位置。
<a href="mailto:abcdefg@163.com ">發郵件給我</a><a href="tel:12345678901">打電話給我</a>（二）targe
用于指定鏈接頁面的打開方式
a的target取值
1、內置名字
_blank 在空白頁打開
_self 在當前頁面打開
_parent 在父級窗口打開
_top 在最頂級的窗口打開
<a href="//google.com" target="_blank">超鏈接到google網站的主頁在空白頁打開</a>2、程序員的命名
window：name（在xxx頁面打開）
iframe的name（iframe現在已經很少使用了，是指內嵌窗口）
（三）download
下載頁面，但目前很少用，有的瀏覽器不支持，尤其是手機瀏覽器可能不支持。
1、table標簽的語法：
thead:表頭
tbody:表的內容，用于定義
tfoot:表的腳部
tr:table row,表格里的行
th:表格的表頭部分，其中的文本內容字體加粗居中顯示
td:table data,表格數據，用于定義表格中的單元格
<!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>小藍</th>
</tr>
</thead>
<tbody>
<tr>
<th>數學</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標簽為空
2、table的樣式
table-layout：auto；自動計算每一行的寬高
table-layout：fixed；通過列表的寬度來決定平均寬度
border-collapse：collapse； 合并邊框(默認邊框與邊框之間不合并)
border-spacing：0；邊框為0.(邊框與邊框之間的距離)。
作用：發出get請求，展示一張圖片。
<img src="1.JPG" alt="頭像" width="400" />當前路徑下的1.jpg，確定寬度為400，只寫寬度高度會自適應
屬性
alt：alternate的縮寫，替換的意思。替換文本，圖像不能顯示的文字。
路徑錯誤顯示alt內容
title：提示文本。鼠標放到圖像上，顯示的文字。
響應
max-width：100% 所有的圖片在手機上都自適應寬度，寬度最大為100%。
事件
onload/onerror 監聽圖片是否加載成功，加載成功時用onload，不成功是用onerror事件。確保在onerror事件能夠補救。
<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>監聽成功時，打印出成功
監聽失敗時，先打印出監聽失敗并且開始執行加載失敗是的挽救圖片。404.jpg文件執行
本文為作者本人的原創文章，著作權歸作者本人和饑人谷所有，轉載務必注明來源。
們先來看個例子：
在這個網頁中，同時在一個頁面中展示了三個網站：千鋒教育官網、千鋒教育HTML5大前端官網、千鋒教育HTML5大前端好程序員官網。這是如何做到的呢？
其實也不難，使用 iframe 就可以實現了。 iframe的作用 是，用來在一個網頁中顯示另一個網頁。
iframe 是個雙標簽，基本語法為：尖角號iframe，尖角號 /iframe。
iframe 標簽有五個基本屬性：
src 屬性，資源的意思，用以引入其他網站的頁面，值是一個頁面路徑。
width 屬性，寬度的意思，用以控制引入頁面的寬度，值是一個數字。
height 屬性，高度的意思，用以控制引入頁面的高度，值是一個數字。
frameborder 屬性，框架邊框的意思，默認引入的框架帶有邊框，通常情況下將該屬性值設置為0，來取消框架的邊框。
scrolling[?skr??l??] 屬性，滾動的意思，用來控制是否顯示框架的滾動條，值有三個：
auto，在需要的情況下出現滾動條，也是默認值。
yes，始終顯示滾動條。
no，從不顯示滾動條。
我們來做個例子。
打開編輯器，新建一個 iframe-demo.html 文件，補全基礎代碼，在 body 里添加 iframe 標簽，首先定義 src 屬性，值為 http://www.qfedu.com，frameborder 屬性的值設置為1，顯示邊框。保存頁面。
在瀏覽器中打開頁面。千鋒教育的官網在 iframe 的默認大小的窗口里顯示了。
返回編輯器，給 iframe 定義屬性 width 等 800，height 等于 600，保存。
回到瀏覽器，刷新，iframe 的窗口變大了。可以通過滾動條查看網站內容。
返回編輯器，如果給iframe 定義一個scrolling 屬性，值為 no 的話，滾動條就不見了。
回到瀏覽器，刷新。此時就不能查看窗口隱藏的內容了。
iframe 也可以作為一個鏈接的目標框架。鏈接的 target 屬性必須設置為 iframe 的 name 屬性。
比如給 iframe 定義 name 屬性的值為 iframe_a，鏈接 a 的 target 屬性值也設置為 iframe_a。這樣，當點擊鏈接時，千鋒教育的官網就在這個 iframe 窗口里打開了。
<iframe name="iframe_a">
<a href="http://www.qfedu.com/" target="iframe_a">千鋒教育</a>
我們再來看個例子，當點擊三個鏈接，iframe 里顯示了相應鏈接的網站。
我們來實現這個例子。
回到編輯器，創建一個 iframe-example.html 文件，補全基本代碼，在 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 鍵自動補全代碼。很明顯，這不是我們要的代碼。
這怎么辦呢？聰明的你一定想到了，在小學數學里，通過添加小括號來設置運算優先級的法則。
我們在 a 的前面，b 的后面填上一對括號， (a[href target=iframe_a]>b)*3 我們把這個 emmet 放到注釋里保存一下。
將光標移至 emmet 語句的結尾，按下 tab。期望的代碼生成了。
如果你是完美主義者，這個代碼你也不滿意，能不能換行顯示三個 a 標簽呢？大家跟我一起做：
點擊 VSCode 左下角的齒輪圖標，再點擊設置，打開設置窗口。
點擊擴展菜單，再點擊 emmet，找到 Syntax(森太課思) Profiles，在 settings（賽ten 思）.json 中編輯。
在這里輸入 html 冒號 大括號，在大括號里寫入 inline_break 冒號 2，表示標簽數大于 兩 組，就折行顯示。
"html": {
"inline_break": 2
},
關閉設置。
把剛才保存的 emmet 命令再拷貝過來，按下 tab 鍵，完美的代碼生成了！
給三個a 標簽填好鏈接地址和文本內容。
這里需要注意，a 鏈接的地址可以是互聯網的網站地址，也可以是你自己制作的本地頁面地址，這些頁面都可以在 iframe 中顯示。
我們發現三個鏈接的target屬性都指向了同一個iframe。保存一下頁面。
回到瀏覽器，刷新。分別點擊三個鏈接，iframe 里分別顯示了三個網站的頁面。
文章配套視頻鏈接「鏈接」
在前端開發領域，JavaScript作為Web的核心語言之一，其重要性不言而喻。隨著ES6及后續版本的推出，JavaScript引入了許多新特性，極大地豐富了語言的表達能力和功能。本文旨在探討一個相對較少被提及的特性——雙冒號(::)運算符，它用于訪問類的靜態成員。雖然這個特性尚未在所有環境中得到廣泛支持，但了解它有助于我們更好地理解JavaScript的未來發展方向以及如何利用這些新特性優化我們的代碼。
雙冒號運算符是ECMAScript提案的一部分，旨在為JavaScript類提供更直觀的靜態方法和屬性訪問方式。這個運算符允許我們在類的實例上調用靜態方法或訪問靜態屬性，這在其他面向對象的語言中是很常見的做法。
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'
雙冒號運算符的實現涉及到JavaScript引擎對類和原型鏈的理解。當使用::運算符時，JavaScript引擎會在類的構造函數上查找靜態方法或屬性，而不是在實例的原型鏈中查找。
這個特性的一個關鍵點在于，即使是在類的實例上調用了靜態方法或屬性，JavaScript引擎仍然能夠正確地找到這些靜態成員。這對于那些習慣了在實例上調用靜態方法的開發者來說是一個福音，因為它提供了與許多其他面向對象語言相似的行為。
然而，這個特性也帶來了一些挑戰。例如，由于并非所有JavaScript環境都支持雙冒號運算符，因此在生產環境中使用它可能會導致兼容性問題。此外，過度依賴此類特性可能會使代碼難以維護，特別是對于那些不熟悉這一特性的開發者。
在實際項目中，我們可以利用雙冒號運算符來簡化靜態成員的調用，尤其是在處理復雜的類層次結構時。例如，在一個游戲引擎中，我們可能有一個Game類，其中包含多個靜態方法用于初始化和配置游戲設置。
class Game {
static initialize(config) {
// 初始化游戲配置
}
static start() {
// 開始游戲
}
}
const gameInstance = new Game();
gameInstance::Game.initialize({ width: 800, height: 600 });
gameInstance::Game.start();
雖然雙冒號運算符為訪問靜態成員提供了便利，但在使用時仍需謹慎。考慮到瀏覽器和運行時環境的兼容性，我們應當在代碼中添加適當的檢測和回退機制，以確保在不支持該運算符的環境中也能正常運行。
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');
}
問題：在不支持雙冒號運算符的環境中，如何訪問靜態成員？
解決方案：直接通過類名訪問靜態成員，或者使用polyfill來模擬雙冒號運算符的行為。
// 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,
});
}
雙冒號運算符為JavaScript帶來了更接近傳統面向對象編程語言的靜態成員訪問方式。盡管目前它的支持有限，但隨著ECMAScript標準的演進，我們有理由期待這一特性的廣泛采納。掌握這一特性不僅能夠幫助我們寫出更優雅、更可讀的代碼，還能夠讓我們在未來的項目中更加自信地應對新的技術挑戰。
總之，雙冒號運算符是JavaScript向前邁出的又一步，它展示了語言設計者們致力于提升開發者體驗的決心。隨著更多現代瀏覽器和運行時的支持，我們期待看到這一特性在實際項目中的廣泛應用，進一步推動前端開發領域的創新和發展。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
