HTML

瀏覽器開發工具是前端開發者工具箱中的基本元素，並且在所有現代瀏覽器中都可用。了解它們對您有什麼幫助的基礎知識。 瀏覽器開發工具 HTML結構和CSS HTML面板 CSS樣式面板 控制台 執行自定義JavaScript 錯誤報告 模擬器 網絡面板 JavaScript調試器 應用程序和存儲 存儲 應用程序 安全選項卡 審計 瀏覽器開發工具 我認為網站和 Web 應用程序的建構從來都不是一個容易的任務，就像後端技術那樣，但是總的來說，客戶端開發相對較容易。 一旦你弄清楚了 Internet Explorer 和 Netscape Navigator 之間的差異，並避免了專屬的標籤和技術，你所需要使用的只有 HTML，稍後是 CSS。 JavaScript 是一種用於創建對話框等功能的技術，但絕對不像今天這樣普及。 雖然許多網頁仍然是純 HTML+CSS 的形式，就像這個頁面一樣，但是許多其他網站則是在瀏覽器中運行的真正應用程序。 僅僅提供網頁的源代碼，像瀏覽器一樣過去一樣的那樣，是不夠的。 瀏覽器需要提供關於它們如何呈現頁面以及頁面當前正在做什麼的更多信息，因此它們引入了一個用於開發人員的功能：它們的開發人員工具。 每個瀏覽器都不同，所以它們的開發人員工具也略有不同。在撰寫本文時，我最喜歡的開發人員工具是由 Chrome 提供的，這也是我們在這裡討論的瀏覽器，儘管 Firefox 和 Edge 也有很好的工具。 HTML結構和CSS 最基本和常見的用法是檢查網頁的內容。打開開發人員工具時，你會看到的是元素面板： HTML面板 在左側是組成頁面的HTML。 在HTML面板上將鼠標懸停在元素上會突顯該元素在頁面中的位置，點擊工具欄中的第一個圖標可以點擊頁面中的元素並在檢查器中進行分析。 您可以將元素拖放到檢查器中，即時更改它們在頁面中的位置。 CSS樣式面板 在右側是應用於當前選中元素的CSS樣式。 除了編輯和禁用屬性之外，您可以通過點擊“+”圖標添加新的CSS屬性，並為所需的任何目標添加。 您還可以觸發選定元素的狀態，以便在活動、懸停或焦點時查看應用的樣式。 在底部，選中元素的框模型可以讓您快速查看邊距、填充、邊框和尺寸: 控制台 開發工具的第二個最重要的元素是控制台。 可以單獨查看控制台面板，也可以在元素面板中按下 Esc 鍵，它將顯示在底部。 控制台主要有兩個用途：執行自定義JavaScript 和錯誤報告。 執行自定義JavaScript 在控制台底部有一個閃爍的光標。您可以在這裡輸入任何JavaScript，它將立即執行。例如，嘗試運行： alert('test') 特殊標識符 $0允許您引用當前在元素檢查器中選中的元素。如果要將其作為 jQuery 選擇器引用，請使用 $($0)。 您可以使用 shift-enter 來編寫多行。在腳本的末尾按 enter 鍵運行它。...

有許多在線工具可以幫助您 lint 或格式化程式碼。本文列出了一些對 HTML、CSS 和 JavaScript 最有用的工具。 改進您的JavaScript程式碼的流行專案的官方在線版本 Prettier（格式化程式碼） https://prettier.io/playground/ ESLint（程式碼檢查工具） https://eslint.org/demo JSHint （程式碼檢查工具） http://jshint.com/ 其他語言的工具 CSS http://www.codebeautifier.com/ HTML http://htmlformatter.com/ JSON https://jsonformatter.curiousconcept.com/ https://jsonformatter.org/ GraphQL http://toolbox.sangria-graphql.org/format 通用工具（能處理不止一種語法） https://ctrlq.org/beautifier/

