《HTML5+CSS3》課件-第二章 初識HTML5_第1頁
《HTML5+CSS3》課件-第二章 初識HTML5_第2頁
《HTML5+CSS3》課件-第二章 初識HTML5_第3頁
《HTML5+CSS3》課件-第二章 初識HTML5_第4頁
《HTML5+CSS3》課件-第二章 初識HTML5_第5頁
已閱讀5頁，還剩45頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第二章初識HTML5CSS基礎(chǔ)選擇器引入CSS樣式表CSS復(fù)合選擇器HTML?學(xué)習(xí)目標(biāo)了解掌握掌握熟悉了解HTML和HTML5的基本結(jié)構(gòu)，能夠區(qū)分兩者的結(jié)構(gòu)差異。12熟悉HTML頭部相關(guān)標(biāo)簽。掌握HTML文本控制標(biāo)簽的用法，能夠使用該標(biāo)簽定義文本。3掌握HTML圖像標(biāo)簽的用法，能夠自定義圖像。4

目錄2.1HTML5的優(yōu)勢2.2HTML5全新的結(jié)構(gòu)2.3標(biāo)簽概述2.4文本控制標(biāo)簽?點(diǎn)擊查看本小節(jié)知識架構(gòu)2.5圖像標(biāo)簽2.6階段案例——制作圖文混排新聞?點(diǎn)擊查看本小節(jié)知識架構(gòu)?點(diǎn)擊查看本小節(jié)知識架構(gòu)

知識架構(gòu)2.3標(biāo)簽概述2.3.12.3.22.3.3標(biāo)簽的分類標(biāo)簽的關(guān)系標(biāo)簽屬性2.3.4HTML5文檔頭部相關(guān)標(biāo)簽2.4文本控制標(biāo)簽2.4.12.4.22.4.3頁面格式化標(biāo)簽文本樣式標(biāo)簽文本格式化標(biāo)簽

知識架構(gòu)2.4.4文本語義標(biāo)簽2.4.5特殊字符標(biāo)簽2.5圖像標(biāo)簽2.5.12.5.22.5.3常見圖像格式圖像標(biāo)簽<img/>相對路徑和絕對路徑

