Web前端開(kāi)發(fā) 課件 第2章 HTML入門(mén)_第1頁(yè)
Web前端開(kāi)發(fā) 課件 第2章 HTML入門(mén)_第2頁(yè)
Web前端開(kāi)發(fā) 課件 第2章 HTML入門(mén)_第3頁(yè)
Web前端開(kāi)發(fā) 課件 第2章 HTML入門(mén)_第4頁(yè)
Web前端開(kāi)發(fā) 課件 第2章 HTML入門(mén)_第5頁(yè)
已閱讀5頁(yè)，還剩19頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第2章HTML入門(mén)主講教師：朱鐵櫻《Web前端開(kāi)發(fā)》超文本標(biāo)記語(yǔ)言（HyperTextMarkupLanguage，HTML）是一種用于構(gòu)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。它不僅僅定義了網(wǎng)頁(yè)的結(jié)構(gòu)，還影響了網(wǎng)頁(yè)的外觀和功能。HTML文檔是由各種HTML標(biāo)簽組成的，這些標(biāo)簽描述了網(wǎng)頁(yè)中的各個(gè)元素，如標(biāo)題、段落、列表、圖片、鏈接等。HTML是一種基礎(chǔ)技術(shù)，通常與CSS（層疊樣式表）和JavaScript一起使用，以設(shè)計(jì)出具有吸引力和交互性的網(wǎng)頁(yè)。CSS用于美化網(wǎng)頁(yè)的外觀和格式，而JavaScript則可以添加各種交互效果，使網(wǎng)頁(yè)更加生動(dòng)和有趣。2.1認(rèn)識(shí)HTML2.2HTML文檔結(jié)構(gòu)HTML文檔包括頭部和主體兩大部分。HTML文檔結(jié)構(gòu)<head></head>文檔頭部信息<body></body>文檔主體信息標(biāo)記HTML文檔的開(kāi)始標(biāo)記HTML文檔的結(jié)束文檔聲明頭<title></title>文檔的標(biāo)題<meta>元數(shù)據(jù)頭部主要描述瀏覽器和搜索引擎所需要的信息，瀏覽器不會(huì)將這些信息呈現(xiàn)給訪(fǎng)問(wèn)者；主體是文檔的正文，是網(wǎng)頁(yè)中真正要傳達(dá)的信息，這些信息將在瀏覽器窗口的正文部分呈現(xiàn)給訪(fǎng)問(wèn)者。2.2HTML文檔結(jié)構(gòu)標(biāo)簽名定義說(shuō)明<html><html>HTML標(biāo)簽頁(yè)面中最大的標(biāo)簽，根標(biāo)簽<head></head>文檔的頭部在head標(biāo)簽中必須要設(shè)置的標(biāo)簽是title<title></title>文檔的標(biāo)題讓頁(yè)面擁有一個(gè)屬于自己的網(wǎng)頁(yè)標(biāo)題<body></body>文檔的主體包含文檔的所有內(nèi)容，頁(yè)面內(nèi)容基本放到body里使用HbuilderX新建“基本HTML項(xiàng)目”將CSS和JS文件分別放入對(duì)應(yīng)目錄在html中輸入代碼任務(wù)1：創(chuàng)建一個(gè)站點(diǎn)HTML文檔頭部元素head標(biāo)簽用來(lái)設(shè)置HTML的文檔標(biāo)題和其它在網(wǎng)頁(yè)中不顯示的信息，比如direction方向、語(yǔ)言代碼LanguageCode、指定字典中的元信息、等等head元素中包含的常用標(biāo)簽如下：標(biāo)簽名說(shuō)明<title>代表HTML文檔的標(biāo)題<base>把相對(duì)URL轉(zhuǎn)換為完整的絕對(duì)URL<meta>用于定義文件信息的名稱(chēng)、內(nèi)容等信息<link>在文檔中聲明使用外接資源(如CSS)時(shí)使用此標(biāo)簽<style>在文檔中聲明樣式時(shí)使用此標(biāo)簽<script>在文檔中使用JavaScript腳本meta標(biāo)簽計(jì)算機(jī)要精確的處理各種字符文字，需要進(jìn)行編碼在HTML中使用meta標(biāo)簽描述字符集，告之瀏覽器此文檔使用哪種字符集中文能夠使用的字符集有兩種字符集的比較優(yōu)點(diǎn)缺點(diǎn)UTF8全面，包含了各個(gè)國(guó)家的語(yǔ)言文件尺寸大，比較臃腫gb2312(GBK)文件尺寸小，節(jié)省空間僅包含中文和少數(shù)英文和符號(hào)使用meta標(biāo)簽聲明的字符集一定要和文檔保存的類(lèi)型保持一致，否則會(huì)出現(xiàn)亂碼meta標(biāo)簽meta除了可以設(shè)置字符集，還可以設(shè)置頁(yè)面描述信息和關(guān)鍵字description：頁(yè)面描述，搜索引擎顯示搜索結(jié)果時(shí)顯示描述文字keywords：關(guān)鍵字，幫助搜索引擎提高搜索命中率HTML文檔標(biāo)題title標(biāo)簽用來(lái)設(shè)置頁(yè)面標(biāo)題有助于搜索引擎優(yōu)化link標(biāo)簽、style標(biāo)簽、script標(biāo)簽link標(biāo)簽style標(biāo)簽<linkrel="stylesheet"href="reset.css"/><style>body{background-color：yellow;}p{color：blue;}</style>script標(biāo)簽<script>alert("Hello，world!");</script><script