在HTML中發現可訪問性的基礎知識。 設計HTML時要考慮到可訪問性非常重要。 具有可訪問性的HTML意味著殘障人士可以使用互聯網。完全失明或視力受損的用戶，聽力受損的人以及其他許多不同殘障人士都在使用互聯網。 不幸的是，這個話題沒有得到應有的重視，而且似乎不像其他話題那麼酷。 如果一個人不能“看見”您的頁面，但仍然希望閱讀其中的內容，怎麼辦？他們如何做到這一點呢？他們不能使用滑鼠，而是使用一種被稱為“螢幕閱讀器”的工具。您可以試試：Google提供免費的ChromeVox Chrome 擴展。可訪問性也應該確保工具能夠輕鬆選擇元素或通過頁面進行導航。 網頁和Web應用程序並不總是以可訪問性作為其首要目標來構建，也許版本1發布時它們並不可訪問，但是在事後仍然可以使網頁可訪問。越早越好，但永遠不算晚。 這對於我的國家非常重要，政府或其他公共組織建立的網站必須具備可訪問性。 那麼，使HTML可訪問意味著什麼？讓我舉個例子來說明您需要考慮的主要事項。 注意：還有其他一些事項需要注意，這些事項可能屬於CSS主題，例如顏色、對比和字型。或者如何使SVG圖像可訪問。我不在這裡談論這些。 使用語義化HTML 語義化的HTML非常重要，這是您需要注意的主要事項之一。讓我舉幾個常見的情境來說明。 對於標題標籤，使用正確的結構非常重要。最重要的是h1，次要的使用更高的數字，但是同級標題的含義應該相同（將其想像為樹狀結構） <h1> <h2> <h3> <h2> <h2> <h3> <h4> </h1> 使用strong和em代替b和i。在外觀上看起來是一樣的，但前兩個具有更多相關含義。b和i更多地用於視覺元素。 列表很重要。屏幕閱讀器可以檢測到列表並提供概覽，然後讓用戶選擇是否進入列表。 表格應該有一個描述其內容的caption標籤： <table> <caption>狗的年齡</caption> <tr> <th>狗</th> <th>年齡</th> </tr> <tr> <td>羅傑</td> <td>7</td> </tr> </table> 為圖像使用alt屬性 所有圖像都必須有一個alt標籤來描述圖像內容。這不僅是一種良好的實踐，而且是HTML標準所要求的，沒有alt屬性的HTML無法通過驗證。 <img src="dog.png" alt="我的狗的照片"> 這對於搜索引擎也很好，如果這對您來說是一個激勵。 使用role屬性 role屬性可讓您為頁面中的各個元素分配特定角色。 您可以分配很多不同的角色：補充、列表、列表項目、主要、導航、區域、標籤、警報、應用程序、文章、橫幅、按鈕、單元格、複選框、內容信息、對話框、文檔、饋源、圖片、列表框、行、行組、搜索、切換、表格、選項卡面板、文本框、計時器等等。 有很多角色，對於每個角色的完整參考，我給您提供此MDN鏈接。但您不需要為頁面中的每個元素都分配一個角色。大多數情況下，屏幕閱讀器可以根據HTML標籤推斷出元素的角色。例如，您不需要為像nav、button、form這樣的語義標籤添加角色標籤。 讓我們以nav標籤為例。您可以使用它來定義頁面的導航，就像這樣： <nav> <ul> <li><a href="/">首頁</a></li> <li><a href="/blog">博客</a></li> </ul> </nav> 如果您不得不使用div標籤而不是nav，則可以使用navigation角色： <div role="navigation"> <ul> <li><a href="/">首頁</a></li> <li><a href="/blog">博客</a></li> </ul> </div> 在這裡，我們給出了一個實際的例子：當標籤本身沒有傳達含義時，使用role來賦予其有意義的值。 使用tabindex屬性 tabindex 屬性允許您改變按 Tab 鍵時選擇“可選”元素的順序。默認情況下，只有鏈接和表單元素可以通過使用 Tab 鍵進行選擇（您不需要在它們上設置tabindex）。...

我已經在這個博客上寫了很長一段時間了。在這段時間裡，我涵蓋了許多不同的主題。 回顧往事，我從一些隨機的 Web 開發主題開始，然後專注於 Go、React、Node.js、CSS、HTML、瀏覽器 APIs、Next.js、Vue.js、Svelte、數據庫、Python、Swift，甚至電子學和 C 語言。 有時候，當我有希望寫一些與我通常所寫的主題不同的內容時，我會考慮一下。 這是我的博客，它不是一本名為“Web 開發”或其他類似的出版物。 儘管如此，當你長時間寫關於一個主題時，即使是像我這樣涵蓋了廣泛範圍的主題，你也會開始覺得自己與讀者之間有一個“合約”。 如果我決定寫關於 X 的內容而讀者對此不感興趣，會發生什麼事呢？他們會停止閱讀或關注這個博客嗎？他們會取消訂閱郵件通訊嗎？ 除非你完全偏離了主題，否則幾乎從不會有這種情況。 你讀到了上面的主題列表嗎？它們之間幾乎沒有什麼相關性，除了它們都與編程有關。但是一位 React 開發者對於 C 語言或 CSS 沒有興趣。 因此，廣泛的專業領域是編程，在這個領域下我可以寫關於任何事情。 如果我開始寫關於園藝、狗、或者徒步旅行之類的內容，那就不一樣了。 有時候我會談論商業方面的事情，或者內容的製作，但這些都是相關的。 我考慮過在旅行時寫一些類似“旅遊博客”的帖子，只是為了做些不同的事情。也許有一天我會寫，儘管我不想讓讀者困惑。還有 Google 啊哈哈。 對我來說，規則是寫我想寫的內容。每天寫一篇帖子是關鍵。否則我早就停下來了。如果有一天我想寫關於旅行、烹飪或其他任何事情的內容，我就會去寫。 有時候我寫一篇關於如何為數字遊牧在整個歐洲旅行期間設置我的面包車的帖子，說實話，關於這些主題我獲得了更多的回覆。也許只是因為在他們那個時代這有些不尋常。 我將來要做的一件事是開始寫關於 SwiftUI 和 iOS 開發的內容。我已經考慮了好幾個月了。其實，我想已經有幾年了。 但現在我覺得是合適的時候了。 過去，我決定寫一些我不是非常熱衷的主題，比如數據庫。我對數據庫有多少熱情呢？我開始寫了幾天後就停下來了。 但我想，我可以寫一些我對於 iOS 應用的想法，計劃階段，開發過程，上架 App Store，等等的內容，這可能是我的一部分讀者非常感興趣的內容。 也許他們也有一個 iOS 應用的想法，這可能會是他們開始的觸發點。 我是否對 Web 開發厭倦了？絕對不是。而且任何 iOS 應用也需要與 Web 或 API 相應的對應組件，所以這不意味著我會停止寫關於它的內容。 而且我喜歡 JavaScript。 我只是喜歡編程。用代碼創造事物。不管是 Web 應用、iOS 應用還是桌面應用，都無關緊要。 對我來說，改變一下我寫關於什麼的方式只是為了多元化並保持我的能量水平高。 對我來說一直都是這樣。我會工作在一個 Web 應用上，然後轉到 iOS 應用，然後再轉到 macOS 開發，然後再回到 Web 應用。...

