整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
RL也被稱為網(wǎng)址。
URL 可以由單詞組成,比如 "w3school.com.cn"，或者是因特網(wǎng)協(xié)議(IP)地址：192.168.1.253。
大多數(shù)人在網(wǎng)上沖浪時(shí),會(huì)鍵入網(wǎng)址的域名,因?yàn)槊Q比數(shù)字容易記憶。
URL(Uniform Resource Locator)
當(dāng)您點(diǎn)擊 HTML 頁面中的某個(gè)鏈接時(shí),對(duì)應(yīng)的<a>標(biāo)簽指向萬維網(wǎng)上的一個(gè)地址。
統(tǒng)一資源定位器(URL)用于定位萬維網(wǎng)上的文檔(或其他數(shù)據(jù))。
網(wǎng)址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的語法規(guī)則：
scheme://host.domain:port/path/filename
解釋：
scheme 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host 定義域主機(jī)(http 的默認(rèn)主機(jī)是 www)
domain 定義因特網(wǎng)域名，比如 w3school.com.cn
:port 定義主機(jī)上的端口號(hào)(http 的默認(rèn)端口號(hào)是 80)
path 定義服務(wù)器上的路徑(如果省略，則文檔必須位于網(wǎng)站的根目錄中)。
filename 定義文檔/資源的名稱
編者注：URL 的英文全稱是 Uniform Resource Locator，中文也譯為"統(tǒng)一資源定位符"。
URL Schemes
以下是其中一些最流行的 scheme：
Scheme 訪問 用于...
http 超文本傳輸協(xié)議 以 http:// 開頭的普通網(wǎng)頁。不加密。
https 安全超文本傳輸協(xié)議 安全網(wǎng)頁。加密所有信息交換。
ftp 文件傳輸協(xié)議 用于將文件下載或上傳至網(wǎng)站。
file 您計(jì)算機(jī)上的文件。
URL編碼
URL只能使用ASCII字符集來通過因特網(wǎng)進(jìn)行發(fā)送。
由于URL常常會(huì)包含ASCII集合之外的字符,URL 必須轉(zhuǎn)換為有效的ASCII格式。
URL編碼使用"%"其后跟隨兩位的十六進(jìn)制數(shù)來替換非ASCII字符。
URL不能包含空格。URL編碼通常使用+來替換空格。
URL編碼表參考
http://www.w3school.com.cn/tags/html_ref_urlencode.html
代碼示例
java復(fù)制代碼public static String generateContent(String content) {
// 將 content 進(jìn)行 url 編碼
String ans;
try {
ans = URLEncoder.encode(content, "UTF-8");
} catch (UnsupportedEncodingException e) {
// 處理異常情況
throw new RuntimeException(e);
}
return ans;
}
java復(fù)制代碼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);
}
運(yùn)行結(jié)果：
perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F%E9%BB%91
粘貼到瀏覽器上會(huì)被瀏覽器解碼出來給用戶看到:
ini復(fù)制代碼example.com/resource?a=小黑
網(wǎng)頁截圖：
java復(fù)制代碼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);
}
運(yùn)行結(jié)果：
perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F+%E9%BB%91
粘貼到瀏覽器上會(huì)被瀏覽器解碼出來給用戶看到:
ini復(fù)制代碼https://example.com/resource?a=小+黑
網(wǎng)頁截圖：
java復(fù)制代碼public static String generateContent(String content) {
// 將 content 進(jìn)行 url 編碼
String ans;
try {
// -----------------------調(diào)整-----------------------
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);
}
運(yùn)行結(jié)果：
perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91
粘貼到瀏覽器上會(huì)被瀏覽器解碼出來給用戶看到:
ini復(fù)制代碼https://example.com/resource?a=小 黑
網(wǎng)頁截圖：
其中 %20 是空格經(jīng)過編碼后的結(jié)果
從上面的案例可以看到，如果 url 中有空格出現(xiàn)，且不經(jīng)過特殊處理，那么將會(huì)導(dǎo)致瀏覽器無法正確解析 url，從而導(dǎo)致 url 重定向失敗，那么問題的原因是什么呢？首先來看一下URL的組成部分
下面是一個(gè)簡(jiǎn)單的 URL 鏈接：
bash復(fù)制代碼http://localhost:8080/path/to/index.html?id=123#content它主要有下面幾個(gè)部分組成
在 URL 編碼過程中，會(huì)遵循以下的規(guī)則：
使用2個(gè)空格縮進(jìn)
<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>如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點(diǎn)，則遵守該站點(diǎn)的編碼規(guī)則。
<!-- 網(wǎng)頁編碼 -->
<meta charset="utf-8">盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。
注釋是否需要詳盡，取決于項(xiàng)目的復(fù)雜程度。
一般單行注釋：
<!-- col -->模塊間注釋：
<!-- news -->
<div class="news">
<h2>News</h2>
<p>...</p>
</div>
<!--/ news -->循環(huán)注釋：
<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選項(xiàng)卡內(nèi)容注釋：
<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。
HTML5是目前所有HTML文檔類型中的首選：
<!DOCTYPE html>編寫有效、正確的HTML代碼，否則很難達(dá)到性能上的提升。
可以使用一些工具驗(yàn)證你的代碼，如 W3C HTML validator
根據(jù)HTML各個(gè)元素的用途而去使用它們。
<!-- 不推薦 -->
<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>部分標(biāo)簽說明：
不推薦使用的標(biāo)簽：
給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標(biāo)簽，盡可量得加上alt屬性，提供圖片的描述信息）。
<!-- 不推薦 -->
<img src="world.jpg"><!-- 推薦 -->
<img src="world.jpg"
alt="our world images">在樣式表和腳本的標(biāo)簽中忽略type屬性。
HTML5默認(rèn)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>每個(gè)塊元素、列表元素或表格元素都獨(dú)占一行，每個(gè)子元素都相對(duì)于父元素進(jìn)行縮進(jìn)。按設(shè)計(jì)稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。
如上面頁面框架，推薦寫法：
<!-- 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-->保證整個(gè)頁面在未加載樣式表時(shí)仍有較好的層次清晰的頁面結(jié)構(gòu)。
<!-- 不推薦 -->
<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標(biāo)簽使用
strong、b使用
將需要加粗的文字使用b標(biāo)簽來顯示。
將需要強(qiáng)調(diào)的文字（主要指包含關(guān)鍵詞的信息）使用strong標(biāo)簽來強(qiáng)調(diào)主要內(nèi)容。
注：b是粗體標(biāo)簽，屬于實(shí)體標(biāo)簽，它所包圍的字符將被設(shè)為bold（粗體）；strong 是加重語氣標(biāo)簽，屬于邏輯標(biāo)簽，它的作用是加強(qiáng)字符語氣。
在很多情況下，a都要使用title來說明該鏈接的相關(guān)說明或目的意義。
例如：當(dāng)使用overflow隱藏掉a中的溢出文字時(shí)，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內(nèi)容是什么；又或者當(dāng)一個(gè)圖片型鏈接出現(xiàn)時(shí)，該a中的title同樣是必不可少的，它可以告訴用戶這個(gè)圖片鏈接是做什么用的。
注：僅在img里添加alt標(biāo)簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時(shí)顯示出來的提示文字，要想鼠標(biāo)移上去顯示提示信息應(yīng)該用title，嚴(yán)謹(jǐn)?shù)膶懛ㄊ莍mg里加入alt和title這兩個(gè)標(biāo)簽。
代碼保持精簡(jiǎn)，最優(yōu)化，這樣搜索引擎才更喜歡。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
