整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          html-head部分元素介紹

          tml--head部分

          <head> 元素包含了所有的頭部標(biāo)簽元素。

          用head定義我們網(wǎng)頁(yè)的標(biāo)題,字符集等屬性,寫給瀏覽器怎么運(yùn)行我們的html網(wǎng)頁(yè),用戶不可見。

          在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

          1. title標(biāo)簽

          title標(biāo)簽是用來定義網(wǎng)頁(yè)標(biāo)題。
          title在html文檔中必須的。
          title元素:

          1.定義了瀏覽器工具欄的標(biāo)題
          2.當(dāng)網(wǎng)頁(yè)添加到收藏夾時(shí),顯示在收藏夾中的標(biāo)題
          3.顯示在搜索引擎結(jié)果頁(yè)面的標(biāo)題

          <!DOCTYPE html>
          <!--html是html文檔的根元素-->
          <html >
              <!--head定義文檔標(biāo)題等屬性,用戶不可見-->
              <head>
                  <!--網(wǎng)頁(yè)使用的字符集-->
                  <meta charset="utf-8">
                  <!--title設(shè)置網(wǎng)頁(yè)的標(biāo)題-->
                  <title>我的第一個(gè)網(wǎng)頁(yè)</title>
              </head>
              <!--body顯示給用戶的內(nèi)容-->
              <body>
                  Hello world, 我是阿布都薩拉木
              </body>
          </html>
          

          2. mate元素

          mate標(biāo)簽的作用和使用很重要。用來定義網(wǎng)頁(yè)字符集,關(guān)鍵字,描述等等

          meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。

          <meta> 標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁(yè)面上,但會(huì)被瀏覽器解析。

          META 元素通常用于指定網(wǎng)頁(yè)的描述,關(guān)鍵詞,文件的最后修改時(shí)間,作者,和其他元素?cái)?shù)據(jù)。

          元數(shù)據(jù)可以使用于瀏覽器(如何顯示內(nèi)容或重新加載頁(yè)面),搜索引擎(關(guān)鍵詞),或其他Web服務(wù)。

          <meta> 一般放置于 <head> 區(qū)域

          <!DOCTYPE html>
          <!--html是html文檔的根元素-->
          <html >
              <!--head定義文檔標(biāo)題等屬性,用戶不可見-->
              <head>
                  <!--網(wǎng)頁(yè)使用的字符集-->
                  <meta charset="utf-8">
                  <!--關(guān)鍵字,為搜索引擎定義關(guān)鍵詞:-->
                  <meta name="keywords" content="HTML, CSS">
                  <!--為網(wǎng)頁(yè)定義描述內(nèi)容:-->
                  <meta name="description" content=" Web html">
                  <!--定義網(wǎng)頁(yè)作者:-->
                  <meta name="author" content="Abdusalam">
                  <!--每30秒鐘刷新當(dāng)前頁(yè)面:-->
                  <meta http-equiv="refresh" content="30">
                  <!--title設(shè)置網(wǎng)頁(yè)的標(biāo)題-->
                  <title>我的第一個(gè)網(wǎng)頁(yè)</title>
              </head>
              <!--body顯示給用戶的內(nèi)容-->
              <body>
                  Hello world, 我是阿一個(gè)男孩!
              </body>
          </html>
          
          

          3. link元素

          <link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系, link標(biāo)簽通常用于鏈接到樣式表和JavaScript腳本。

          <!DOCTYPE html>
          <!--html是html文檔的根元素-->
          <html >
              <!--head定義文檔標(biāo)題等屬性,用戶不可見-->
              <head>
                  <!--網(wǎng)頁(yè)使用的字符集-->
                  <meta charset="utf-8">
                  <!--title設(shè)置網(wǎng)頁(yè)的標(biāo)題-->
                  <title>我的第一個(gè)網(wǎng)頁(yè)</title>
                  <!--link元素用于引入外部資源,css,js等文件-->
                  <link rel="stylesheet" type="text/css" href="index.css">
              </head>
              <!--body顯示給用戶的內(nèi)容-->
              <body>
                  Hello world, 我是一個(gè)男孩!
              </body>
          </html>
          

          4. base標(biāo)簽

          <base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo),該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接,如a標(biāo)簽不設(shè)置 href屬性和target屬性則默認(rèn)使用base的屬性。

          前言:

          在第一篇教程中我們介紹了前端流行的開發(fā)工具和前端語(yǔ)言的基本介紹,今天開始html教程

          正文:

          自從xhtml出現(xiàn)之后,傳統(tǒng)的html已經(jīng)被取代,隨便打開一個(gè)網(wǎng)頁(yè),瀏覽網(wǎng)頁(yè)源碼,第一行里面一般都是

          	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或者<!DOCTYPE HTML>等
          

          標(biāo)簽里面的!DOCTYPE聲明了文檔類型,告訴了瀏覽器應(yīng)該如何顯示網(wǎng)頁(yè)

          <!DOCTYPE html>代表文檔是html5類型文檔

          	
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          

          代表文檔是XHTML1.0類型的文檔

           <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
          "http://www.w3.org/TR/html4/loose.dtd">
          

          代表文檔是XHTML4.01文檔

          文檔聲明類型的作用是什么?

          1. 告訴了瀏覽器應(yīng)該按照什么格式顯示文檔內(nèi)容
          2. 對(duì)文檔類型進(jìn)行語(yǔ)法檢查,比如我們沒有聲明文檔類型,直接使用:
           <html><head><title></title></head><body><h1>沒有聲明文檔類型的html</body></html>
          

          那么我們?cè)谡Z(yǔ)法不嚴(yán)謹(jǐn)?shù)臅r(shí)候,比如:<h1>標(biāo)簽后面沒有結(jié)束標(biāo)簽,瀏覽器也會(huì)解析文檔,這樣的后果就是不同類型的瀏覽器,顯示會(huì)有所不同,嚴(yán)重的話造成文檔不能解析,聲明文檔類型后瀏覽器會(huì)對(duì)文檔標(biāo)簽(元素)進(jìn)行了語(yǔ)法檢查,不會(huì)出現(xiàn)這樣的問題,這是一個(gè)良好的習(xí)慣,一定要在文檔第一行聲明文檔類型!

          Head內(nèi)容實(shí)例:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8" />
          <title>元數(shù)據(jù)標(biāo)簽</title>
          <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
          <meta name="keywords" content="關(guān)鍵字" />
          <meta name="description" content="描述"/>
          <link rel=”stylesheet” type=”text/css”href=”./css/style.csss”/>
          <script type=”text/javascript” src=”./js/common.js”></script>
          </head>
          <body>
          </body>
          </html>
          

          Head標(biāo)簽里面一般有3塊主要內(nèi)容組成:

          title標(biāo)簽

          作用: 告訴瀏覽器當(dāng)前文檔的標(biāo)題,訪問者可以在瀏覽器窗口標(biāo)題看到的內(nèi)容

          Meta元信息

          charset文檔頁(yè)面編碼我們最常見的有utf-8國(guó)際化編碼,中文編碼gbk,簡(jiǎn)體中文gb2312,繁體中文 Big5,日文 EUC-JP,韓文 EUC-KR 等。

          我們做網(wǎng)頁(yè)時(shí),如果指定的 Charset 是 GB2312,那么就不應(yīng)該在網(wǎng)頁(yè)中出現(xiàn)繁體字,因?yàn)?GB2312 標(biāo)準(zhǔn)只有幾千個(gè)簡(jiǎn)體的中文字。如果我們的網(wǎng)頁(yè)編碼是 UTF-8,我們就不要指定字符集是 GB2312,因?yàn)殡m然 UTF-8 編碼對(duì)應(yīng)的 UTF-8 字符集包含了 GB2312 的字符,但同一個(gè)字符在兩個(gè)字符集中的編號(hào)不一樣。

          下面這些編碼方式,比如:中文 GBK ,繁體中文 Big5,日文 EUC-JP,韓文 EUC-KR 等,每種語(yǔ)言的編碼方式是不同的,所以需要使用charset為網(wǎng)頁(yè)提供了一種編碼方式,否則頁(yè)面很可能出現(xiàn)亂碼

          字符編碼

          UTF-8 是國(guó)際字符編碼,也就是獨(dú)立于任何一種語(yǔ)言,任何語(yǔ)言都可以使用。

          UTF-8編碼則是用以解決國(guó)際上字符的一種多字節(jié)編碼,它對(duì)英文使用8位(即一個(gè)字節(jié)),中文使用24位(三個(gè)字節(jié))來編碼。對(duì)于英文字符較多的論壇則用UTF-8節(jié)省空間。GBK包含全部中文字符;UTF-8則包含全世界所有國(guó)家需要用到的字符。GBK是在國(guó)家標(biāo)準(zhǔn)GB2312基礎(chǔ)上擴(kuò)容后兼容GB2312的標(biāo)準(zhǔn)(好像還不是國(guó)家標(biāo)準(zhǔn))UTF-8編碼的文字可以在各國(guó)各種支持UTF8字符集的瀏覽器上顯示。比如,如果是UTF8編碼,則在外國(guó)人的英文IE上也能顯示中文,而無需他們下載IE的中文語(yǔ)言支持包。 所以,對(duì)于英文比較多的論壇 ,使用GBK則每個(gè)字符占用2個(gè)字節(jié),而使用UTF-8英文卻只占一個(gè)字節(jié)。UTF8是國(guó)際編碼,它的通用性比較好,外國(guó)人也可以瀏覽論壇,GBK是國(guó)家編碼,通用性比UTF8差,不過UTF8占用的數(shù)據(jù)庫(kù)比GBK大。

          這里有必要簡(jiǎn)述一下幾種中文字體的區(qū)別: GB2312,GBK,GB18030。這是市面上GB系列三種中文的編碼方式,三者越往后形成越晚,字符越多(后面版本全部兼容之前版本)。GB2312只支持簡(jiǎn)體,共7445個(gè)字符。GBK有21886個(gè)漢字字符,支持繁體中文,GB18030就更多,甚至支持一些少數(shù)民族文字,是現(xiàn)在非手持跟植入式設(shè)備標(biāo)準(zhǔn)。現(xiàn)在仍有很多手持設(shè)備是GB2312的標(biāo)準(zhǔn)。這種情況用GB18030解碼就會(huì)出現(xiàn)錯(cuò)誤。

          由此可見,我們?cè)谧鲰?yè)面的時(shí)候指定編碼優(yōu)先選擇ut-8。

          Viewport是頁(yè)面可視化寬度,一般我們指定屬性值content="width=device-width,initial-scale=1.0",意思是可視化寬度等于設(shè)備的寬度,比如顯示器,平板,手機(jī),initial-scale=1.0指初始縮放比例是1:1,這點(diǎn)我們以后再設(shè)計(jì)移動(dòng)端自適應(yīng)的時(shí)候很有用!

          Keywords指的是當(dāng)前頁(yè)面關(guān)鍵字,description指當(dāng)前頁(yè)面描述,他們?cè)谧鯯EO的時(shí)候非常關(guān)鍵

          <link rel=”stylesheet” type=”text/css”href=”./css/style.csss”/>
          

          指定了當(dāng)前頁(yè)面(和文檔一個(gè)意思)所引用的樣式表地址,這個(gè)地址可以是絕對(duì)路徑,也可以是相對(duì)路徑,也可以是url 遠(yuǎn)程路徑。

          絕對(duì)路徑是指絕對(duì)的不可更改的路徑,比如D:\css\style.css,因?yàn)槿狈`活性,我們實(shí)戰(zhàn)中不要使用

          相對(duì)路徑是指從當(dāng)前路徑出發(fā),找到目的的那個(gè)路徑,比如:

          <link href=“../css/style.css" rel="stylesheet" />
          

          指的是從當(dāng)前路徑出發(fā),進(jìn)入上級(jí)路徑(..\),搜索文件夾css,尋找style.css文件

          指定相對(duì)路徑的方法我們會(huì)經(jīng)常使用,優(yōu)點(diǎn)是:路徑靈活,在web項(xiàng)目遷移的時(shí)候無需關(guān)注css文件夾絕對(duì)路徑的改變,因?yàn)檫@個(gè)文檔和樣式文件是相對(duì)路徑的關(guān)系;另外一個(gè)優(yōu)點(diǎn)是修改方便,因?yàn)閟tyle.css在本地,可以隨意定制。缺點(diǎn)是瀏覽器解析文檔的時(shí)候會(huì)下載這個(gè)css文件,占用一定的網(wǎng)絡(luò)流量,因?yàn)槊總€(gè)瀏覽者瀏覽頁(yè)面的時(shí)候,瀏覽者的瀏覽器都會(huì)下載解析當(dāng)前頁(yè)面的所有文件,你的css文件有多大,就要使用web服務(wù)器上面多少流量

          Ulr遠(yuǎn)程路徑指文件不在本地,而是在遠(yuǎn)程路徑上面,比如:

          <link  rel="stylesheet" />
          

          代表的就是引用了遠(yuǎn)程地址的css文件,優(yōu)點(diǎn)是不需要耗費(fèi)本地服務(wù)器流量,加載速度也快,這種行為我們一般稱之為公眾cdn資源加速或者公眾鏡像資源

          文件,缺點(diǎn)是樣式文件沒有在本地,我們無法修改定制,靈活性差一點(diǎn)。一般情況下,我們使用各種前端框架的時(shí)候會(huì)使用這種方法。當(dāng)然你可能較真說我有覆蓋大法,這牽扯到樣式作用優(yōu)先級(jí)問題,我們?cè)赾ss篇章詳細(xì)再談!

          <script type=”text/javascript” src=”./js/common.js”></script>
          

          指的是當(dāng)前頁(yè)面所用的腳本文件,type=”text/javascript”制定了網(wǎng)頁(yè)所使用的腳本類型是javascript,我們來思考一下,平時(shí)我們見到的引用腳本都是type=”text/javascirpt”,根據(jù)第一節(jié)中我們知道腳本中還有微軟的jsscript,我們可否使用type=”text/jsscirpt”那?我在網(wǎng)上找了很久,沒有找到答案,jsscript僅指支持IE瀏覽器,通用性不強(qiáng),而且語(yǔ)法上和javascript存在較大的差異,現(xiàn)在網(wǎng)絡(luò)上面js默認(rèn)指的就是javascript,我們權(quán)當(dāng)jsscirpt是歷史中一粒塵土罷了

          Src=”./js/common.js”指定了引用腳本的文件所在地址,原理和引用css一樣,分為絕對(duì)路徑,相對(duì)路徑和遠(yuǎn)程url引用,我們這里不再贅述。

          總結(jié):

          • head標(biāo)簽里面分為3大塊內(nèi)容,title標(biāo)題,meta元數(shù)據(jù),樣式或腳本的引用
          • Meta里面的信息是給瀏覽器和爬蟲看的(或者作為其他web信息使用),不屬于展示內(nèi)容
          • 樣式和腳本是組成頁(yè)面的基本構(gòu)成部分

          以為頭部區(qū)域填加的元素標(biāo)簽有<title><style><meta><link><script><noscript><base>

          定義HTML文檔的標(biāo)題

          <base>定義了所有鏈接的URL

          <title>元素

          定義不同文檔的標(biāo)題

          在HTML中,是必須填寫

          定義了瀏覽器工具欄的標(biāo)題,

          當(dāng)網(wǎng)頁(yè)添加收藏夾時(shí),顯示在收藏夾中的標(biāo)題

          顯示搜索引擎結(jié)果頁(yè)面的標(biāo)題

          <link>元素

          標(biāo)簽定義了文檔與外部資源之間的關(guān)系

          標(biāo)簽通常用于鏈接到樣式表

          <head>

          <link rel="stylesheet" type="text/css" href="mystyle.css">

          </head>

          <base>

          標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo),該標(biāo)簽作為HTML文檔中所有鏈接標(biāo)簽的默認(rèn)鏈接

          <head>

          <base target="_blank">

          </head>

          <style>

          標(biāo)簽定義了HTML文檔樣式文件引用地址

          也可以直接添加樣式渲染HTML文檔

          <meta>

          描述一些基本的元數(shù)據(jù)

          提供了元數(shù)據(jù);元數(shù)據(jù)也不顯示在頁(yè)面上,但會(huì)被瀏覽器解析

          META元素通常用于指定網(wǎng)頁(yè)的描述、關(guān)鍵詞、文檔的最后修改時(shí)間,作者和其它元數(shù)據(jù)

          元數(shù)據(jù)可以使用于瀏覽器(如何顯示內(nèi)容或重新加載頁(yè)面),搜索引擎(關(guān)鍵詞),或其它web服務(wù);

          <meta>一般放置于<head>區(qū)域

          HTML<script>元素

          用于加載腳本文件,如JAVASCRIPT


          主站蜘蛛池模板: 国产一区二区三区免费| 一区二区不卡久久精品| 精品视频一区二区| 国精产品一区二区三区糖心| 日本一区二三区好的精华液| 日本免费电影一区二区| 亚洲国产激情一区二区三区| 免费无码一区二区三区蜜桃大| 久久91精品国产一区二区| 老湿机一区午夜精品免费福利| 国产在线乱子伦一区二区| 99精品一区二区三区| 国产探花在线精品一区二区| 成人午夜视频精品一区| 亚洲av无码天堂一区二区三区| 免费萌白酱国产一区二区 | 不卡一区二区在线| 日韩经典精品无码一区| 国产一区二区三区小说| 亚洲一区二区三区亚瑟| 国产精品自拍一区| 亚洲一区在线视频观看| 久久一区二区精品| 久久精品无码一区二区无码| 亚洲第一区香蕉_国产a| 91午夜精品亚洲一区二区三区| 国产精品丝袜一区二区三区| 亚洲V无码一区二区三区四区观看 亚洲爆乳精品无码一区二区三区 亚洲爆乳无码一区二区三区 | 国产av夜夜欢一区二区三区| 四虎成人精品一区二区免费网站| 国产福利酱国产一区二区| 日韩视频一区二区在线观看| 日本在线视频一区二区三区| 国产a久久精品一区二区三区| 一区二区免费在线观看| 一区二区三区国产| 久久精品国产一区二区三| 日韩精品乱码AV一区二区| 国产精品分类视频分类一区| 精品国产一区二区三区在线| 一区二区三区波多野结衣|