第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

首頁 慕課教程 Dreamweaver 教程 Dreamweaver 教程 HTML <head> 標(biāo)簽中的訊息
GZQ0607 · 更新于 2020-08-12

HTML 標(biāo)簽中的訊息

在這一節(jié)知識(shí)點(diǎn)中，我將帶領(lǐng)大家一起學(xué)習(xí) <head>標(biāo)簽的相關(guān)知識(shí)點(diǎn)。<head>標(biāo)簽，是一個(gè)對(duì)于網(wǎng)頁極其重要的標(biāo)簽。在整個(gè)前端開發(fā)領(lǐng)域算得上不可不知的程度。<head> 標(biāo)簽可謂是“藏龍臥虎”。別看它外觀簡(jiǎn)短，卻處處定義著一個(gè)網(wǎng)頁的“大事”。

<head> 也是 HTML 結(jié)構(gòu)中不可獲取的一部分。而關(guān)鍵字決定了你是否會(huì)被搜索引擎檢索到。百度谷歌等搜索引擎想必大家的生活都已經(jīng)離不開了吧。而網(wǎng)頁視角則描述了用戶從何種角度看一個(gè)網(wǎng)頁。當(dāng)然，作為一個(gè)完整的網(wǎng)頁，最好還是有一些說明信息。那么，本節(jié)我們從四個(gè)知識(shí)點(diǎn)上來深入學(xué)習(xí)。首先是學(xué)習(xí)什么是網(wǎng)頁頭部信息，進(jìn)而學(xué)習(xí)給網(wǎng)頁添加關(guān)鍵字，然后學(xué)習(xí)一下什么叫網(wǎng)頁視角，最后我們來學(xué)習(xí)給網(wǎng)頁添加說明信息。

1. 學(xué)習(xí)“網(wǎng)頁頭部信息”

網(wǎng)頁的頭部信息指的就是 <head> 標(biāo)簽里的內(nèi)容。你可以在這里面設(shè)置很多網(wǎng)頁的屬性，比如刷新，比如網(wǎng)頁標(biāo)題，比如網(wǎng)頁的關(guān)鍵詞等。<head> 標(biāo)簽內(nèi)也可以容納腳本（ script ）標(biāo)簽，要正確認(rèn)識(shí) <head> 在網(wǎng)頁結(jié)構(gòu)中的地位。下面讓我來結(jié)合 Dreamweaver CC 2018 詳細(xì)介紹一下相關(guān)知識(shí)。

1.1 設(shè)置網(wǎng)頁頭部信息

第一步：我們還是選擇創(chuàng)建一個(gè)空白的 HTML 文檔。按照前幾節(jié)中介紹過的內(nèi)容，我們依次點(diǎn)擊菜單欄中的文件，新建，新建空白 HTML 文檔。切換到代碼視圖我們可以看到，軟件自動(dòng)創(chuàng)建了好一個(gè)文檔無標(biāo)題文檔。并且在 <head> 標(biāo)簽里已經(jīng)有了默認(rèn)的內(nèi)容。它們分別是 meta 標(biāo)簽， link 標(biāo)簽，title 標(biāo)簽。如下圖。我們來一一解釋一下各個(gè)標(biāo)簽的作用。

圖片描述

1.1.1 <meta>標(biāo)簽

<meta> 標(biāo)簽是一個(gè)位于網(wǎng)頁頭部標(biāo)簽中的輔助性標(biāo)簽。它的作用是為頁面提供元信息，比如供搜索引擎使用的關(guān)鍵詞等。它有 http-equiv 屬性和 name 屬性。這些屬性帶有自己的參數(shù)，通過參數(shù)的變化來實(shí)現(xiàn)對(duì)網(wǎng)頁的控制。比如我們常能看到通過 <meta> 標(biāo)簽來設(shè)置字符集。在這里大家一定要注意 <meta> 標(biāo)簽一定是位于頭部標(biāo)簽內(nèi)部的，不能出現(xiàn)在其他地方，要嚴(yán)格執(zhí)行這一點(diǎn)標(biāo)準(zhǔn)。

1.1.2<link>標(biāo)簽

