Spring Boot國際化支持

pring Boot國際化支持

國際化支持應該是所有的做國際化網站都需要考慮的一個問題，Spring Boot為國際化提供了強有力的支持，本文將會通過一個例子來講解Spring Boot的國際化。

添加Maven支持

Spring Boot本身就支持國際化，我們這里添加一個模板支持來通過頁面來展示，我們這里添加thymeleaf模板：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

LocaleResolver

我們需要為系統指定一個默認的LocaleResolver：

@Bean
public LocaleResolver localeResolver() {
    SessionLocaleResolver slr = new SessionLocaleResolver();
    slr.setDefaultLocale(Locale.US);
    return slr;
}

上面的例子中我們自定義了一個SessionLocaleResolver，并且指定了默認的Locale。

LocaleChangeInterceptor

接下來，我們定義一個LocaleChangeInterceptor來接收Locale的變動。這里我們通過lang參數來接收。

@Bean
public LocaleChangeInterceptor localeChangeInterceptor() {
    LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
    lci.setParamName("lang");
    return lci;
}

當然，我們需要將這個Interceptor注冊到SpringMVC中：

@Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(localeChangeInterceptor());
}

定義Message Sources

默認情況下，Spring Boot會在src/main/resources查找message文件，默認的message文件是messages.properties,如果指定了某種語言，那么就是messages_XX.properties，其中XX是Local code。

messages.properties是key value的格式，如果在對應的local文件中沒找到相應的key，則會在默認的messages.properties中查找。

我們默認定義英語的messages.properties如下：

greeting=Hello! Welcome to our website!
lang.change=Change the language
lang.eng=English
lang.fr=French

同時我們定義一個法語的message文件messages_fr.properties ：

greeting=Bonjour! Bienvenue sur notre site!
lang.change=Changez la langue
lang.eng=Anglais
lang.fr=Francais

Controller文件

我們定義一個跳轉的controller文件：

@Controller
public class PageController {

    @GetMapping("/international")
    public String getInternationalPage() {
        return "international";
    }
}

html文件

相應的html文件如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="ISO-8859-1" />
    <title>Home</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#locales").change(function () {
                var selectedOption = $('#locales').val();
                if (selectedOption != ''){
                    window.location.replace('international?lang=' + selectedOption);
                }
            });
        });
    </script>
</head>
<body>
<h1 th:text="#{greeting}"></h1>

<br /><br />
<span th:text="#{lang.change}"></span>:
<select id="locales">
    <option value=""></option>
    <option value="en" th:text="#{lang.eng}"></option>
    <option value="fr" th:text="#{lang.fr}"></option>
</select>
</body>
</html>

運行應用程序

好了，接下來我們可以運行了。

如果我們訪問http://localhost:8080/international?lang=en ，則會讀取默認的英語資源：

通過切換到法語環境：http://localhost:8080/international?lang=fr，我們可以看到：

環境已經切換過來了。

最后：

上面都是自己整理好的！我就把資料貢獻出來給有需要的人！順便求一波關注，哈哈~各位小伙伴關注我后私信【Java】就可以免費領取噠

文作者：上海駐云NodeJS開發工程師張弛

隨著NodeJS技術的蓬勃發展，越來越多的公司選擇使用JS作為WEB應用的前后端開發語言。與此同時，他們的目光不僅僅局限于國內市場，而是開始展望整個國際市場。等等，在你考慮如何將自己的產品和服務提供給國外客戶之前，首先要完成的一個重要工作就是軟件國際化。

什么是軟件國際化？

簡單的說，軟件國際化就是指程序的設計和開發過程中使得功能和代碼設計能處理多種語言和文化習俗，能夠在創建不同語言版本時，不需要重新設計源程序代碼的軟件工程方法。

如果要開發一款要支持多國語言的Web應用，我們需要將語言資源從源代碼中抽取、對語言進行翻譯、重新導入到源代碼中并且調整UI界面。接下來就以一款以JS為開發語言的Web 應用為例來探討下如何現實國際化。

在討論實現國際化之前，我們先看看選定的開發框架。如果選擇時下流行的AngularJS，那么恭喜你，因為你可以使用強大的angular-gettext插件來完成這項任務。

傳送門：https://angular-gettext.rocketeer.be/

