網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5基礎(chǔ)-HTML5的基本結(jié)構(gòu)和語法規(guī)則_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5基礎(chǔ)-HTML5的基本結(jié)構(gòu)和語法規(guī)則_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5基礎(chǔ)-HTML5的基本結(jié)構(gòu)和語法規(guī)則_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5基礎(chǔ)-HTML5的基本結(jié)構(gòu)和語法規(guī)則_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5基礎(chǔ)-HTML5的基本結(jié)構(gòu)和語法規(guī)則_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

本節(jié)介紹的基本結(jié)構(gòu)，包括HTML的語法結(jié)構(gòu)、文檔結(jié)構(gòu)、標(biāo)簽的格式以及代碼的編寫規(guī)范等。

HTML5概述HTML5的基本結(jié)構(gòu)和語法規(guī)則目錄

HTML5概述1.1Web的基本概念1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1.3編輯HTML文件1.4實(shí)訓(xùn)——制作社區(qū)網(wǎng)版權(quán)信息習(xí)題11.2.1HTML5文檔的基本結(jié)構(gòu)HTML5文檔的基本結(jié)構(gòu)如下。<!DOCTYPEhtml><htmllang="zh-CN">

<head><metacharset="UTF-8"><title>文檔標(biāo)題</title></head>

<body>

文檔正文部分

</body></html>1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1．<!DOCTYPEhtml>標(biāo)簽<!DOCTYPE>標(biāo)簽位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范。文檔類型聲明的語法格式如下：<!DOCTYPEhtml>這行代碼稱為DOCTYPE（documenttype，文檔類型）聲明。要建立符合標(biāo)準(zhǔn)的網(wǎng)頁，DOCTYPE聲明是必不可少的關(guān)鍵組成部分。<!DOCTYPEhtml>聲明必須放在每一個(gè)HTML文檔的最頂部，在所有代碼和標(biāo)簽之前。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則2．<html>…</html>標(biāo)簽<html>標(biāo)簽位于<!DOCTYPE>標(biāo)簽之后，稱為HTML文檔標(biāo)簽，也被稱為根標(biāo)簽，用于告訴瀏覽器其自身是一個(gè)HTML文檔。HTML文檔標(biāo)簽的語法格式為：<htmllang="zh-CN">HTML文檔的內(nèi)容</html><html>處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從<html>開始解釋，直到遇到</html>為止。每個(gè)HTML文檔均以<html>開始，以</html>結(jié)束。lang屬性為文檔設(shè)置語言，對(duì)于簡體中文，設(shè)置為“zh-CN”。如果省略lang，將依據(jù)瀏覽器的設(shè)置。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則3．<head>…</head>標(biāo)簽<head>標(biāo)簽用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)簽，緊跟在<html>標(biāo)簽之后，主要用來封裝其他位于文檔頭部的標(biāo)簽。HTML文檔頭標(biāo)簽的語法格式為：<head>

頭部的內(nèi)容</head>文檔頭部內(nèi)容在開始標(biāo)簽<html>和結(jié)束標(biāo)簽</html>之間定義，一個(gè)HTML文檔只能含有一對(duì)<head>…</head>標(biāo)簽。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則4．<metacharset>標(biāo)簽<head>…</head>標(biāo)簽中的<metacharset>指定網(wǎng)頁文檔中的字符集，稱為HTML文檔編碼，HTML5文檔直接使用meta元素的charset屬性指定文檔編碼，語法格式如下：<metacharset="UTF-8">為了被瀏覽器正確解釋和通過W3C代碼校驗(yàn)，所有的HTML文檔都必須聲明它們所使用的編碼語言。文檔聲明的編碼應(yīng)該與實(shí)際的編碼一致，否則就會(huì)呈現(xiàn)為亂碼。對(duì)于中文網(wǎng)頁的設(shè)計(jì)者來說，指定代碼的字符集為“UTF-8”。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則5．<title>…</title>標(biāo)簽HTML文件的標(biāo)題顯示在瀏覽器的標(biāo)題欄中，用以說明文件的用途。其語法格式如下：<title>網(wǎng)頁標(biāo)題</title>1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則6．<body>…</body>標(biāo)簽<body>標(biāo)簽定義HTML文檔要顯示的內(nèi)容，也稱為主體標(biāo)簽。瀏覽器中顯示的所有文本、圖像、表單與多媒體元素等信息都必須位于<body>…</body>標(biāo)簽內(nèi)，<body>標(biāo)簽內(nèi)的信息才是最終展示給用戶看的。HTML文檔主體標(biāo)簽的語法格式為：<body>