<link> 標(biāo)簽是用來鏈接的標(biāo)簽。這里大家肯定會(huì)問鏈接什么。在一個(gè)工程中，我們常常用這個(gè)標(biāo)簽來鏈接樣式文件，如 CSS 文件。腳本文件，如 Javascript 文件。這個(gè)標(biāo)簽在 Android 開發(fā)等其他領(lǐng)域的開發(fā)中還會(huì)有其他的作用，在這里我們不做過多贅述。我們只需要知道并且重點(diǎn)記憶的是：<link> 標(biāo)簽用來鏈接 CSS 文件和 JS 文件。

1.1.3 <title> 標(biāo)簽

毋庸置疑，這是個(gè)見名知意的標(biāo)簽，這個(gè)標(biāo)簽的作用是為網(wǎng)頁設(shè)置在瀏覽器中顯示的標(biāo)題。對(duì)于今天大多數(shù)的選項(xiàng)卡式的瀏覽器來說，這里的標(biāo)題會(huì)展是在選項(xiàng)卡頂部位置。

網(wǎng)頁的標(biāo)題往往是為了讓用戶能通過網(wǎng)頁標(biāo)題來獲取他現(xiàn)在所在網(wǎng)頁的功能。同學(xué)們有沒有想過，如果一個(gè)網(wǎng)頁我們點(diǎn)開之后由于各種原因遲遲看不到網(wǎng)頁標(biāo)題，用戶有極大概率會(huì)以為自己點(diǎn)錯(cuò)了，或者放棄瀏覽網(wǎng)頁。因此，一個(gè)好的提醒意識(shí)，也是一個(gè)網(wǎng)頁設(shè)計(jì)者必備的素養(yǎng)之一。

2. 給頁面添加關(guān)鍵字

向頁面添加關(guān)鍵字，首先新建一個(gè) HTML 文件，此處不在贅述新建文檔的具體過程。然后，我們點(diǎn)擊插入，選擇關(guān)鍵字?？梢钥吹綇棾鲆粋€(gè)讓我們輸入內(nèi)容的頁面。

在這個(gè)頁面中輸入我們要添加的關(guān)鍵字，點(diǎn)擊確定，即可完成關(guān)鍵詞的添加。在這個(gè)知識(shí)點(diǎn)中，必須要掌握的是添加關(guān)鍵字的意義并不是給我們網(wǎng)頁設(shè)計(jì)者和使用網(wǎng)頁的用戶看，而是給搜索引擎等機(jī)機(jī)器人看。好的程序，要能夠被機(jī)器很好的識(shí)別，作為一名豐富的前端工程師或者 SEO 優(yōu)化相關(guān)從業(yè)人員，他們都具備良好的關(guān)鍵字選取技巧。具體技巧，感興趣的同學(xué)們可以去互聯(lián)網(wǎng)上了解一下，在此處我們無法詳細(xì)展開了解。

圖片描述

添加完關(guān)鍵字后，我們打開代碼視圖可以看到，代碼中被插入了一個(gè) <meta> 標(biāo)簽，標(biāo)簽的 name 屬性為 keywords （關(guān)鍵字），標(biāo)簽的內(nèi)容 content 為我們剛剛輸入的關(guān)鍵字。

不難發(fā)現(xiàn)，Dreamweaver CC 2018 其實(shí)是以圖形化界面幫我們構(gòu)建了通往代碼的路徑，讓我們不必掌握代碼就可以實(shí)現(xiàn)添加關(guān)鍵字這種專業(yè)技能。是不是很好用很貼心那？

圖片描述

3. 什么是網(wǎng)頁視角

3.1 網(wǎng)頁視角的概念

網(wǎng)頁視角，英文說法叫 viewport ，這個(gè)詞經(jīng)常在 Unity3D ，VR，WebGL 開發(fā)中見到。顧名思義，就是你看網(wǎng)頁的視角，舉個(gè)例子：你在看電視的時(shí)候可能是坐著看，也可能是躺著看，也可能是側(cè)著身子看。來幫你完成看這個(gè)動(dòng)作的表面上是你的眼睛，但實(shí)際限制你看到多少內(nèi)容的是你的眼眶，而看到的東西和具體姿態(tài)，則受你的姿勢(shì)影響。

