CSS字体设置_html/css_WEB-ITnose

原生懶加載是一種瀏覽器內置功能，通過在標籤中添加loading="lazy"屬性實現延遲加載圖片。 1.它無需JavaScript或第三方庫，直接在HTML中使用；2.適合用於頁面下方非首屏顯示的圖片、圖片畫廊滾動加載項和大型圖片資源；3.不適合首屏圖片或display:none的圖片；4.使用時應設置合適的佔位空間以避免佈局抖動；5.應結合srcset和sizes屬性優化響應式圖片加載；6.需要考慮兼容性問題，部分舊瀏覽器不支持，可通過特性檢測並結合JavaScript方案作

srcset和sizes是HTML實現響應式圖片的關鍵屬性。 srcset提供多個圖片源及其寬度或像素密度，如400w、800w，瀏覽器據此選擇合適圖片；sizes則定義圖片在不同屏幕寬度下的顯示寬度，如(max-width:600px)100vw,50vw，使瀏覽器更精準匹配圖片尺寸。實際使用中需準備多尺寸圖片、命名清晰、配合媒體查詢設計佈局，並測試設備表現，避免忽略sizes或單位錯誤，從而節省帶寬並提升性能。

與的主要區別在於，textarea支持多行文本輸入，而inputtext僅限單行。 1.使用inputtype="text"適用於短小、單行的用戶輸入，如用戶名、郵箱等，可設置maxlength限製字符數，瀏覽器提供自動填充功能，更易跨瀏覽器統一樣式；2.使用textarea用於需要多行輸入的場景，如評論框、反饋表單，支持換行和段落，可通過CSS控制大小或禁用調整功能。兩者均支持佔位符、必填等表單特性，但textarea通過rows和cols定義尺寸，input則使用size屬

是塊級元素，用於劃分大塊內容區域；是內聯元素，適合包裹小段文字或內容片段。具體區別如下：1.獨占一行，可設置寬高、內外邊距，常用於佈局結構如頭部、側邊欄等；2.不換行，僅佔據內容寬度，用於局部樣式控制如變色、加粗等；3.使用場景上，適用於整體區域的排版與結構組織，而用於不影響整體佈局的小範圍樣式調整；4.嵌套時，可包含任何元素，而內部不應嵌套塊級元素。

要實現一個基礎的彈窗效果，需按照以下步驟操作：1.結構：用HTML創建觸發按鈕、遮罩層和彈窗內容區域；2.樣式：通過CSS設置默認隱藏、居中佈局、遮罩背景及關閉按鈕樣式；3.交互：使用JavaScript綁定點擊事件控制彈窗顯示與隱藏，並可擴展ESC鍵關閉功能；4.優化：添加CSS動畫提升用戶體驗。整個過程無需第三方庫，適合快速實現基本彈窗功能。

Webworkers是運行在瀏覽器後台的獨立線程，用於執行耗時任務而不阻塞用戶界面。它們通過JavaScript文件實現，由HTML頁面中的腳本啟動，但一旦運行便與主線程分離。 1.Webworkers無法直接訪問DOM，確保頁面穩定性；2.它們通過postMessage()和onmessage實現與主線程的安全通信；3.適合處理圖像、複雜計算、數據解析等CPU密集型任務；4.支持setTimeout、fetch和IndexedDB等部分API；5.使用時需注意調試困難、內存佔用、跨域限制等問題。

要快速入門HTML，只需掌握幾個基礎標籤即可搭建網頁骨架。 1.頁面結構必備、和，其中是根元素，包含元信息，是內容展示區域。 2.標題使用到，級別越高數字越小，正文用標籤分段，避免跳級使用。 3.鏈接使用標籤並配合href屬性，圖片使用標籤並包含src和alt屬性。 4.列表分為無序列表和有序列表，每個條目用表示且必須嵌套在列表中。 5.初學者不必強記所有標籤，邊寫邊查更高效，掌握結構、文本、鏈接、圖片和列表即可製作基礎網頁。

ShadowDOM是Web組件技術中用於創建隔離DOM子樹的技術。 1.它允許在普通HTML元素上掛載獨立的DOM結構，擁有自己的樣式和行為，不與主文檔互相影響；2.通過JavaScript創建，例如使用attachShadow方法並設置mode為open；3.結合HTML使用時具備結構清晰、樣式隔離和內容投影（slot）三大特點；4.注意事項包括調試複雜、樣式作用域控制、性能開銷及框架兼容性問題。總之，ShadowDOM提供了原生封裝能力，適用於構建可複用且不污染全局的UI組件。