這個主要是告訴瀏覽器,本頁面主要用什么語言。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比韓城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式韓城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋韓城地區(qū)。費(fèi)用合理售后完善,十載實(shí)體公司更值得信賴。
很明顯的一幕:你寫個demo頁面,里面寫html lang="en",頁面內(nèi)容都寫中文,不要有英文。
chrome打開頁面,雖然都是中文,但瀏覽器頂部會提示此頁面是英文,是否需要翻譯成中文。
寫在html標(biāo)簽中的lang屬性作用:聲明當(dāng)前頁面的語言類型。
如:?
htmllang='en'
/html//英文?
htmllang='zh'
/html//中文?
htmllang='ja'/html//日文?
htmllang='en-us'/html//美式英文?
注意:lang屬性中的語言代碼不區(qū)分大小寫。
htmllang='en-us'/html//英文?
htmllang='en-US'/html//英文?
上面的兩行代碼一樣的效果。?
另外,lang屬性也可以加到普通標(biāo)簽上。
擴(kuò)展資料
html中的聲明:
!DOCTYPE 聲明必須是 HTML 文檔的第一行,位于 html 標(biāo)簽之前。
!DOCTYPE 聲明不是 HTML 標(biāo)簽;它是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令,這樣瀏覽器才能獲知文檔類型。
在 HTML 4.01 中,!DOCTYPE 聲明引用 DTD,因?yàn)?HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語言的規(guī)則,這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
HTML5 不基于 SGML,所以不需要引用 DTD。
現(xiàn)在主要記住:H5的聲明方式:!DOCTYPE html
常用標(biāo)簽及其屬性:
1-標(biāo)題標(biāo)簽h1~h6(越來越小)。
標(biāo)題標(biāo)準(zhǔn)屬性:id, class, title, style, dir, lang, xml:lang;事件屬性:onclick, ondblclick等。
2-鏈接標(biāo)簽aimg
a屬性有:download、href、name、target等。
img有:src(規(guī)定顯示圖像的 URL)、alt(規(guī)定圖像的替代文本)。
一、HTML的開發(fā)工具和使用的瀏覽器
開發(fā)工具:記事本等文本編輯器,Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。
瀏覽器:Chrome、Firefox、IE、Safari、IPhone、Android。
二、HTML的基本要素
DOCTYPE? 描述文檔的類型
html? ? ?網(wǎng)頁的根元素,寫在網(wǎng)頁的在外面
head??? 網(wǎng)頁的頭部信息,寫在html標(biāo)記的里面
body? ? 網(wǎng)頁的內(nèi)容,寫在html標(biāo)記的里面
具體描述:
1、DOCTYPE? 描述文檔的類型,規(guī)定web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。
網(wǎng)頁可以使用的具體版本,網(wǎng)頁中可以使用那些標(biāo)記,每個版本的DTD版本均有不同
使用例子
HTML4的例子
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
HTML5的例子
2、html/html?網(wǎng)頁文檔中的根標(biāo)記
html 標(biāo)簽有三個特殊的屬性
manifest? ?指定網(wǎng)頁緩存文件,可以讓用戶離線的時候也可以訪問文件。
xmlns? ?設(shè)置html名空間,比如把網(wǎng)頁設(shè)置成xhml的時候可以使用這個值。
lang? ?設(shè)置網(wǎng)頁的描述語言,比如中文是zh;英文是en。
3、head/head頭部標(biāo)簽在網(wǎng)頁中只能有一個,設(shè)置HTML文檔的頭部信息,里面內(nèi)容不會在頁面中顯示出來·。
head里面的標(biāo)記
meta 標(biāo)記
title定義網(wǎng)頁的標(biāo)題
link 鏈接
script? 標(biāo)記JavaScript腳本的內(nèi)容
style? 標(biāo)記css樣式
meta? 標(biāo)記
4、body/body只能有一個,顯示網(wǎng)頁的主體內(nèi)容。
代碼示例:
請點(diǎn)擊輸入圖片描述
1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="description" content="網(wǎng)頁內(nèi)容的簡單描述" 7 ? ? meta name="keywords" content="網(wǎng)頁關(guān)鍵詞" 8 ? ? link rel="/css/style.css" 9 ? ? script src="/js/script.js"/script10 /head11 body12 ? ? header網(wǎng)頁頭部內(nèi)容/header13 ? ? main網(wǎng)頁主要內(nèi)容/main14 ? ? nav網(wǎng)頁的導(dǎo)航內(nèi)容/nav15 ? ? footer網(wǎng)頁的頁腳內(nèi)容/footer16 /body17 /html
請點(diǎn)擊輸入圖片描述
請點(diǎn)擊輸入圖片描述
三、寫在head中的標(biāo)簽
(一)、meta標(biāo)簽
meta元素的屬性:
name?描述信息的名稱,來標(biāo)記這是一個什么樣的信息
http-equiv? 描述行為
content? 描述的內(nèi)容
charset? ?指定網(wǎng)頁的編碼
1、name 屬性
1 meta name="author" content="nyw"2 ? ? !--作者, 定義網(wǎng)頁的作者 --3 meta name="description" content="meta標(biāo)記學(xué)習(xí)"4 ? ? !-- 描述,描述網(wǎng)頁的實(shí)際內(nèi)容 --5 meta name="keywords" content="HTML,meta"6 ? ? !-- 關(guān)鍵字,定義網(wǎng)頁關(guān)鍵字 --
2、http-equiv屬性
1 meta http-equiv="refresh" content="30"2 ? ? !-- 網(wǎng)頁30s后自動刷新 --3 meta http-equiv="refresh" content="5,url=dom.html"4 ? ? !-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --
meta http-equiv="refresh" content="5,url=dom.html"
http-equiv描述網(wǎng)頁的行為,行為 refresh刷新,內(nèi)容為5,表示5秒后跳轉(zhuǎn)到 dom.html這個文檔。
3、content 屬性
特殊屬性
content-type???指定http頭部信息的文字編碼(最為常用)
default-style? ?指定優(yōu)先使用的樣式單(stylesheet)
refresh? ? 用于網(wǎng)頁的自動刷新或是頁面跳轉(zhuǎn)
set-cookie???設(shè)置頁面的cookie(現(xiàn)在已經(jīng)不再推薦使用)
4、charset屬性
指定網(wǎng)頁的編碼,推薦使用UTF-8來增加網(wǎng)頁的兼容性。
代碼實(shí)例:
為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息
這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。
meta name="robots" content="noindex,nofollow"
!-- name定義的是機(jī)器人,內(nèi)容部分表示不要被搜索引擎緩存,也不要被搜索引擎跟蹤 --
代碼實(shí)例:
請點(diǎn)擊輸入圖片描述
1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="author" content="nyw" 7 ? ? !--作者, 定義網(wǎng)頁的作者 -- 8 ? ? meta name="description" content="meta標(biāo)記學(xué)習(xí)" 9 ? ? !-- 描述,描述網(wǎng)頁的實(shí)際內(nèi)容 --10 ? ? meta name="keywords" content="HTML,meta"11 ? ? !-- 關(guān)鍵字,定義網(wǎng)頁關(guān)鍵字 --12 ? ? meta http-equiv="refresh" content="30"13 ? ? !-- 網(wǎng)頁30s后自動刷新 --14 ? ? meta http-equiv="refresh" content="5,url=dom.html"15 ? ? !-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --16 ? ? meta name="robots" content="noindex,nofollow"17 ? ? !-- name定義的是機(jī)器人,內(nèi)容部分表示不要被搜索引擎緩存,也不要被搜索引擎跟蹤 --18 /head19 body20 /body21 /html
請點(diǎn)擊輸入圖片描述
(二)、title、base標(biāo)記
title和base標(biāo)記都是寫在head標(biāo)簽中
title:設(shè)置網(wǎng)頁的標(biāo)題
寫法:title內(nèi)容/title。
base:指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL,如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。
寫法:base href=""
base屬性值:
href? 指定網(wǎng)頁跳轉(zhuǎn)到基準(zhǔn)URL,如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。
base href=""??這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。
target? 指定鏈接的跳轉(zhuǎn)幀如果不指定的話,則是在當(dāng)前頁面中跳轉(zhuǎn)。
base target="_blank"?網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。
terget屬性值:
_blank? 在新窗口中打開被鏈接的文檔
_self? ?默認(rèn)值,在相同框架中打開被鏈接的文檔
_parent? ?在父框架集中
_top? ?在整個窗口中打開被鏈接文檔·
framename? ?在指定框架中打開被鏈接文檔
(三)、link標(biāo)記
link標(biāo)記:鏈接外部文件時使用的標(biāo)記,可以把外部文件的內(nèi)容引入到當(dāng)前文件中來,使當(dāng)前網(wǎng)頁實(shí)現(xiàn)更多的功能。
link屬性:
href:指定鏈接外部路徑的路徑和文件名,要設(shè)置全路徑并且?guī)募?/p>
rel:引用文件,引用資源的類型定義
我們在使用link標(biāo)簽引用外部文件的時候,外部文件的類型是多種多樣的。
alternate? ?代替文檔(種子,其他語言版本,其他格式等等)
author? ?網(wǎng)頁的作者
help? 幫助文件的鏈接
icon? 網(wǎng)頁的圖標(biāo)
next? 如果是連續(xù)網(wǎng)頁的時候,指定下一個網(wǎng)頁
prefetch? ?把鏈接外部資源時提前緩存起來。
prev? ?如果是連續(xù)網(wǎng)頁
media? 鏈接文件或是資源屬于哪一種資源。
hreflang? ?鏈接文件的語言種類
type? 鏈接文件的mi/me類型(比如說,圖片圖標(biāo)文本)
sizes? 根據(jù)link鏈接文件的類型,來指定文件的大小
代碼示例:
鏈接網(wǎng)頁圖標(biāo):
網(wǎng)站的圖標(biāo)指定,可以顯示在瀏覽器的圖標(biāo)欄,也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾
1 !-- 網(wǎng)站的圖標(biāo)指定,可以顯示在瀏覽器的圖標(biāo)欄,也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 --2 ? ? link rel="icon"3 ? ? !-- 示例 --4 ? ? link rel="icon" href="img/favicon.png" type="image/png"5 ? ? link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"6 ? ? link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png"
注意:后面的href和前面type標(biāo)注的類型要一致,這樣既可以顯示在瀏覽器,又可以顯示在手機(jī)上
鏈接外部樣式單
1 link rel="stylesheet"2 ? ? link rel="stylesheet" href="style1.css" media="screen"3 ? ? link rel="stylesheet" href="style2.css" title="主題樣式文件"4 ? ? link rel=" alternate stylesheet" href="style3.css" title="可選樣式單"
說明:
alternate 會在瀏覽器中會彈出一個對話框,供用戶可以進(jìn)行選擇
media? 表示媒體類型為屏幕,可以是手機(jī),但不包括打印機(jī)和投影儀
title? 對這個link進(jìn)行簡單的說明
網(wǎng)站RSS種子指定
!-- 網(wǎng)站RSS種子指定 --
link rel="alternate" type="application/rss+xml"
為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL
!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL --
link rel="canonical"
link rel="canonical" href=""
!DOCTYPE HTML//這個網(wǎng)頁的文檔類型,這個是html5的寫法
html lang="en"http://這里的lang="en"可以刪除,如果不刪除的,用谷歌之類打開,它會認(rèn)為是英文的,會自動給翻譯(如果設(shè)置了自動翻譯的話)
head//這個就是頭部的那個標(biāo)簽了。
meta charset="UTF-8"http://這個是設(shè)置的編碼為UTF-8的
中文字體這個寫法也是可以顯示的啊。。當(dāng)然你文件保存的格式也應(yīng)該是utf-8的
W3C的規(guī)定是:HTML 4.01中的lang的屬性值使用RFC1766中的定義值。HTML 4.01的語言代碼不區(qū)分大小寫。
!DOCTYPE HTML//這個網(wǎng)頁的文檔類型,這個是html5的寫法
html lang="en"http://這里的lang="en"可以刪除,如果不刪除的,用谷歌之類打開,它會認(rèn)為是英文的,會自動給翻譯(如果設(shè)置了自動翻譯的話)
head//這個就是頭部的那個標(biāo)簽了。
meta charset="UTF-8"http://這個是設(shè)置的編碼為UTF-8的
如果瀏覽器遵循W3C標(biāo)準(zhǔn),lang屬性可以用來定義樣式。class定義了主要CSS,lang可以在class的基礎(chǔ)上做出適當(dāng)修改。
比如:
style
p{/*lang無效*/
font-family: "宋體"
font-size: 14px;
color: #F00;
}
p:lang(zh-CN){/*lang="zh-CN"*/
font-family: "宋體"
}
p:lang(en-US){/*lang="en-US"*/
font-family: Arial
}
/style
這里p標(biāo)簽的主要CSS只定義了字體大小和顏色,然后就需要通過標(biāo)簽的lang屬性來確定字體。
lang屬性的好處呢,就在于它的CSS繼承性,或許p標(biāo)簽需要定義很多樣式,但不同的語言(其實(shí)也不只是語言)可能需要變動少量的樣式,如果把這些樣式分開定義,可能就會似的CSS很冗長,浪費(fèi)用戶的流量和內(nèi)存。
很多大網(wǎng)站不加可能是因?yàn)闆]有這個需求吧,這個屬性定義了是什么語言顯示頁面的
網(wǎng)頁名稱:html5lang,html5浪漫
轉(zhuǎn)載來于:http://chinadenli.net/article10/dsghddo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、ChatGPT、網(wǎng)站設(shè)計(jì)、域名注冊、云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)