比如你在電視的側(cè)面看電視，它就是個(gè)黑色長(zhǎng)方形，而你去電視機(jī)背面看它則是密密麻麻纏繞的線更加丑陋。這樣就很好解釋了。網(wǎng)頁也是“橫看成嶺側(cè)成峰，遠(yuǎn)近高低各不同”。要想看到什么（內(nèi)容多少，形狀如何）完全取決你站在哪里看，用什么比例看（縮??？放大？），用什么角度看。這里類比的是你的屏幕大小和你設(shè)置的網(wǎng)頁觀看角度。

3.2 如何在 Dreamweaver CC 2018 中設(shè)置視角？

如果你用的英文原版的 Dreamweaver CC 2018，你看到的視角按鈕寫的就是ViewPort（V）。
但如果你使用的恰好是某些中文漢化版本的 Dreamweaver CC 2018 ，卻怎么找也找達(dá)不到 Viewport（V），那也請(qǐng)你不必著急。因?yàn)檐浖臐h化工作組把這個(gè)詞翻譯為了視口（V）。具體操作看下圖：

圖片描述

首先我們點(diǎn)擊插入（I），然后進(jìn)一步點(diǎn)擊 HTML ，再次彈出的下拉列表中選擇 視口（V）。我們發(fā)現(xiàn)并沒有什么變化。然而并不是，這個(gè)時(shí)候請(qǐng)大家看一下代碼視圖，是不是又多了一條標(biāo)簽？沒錯(cuò)，這個(gè)就是設(shè)置視角的代碼。

圖片描述

3.3 視角屬性解讀

我們?cè)谏鲜龃a中可以看到兩個(gè)基本屬性，一個(gè)是 width 屬性，代表設(shè)置視角的寬度，它的默認(rèn)值是設(shè)備寬度，也就是網(wǎng)頁默認(rèn)以顯示器大小來適應(yīng)顯示。另一個(gè)叫 initial-scale 這個(gè)屬性叫初始縮放，它的默認(rèn)值為1，代表默認(rèn)以100%大小展示網(wǎng)頁。

4. 給網(wǎng)頁添加說明信息

在這個(gè)知識(shí)點(diǎn)中，將為大家著重講解一下如何設(shè)置網(wǎng)頁說明信息。

下面來看一下具體操作：

設(shè)置說明信息的操作和設(shè)置視角完全一樣。如下圖展示的一樣，先在插入中選擇 HTML 然后選擇說明即可發(fā)現(xiàn)網(wǎng)頁代碼中多了一條 meta 信息。如圖所示：

圖片描述

圖片描述

5. 小結(jié)

總結(jié)一下本小結(jié)知識(shí)點(diǎn)，本小結(jié)主要講授了網(wǎng)頁頭部信息的重要性，進(jìn)一步講，其實(shí)是主要圍繞著meta標(biāo)簽的各種豐富的功能。通過這一節(jié)我們不難發(fā)現(xiàn)，網(wǎng)頁中 head 部分雖然并不是很多，但卻承擔(dān)著很重的功能。 它更像是給整個(gè)網(wǎng)頁在指定一種規(guī)則，比如縮放比例，觀看視角，刷新時(shí)間，搜索關(guān)鍵字等。這要引起我們的注意，如果你的網(wǎng)頁遇到了某些怎么調(diào)都調(diào)不好的 bug ，比如字符編碼亂碼。是不是可以先檢查一些 head 部分的設(shè)置。從我以往的授課經(jīng)驗(yàn)來看，犯這種問題的同學(xué)不盡其數(shù)，但歸根到底還是一個(gè)練習(xí)二字。希望大家可以重視相關(guān)知識(shí)點(diǎn)。

那么總結(jié)一下：

  • 本節(jié)的重點(diǎn)是： 學(xué)會(huì)設(shè)置網(wǎng)頁的關(guān)鍵字，理解并掌握 head 部信息的作用；
  • 本節(jié)的難點(diǎn)是： 理解視角的含義并設(shè)置視角。

圖片描述