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

下載本文檔

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

文檔簡介

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

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

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

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

空格符

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

溫馨提示

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

最新文檔

評論

0/150

提交評論