在開發網頁時，您可能會見到類似以下的鏈接： <a href="#">功能</a> 這裡的 href="#" 是一個佔位符。該鏈接不會指向任何特定的地方。 有時這表示應用程序正在進行中，我們稍後會填寫該鏈接的 href 屬性。 其他情況下，您可能會見到以下類似的鏈接： <a href="#features">功能</a> 這種情況下，該鏈接引用了同一頁面中的某一點。 您會在頁面中找到類似以下元素： <a id="features">功能</a> 這個元素也可以是一個空元素，它存在於頁面上，但是被隱藏起來： <a id="features"></a> 請注意，我們在這裡使用了 id。 點擊這個項目： <a href="#features">功能</a> 將會跳轉到 id 等於 features 的 <a> 標簽。 完整描述一下，如果鏈接是這樣的： <a href="/features">功能</a> 點擊時，瀏覽器將在一個單獨的 URL 上打開。 您還可以結合使用，比如： <a href="/features#first">功能</a> 將打開 /features 的 URL，並滾動到 id="first" 的 <a> 標簽。

JSX是React引入的一個技術。讓我們深入了解一下。 JSX簡介 JSX入門 轉譯JSX JS in JSX 在JSX中使用HTML 您需要關閉所有標籤 駱駝命名法是新的標準 class變成className style屬性改變其語義 表單 React中的CSS 為什麼這比純CSS / SASS / LESS更受青睞？ 這是首選解決方案嗎？ JSX中的表單 value屬性和defaultValue屬性 更一致的onChange事件 JSX自動轉義 JSX中的空格 水平空格被修剪為1個 垂直空格被消除 在JSX中添加註釋 擴展屬性 如何在JSX中進行循環 JSX簡介 JSX是由React引入的一項技術。 儘管React在不使用JSX的情況下也可以正常工作，但它是與組件一起工作的理想技術，因此React從JSX中獲益良多。 起初，您可能會認為使用JSX就像混合HTML和JavaScript（以及CSS）。 但事實並非如此，因為使用JSX語法時，實際上是用JavaScript編寫一個組件UI的聲明語法。 您使用的不是字符串描述UI，而是使用JavaScript，這使您能夠做許多好事。 JSX入門 以下是如何定義包含字符串的h1標籤的示例： const element = <h1>Hello, world!</h1> 它看起來像JavaScript和HTML的奇怪混合，但實際上它是完全的JavaScript。 看起來像HTML，實際上是為了定義組件以及它們在標記中的定位而添加的語法糖。 在JSX表達式中，可以非常容易地插入屬性： const myId = 'test' const element = <h1 id={myId}>Hello, world!</h1> 只需注意，當屬性具有連字符（-）時，它會轉換為駝峰命名法。還有兩種特殊情況： class變成className for變成htmlFor 這是因為它們是JavaScript中的保留字。 以下是一個將兩個組件包裝到div標籤中的JSX片段的示例： <div> <BlogPostsList /> <Sidebar /> </div> 標籤始終需要關閉，因為這更像是XML而不是HTML（如果您還記得XHTML的日子，這將是熟悉的，但此後採用了HTML5鬆散語法）。在這種情況下，使用了自閉標籤。 請注意，我將2個組件包裝到div中。為什麼？因為**render()函數只能返回單個節點**，所以如果您要返回2個兄弟節點，只需添加一個父節點。它可以是任何標籤，不僅僅是div。 轉譯JSX 瀏覽器無法執行包含JSX代碼的JavaScript文件。它們必須首先轉換為常規JS。...