因為這個庫的文檔和功能相對比較完備，就不再多做敘述。

如果選擇的是基于JQuery來進行開發，那么github上有一個開源庫一定能幫到你。今天重點討論的也是如何使用這個庫來實現軟件國際化。

傳送門：https://github.com/wikimedia/jquery.

i18n顧名思義這個庫是基于JQuery并專門適用于實現軟件國際化。

主要實現的步驟如下：

1. 第一步當然是將這個開源庫克隆到本地，并將所需要的全部js文件引入到項目中。

2. 根據網站中文檔的提示，在開發目錄下建立名為i18n的目錄，并為對應的語言生成json后綴的文件。（也可以放到一個文件中，不過一般比較復雜的應用還是推薦將不同的語言分開放置）這個文件存放的就是一個JSON 對象，屬性就是抽取出的字符串的鍵值，對應的值當然就是我們翻譯的字符串。

在這里例子里，直接使用了中文作為鍵值，實際開發情況下，可以按需要更換。

3. 接下來就可以在應用初始化的地方加入一段邏輯來進行初始化。

在這里，我們從cookie中獲取到當前語言，然后讀取i18n目錄下的語言資源文件，讀取完成以后調用$(".data-i18n").i18n()這個方法。

請注意到這個方法非常重要，它的作用就是把當前語言的字符串替換到頁面中顯示出來。所以當頁面內容發生改變或者切換語言之后都需要調用這個方法，否則頁面上的字符串是不會發生改變的。

4. 初始化邏輯添加完之后，在開發前后端邏輯的時候，就可以加入國際化的邏輯了。看看以下例子：

對于前段頁面來說，主要工作就是給需要翻譯的html元素加上一個data-i18n的屬性后。當頁面加載的時候，i18n庫會尋找有data-i18n的元素，設法獲取到翻譯的字符串并進行替換。

而對于后端邏輯而言， js庫也提供了一系列方法供我們調用。最簡單的用法就是調用$.i18n()方法并且傳入一個key，JS庫會設法找到對應的翻譯字符串并且返回這些字符串。除此之外還有更多方法可供調用，如需幫助可以查看幫助文檔。

5. 在實際的開發過程中，你肯定會覺得手動去添加和維護這些JSON文件簡直就是噩夢。不用著急，這個時候我們可以使用腳本來替代繁瑣的步驟，既輕松又不會出錯。

假如你的腳本語言是gulp，那么請插入下面的邏輯：

這段用gulp編寫的腳本會遍歷全部的hbs文件（例子中選擇的是handlebar模板）過濾出擁有data-i18n屬性的html元素，并且把鍵值寫入到語言資源文件中，假如翻譯不存在則value會設定為”MISSING”。所以當你更新了前后端的代碼時，記得運行gulp腳本來更新JSON文件。這樣在開始翻譯工作時，注意那些“MISSING”的值就可以了。

確保所有的字符串都抽取到JSON文件以后，最艱巨的工作才剛剛開始。不要簡單的以為谷歌翻譯或者其他軟件能幫你搞定全部的翻譯。事實上，假如只是從字面意思來做翻譯，那么你的最終用戶可能會看的一頭霧水。考慮到文化的差異，有很多語言按照字面意思直接翻譯出來可能讓用戶覺得很怪異，甚至有可能誤導用戶。再加上如果翻譯出來的語言長短相差太多，有可能對UI界面產生影響，所以在翻譯時還要考慮句子的長短和合理的使用縮寫。

本文到這里就結束了，希望能讓大家對如何實現軟件國際化有個比較直觀的了解。同時，如果喜歡我們的話就趕緊訂閱我們吧~~~每天定時推送新鮮干貨~~~也可以關注我們的微信公眾號：架構云每天同步更新喲~~~

好多小伙伴可能會問，html就這點東西？當然不是！html特別是html5有很多新標簽和新東西的！

不過對于新手來說，先學習這些，然后在一點點進步！因為有些不常用的標簽即使今天學習了。明天也就忘記了，而且不常用！不如等用到的時候在查詢就可以了！

學習軟件，尤其是后期做項目的時候，有三寶，手冊、百度、找朋友！

比如php有將近兩千個函數！java有N多個函數！不可能記住所有的函數！只能是常用的函數記得住！那么碰到沒用過的函數怎么辦呢？