src="engine.js"></script>HTML主體HTML主體為body元素，使用<body></body>標(biāo)簽，用于定義文檔的正文內(nèi)容，成對(duì)出現(xiàn)。在<body></body>之間的內(nèi)容即為頁(yè)面的主體內(nèi)容，可以是文本、圖像、音頻、視頻、表單及其他交互式內(nèi)容，它們才是真正要在瀏覽器中顯示，并讓訪(fǎng)問(wèn)者看到的內(nèi)容。由于HTML元素可以相互嵌套，通過(guò)元素層層嵌套，就構(gòu)成了千變?nèi)f化的網(wǎng)頁(yè)。當(dāng)一個(gè)元素包含另一個(gè)元素時(shí)，把外層元素稱(chēng)作父元素，內(nèi)層元素稱(chēng)作子元素。子元素還可以再包含子元素，子元素中包含的任何元素，都是外層父元素的后代。HTML

對(duì)換行和tab均不敏感，僅通過(guò)標(biāo)簽來(lái)表示層次關(guān)系。在寫(xiě)代碼時(shí)要求有整齊的縮進(jìn)，使代碼更容易閱讀和維護(hù)，使用Ctrl+K格式化代碼。HTML中如果出現(xiàn)多個(gè)空白字符（空格，tab，回車(chē)）都會(huì)被折疊為一個(gè)空格顯示。標(biāo)簽要嚴(yán)格封閉，否則顯示會(huì)出現(xiàn)錯(cuò)誤。HTML標(biāo)簽是大小寫(xiě)無(wú)關(guān)的，<body>跟<BODY>或<Body>表示意思是一樣的，標(biāo)準(zhǔn)推薦使用小寫(xiě)，這樣符合XHTML標(biāo)準(zhǔn)2.3HTML基礎(chǔ)語(yǔ)法1.HTML語(yǔ)法特性2.3HTML基礎(chǔ)語(yǔ)法一個(gè)HTML元素由一個(gè)標(biāo)簽和一組屬性組成。一個(gè)標(biāo)簽可以有一個(gè)或多個(gè)屬性，屬性以名稱(chēng)和值成對(duì)出現(xiàn)（鍵值對(duì)）。標(biāo)簽是HTML中最基本單位。1.標(biāo)簽的構(gòu)成HTML標(biāo)簽是由尖括號(hào)（“<”和“>”）包圍的關(guān)鍵詞，如標(biāo)簽<html><p>等，標(biāo)簽名稱(chēng)不區(qū)分大小寫(xiě)，故<p>和<P>的含義相同，推薦大家使用小寫(xiě)。HTML標(biāo)簽分為兩種類(lèi)型：雙標(biāo)簽和單標(biāo)簽。<br>雙標(biāo)簽單標(biāo)簽2.3HTML基礎(chǔ)語(yǔ)法2