知識架構(gòu)本章將對HTML5的結(jié)構(gòu)和語法、文本控制標(biāo)簽、圖像標(biāo)簽等知識進(jìn)行詳細(xì)講解。近年來HTML5成為互聯(lián)網(wǎng)行業(yè)最熱門的話題。HTML5包含了許多的功能，從桌面瀏覽器到移動(dòng)應(yīng)用，它從根本上改變了開發(fā)web應(yīng)用的方式。作為網(wǎng)頁的設(shè)計(jì)人員，也應(yīng)該順應(yīng)時(shí)代潮流，掌握HTML5的相關(guān)技術(shù)。章節(jié)概要2.1HTML5的優(yōu)勢什么是HTML5？HTML5作為HTML的最新版本，是HTML的傳遞和延續(xù)。經(jīng)歷HTML4.0、XHTML再到HTML5從某種意義上講，這是HTML超文本標(biāo)簽語言的更新與規(guī)范過程。因此，HTML5并沒有給用戶帶來多大的沖擊，大部分標(biāo)簽在HTML5版本中依然適用。HTML5的優(yōu)勢主要體現(xiàn)在兼容、合理、易用三個(gè)方面，本節(jié)將做具體介紹。2.1HTML5的優(yōu)勢2.1HTML5的優(yōu)勢HTML5并不是對之前HTML語言顛覆性的革新，它的核心理念就是要保持與過去技術(shù)的完美銜接，因此HTML5有很好的兼容性。1、兼容HTML5定義了一些可以省略結(jié)束標(biāo)簽的元素。HTML5中又恢復(fù)了對大寫標(biāo)簽的支持。HTML5制定了一個(gè)通用的標(biāo)準(zhǔn)。2.1HTML5的優(yōu)勢HTML5中增加和刪除的標(biāo)簽都是對現(xiàn)有的網(wǎng)頁和用戶習(xí)慣進(jìn)行分析、概括而推出的。2、合理例如谷歌分析了上百萬的頁面，發(fā)現(xiàn)很多網(wǎng)頁制作人員使用<divid=”header”>來定義網(wǎng)頁的頭部區(qū)域，就在HTML5中就直接添加一個(gè)<header>標(biāo)簽。2.1HTML5的優(yōu)勢作為當(dāng)下流行的標(biāo)簽語言，HTML5嚴(yán)格遵循“簡單至上”的原則。3、易用簡化的字符集聲明。簡化的DOCTYPE。以瀏覽器原生能力（瀏覽器自身特性功能）替代復(fù)雜的JavaScript代碼。2.2HTML5全新的結(jié)構(gòu)XHTML文檔基本格式HTML5文檔基本格式2.2HTML5全新的結(jié)構(gòu)<!DOCTYPE>標(biāo)簽位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范。<html>標(biāo)簽位于<!DOCTYPE>標(biāo)簽之后，也稱為根標(biāo)簽，用于告知瀏覽器其自身是一個(gè)HTML文檔。<head>標(biāo)簽用于定定義HTML文檔的頭部信息，也稱為頭部標(biāo)簽，緊跟在<html>標(biāo)簽之后，主要用來封裝其他位于文檔頭部的標(biāo)簽。<body>標(biāo)簽用于定定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)簽。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)簽內(nèi)。<!DOCTYPE>標(biāo)簽<html>標(biāo)簽<head>標(biāo)簽<body>標(biāo)簽2.3標(biāo)簽概述在HTML頁面中，帶有“<>”符號的元素被稱為HTML標(biāo)簽，如上面提到的<html>、<head>、<body>都是HTML標(biāo)簽。所謂標(biāo)簽就是放在“<>”符號中表示某個(gè)功能的編碼命令，也稱為HTML標(biāo)簽或HTML元素，本書統(tǒng)一稱作HTML標(biāo)簽。本節(jié)將詳細(xì)講解標(biāo)簽的分類、標(biāo)簽的關(guān)系、標(biāo)簽屬性和HTML5文檔頭部相關(guān)標(biāo)簽。2.3標(biāo)簽概述2.3.1標(biāo)簽的分類雙標(biāo)簽也稱體標(biāo)簽，是指由開始和結(jié)束兩個(gè)標(biāo)簽符組成的標(biāo)簽。單標(biāo)簽也稱空標(biāo)簽，是指用一個(gè)標(biāo)簽符號即可完整地描述某個(gè)功能的標(biāo)簽。<標(biāo)簽名>內(nèi)容</標(biāo)簽名><標(biāo)簽名/>表示該標(biāo)簽的作用開始，一般稱為“開始標(biāo)簽表示該標(biāo)簽的作用結(jié)束，一般稱為“結(jié)束標(biāo)簽”2.3標(biāo)簽概述多學(xué)一招：為什么要有單標(biāo)簽？HTML標(biāo)簽的作用原理就是選擇網(wǎng)頁內(nèi)容，從而進(jìn)行描述，也就是說需要描述哪個(gè)元素，就選擇哪個(gè)元素，所以才會(huì)有雙標(biāo)簽的出現(xiàn)，用于定義標(biāo)簽作用的開始與結(jié)束。而單標(biāo)簽本身就可以描述一個(gè)功能，不需要選擇。例如，水平線標(biāo)簽<hr/>,按照雙標(biāo)簽的語法，它應(yīng)該寫成“<hr></hr>”，但是水平線標(biāo)簽不需要選擇，本身就代表一條水平線，此時(shí)寫成雙標(biāo)簽就顯得有點(diǎn)多余，但是又不能沒有結(jié)束符號，所以在標(biāo)簽名稱后面加一個(gè)關(guān)閉符，即<標(biāo)簽名/>?！究偨Y(jié)】2.3.1標(biāo)簽的分類2.3標(biāo)簽概述Dreamweaver菜單欄由各種菜單命令構(gòu)成，包括文件、編輯、查看、插入、修改、格式、命令、站點(diǎn)、窗口、幫助10個(gè)菜單項(xiàng)1、嵌套關(guān)系2.3.2標(biāo)簽的關(guān)系<palign="center"><fontcolor="#979797"size="2">