可以查詢手冊！查詢百度！！其次就是問你的老師！或者有能力的朋友來進行幫助！

還有的小伙伴會問，你說的和其他人說的差不多！因為學習的知識都差不多嘛。但是每個人對這個東西的理解是不同的。比如十年程序員和一兩年的程序員對一個東西的理解差距有很大！

今天我們繼續來學習Html,接著昨天的來繼續。

html表單

為什么要將html的表單單獨拿出來寫一篇文章呢？因為表單是在是很重要！

那么什么是表單呢？

表單就是將我們的信息從一個頁面，傳遞到另外一個頁面的方法吧。可以讓用戶填寫信息，讓后臺根據用戶輸入的數據進行相應處理的媒介。

表單長什么樣子呢？

好看一點的表單是這樣的！

而初學者編寫的表單是這樣子的！！

這是為什么呢？

因為表單是需要CSS樣式來配合美化的。如果僅僅學習HTML還是遠遠不夠的！

前幾天我看到一個提問。說我會html、css、javascript能找到工作嗎？答案肯定是否定的！如果是實習的話。。沒準可以找到。

第一現在很多公司不單單用html、css、js來編寫前端頁面。有很多都用vue、react、等等前端框架來編寫前端。那些東西實在太基礎了。想憑這些東西找工作實在太難了。另外、前端工程師好多要求有后端編程語言基礎。為什么呢？因為最起碼你要知道前端是如何與后端進行數據互通的。如何利用ajax來調用后端接口！

如果這些都不清楚。真的很難找到合適的工作。

扯的有點遠了。。。。

我們繼續。

那么在html中什么是表單呢？

表單是一個包含表單元素的區域。

表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復選框等等）輸入信息的元素。

表單使用表單標簽（<form>）定義

表單首先并不是一個標簽。而是利用<form></form>包裹起來的一個區域。當然這個區域也可以放置其他的標簽，在使用表單的時候，會經常和div和span等標簽配合CSS來使用。因為沒有學習CSS嘛。所以就簡單講解表單及表單元素就可以了。

表單元素是在表單區域中，定義的表單標簽。標簽類型，有下拉菜單、單選等等。有的小朋友可能會問。沒有將表單元素放置在表單標簽中間會怎么樣？

很明確的告訴你。不會將表單之外的表單元素提交到你想要提交的頁面。（也可以利用js，來一起提交表單）

定義表單

使用form標簽定義一個表單，格式為：

... 表單內容...

</form>

提交的方式有兩種：GET和POST

在http協議中提交的方式不只有GET和POST，但并不是我們今天討論的話題。以及為什么要使用POST和GET提交。

GET就是我們可以在URL中看到信息的內容，但是在url傳輸的時候，會將中文進行轉碼。（具體轉碼內容會在序列化和反序列化講解）

而POST的信息是在URL中無法看到提交的內容的。

POST和GET的具體區別會在后續講解http協議的時候來繼續講解。

表單元素-input

可以使用Input向表單中添加大部分元素，input標簽的格式為：

表單元素-input標簽中的屬性介紹

<input type=“text/password”/>標簽中的屬性介紹

name=“” 定義這個標簽的名字

value=“” 預先給這個標簽賦值

maxlength=“” 最大輸入字符

size=“” 標簽中顯示字符的寬度

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。在大多數瀏覽器中，文本域的缺省寬度是20個字符。

text 代表的是文本域。password 英文翻譯過來就是密碼了。

他們兩個的區別是什么呢？password默認是不可見的。當你輸入一個字符的時候，會以*代替。這個就是password。

而text代表的是文字。比如我們在登錄某寶的時候，會輸入用戶名，而用戶名就是text文本域。

上面登錄的就是text文本域，下面的就是password。

表單元素-單選框

當用戶從若干給定的的選擇中選取其一時，就會用到單選框。

將input標簽中type值寫為radio

如果默認選中： checked=“checked”或者直接給checked屬性即可

多個單選框名字必須統一name=“sex”

并且給每一個單選賦值value=“man”

性別(單選框)：

男 <input checked="checked" type="radio" name="sex" value="man" />

女 <input type="radio" name="sex" value="woman" />

單選框是我們日常生活中經常用到的功能，比如性別、學歷等等信息。