網(wǎng)頁的內(nèi)容</body><body>標(biāo)簽定義網(wǎng)頁上顯示的主要內(nèi)容與顯示格式，是整個(gè)網(wǎng)頁的核心，網(wǎng)頁中要真正顯示的內(nèi)容都包含在文檔體中。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1.2.2HTML5的基本語法1．標(biāo)簽（tag）（1）雙標(biāo)簽其格式為：<標(biāo)簽>受標(biāo)簽影響的內(nèi)容</標(biāo)簽>開始標(biāo)簽標(biāo)志一段內(nèi)容的開始，結(jié)束標(biāo)簽是指與開始標(biāo)簽相對(duì)的標(biāo)簽。結(jié)束標(biāo)簽比開始標(biāo)簽多一個(gè)斜杠“/”。成對(duì)出現(xiàn)的標(biāo)簽也稱閉合標(biāo)簽。例如，<html>表示HTML文檔開始，到</html>結(jié)束，從而形成一個(gè)HTML文檔。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則（2）單標(biāo)簽單獨(dú)出現(xiàn)的標(biāo)簽沒有相應(yīng)的結(jié)束標(biāo)簽的標(biāo)簽，其格式為：<標(biāo)簽>常見的單標(biāo)簽有<area>、<base>、<basefont>、<br>、<col>、<hr>、<img>、<input>、<param>、<link>、<meta>等。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則2．元素（element）（1）有內(nèi)容的元素例如，<title>和</title>是標(biāo)簽，下面代碼是一個(gè)title元素：<title>淘寶網(wǎng)-淘！我喜歡</title>（2）空元素“空元素”只有起始標(biāo)簽而沒有結(jié)束標(biāo)簽，也沒有元素內(nèi)容。例如，<br>、<hr>（橫線）元素就是空元素。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則（3）元素的嵌套<head><title>淘寶網(wǎng)-淘！我喜歡</title></head>例如，下面是不正確的嵌套寫法，p元素的起始標(biāo)簽在b元素的外層，但它的結(jié)束標(biāo)簽卻放在了b元素結(jié)束標(biāo)簽內(nèi)。<p>這是<b>第一段</p>文字</b>正確的HTML寫法如下：<p>這是<b>第一段</b>文字</p>1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則3．屬性元素的屬性放置在元素的起始標(biāo)簽內(nèi)，每個(gè)屬性對(duì)應(yīng)一個(gè)屬性值，通常都是以“屬性名="值"”的形式來表示，出現(xiàn)在元素開始標(biāo)簽的最后一個(gè)“>”之前，用空格隔開后，可以指定多個(gè)屬性，并且在指定多個(gè)屬性時(shí)不用區(qū)分順序。屬性的使用格式如下：<標(biāo)簽屬性1="屬性值1"屬性2="屬性值2"…>受標(biāo)簽影響的內(nèi)容</標(biāo)簽>例如，下面代碼中的“style="color:#ff0000;font-size:30px"”就是p元素的屬性：<pstyle="color:#ff0000;font-size:30px">第一段內(nèi)容</p>1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1.2.3HTML的字符實(shí)體和顏色表示1.字符實(shí)體一些字符在HTML中擁有特殊的含義，例如，大于號(hào)“>”和小于號(hào)“<”已作為HTML的語法符號(hào)。因此，如果希望在瀏覽器顯示這些特殊字符，就需要在HTML源碼中插入相應(yīng)的HTML代碼，這些特殊符號(hào)對(duì)應(yīng)的HTML代碼被稱為字符實(shí)體。字符實(shí)體由三部分組成：以一個(gè)符號(hào)（&）開頭，一個(gè)實(shí)體名稱，以一個(gè)分號(hào)（;）結(jié)束。例如，要在HTML文檔中顯示小于號(hào)，輸入“<”。需要強(qiáng)調(diào)的是，實(shí)體書寫對(duì)大小寫是敏感的。常用的特殊符號(hào)及對(duì)應(yīng)的字符實(shí)體見表1-3。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則2.HTML的顏色表示在HTML中，顏色有兩種表示方式。用顏色的英文名稱表示，比如blue表示藍(lán)色，red表示紅色。另外一種是用16進(jìn)制的數(shù)值表示RGB的顏色值。RGB顏色的表示方式為#rrggbb。其中，rr、gg、bb三色對(duì)應(yīng)的取值范圍都是00到FF，如白色的RGB值是（255，255，255），用#ffffff表示；黑色的RGB值是（0，0，0），用#000000表示。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1.2.4HTML5開發(fā)人員編碼規(guī)范1．HTML書寫規(guī)范2．標(biāo)簽的規(guī)范3．屬性的規(guī)范4．元素的嵌套5．代碼的縮進(jìn)1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則選學(xué)1.2.5HTML的全局屬性1.HTML的全局標(biāo)準(zhǔn)屬性全局屬性是指可用于大多數(shù)HTML元素的屬性。在HTML和HTML5中規(guī)范中，規(guī)定的全局標(biāo)準(zhǔn)屬性，見表1-2。后續(xù)章節(jié)將介紹這些屬性。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則2.HTML的全局事件屬性事件是針對(duì)某個(gè)元素的，可識(shí)別的動(dòng)作。例如，針對(duì)“確定”按鈕的單擊事件，文本框內(nèi)容變化事件、復(fù)選框的選中或取消選中事件等。HTML有使事件在瀏覽器中觸發(fā)動(dòng)作的能力，例如，當(dāng)用戶單擊某個(gè)元素時(shí)執(zhí)行JavaScript程序。在HTML中，事件既可以通過JavaScript直接觸發(fā)，也可以通過全局事件屬性觸發(fā)。所謂全局事件屬性是指可用于大多數(shù)HTML元素的事件屬性。有關(guān)事件編程的知識(shí)，將在JavaScript事件處理中介紹。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1.2.6元素的分類依據(jù)元素的作用不同，元素可以分為元信息元素和語義元素。1．元信息元素元信息（meta-information）或稱元數(shù)據(jù)（Metadata）類元素是指用于描述文檔自身信息的一類元素，meta元素定義元信息，包含頁面的描述、關(guān)鍵字、最后的修改日期、作者及其它元信息，<meta>標(biāo)簽寫在<head>…</head>標(biāo)簽中。元信息類元素是提供給瀏覽器、搜索引擎（關(guān)鍵字）以及其它Web服務(wù)調(diào)用，一般不會(huì)顯示給用戶。meta元素的常用屬性如下：1）charset：定義文檔的字符編碼，常用的是“UTF-8”。2）content：定義與name和http-equiv相關(guān)的元信息。3）name：關(guān)聯(lián)content的名稱（常用的有keyowrd關(guān)鍵字、author作者名、discriptiont頁面描述）。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則meta元素的name屬性的語法格式為：<metaname="參數(shù)"content="參數(shù)值">1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則2．語義元素語義類元素是指清楚地向?yàn)g覽器和開發(fā)者描述其意義的元素，如標(biāo)題元素、段落元素、列表元素等。有些語義元素在網(wǎng)頁中可以呈現(xiàn)顯示效果，有些沒有顯示效果。（1）塊級(jí)元素（block）塊級(jí)元素是指本身屬性為display:block的元素。因?yàn)樗陨淼奶攸c(diǎn)，通常使用塊級(jí)元素進(jìn)行大布局（大結(jié)構(gòu)）的搭建。（2）行內(nèi)元素（inline）行內(nèi)元素也稱內(nèi)聯(lián)元素，是指本身屬性為display:inline的元素，行內(nèi)元素可以和相鄰的內(nèi)聯(lián)元素在同一行，對(duì)寬、高屬性值不生效，完全靠內(nèi)容撐開寬、高。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則（3）行內(nèi)塊元素還有一種結(jié)合行內(nèi)和塊級(jí)的元素，不僅可以對(duì)寬、高屬性值生效，還可以多個(gè)元素存在一行顯示，稱為行內(nèi)塊元素。行內(nèi)塊元素能和其他元素待在一行，能設(shè)置寬高。常用的行內(nèi)塊元素有img、input、textarea等。（4）可變?cè)乜勺冊(cè)馗鶕?jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素。主要有applet、button、del、iframe、ins、map、object、script等。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則（5）HTML5中新增的結(jié)構(gòu)語義元素在HTML5之前，頁面只能用<div>元素作為結(jié)構(gòu)元素來分隔不同的區(qū)域，由于<div>元素?zé)o任何語義，給設(shè)計(jì)者和閱讀代碼者帶來困擾，所以在HTML5中增加了結(jié)構(gòu)語義元素。HTML5增加的結(jié)構(gòu)語義元素明確了一個(gè)Web頁面的不同部分，如圖1-6所示。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則3.H

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論