《HTML5+CSS3 Web開發(fā)案例教程》課件-第2章 HTML5語言基礎(chǔ)_第1頁
《HTML5+CSS3 Web開發(fā)案例教程》課件-第2章 HTML5語言基礎(chǔ)_第2頁
《HTML5+CSS3 Web開發(fā)案例教程》課件-第2章 HTML5語言基礎(chǔ)_第3頁
《HTML5+CSS3 Web開發(fā)案例教程》課件-第2章 HTML5語言基礎(chǔ)_第4頁
《HTML5+CSS3 Web開發(fā)案例教程》課件-第2章 HTML5語言基礎(chǔ)_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3

2021.6HTML5andCSS3第2章

HTML5語言基礎(chǔ)HTML5基本知識動手練習(xí)：利用VSCode快速建立基本文檔文本標(biāo)記HTML標(biāo)記與HTML屬性在網(wǎng)頁中使用圖像（<img>）再談HTML5DEMO（創(chuàng)建一個簡單地網(wǎng)頁）第2章

HTML5語言基礎(chǔ)

第2章

HTML5語言基礎(chǔ)HTML5基本知識——HTML文件結(jié)構(gòu)最簡單的一個網(wǎng)頁<!DOCTYPEhtml><html><head><title>test</title></head><body><p>互聯(lián)網(wǎng)，我來了！</p></body></html>第2章

HTML5語言基礎(chǔ)HTML文件結(jié)構(gòu)1.<!DOCTYPE>聲明在整個頁面文檔的第1行，應(yīng)該使用<!DOCTYPE>聲明，使瀏覽器知道這個文檔的類型2.<html>標(biāo)記<html>標(biāo)記放在HTML文件的開頭，并沒有什么實質(zhì)性的功能，只是一個形式上的標(biāo)記3.<head>標(biāo)記<head>也稱為頭標(biāo)記，放在<html>標(biāo)記內(nèi)部，其作用是放置關(guān)于此HTML文件的信息，如提供關(guān)于該網(wǎng)頁的索引（meta）信息、定義CSS樣式等。4.<title>標(biāo)記<title>稱為標(biāo)題標(biāo)記，包含在<head>標(biāo)記內(nèi)，它的作用是設(shè)定網(wǎng)頁標(biāo)題，可以看見在瀏覽器左上方的標(biāo)題欄中顯示這個標(biāo)題5.<body>標(biāo)記<body>又稱為主體標(biāo)記，網(wǎng)頁所要顯示的內(nèi)容都放在這個標(biāo)記內(nèi)，它是HTML文件的重點(diǎn)所在。6.<p>標(biāo)記<p>標(biāo)記表示的是段落，即其間的文字顯示為一個文字段落。第2章

HTML5語言基礎(chǔ)簡單的HTML案例第2章

HTML5語言基礎(chǔ)網(wǎng)頁源文件的獲取直接查看源文件打開瀏覽器，這里以Chrome瀏覽器為例。在網(wǎng)頁正文位置單擊鼠標(biāo)右鍵，選擇菜單中的“查看網(wǎng)頁源代碼”命令即可看到該網(wǎng)頁的源文件了，或者直接使用快捷鍵“Ctrl+U”,如圖所示第2章

HTML5語言基礎(chǔ)網(wǎng)頁源文件的獲取保存網(wǎng)頁選擇瀏覽器右鍵菜單中的“另存為”命令，或者直接使用快捷鍵“Ctrl+S”，這樣就可以將所需的與該網(wǎng)頁相關(guān)的部件全部保存下來，如圖所示。第2章

HTML5語言基礎(chǔ)動手練習(xí)：利用VSCode快速建立基本文檔創(chuàng)建新的空白文檔編寫基礎(chǔ)的HTML第2章

HTML5語言基礎(chǔ)文本標(biāo)記——段落與段內(nèi)換行（<p>和<br>）瀏覽器會完全按照HTML標(biāo)記來解釋HTML代碼，忽略多余的空格和換行。在HTML文件里，不管輸入多少空格（按空格鍵）都將被視為一個空格；換行（按“Enter”鍵）也是無效的。段落標(biāo)記：“<p></p>”，p是英文單詞“paragraph”即“段落”的首字母，用來定義網(wǎng)頁中的一段文本，文本在一個段落中會自動換行。換行標(biāo)記：“<br>”，這是一個單個使用的標(biāo)記，是英文單詞“break”的縮寫，作用是將文字在一個段內(nèi)強(qiáng)制換行。第2章

HTML5語言基礎(chǔ)設(shè)置標(biāo)題（h1~h6）在HTML中，設(shè)定了6個標(biāo)題標(biāo)記，分別用于顯示不同級別的標(biāo)題。例如<h1>標(biāo)記表示1級標(biāo)題，<h2>表示2級標(biāo)題，一直到<h6>表示6級標(biāo)題，數(shù)字越小，級別越高，文字也相應(yīng)越大。第2章

