HTML URL編碼

RL也被稱為網址。

URL 可以由單詞組成,比如 "w3school.com.cn"，或者是因特網協議(IP)地址：192.168.1.253。

大多數人在網上沖浪時,會鍵入網址的域名,因為名稱比數字容易記憶。

URL(Uniform Resource Locator)

當您點擊 HTML 頁面中的某個鏈接時,對應的<a>標簽指向萬維網上的一個地址。

統一資源定位器(URL)用于定位萬維網上的文檔(或其他數據)。

網址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的語法規則：

scheme://host.domain:port/path/filename

解釋：

scheme 定義因特網服務的類型。最常見的類型是 http

host 定義域主機(http 的默認主機是 www)

domain 定義因特網域名，比如 w3school.com.cn

:port 定義主機上的端口號(http 的默認端口號是 80)

path 定義服務器上的路徑(如果省略，則文檔必須位于網站的根目錄中)。

filename 定義文檔/資源的名稱

編者注：URL 的英文全稱是 Uniform Resource Locator，中文也譯為"統一資源定位符"。

URL Schemes

以下是其中一些最流行的 scheme：

Scheme 訪問用于...

http 超文本傳輸協議以 http:// 開頭的普通網頁。不加密。

https 安全超文本傳輸協議安全網頁。加密所有信息交換。

ftp 文件傳輸協議用于將文件下載或上傳至網站。

file 您計算機上的文件。

URL編碼

URL只能使用ASCII字符集來通過因特網進行發送。

由于URL常常會包含ASCII集合之外的字符,URL 必須轉換為有效的ASCII格式。

URL編碼使用"%"其后跟隨兩位的十六進制數來替換非ASCII字符。

URL不能包含空格。URL編碼通常使用+來替換空格。

URL編碼表參考

http://www.w3school.com.cn/tags/html_ref_urlencode.html

頁 URL 中的特殊字符 “空格” 問題

Java 代碼案例

1、將一段內容和接口拼接成 URL 鏈接

代碼示例

java復制代碼public static String generateContent(String content) {
      // 將 content 進行 url 編碼
      String ans;
      try {
          ans = URLEncoder.encode(content, "UTF-8");
      } catch (UnsupportedEncodingException e) {
          // 處理異常情況
          throw new RuntimeException(e);
      }

      return ans;
}

1、不帶空格的處理

java復制代碼public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最終生成的 URL 的值為：" + ansUrl);
}

運行結果：

perl復制代碼https://example.com/resource?a=%E5%B0%8F%E9%BB%91

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

ini復制代碼example.com/resource?a=小黑

網頁截圖：

2、帶有空格的處理

java復制代碼public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小 黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最終生成的 URL 的值為：" + ansUrl);
}

運行結果：

perl復制代碼https://example.com/resource?a=%E5%B0%8F+%E9%BB%91

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

ini復制代碼https://example.com/resource?a=小+黑

網頁截圖：

3、解決空格的問題

java復制代碼public static String generateContent(String content) {
      // 將 content 進行 url 編碼
      String ans;
      try {
					// -----------------------調整-----------------------
          ans = URLEncoder.encode(content, "UTF-8").replace("+", "%20");
      } catch (UnsupportedEncodingException e) {
          // 處理異常情況
          throw new RuntimeException(e);
      }

      return ans;
}

public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小 黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最終生成的 URL 的值為：" + ansUrl);
}

運行結果：

perl復制代碼https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

ini復制代碼https://example.com/resource?a=小 黑

網頁截圖：

其中 %20 是空格經過編碼后的結果

2、問題解決的原因

從上面的案例可以看到，如果 url 中有空格出現，且不經過特殊處理，那么將會導致瀏覽器無法正確解析 url，從而導致 url 重定向失敗，那么問題的原因是什么呢？首先來看一下URL的組成部分

1、URL 的組成部分

下面是一個簡單的 URL 鏈接：

bash復制代碼http://localhost:8080/path/to/index.html?id=123#content