更行時(shí)間：2013年09月28日14時(shí)08分來源：

<fontcolor="blue">傳智播客</font></font></p><p>標(biāo)記中包含<font>標(biāo)記<font>標(biāo)記中又包含了一個(gè)內(nèi)層的<font>標(biāo)記并列關(guān)系也稱為兄弟關(guān)系，就是兩個(gè)標(biāo)簽處于同一級別，并且沒有包含關(guān)系。例如在HTML5的結(jié)構(gòu)代碼中，<head>標(biāo)簽和<body>標(biāo)簽就是并列關(guān)系。在HTML標(biāo)簽中，無論是單標(biāo)簽還是雙標(biāo)簽，都可以擁有并列關(guān)系。2、并列關(guān)系2.3標(biāo)簽概述2.3.2標(biāo)簽的關(guān)系<palign=“l(fā)eft">

更行時(shí)間：2013年09月28日14時(shí)08分來源：</p><palign="center">

更行時(shí)間：2013年09月28日14時(shí)08分來源：</p>2.3標(biāo)簽概述2.3.3標(biāo)簽的屬性標(biāo)記的屬性字體位置字號顏色語法格式<標(biāo)記名屬性1="屬性值1"屬性2="屬性值2"…>內(nèi)容</標(biāo)記名>2.3標(biāo)簽概述2.3.3標(biāo)簽的屬性以一段代碼為例，分析標(biāo)記的屬性<h1align="center">標(biāo)題文本<h1>align為屬性名center為屬性值，表示標(biāo)題文本居中對齊2.3標(biāo)簽概述2.3.3標(biāo)簽的屬性多學(xué)一招：認(rèn)識鍵值對“鍵值對”可以理解為對“屬性”設(shè)置“屬性值”。鍵值對有多種表現(xiàn)形式，例如color="red"、width:200px;等，其中color和width即為“鍵值對”中的“鍵”（英文key），red和200px為“鍵值對”中的“值”（英文value）。“鍵值對”廣泛地應(yīng)用于編程中，HTML屬性的定義形式“屬性="屬性值"”只是“鍵值對”中的一種。【總結(jié)】2.3標(biāo)簽概述2.3.4HTML5文檔頭部相關(guān)標(biāo)簽<title><meta/><title>標(biāo)簽用于定義HTML頁面的標(biāo)題，即給網(wǎng)頁取一個(gè)名字，必須位于<head>標(biāo)簽之內(nèi)。<meta/>標(biāo)簽用于定義頁面的元信息，可重復(fù)出現(xiàn)在<head>頭部標(biāo)簽中。2.3標(biāo)簽概述2.3.4HTML5文檔頭部相關(guān)標(biāo)簽<title>一個(gè)HTML文檔只能含有一對<title></title>標(biāo)簽，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。<title>網(wǎng)頁標(biāo)題名稱</title>基本語法格式：2.3標(biāo)簽概述2.3.4HTML5文檔頭部相關(guān)標(biāo)簽<meta/>設(shè)置網(wǎng)頁關(guān)鍵字設(shè)置網(wǎng)頁描述設(shè)置網(wǎng)頁作者設(shè)置字符集設(shè)置頁面自動(dòng)刷新與跳轉(zhuǎn)<metaname=“keywords”content=“JAVA、php"/><metaname=“description“content=“IT培訓(xùn)教育”/><metaname=“author”content=“傳智播客"/><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="refresh"content="10;url="/>2.4文本控制標(biāo)簽無論網(wǎng)頁內(nèi)容如何豐富，文字自始至終都是網(wǎng)頁中最基本的元素。為了使文字排版整齊、結(jié)構(gòu)清晰，HTML中提供了一系列文本控制標(biāo)簽，如標(biāo)題標(biāo)簽<h1>~<h6>、段落標(biāo)簽<P>等本節(jié)將對文本控制標(biāo)簽進(jìn)行詳細(xì)講解。2.4文本控制標(biāo)簽2.4.1頁面格式化標(biāo)簽HTML提供了6個(gè)等級的標(biāo)題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>標(biāo)題的重要性依次遞減。1、標(biāo)題標(biāo)記h1h2h3h4h5h6標(biāo)題標(biāo)記2.4文本控制標(biāo)簽2.4.1頁面格式化標(biāo)簽在網(wǎng)頁中使用<p>標(biāo)簽來定義段落。<p>標(biāo)簽是HTML文檔中最常見的標(biāo)簽，默認(rèn)情況下，文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。2、段落標(biāo)簽<palign="對齊方式">段落文本</p>2.4文本控制標(biāo)簽2.4.1頁面格式化標(biāo)簽在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。水平線可以通過<hr/>標(biāo)簽來定義。3、水平線標(biāo)簽<hr屬性="屬性值"/>2.4文本控制標(biāo)簽2.4.1頁面格式化標(biāo)簽在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。水平線可以通過<hr/>標(biāo)簽來定義。3、水平線標(biāo)簽屬性名含義屬性值align設(shè)置水平線的對齊方式可選擇left、right、center三種值，默認(rèn)為center，居中對齊顯示。size設(shè)置水平線的粗細(xì)以像素為單位，默認(rèn)為2像素。color設(shè)置水平線的顏色可用顏色名稱、十六進(jìn)制#RGB、rgb(r,g,b)。width設(shè)置水平線的寬度可以是確定的像素值，也可以是瀏覽器窗口的百分比，默認(rèn)為100%。2.4文本控制標(biāo)簽2.4.1頁面格式化標(biāo)簽在word中，按【Enter】鍵可以將一段文字換行顯示，但在網(wǎng)頁中，如果想要將某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽<br/>。4、換行標(biāo)簽2.4文本控制標(biāo)簽2.4.2文本樣式標(biāo)簽文本樣式標(biāo)記用來控制網(wǎng)頁中文本的字體、字號和顏色?；菊Z法格式<font屬性="屬性值">文本內(nèi)容</font>2.4文本控制標(biāo)簽2.4.2文本樣式標(biāo)簽屬性名含義face設(shè)置文字的字體，例如微軟雅黑、黑體、宋體等size設(shè)置文字的大小，可以取1到7之間的整數(shù)值color設(shè)置文字的顏色文本樣式標(biāo)記常用屬性2.4文本控制標(biāo)簽2.4.3文本格式化標(biāo)簽標(biāo)記顯示效果<b></b>和<strong></strong>文字以粗體方式顯示（XHTML推薦使用strong）<i></i>和<em></em>文字以斜體方式顯示（XHTML推薦使用em）<s></s>和<del></del>文字以加刪除線方式顯示（XHTML推薦使用del）<u></u>和<ins></ins>文字以加下劃線方式顯示（XHTML不贊成使用u）2.4文本控制標(biāo)簽2.4.4文本語義標(biāo)簽time標(biāo)簽用于定義時(shí)間或日期，可以代表24小時(shí)中的某一時(shí)間。time標(biāo)簽不會(huì)在瀏覽器中呈現(xiàn)任何特殊效果，但是該元素能夠以機(jī)器可讀的方式對日期和時(shí)間進(jìn)行編碼，用戶能夠?qū)⑸仗嵝鸦蚱渌录砑拥饺粘瘫碇?，搜索引擎也能夠生成更智能的搜索結(jié)果。1、time標(biāo)簽datetime：用于定義相應(yīng)的時(shí)間或日期。取值為具體時(shí)間（例如：14:00）或具體日期（例如：2015-09-01），不定義該屬性時(shí)，由文本的內(nèi)容給定日期或時(shí)間。pubdate：用于定義time標(biāo)簽中的文檔（或article元素）發(fā)布日期。取值一般為“pubdate”。2.4文本控制標(biāo)簽mark標(biāo)簽的主要功能是在文本中高亮顯示某些字符，該元素的用法與em標(biāo)簽和strong標(biāo)簽有相似之處，但是使用mark標(biāo)簽在突出顯示樣式時(shí)更隨意靈活。2、mark標(biāo)簽2.4.4文本語義標(biāo)簽2.4文本控制標(biāo)簽cite標(biāo)簽可以創(chuàng)建一個(gè)引用，用于對文檔引用參考文獻(xiàn)的說明，一旦在文檔中使用了該標(biāo)簽，被標(biāo)注的文檔內(nèi)容將以斜體的樣式展示在頁面中，以區(qū)別于段落中的其他字符。3、cite標(biāo)簽2.4.4文本語義標(biāo)簽2.4文本控制標(biāo)簽2.4.5特殊字符標(biāo)簽特殊字符描述字符的代碼

