零基礎教你學前端-3.HTML基本格式

天我們來學習HTML基本格式。

H1 標簽定義了一個文檔的標題，雖然在瀏覽器里顯示了預期的效果，但它并不是一個符合規范的 html 文檔，今天我們就來定義一個標準的 html 文檔。

這是一個 html 文檔的基本格式，來深入的剖析一下

<!DOCTYPE html> 這個標簽會告訴瀏覽器，后面書寫的是HTML5規范的語法，瀏覽器會按照 HTML5 的語法規范進行解析

<html lang='en'> 包裹了整個頁面的所有內容，有時被稱為根元素。

<head> 是所有頭部元素的容器，描述了文檔的各種屬性和信息，比如文檔的標題，文檔引用的樣式表和JS腳本文件，頁面元信息等等，絕大多數文檔頭部包含的數據，都不會真正作為內容顯示給瀏覽者。

<title> 設置頁面的標題，也就是出現在瀏覽器標簽中的內容，它描述頁面被加入入書簽或收藏時的標題

<body> 它包含了頁面展示的所有內容，比如文字，圖片，視頻，游戲，可播放的音樂等等

一般情況下一個符合規范的 html 文檔都應該使用這個基本格式

回到編輯器我們創建一個文件名字叫 base.html 我們快速的編寫好 html 基本格式，在 <body> 標簽里寫一個 h1 在里面寫一些內容，瀏覽器中打開頁面正常的顯示了，每個頁面都寫這么多東西很麻煩我們有 vscode。

刪除所有內容在頁面里只需一個感嘆號，再按一下 tab 鍵，html 基本格式自動生成了，這時就可以直接在 body 內編寫網頁內容了。

通過觀察基本結構發現標簽前面有的有空格有的沒有空格這是為什么呢實際上當出現標簽嵌套的時候需要保持一個固定的縮進，一般采用兩個或者四個空格具體看個人習慣和開發團隊的規范，為了方便閱讀不推薦混用。有些標簽嵌套在一起，這就是標簽結構嵌套

在一個標簽內再次書寫一個標簽他們之間形成了這樣的包裹關系，別包裹的叫做子標簽，包裹的就是父標簽。

在父子標簽嵌套的時候子標簽整體相對于父標簽多一套縮進，更加方便閱讀。

版規則

縮進

使用2個空格縮進

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小寫

只允許使用小寫。

所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和CDATA），選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png"
alt="Google">

行為空格

建議刪除行尾白空格。

<!-- 不推薦 -->
<p>What?  </p>

<!-- 推薦 -->
<p>Yes please.</p>

常規Meta規則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規則。

<!-- 網頁編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項目的復雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環注釋：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms輸出注釋：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab選項卡內容注釋：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規HTML設計規則

文檔類型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫有效、正確的HTML代碼，否則很難達到性能上的提升。

可以使用一些工具驗證你的代碼，如 W3C HTML validator

HTML 的語義性

根據HTML各個元素的用途而去使用它們。

<!-- 不推薦 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推薦 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分標簽說明：

div 主要用于布局，分割頁面的結構;
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;

多媒體元素降級處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標簽中忽略type屬性。

HTML5默認type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規則

每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁面良好層次

保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

權重標簽使用

H標簽使用

h1 權重高，體現當前網頁中相對比較重要的信息，但不宜過多，建議一個頁面只放一個;
h2 可以做副標題;
h3 可以做新聞列表;
h4-h6 可做相關新聞的列表標簽屬性完整;

strong、b使用

將需要加粗的文字使用b標簽來顯示。

將需要強調的文字（主要指包含關鍵詞的信息）使用strong標簽來強調主要內容。

注：b是粗體標簽，屬于實體標簽，它所包圍的字符將被設為bold（粗體）；strong 是加重語氣標簽，屬于邏輯標簽，它的作用是加強字符語氣。

標簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關說明或目的意義。

例如：當使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內容是什么；又或者當一個圖片型鏈接出現時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。

注：僅在img里添加alt標簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標移上去顯示提示信息應該用title，嚴謹的寫法是img里加入alt和title這兩個標簽。

精簡代碼