它主要有下面幾個部分組成

協議：URL 的網絡傳輸協議,如 http、https、ftp 等。表示資源訪問需使用何種協議；
服務器名稱：表示要訪問的服務器主機名或 IP 地址；
端口（可選）：服務器使用的端口號，如 http 默認的端口是 80，https 默認的端口是443，如果省略則使用該協議的默認端口；
路徑：表示服務器上具體資源的路徑信息：例如“/index.html”；
查詢參數（可選）：路徑后加問號開頭的查詢字符串，用于傳遞額外的參數，如”?id=123”;
錨點（可選）：鏈接內的超鏈接錨點定位，例如“#content”；

HTTP請求不包括#
#是用來指導瀏覽器動作的，針對瀏覽器起作用,對服務器端完全無用
訪問http://www.example.com/index.html#print，瀏覽器實際發出的請求只是請求index.html，沒有"#print"部分。
位于#后面的字符都是位置標識符
在第一個#后面出現的任何字符，都會被瀏覽器解讀為位置標識符。這意味著，這些字符都不會被發送到服務器端。
在URL中指定一個顏色值 http://www.example.com/?color=#fff 但瀏覽器實際發出的請求是"#fff"被省略了。只有將#轉碼為%23，瀏覽器才會將其作為實義字符處理。http://example.com/?color=%23fff
改變#后面的參數不會觸發頁面重載
改變#后面的參數會改變瀏覽器的訪問歷史

用戶名密碼（可選）：用于基礎的 HTTP 認證的用戶名和密碼；

2、URL 編碼中遵循的規則

在 URL 編碼過程中，會遵循以下的規則：

空格：替換成 + （%20）
/：分割目錄和子目錄
?：分割 URL 和查詢
%：指定特殊字符
#：指定書簽（%23）
&：指定分隔參數（%26）
=：指定參數的值（%3D）

3、為何 URL 中不允許包含空格和部分特殊字符

URL 作為資源定位符,它需要保證各個組成部分(協議、主機名、端口、路徑等)之間使用統一的分隔符,通常采用斜線"/"。如果直接使用空格,很難區分路徑中的空格與路徑之間的分隔；
早期URL標準沒有規定如何處理空格等特殊字符,直接包含空格可能導致解析或匹配時產生歧義；
例如：http://www.example.com/products/product name.html
當瀏覽器在解析這個 URL 的時候，可能就會產生下面的歧義問題：
1、是否應該解析為兩個路徑組件"products/product"和"name.html”
2、搜索引擎或其他系統進行URL匹配檢索時,不清楚空格是否應該作為路徑分隔符來匹配； 3、攻擊者可以構造歧義URL,利用空格來規避安全機制或進行異常操作；
包含空格特殊字符可能會破壞URL本身結構或導致安全問題；
包含空格可能導致傳輸或存儲時產生問題。例如傳輸過程中空格是否需要編碼等問題沒有明確規定；

版規則

縮進

使用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這兩個標簽。

精簡代碼

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

在線咨詢

上一篇：html的css3實現帶漸變的炫酷按鈕
下一篇：JavaScript定時器

您的項目需求

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

整合營銷服務商

HTML URL編碼

頁 URL 中的特殊字符 “空格” 問題

Java 代碼案例

1、將一段內容和接口拼接成 URL 鏈接

1、不帶空格的處理

2、帶有空格的處理

3、解決空格的問題

2、問題解決的原因

1、URL 的組成部分

2、URL 編碼中遵循的規則

3、為何 URL 中不允許包含空格和部分特殊字符

版規則

縮進

大小寫

行為空格

常規Meta規則

編碼

注釋

常規HTML設計規則

文檔類型

HTML 的正確性

HTML 的語義性

多媒體元素降級處理

type屬性

HTML代碼格式規則

HTML與SEO

頁面良好層次

權重標簽使用

標簽屬性使用

精簡代碼

您的項目需求