表單元素-復選框

當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復選框。

復選框定義input標簽屬性 type=“checkbox”

讓復選框多個為一個組name=“music”屬性必須統一

讓每一個復選框增加一個值因為服務器不檢測標簽外的屬性value=“定義的值”

如果默認選中： checked=“checked”或者直接給checked屬性即可

<input checked="checked" type="checkbox" name="music" value="重金屬"/>重金屬

<input type="checkbox" name="music" value="輕音樂"/>輕音樂

<input type="checkbox" name="music" value="鄉村音樂"/>鄉村音樂

<input type="checkbox" name="music" value="流行音樂"/>流行音樂

復選框，就點像我們小時候的答題：單選題、復選題（多選）。你可以從多種選擇中，選擇多個。

隱藏文本域-hidden

index標簽有一個隱藏文本域用于不想讓用戶看到的信息從表單提交

用法： <input type="hidden" name="id" value="1024" />

type=“hidden” 聲明這個標簽是隱藏的

name=“id” 告訴服務器這個隱藏域的名字是id

value=“” 告訴服務器這個隱藏域中的值

隱藏文本域，頁面上不想給用戶看到的信息。但是又需要將信息傳遞到另外一個頁面。所以就用到隱藏文本域了。

確認提交按鈕- submit

表單的動作屬性（Action）和確認按鈕

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性（action）定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

重置按鈕-reset

如果客戶輸入信息錯誤，想反回到默認表單信息，點擊reset按鈕，表單將重置。

用法： <input type="reset" value="重置" />

只要將input標簽中的type屬性值寫成reset就可以生成

表單元素- textarea文本域（多行文本域）

textarea 多行文本域。

格式：

name=“”定義文本域名稱

cols=“60”列數

rows=“5”行數

表單元素-select下拉菜單

在web頁面中如何定義下拉菜單？

用到select標簽中使用option標簽

用法：

<option>請選擇省份</option>

</select>

如果默認選中：用option標簽中的selected屬性，那么當你默認打開網頁的時候，該下拉菜單默認選中的。

表單元素-select下拉框-多選

<option>請選擇省份</option>

</select>

在select標簽中加入multiple=“multiple” 屬性變成多選下拉框

size=“2” 設置顯示的選項數為2

當然html5增加了好多新的表單元素。這里就不說了，等后期出一篇專門講解html的文章。在那個文章中繼續講解。

屬性

為什么不在之前來講解html的屬性呢？因為html的屬性是有分類的。接下來我們來看看Html的屬性分類。

什么是屬性呢？

屬性就是標簽中的附加條件。比如 <option value="10000">北京</option>就是這個選項傳遞到另一個頁面的值是10000而頁面顯示則是北京。

html將屬性分三類：

核心屬性：class、id 、style和title屬性

國際化屬性：dir、lang

UI事件屬性：（與js配合用戶動作的屬性）

onclick、ondoubleclick、onmousedown、onmousup、onmouseover、onmouseout、onkeypress、onkeydown、onkeyup

核心屬性 (Core Attributes)

其中包括：class,id,style,title屬性

注：不能再以下HTML標簽中使用包括base、head、html、meta、param、script、style 以及 title

核心屬性-id

id屬性：用于唯一標識頁面內的任何元素

注：對于id屬性的值存在一些特殊的規則：

（1）必須以字母開頭，然后可以跟上任意數量的字母、數字、連字符、下劃線、冒號和句號，不能以數字、連字符、下劃線冒號或句號開頭

（2）在同一個XHTML文檔中，任意兩個id屬性不能具有相同的值

在真正編寫html頁面的時候寫兩個id一樣的元素，不會報錯！但是在真正應用的時候就會出現問題。比如CSS的元素選擇。比如js的利用id找到元素的DOM操作等等。

核心屬性-title

title屬性：給出元素的建議標題

這里是<span style="color:red;" title="測試">一段</span>文字

當鼠標移動到span上之后，會有tooltip "測試“

核心屬性-class

class屬性：用于指定某個元素屬于特定的元素類

class 屬性不能在以下HTML元素中使用：base, head, html, meta, param, script, style, title;

可以給HTML元素賦予多個class，例如：

CSS中會應用到