代碼保持精簡，最優化，這樣搜索引擎才更喜歡。

構建現代網頁時，圖片是不可或缺的元素之一。它們能夠增強視覺吸引力，幫助傳達信息，并提升用戶體驗。然而，如果圖片沒有得到適當的優化，它們可能會顯著拖慢網站的加載速度，影響用戶體驗和搜索引擎優化（SEO）。在本文中，我們將探討不同的圖片格式，并提供優化這些格式的策略和示例。

常見的圖片格式

JPEG（或JPG）

優點：支持高色彩深度，適合處理照片和復雜的圖像。
缺點：有損壓縮，可能會在高壓縮率下失去細節。
使用場景：適用于色彩豐富且沒有透明度要求的圖片。

PNG

優點：支持透明度，無損壓縮，保留細節。
缺點：文件大小通常大于JPEG。
使用場景：適用于需要透明度或者高保真度的圖形，如徽標和圖標。

GIF

優點：支持動畫和透明度（僅限單色透明）。
缺點：僅支持256色，質量較低。
使用場景：適用于簡單動畫和小圖標。

WebP

優點：支持透明度和有損以及無損壓縮，壓縮率高于JPEG和PNG。
缺點：兼容性不如JPEG和PNG廣泛。
使用場景：適用于需要優化加載速度的網頁，同時保持較高的圖像質量。

SVG

優點：矢量格式，可無限放大而不失真，文件大小小。
缺點：不適合復雜的照片。
使用場景：適用于圖標、徽標、圖表和其他可縮放圖形。

圖片優化策略

選擇正確的格式

根據圖片內容和用途選擇最合適的格式。例如，對于網頁上的照片，JPEG可能是最佳選擇，因為它在保持相對較小的文件大小的同時提供了良好的圖像質量。對于需要透明背景的圖標，PNG可能更合適。

壓縮圖片

使用工具或服務壓縮圖片，減少文件大小。例如，使用在線工具如 TinyPNG 來壓縮PNG文件，或者使用 Adobe Photoshop 的“存儲為Web所用格式”功能來減小JPEG文件的大小。

調整尺寸

根據需要在網頁中顯示的大小調整圖片尺寸。不要上傳超大的圖片然后依賴瀏覽器縮放，因為這會導致不必要的加載時間。

使用響應式圖片

通過 HTML5 的 <picture> 元素或 srcset 和 sizes 屬性，可以為不同屏幕尺寸提供不同大小的圖片。

延遲加載

對于非視口內的圖片，可以使用延遲加載（lazy loading）技術。這樣，只有當用戶滾動到圖片位置時，圖片才會加載。

使用CDN

使用內容分發網絡（CDN）來分發圖片，可以減少加載時間，因為圖片會從離用戶最近的服務器加載。

實例分析

示例1：優化網頁照片

假設你有一個高分辨率的照片，原始尺寸為4000x3000像素，文件大小為5MB。如果這張照片要在網頁上以800x600像素的尺寸展示，那么：

使用圖像編輯工具將尺寸調整為800x600像素。
選擇JPEG格式，并設置合適的壓縮比例，比如70%的質量。
使用TinyJPG等在線工具進一步壓縮處理。
TinyJPG – Compress WebP, PNG and JPEG images intelligently

優化后的圖片可能只有100KB左右，大大減少了加載時間。

示例2：優化圖標

如果你有一個圖標，需要在網頁上以多種尺寸展示，并且需要透明背景：

使用SVG格式，因為它支持透明度，且大小不會隨著尺寸變化而變化。
如果SVG不可行，選擇PNG格式，并確保圖片尺寸不大于實際需要的尺寸。

結論

圖片優化對于提高網頁加載速度至關重要。通過選擇合適的圖片格式，壓縮文件大小，調整尺寸，使用響應式圖片技術，實現延遲加載，以及利用CDN，可以確保圖片在不犧牲質量的情況下快速加載。這不僅能提升用戶體驗，還能對SEO產生積極影響。

在線咨詢

上一篇：HTML常用全部代碼，你懂，你不想成功都難
下一篇：好程序員HTML5培訓教程-html和css的使用方法以及樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商