HTML5語言基礎(chǔ)使文字水平居中（<center>）如果對文字顯示在瀏覽器中的位置不加以限定，瀏覽器就會以默認(rèn)的方式來顯示文字的位置，即從靠左的位置開始顯示文字。但在實際應(yīng)用中，可能需要在窗口的正中間開始顯示文字，這時可以使用另一個HTML——<center>和</center>標(biāo)記來完成。第2章

HTML5語言基礎(chǔ)設(shè)置文字段落的縮進(jìn)（<blockquote>）有時在文檔中，需要對某段落進(jìn)行縮進(jìn)顯示，例如顯示引用的內(nèi)容等，這時可以使用文本縮進(jìn)標(biāo)記<blockquote>和</blockquote>。第2章

HTML5語言基礎(chǔ)HTML標(biāo)記與HTML屬性在大多數(shù)HTML標(biāo)記中都可以加入屬性控制，屬性的作用是幫助HTML標(biāo)記進(jìn)一步控制HTML文件的內(nèi)容，比如內(nèi)容的對齊方式（如本例），文字的大小、字體、顏色，網(wǎng)頁的背景樣式，圖片的插入，等等?；菊Z法：<標(biāo)記名稱屬性名1=“屬性值1”屬性名2=“屬性值2”……>第2章

HTML5語言基礎(chǔ)用align屬性控制段落的水平位置在1級標(biāo)題標(biāo)記中，增加了align屬性的設(shè)置。當(dāng)align屬性設(shè)置為“center”的時候，標(biāo)題就居中對齊了。而在<h2>標(biāo)記中也增加了align屬性的設(shè)置，并設(shè)置為“right”，這時該標(biāo)題就右對齊了。第2章

HTML5語言基礎(chǔ)用bgcolor屬性設(shè)置背景顏色例如：<bodytext="blue"bgcolor="#CCCCFF">網(wǎng)頁背景色通過bgcolor屬性設(shè)置其中文字的顏色通過text屬性設(shè)置第2章

HTML5語言基礎(chǔ)用bgcolor屬性設(shè)置背景顏色例如：<bodytext="blue"bgcolor="#CCCCFF">網(wǎng)頁背景色通過bgcolor屬性設(shè)置，文字的顏色通過text屬性設(shè)置在頁面中，除了預(yù)先通過名稱定義的顏色之外，還可以使用顏色代碼的方式來指定顏色。例如bgcolor屬性設(shè)置為“#CCCCFF”，這是用了另一種顏色的表達(dá)方式，即顏色代碼的方式。第2章

HTML5語言基礎(chǔ)設(shè)置文字的特殊樣式

標(biāo)記顯示效果<b></b>文字以粗體方式顯示<i></i>文字以斜體方式顯示<u></u>文字以加下畫線方式顯示<s></s>文字以加下刪除線方式顯示<big></big>文字以放大方式顯示<small></small>文字以縮小方式顯示<strong></strong>文字以加強(qiáng)強(qiáng)調(diào)方式顯示<em></em>文字以強(qiáng)調(diào)方式顯示<address></address>用來顯示電子郵件地址或網(wǎng)址<code></code>用來說明代碼與指令第2章

HTML5語言基礎(chǔ)設(shè)置文字的大小和顏色（<font>）使用<font>標(biāo)記設(shè)置字體相關(guān)的屬性，<font>標(biāo)記有3個主要屬性，分別用于設(shè)置文字的字體、大小和顏色。例如：<fontcolor="green"face="宋體"size="7">互聯(lián)網(wǎng)發(fā)展的</font><i>起源</i>face屬性用于設(shè)置文字的字體，例如宋體、楷體等；size屬性控制文字的大小，可以取1到7之間的整數(shù)值，color屬性用來設(shè)置文字的顏色。第2章

HTML5語言基礎(chǔ)網(wǎng)頁中的特殊文字符號由于大于號和小于號被用于聲明標(biāo)記，因此如果在HTML代碼中出現(xiàn)“<”和“>”就不會再被認(rèn)為是普通的大于號或者小于號了。如果要顯示“x>y”這樣一個數(shù)學(xué)公式，該怎么辦呢？這時就需要用“<”代表符號“<”，特殊字符“>”代表符號“>”。前面談到過，文字與文字之間，如果超過一個空格，那么從第2個空格開始，都會被忽略掉。如果需要在某處使用空格，就需要使用特殊符號來代替，空格的符號是“ ”。一些符號是無法直接用鍵盤輸入的，也需要使用這種方式來顯示，例如版權(quán)符號的“?”需要使用“©”來輸入。<sup></sup>標(biāo)記，為上標(biāo)標(biāo)記，用于將數(shù)字縮小后顯示于上方；<sub></sub>標(biāo)記，為下標(biāo)標(biāo)記，用于將數(shù)字縮小后顯示于下方。此外，還有幾個特殊字符，字符“÷”代表符號“÷”，字符“±”代表“±”，字符“‰”代表“‰”，字符“↔”代表雙向的箭頭。第2章