class對于學習計算機的小伙伴，應該很熟悉。就是類嘛，在html中就是將一類的元素放在一起處理。其中最大的作用就是有多個div，利用css來處理樣式。或者多個div利用js來做動態特效。

核心屬性-style

style屬性：利用style屬性能夠指定元素中的CSS規則（逐漸淘汰）

國際化屬性-dir

dir屬性：指定文本在瀏覽器中的顯示方向

兩個值：（1）ltr：從左到右（默認值）

　　　　（2）rtl：從右到左

用法：

<p dir="rtl">Write this text right-to-left!</p>

注釋：dir 屬性在以下標簽中無效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。

國際化屬性-lang

屬性lang是英語language的縮寫，意思是語言，”en”代表英語，”zh-CN”代表中文

lang屬性：設置元素中內容的語言代碼

用法：

<!DOCTYPE html>

</head>

</html>

注釋：lang 屬性在以下標簽中無效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>

語言簡寫參考 http://www.jb51.net/w3school/tags/html_ref_language_codes.htm

如果你在中國，本地瀏覽器的默認語言是中文，當我們打開一個外國網站時，瀏覽器會提示”是否將網頁內容翻譯成中文”，如下圖

檢查一下該網頁的源代碼，發現lang=”en”

搜索引擎首先自己無法判斷自己抓取的頁面中的內容是什么語言，因為在它看來都是二進制文件，那么這時就需要我們告訴它這個頁面中的內容是什么語言，進而它才能知道下一步該干嘛，也就是說，當你把lang設置為”en”時，無論你網頁中是什么語言的內容，在它看來都是英語，如果本地瀏覽器的默認語言不是英語，就會提示上面的選項，問您是否需要翻譯。這個在瀏覽器的設置中可以清楚地看到：

1.搜索引擎無法判斷頁面中的內容是什么語言，需要人們告訴它（這里也體現出語義化的特點，即機器本身什么都不懂，我們需要告訴它這是什么，并且當我們告訴它這是什么后，我們也必須按照這個規則去做，要不將lang設置為”en”，但是我們卻在網頁中使用中文語言內容，這很大程度上會對機器進行干擾，進而干擾到用戶的正常體驗，這樣做就毫無意義。）

2.瀏覽器會將讀取到的頁面語言和本地語言進行比較判斷，如果一致，不做處理，否則提示是否需要翻譯（當然前提是用戶勾選了這個功能，chrome默認勾選）

W3C合法性校驗

當我們寫完一個網頁之后，怎么才能知道編寫的這個網頁是否符合W3C的代碼規范呢？

代碼規范性有兩種方法：

1、在線檢查：http://validator.w3.org/；

2、工具檢查，例如：Html Validator。

Html Validator是Firefox的一個附加組件，必須利用火狐瀏覽器。

URL編碼

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

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

HTML <meta> 元素

之前文章中對于META標簽就只提了一句。

但是打開任意的網站，其head標簽內都有一列的meta標簽。

在查閱w3school中，第一句話中的“元數據”。然后很順利的在英文版的w3school找到了想要的結果。（中文w3school說的是元信息，但元數據在Google就有詳細解釋。所以這兒采用英文版W3school的解釋。）

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

其中的關鍵是metadata，中文名叫元數據，是用于描述數據的數據。它不會顯示在頁面上，但是機器卻可以識別。

用處

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

這句話對meta標簽用處的介紹，簡潔明了。

翻譯過來就是：meta常用于定義頁面的說明，關鍵字，最后修改日期，和其它的元數據。這些元數據將服務于瀏覽器（如何布局或重載頁面），搜索引擎和其它網絡服務。

組成

meta標簽共有兩個屬性，分別是http-equiv屬性和name屬性。

1. name屬性

name屬性主要用于描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，便于搜索引擎抓取。

meta標簽中name屬性語法格式是：

其中name屬性共有以下幾種參數。(A-C為常用屬性)

A. keywords(關鍵字)

說明：用于告訴搜索引擎，你網頁的關鍵字。舉例：

多個關鍵字以英文的逗號分隔

B. description(網站內容的描述)

說明：用于告訴搜索引擎，你網站的主要內容。舉例：

C. viewport(移動端的窗口)

說明：這個概念較為復雜。這個屬性常用于設計移動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（常用范例）：

viewport這個中文叫視口，

