HTML代碼基礎(chǔ)

1、HTML代碼基礎(chǔ)與CMS操作設(shè)計(jì)部 前端制作中心 陳烈欣HTML代碼基礎(chǔ)與CMS操作HTML代碼常識(shí)與CMS操作目錄目錄1. HTML代碼常識(shí)2. CMS操作講解3. 專(zhuān)題制作基礎(chǔ)2/25HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心3/25HTML 超文本標(biāo)記語(yǔ)言，即HTML（Hyper Text Mark-up Language），是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言。 HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心4/25超文本 超文本(Hypertext)是用超鏈接的方法，將各種不同空間的信息組織在一起的網(wǎng)狀文本。標(biāo)記 HTML標(biāo)記通常被稱(chēng)為HTML標(biāo)簽(HTML tag)，標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，標(biāo)簽通常是

2、成對(duì)出現(xiàn)的，等等這樣的特征。語(yǔ)言 HTML是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言(markup language)，作為語(yǔ)言就一定有對(duì)應(yīng)的語(yǔ)法，例如大小寫(xiě)不敏感、引號(hào)要成對(duì)使用，等等的基本語(yǔ)法。HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心5/25常見(jiàn)HTML結(jié)構(gòu) 瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示HTML標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容。網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)信息 HTML文檔HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心6/25HTML網(wǎng)頁(yè)信息 - 元素是所有頭部元素的容器。內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。 以下標(biāo)簽都可以添

3、加到 head 部分：、 以及 。 HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心7/25HTML元素 標(biāo)簽定義文檔的標(biāo)題。標(biāo)簽在所有 HTML/XHTML文檔中都是必需的。 為什么是必需的1. 定義瀏覽器工具欄中的標(biāo)題2. 提供頁(yè)面被添加到收藏夾時(shí)顯示的標(biāo)題3. 顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題HTML元素 元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。 有什么用處1. 規(guī)定頁(yè)面的描述、關(guān)鍵詞、作者、時(shí)間等元數(shù)據(jù)2. 可用于瀏覽器、搜索引擎、或其他 web 服務(wù)3. 可用于整個(gè)網(wǎng)站后臺(tái)作為一類(lèi)型的數(shù)據(jù)在CMS中的什么地方？會(huì)用到這兩種類(lèi)型的內(nèi)容？HTML代碼基礎(chǔ)

4、設(shè)計(jì)部前端制作中心8/251.出現(xiàn)在模版里面（例如：首頁(yè)） 2.出現(xiàn)在代碼塊里面（例如：專(zhuān)題） 3.出現(xiàn)在欄目設(shè)置里面 4.出現(xiàn)在文章屬性里面 HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心9/25HTML網(wǎng)頁(yè)內(nèi)容 - HTML 超鏈接 - HTML圖像標(biāo)簽 - HTML文本格式化 HTML換行、空格、及其他 HTML注釋HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心10/25HTML 超鏈接 - 超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。有兩種使用 標(biāo)簽的方式：1.通過(guò)使用href屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接2.通過(guò)使用href和na

5、me屬性 - 創(chuàng)建文檔內(nèi)的書(shū)簽 示例1： 文字 示例2： 文字 內(nèi)容HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心11/25HTML圖像標(biāo)簽 - 在HTML中，圖像由標(biāo)簽定義。是空標(biāo)簽，意思是說(shuō)它只包含屬性，并且沒(méi)有閉合標(biāo)簽。要在頁(yè)面上顯示圖像，你需要使用源屬性src。src指source，源屬性的值是圖像的地址。1.通過(guò)使用href屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接2.通過(guò)使用href和name屬性 - 創(chuàng)建文檔內(nèi)的書(shū)簽 完整示例： 1. src屬性為必需屬性，定義了圖片的地址2. alt屬性為非必需屬性，建議填寫(xiě)，其作用是當(dāng)圖片加載受阻時(shí)候有文字提示3. height和width屬性，非必需屬性，非成

6、對(duì)屬性（當(dāng)兩者只設(shè)置一個(gè)的話，瀏覽器會(huì)約束比例地計(jì)算出另一個(gè)；如果都不設(shè)置則圖片大小為圖片原始尺寸；該屬性使用不帶單位的像素值或者百分比）HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心12/25HTML文本格式化在HTML 可定義很多供格式化輸出的元素，比如粗體和斜體字、上標(biāo)、下標(biāo)等。在內(nèi)容編輯中常用的有如下：1. 使用標(biāo)簽，可以輸出粗體字；2. 使用標(biāo)簽，可以輸出斜體字；3. 使用標(biāo)簽，可以輸出上標(biāo)；4. 使用標(biāo)簽，可以輸出下標(biāo)； moreHTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心13/25HTML換行、空格、及其他 在內(nèi)容編輯過(guò)程中，難免會(huì)遇到諸如換行、空格、特殊符合等等，而在HTML中又應(yīng)該怎么處理這些符合

7、？HTML換行 - 標(biāo)簽插入簡(jiǎn)單的換行符。標(biāo)簽是一個(gè)空標(biāo)簽，意味著它沒(méi)有結(jié)束標(biāo)簽。所以這樣是錯(cuò)誤的：HTML空格及其他符合 實(shí)體符號(hào) 如右側(cè)表格所示，是HTML不同符號(hào)的實(shí)體名稱(chēng)和實(shí)體編碼。你可以通過(guò)在搜索引擎搜索：“html 符號(hào)”找到完整的實(shí)體符合名稱(chēng)和編碼。例如：這個(gè)表格！HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心14/25HTML注釋 - 注釋標(biāo)簽用來(lái)在源文檔中插入注釋。注釋會(huì)被瀏覽器忽略。您可使用注釋對(duì)您的代碼進(jìn)行解釋?zhuān)@樣做有助于您在以后的時(shí)間對(duì)代碼的編輯。注釋用處和注意1.可以用來(lái)備份代碼2.標(biāo)記代碼段的起始3.注釋不能嵌套使用HTML代碼基礎(chǔ)設(shè)計(jì)部前端制作中心15/25使用THML工具

8、HTML工具，即編寫(xiě)HTML代碼的編輯器，種類(lèi)繁多，簡(jiǎn)單到直接可以用記事本或?qū)懽职暹M(jìn)行編寫(xiě)，智能到可以高效地進(jìn)行HTML代碼處理的工具。DW，Dreamweaver，一款集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，優(yōu)點(diǎn)：功能全面且強(qiáng)大；缺點(diǎn)：資源占用率高。演示操作1. 格式化一段排版雜亂的代碼2. 快速選中一個(gè)完整的代碼段3. 無(wú)效代碼高亮顯示4. 通過(guò)折疊，檢測(cè)語(yǔ)法錯(cuò)誤（標(biāo)簽書(shū)寫(xiě)錯(cuò)誤、結(jié)束標(biāo)簽漏寫(xiě)等）HTML代碼常識(shí)與專(zhuān)題制作基礎(chǔ)培訓(xùn)目錄16/25目錄1. HTML代碼常識(shí)2. CMS操作講解3. 專(zhuān)題制作基礎(chǔ)專(zhuān)題制作基礎(chǔ)設(shè)計(jì)部前端制作中心17/25對(duì)專(zhuān)題進(jìn)行一個(gè)簡(jiǎn)單但完整的策劃（布局、顏色、功能塊等）在CMS相應(yīng)的位置為該專(zhuān)