HTML5語言基礎(chǔ)在網(wǎng)頁中使用圖像（<img>）目前在網(wǎng)頁上使用的圖片格式主要是PNG、JPG和GIF三種。JPG格式為靜態(tài)圖像壓縮標(biāo)準(zhǔn)格式，它為攝影圖片提供了一種標(biāo)準(zhǔn)的有損耗壓縮方案。它可以保留大約1670萬種顏色，對于照片類型的圖片，通常選擇JPG格式保存。而且在圖像處理軟件中可以選擇適當(dāng)壓縮率，達(dá)到清晰度和文件大小的平衡。GIF格式只支持256色以內(nèi)的圖像，因此如果用GIF格式保存顏色豐富的照片類型圖片，效果就會很差，因此它適合保存卡通類以線條為主的圖片。GIF格式另一個優(yōu)點(diǎn)是支持透明色，可以使圖像浮現(xiàn)在背景之上。PNG格式出現(xiàn)晚于JPG格式和GIF格式，它能夠兼具二者的優(yōu)點(diǎn)。當(dāng)設(shè)置為256色時，PNG格式可以達(dá)到和GIF格式相同的效果。也可以實現(xiàn)無損的高清晰度壓縮。而且PNG擁有alpha透明，即半透明的能力。但PNG格式不支持有損壓縮，它是用固定的LZ77壓縮算法，不能設(shè)定壓縮率。第2章

HTML5語言基礎(chǔ)在網(wǎng)頁中使用圖像（<img>）網(wǎng)頁中使用圖片：<imgsrc=”cup.png”>第2章

HTML5語言基礎(chǔ)在網(wǎng)頁中使用圖像（<img>）對于路徑信息的說明，通常分為以下兩種情況。（1）一種稱為相對路徑，也就是從自己的位置出發(fā)，依次說明到達(dá)目標(biāo)文件的路徑。這就好像如果班主任要找本班的一名學(xué)生，只需直接說名字即可，而校長要找到一名學(xué)生，就還要說明年級和班級。（2）另一種稱為絕對路徑，也就是先指明最高級的層次，然后依次向下說明。例如要找外校的一名學(xué)生，就無法從本校為起點(diǎn)找到他，因此就可以說“八一中學(xué)3年4班的張偉”，這就是絕對路徑的概念。第2章

HTML5語言基礎(chǔ)在網(wǎng)頁中使用圖像（<img>）網(wǎng)站中的路徑也是類似的，通?？梢苑譃閮煞N情況。（1）如果圖像文件就在本網(wǎng)站內(nèi)部，通常以要顯示該圖像的網(wǎng)頁文件為起點(diǎn)，通過層級關(guān)系描述圖像的位置。（2）如果圖像不在本網(wǎng)站內(nèi)部，那么通常以“http://”開頭的URL作為圖像文件的路徑，通常也被稱為“外部鏈接”。第2章

HTML5語言基礎(chǔ)用alt屬性為圖像設(shè)置替換文本有的時候由于某些原因，圖像可能無法正常顯示，比如網(wǎng)絡(luò)速度太慢、瀏覽器版本過低等，因此應(yīng)該為圖像設(shè)置一個替換文本，用于圖像無法顯示的時候告訴瀏覽者該圖片的內(nèi)容。第2章

HTML5語言基礎(chǔ)

再談HTML5追根溯源興起：早期HTML階段HTML2.0：于1995年11月發(fā)布HTML3.2：于1996年1月14日發(fā)布HTML4.0：于1997年12月18日發(fā)布HTML4.01（微小改進(jìn)）：于1999年12月24日發(fā)布彎路：XHTML階段XHTML1.0：于2000年1月發(fā)布，后又經(jīng)過修訂于2002年8月1日重新發(fā)布。XHTML1.1：于2001年5月31日發(fā)布。XHTML2.0：中途廢棄?；貧w：HTML5階段2007年又回到了原有的HTML的演進(jìn)路線上第2章HTML5語言基礎(chǔ)HTML5的優(yōu)勢與特點(diǎn)兼容HTML5并不是顛覆性的革新，它的一個核心理念就是保持一切新特性平滑過渡。一旦瀏覽器不支持HTML5的某項功能，就會使用針對這個功能的備選行為。因此，互聯(lián)網(wǎng)上很多文檔已經(jīng)存在二三十年，因此，HTML5采取的兼容理念就顯得尤為重要。實用HTML5規(guī)范是基于用戶優(yōu)先準(zhǔn)則編寫的，其宗旨是“用戶至上”，這意味著在遇到無法解決的沖突時，規(guī)范會把用戶放到第一位，其次是頁面作者，再次是實現(xiàn)者（或瀏覽器），接著是規(guī)范

溫馨提示

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

最新文檔

評論

0/150

提交評論