width=device-width 就是顯示的寬度=設備機器屏幕的寬度。

intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放

maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，

maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。

user-scalable:是否可對頁面進行縮放，no 禁止縮放

D. robots(定義搜索引擎爬蟲的索引方式)

說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。

舉例：

具體參數如下：

1.none : 搜索引擎將忽略此網頁，等價于noindex，nofollow。
2.noindex : 搜索引擎不索引此網頁。
3.nofollow: 搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁。
4.all : 搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引，等價于index，follow。
5.index : 搜索引擎索引此網頁。
6.follow : 搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁。

E. author(作者)

說明：用于標注網頁作者舉例：

F. generator(網頁制作軟件)

說明：用于標明網頁是什么軟件做的舉例: (不知道能不能這樣寫)：

G. copyright(版權)

說明：用于標注版權信息舉例：

H. revisit-after(搜索引擎爬蟲重訪時間)

說明：如果頁面不是經常更新，為了減輕搜索引擎爬蟲對服務器帶來的壓力，可以設置一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的默認時間來訪問。舉例：

I. renderer(雙核瀏覽器渲染方式)

說明：renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。舉例：

2. http-equiv屬性

http-equiv顧名思義，相當于http的文件頭作用。

一開始看到這句話的時候，我是迷糊的。因為我看各類技術名詞，都會習慣性的去記住它的英文全稱。equiv的全稱是"equivalent"，意思是相等。

意思就是相當于http的作用。至于文件頭是哪兒出來的，估計是從其作用來分析的。我認為顧名思義并不能得出"相當于http的文件頭作用"這個論斷。

說的在直白點，就是Http協議的協議頭里面的設置。

相當于HTTP協議的作用，比如說定義些HTTP參數啥的。

meta標簽中http-equiv屬性語法格式是：

<meta http-equiv="參數" content="具體的描述">

其中http-equiv屬性主要有以下幾種參數：

A. content-Type(設定網頁字符集)(推薦使用HTML5的方式)

說明：用于設定網頁字符集，便于瀏覽器解析與渲染頁面舉例：

B. X-UA-Compatible(瀏覽器采取何種版本渲染當前頁面)

說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設置為最新模式，在各大框架中這個設置也很常見。）舉例：

C. cache-control(指定請求和響應遵循的緩存機制)

用法1.

<meta http-equiv="cache-control" content="no-cache">

共有以下幾種用法：

no-cache: 先發送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存。

no-store: 不允許緩存，每次都要去服務器上，下載完整的響應。（安全措施）

public : 緩存所有響應，但并非必須。因為max-age也可以做到相同效果

private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應）

maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。

用法2.(禁止百度自動轉碼)

說明：用于禁止當前頁面在移動端瀏覽時，被百度自動轉碼。雖然百度的本意是好的，但是轉碼效果很多時候卻不盡人意。所以可以在head中加入例子中的那句話，就可以避免百度自動轉碼了。舉例：

D. expires(網頁到期時間)

說明:用于設定網頁的到期時間，過期后網頁必須到服務器上重新傳輸。舉例：

E. refresh(自動刷新并指向某頁面)

說明：網頁將在設定的時間內，自動刷新并調向設定的網址。舉例:

F. Set-Cookie(cookie設定)

說明：如果網頁過期。那么這個網頁存在本地的cookies也會被自動刪除。

G.Window-target(顯示窗口的設定)

說明：強制頁面在當前窗口以獨立頁面顯示。

用法：

注意：用來防止別人在框架里調用自己的頁面。

H.content-Language（顯示語言的設定）

用法：

當然http協議里的內容還有很多。具體具體可以查看http協議相關的文章。

今天這篇文章介紹了html的常用的一些標簽。屬性還有關鍵的設置。

當然html還有很多標簽，一些是Html5的，以后專門寫文章來說。還有一些是不常用的標簽。

感謝小伙伴們的關注。。手寫不宜請點個贊吧！十分感謝。

（注：本內容屬于原創，未經許可嚴禁抄襲。內容真實性已考證，圖片來源于網絡，圖片如有侵權請聯系作者刪除）

在線咨詢

上一篇：CSS是什么？這一篇全解，絕對有你想要的
下一篇：如何編寫HTML提交按鈕代碼？

您的項目需求

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

整合營銷服務商