標(biāo)簽中的屬性HTML屬性包含了元素的附加描述信息，定義在HTML開(kāi)始標(biāo)簽中，通常以鍵/值對(duì)的形式出現(xiàn)，還有個(gè)別標(biāo)簽的屬性為空屬性，只有名稱(chēng)沒(méi)有值。屬性的名稱(chēng)和值無(wú)關(guān)大小寫(xiě)，推薦使用小寫(xiě)。<標(biāo)簽名屬性名1="屬性值"屬性名2="屬性值"…屬性名N="屬性值"></標(biāo)簽名>2.4文本控制標(biāo)簽標(biāo)簽分為容器級(jí)標(biāo)簽和文本級(jí)標(biāo)簽，容器級(jí)標(biāo)簽里可以放置任何標(biāo)簽，文本級(jí)標(biāo)簽里只能放置文字、圖片、表單元素。h系列標(biāo)簽代表各級(jí)標(biāo)題（h1—h6），h是容器級(jí)標(biāo)簽。p標(biāo)簽代表段落。水平分隔線(xiàn)標(biāo)簽hr。br標(biāo)簽。b標(biāo)簽。i標(biāo)簽。任務(wù)2HTML標(biāo)簽練習(xí)建立一個(gè)HTML文件，要求：設(shè)置p標(biāo)簽和h1-h6標(biāo)簽嘗試在p標(biāo)簽中嵌套h標(biāo)簽，是否可行？嘗試在h標(biāo)簽中嵌套p標(biāo)簽，是否可行？使用Chrome的開(kāi)發(fā)者功能對(duì)此頁(yè)面進(jìn)行頁(yè)面元素的查看和調(diào)試使用Chrome的開(kāi)發(fā)者功能對(duì)百度首頁(yè)進(jìn)行頁(yè)面元素的查看和調(diào)試嘗試使用其它瀏覽器進(jìn)行頁(yè)面元素的查看和調(diào)試特殊字符標(biāo)簽特殊字符描述字符代碼

空格符

<小于號(hào)<>大于號(hào)>&和號(hào)&￥人民幣￥?版權(quán)??注冊(cè)商標(biāo)?°攝氏度°±正負(fù)號(hào)±×乘號(hào)×÷除號(hào)÷2.5圖片標(biāo)簽HTML文檔中允許插入的圖片類(lèi)型如下：圖片類(lèi)型特點(diǎn)BMP不進(jìn)行任何壓縮，占用空間較大GIF壓縮格式，一個(gè)GIF文件中可以包含多張圖片，快速切換形成動(dòng)畫(huà)效果PNG無(wú)損壓縮，圖片占用空間小，支持透明效果JPG(JPEG)有損壓縮，不支持透明效果如果希望圖片質(zhì)量較好就用jpg格式如果希望圖片文件占用空間比較小就用gif格式如果希望在二者之間平衡就用png格式。2.5圖片標(biāo)簽HTML頁(yè)面中不是直接插入圖片，而是插入圖片的鏈接地址，需要將圖片文件上傳至服務(wù)器<img/>為單標(biāo)簽圖片標(biāo)簽的屬性src：代表資源，其值為顯示圖片的路徑alt：替代文字，當(dāng)圖片無(wú)法顯示時(shí)，網(wǎng)頁(yè)上顯示替代文字widthheigth路徑路徑：指從樹(shù)型目錄中的某個(gè)目錄層次到某個(gè)文件的一條道路。此路徑的主要構(gòu)成是目錄名稱(chēng)，中間用“/”分開(kāi)。絕對(duì)路徑是指從“根”開(kāi)始的路徑，也稱(chēng)為完全路徑。不依靠其他參考直接通過(guò)路徑找到某個(gè)文件相對(duì)路徑是從用戶(hù)工作目錄開(kāi)始的路徑。即使文件的目錄發(fā)生變化，只要相對(duì)路徑不變，則依然能夠通過(guò)它找到對(duì)應(yīng)的文件。路徑思考文件夾與文件的層級(jí)關(guān)系如下圖所示，如何在index.html中插入1.png圖片并顯示此圖片？在HTML頁(yè)面上顯示三張圖片，要求：HTML文件放置在文件夾web下圖片1放置在與HTML文件同級(jí)的文件夾photo1下圖片2放置在與web文件夾同級(jí)的文件夾photo2下圖片3放置在web文件夾上層文件夾下2.6布局標(biāo)簽<div>和<span>標(biāo)簽常用作布局工具，我們俗稱(chēng)盒子，用于容納內(nèi)容，標(biāo)簽沒(méi)有明確的語(yǔ)義，就是普普通通的盒子。1.<div>標(biāo)簽div：全稱(chēng)division，分割、區(qū)域、跨度的意思。俗稱(chēng)大盒子。<div>是雙標(biāo)簽，是最經(jīng)典的容

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論