空格符

<

小于號<>

大于號>&和號&￥人民幣¥?版權(quán)©?注冊商標(biāo)®°攝氏度°±正負(fù)號±×乘號×÷除號÷2平方2（上標(biāo)2）²3立方3（上標(biāo)3）³2.5圖像標(biāo)簽瀏覽網(wǎng)頁時(shí)我們常常會(huì)被網(wǎng)頁中的圖像所吸引，巧妙的在網(wǎng)頁中穿插圖像可以讓網(wǎng)頁內(nèi)容變得更加豐富多彩。本節(jié)將為大家介紹幾種常用的圖像格式以及在網(wǎng)頁中插入圖像的技巧。2.5圖像標(biāo)簽2.5.1常見圖像格式GIFPNGJPGPNGJPGGIF最突出的地方就是它支持動(dòng)畫，同時(shí)GIF也是一種無損的圖像格式，也就是說修改圖片之后，圖片質(zhì)量幾乎沒有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對單一的圖像。2.5圖像標(biāo)簽2.5.1常見圖像格式GIFPNGJPGJPGGIFPNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相對于GIF，PNG最大的優(yōu)勢是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過渡更平滑，但PNG不支持動(dòng)畫。IE6是可以支持PNG-8，但在處理PNG-24的透明時(shí)會(huì)顯示灰色。2.5圖像標(biāo)簽2.5.1常見圖像格式GIFPNGJPGGIFPNGJPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。小圖片考慮GIF或PNG-8，半透明圖像考慮PNG-24，類似照片的圖像則考慮JPG。2.5圖像標(biāo)簽2.5.2圖像標(biāo)簽<img/>瀏覽網(wǎng)頁時(shí)經(jīng)常會(huì)看到精美的圖片在網(wǎng)頁中如何才能顯示圖像呢？2.5圖像標(biāo)簽基本語法格式<imgsrc="圖像URL"/>src屬性用于指定圖像文件的路徑和文件名2.5.2圖像標(biāo)簽<img/>2.5圖像標(biāo)簽2.5.2圖像標(biāo)簽<img/>widthheight用來定義圖片的寬度和高度，通常我們只設(shè)置其中的一個(gè)，另一個(gè)會(huì)按原圖等比例顯示。border為圖像添加邊框、設(shè)置邊框的寬度。但邊框顏色的調(diào)整僅僅通過HTML屬性是不能夠?qū)崿F(xiàn)的。alt圖像的替換文本屬性，在圖像無法顯示時(shí)告訴用戶該圖片的內(nèi)容。2.5圖像標(biāo)簽2.5.2圖像標(biāo)簽<img/>vspacehspaceHTML中通過vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。align圖像的對齊屬性align。用于調(diào)整圖像的位置2.5圖像標(biāo)簽2.5.2圖像標(biāo)簽<img/>屬性屬性值描述srcURL圖像的路徑alt文本圖像不能顯示時(shí)的替換文本title文本鼠標(biāo)懸停時(shí)顯示的內(nèi)容width像素（XHTML不支持%頁面百分比）設(shè)置圖像的寬度height像素（XHTML不支持%頁面百分比）設(shè)置圖像的高度border數(shù)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論