HTML和CSS語言入門介紹(白舸)ppt課件

HTML和CSS語言入門介紹,信息技術(shù)部白舸,HTML是瀏覽器的“母語”,1989年3月，TimBerners-Lee提出一項(xiàng)計(jì)劃，目的是使科學(xué)家們能很容易地翻閱同行們的文章。這項(xiàng)計(jì)劃的后期目標(biāo)是使科學(xué)家們能在服務(wù)器上創(chuàng)建新的文檔。為了支持此計(jì)劃，Tim創(chuàng)建了一種新的語言來傳輸和呈現(xiàn)超文本文檔。這種語言就是超文本標(biāo)注語言HTML(HypertextMarkupLanguage)。,從HTML到XHTML,事實(shí)上，XHTML就是HTML的下一版本，用于替代HTML并幫助轉(zhuǎn)向XML語言的一套過渡性標(biāo)記語言。無論是HTML還是XHTML，說到底都是一門讓機(jī)器識(shí)別的語言。但在強(qiáng)調(diào)表現(xiàn)與內(nèi)容想分離的WEB標(biāo)準(zhǔn)時(shí)代，HTML的語法模式已經(jīng)力不從心，而XHTML的結(jié)構(gòu)與標(biāo)記更加嚴(yán)謹(jǐn)。XHTML是一門面向結(jié)構(gòu)的語言，起設(shè)計(jì)的目的并不是為了最終表現(xiàn)，而是用于對(duì)網(wǎng)頁內(nèi)容進(jìn)行結(jié)構(gòu)設(shè)計(jì)，其嚴(yán)謹(jǐn)?shù)恼Z法結(jié)構(gòu)有利于瀏覽器進(jìn)行解析處理。是一門面向文檔結(jié)構(gòu)的設(shè)計(jì)語言。,例子是示例哦！,Webserver,Theinternet,互聯(lián)網(wǎng)工作原理,元素和標(biāo)簽,元素（element）：用于結(jié)構(gòu)化HTML文檔，并告知瀏覽器如何呈現(xiàn)網(wǎng)頁。標(biāo)簽（tag）：指示元素的起始與結(jié)束。例：b元素的作用，告訴瀏覽器介于標(biāo)簽和之間的文本應(yīng)以粗體顯示。這里，是首標(biāo)簽，是尾標(biāo)簽,這句話應(yīng)顯示為粗體,首標(biāo)簽和尾標(biāo)簽總是必須的嗎？在HTML中，也有例外的情況，即有些元素沒有尾標(biāo)簽。這些沒有尾標(biāo)簽的元素被稱作空元素（emptyelement）。它們與具體文本內(nèi)容無關(guān)，比如像下面這個(gè)換行標(biāo)簽：。,元素和標(biāo)簽,HTML空元素,常用的空元素有：插入一個(gè)換行符畫一條水平線（horizontalrule）無序列表（unorderedlist），為每個(gè)列表項(xiàng)顯示一個(gè)粗點(diǎn)有序列表（orderedlist），顯示每個(gè)列表項(xiàng)的序號(hào)把多個(gè)列表項(xiàng)組織為一個(gè)列表，其中的li代表“列表項(xiàng)（listitem）”,使用多個(gè)標(biāo)簽,可以同時(shí)應(yīng)用多個(gè)標(biāo)簽，只要能避免標(biāo)簽交錯(cuò)。希望一段文本即是粗體又是斜體注意，不是這樣：,既是粗體又是斜體,既是粗體又是斜體,一個(gè)完整的結(jié)構(gòu),完整結(jié)構(gòu)示例是示例哦！,頭部（head）:提供關(guān)于當(dāng)前網(wǎng)頁的信息主體（body）:提供文檔的內(nèi)容這里，title指定網(wǎng)頁標(biāo)題，p（paragraph）是一個(gè)文本段落。,屬性,HTML通過標(biāo)簽告訴瀏覽器如何展示網(wǎng)頁。同時(shí)，我們可以為某些元素附加一些信息，這些附加信息被稱為屬性（attribute）。屬性應(yīng)寫在元素的首標(biāo)簽上。,這是HTML的屬性,元素小結(jié),綜上所述，一個(gè)元素包括：1個(gè)首標(biāo)簽（starttag）、0或多個(gè)屬性（attribute）、1些內(nèi)容和1個(gè)尾標(biāo)簽（endtag）。,鏈接,鏈接也是通過元素和屬性實(shí)現(xiàn)的。在上例中，屬性href的值為，也被稱作URL（統(tǒng)一資源定位符）。注意，在URL里必須包含“http:/”。,這是一個(gè)指向百度的鏈接,更多的鏈接,還可以為e-mail地址做鏈接：還可以在鏈接上使用title屬性，title屬性用于為該鏈接輸入一個(gè)簡短描述。當(dāng)你把鼠標(biāo)光標(biāo)停留在該鏈接上時(shí)，提示文字便會(huì)出現(xiàn)。,給nobody發(fā)電子郵件,圖像,注意：img元素沒有尾標(biāo)簽，它與一樣，不與特定的文本相關(guān)。alt屬性用于給出圖像的替用描述，假如由于某些原因該圖像未能顯示出來，瀏覽器就通過顯示這個(gè)描述來替代圖像。,表格,在傳統(tǒng)的表格中，往往只使用3個(gè)標(biāo)簽：table,tr和td。但XHTML標(biāo)準(zhǔn)的設(shè)計(jì)者還提供了許多表格專用標(biāo)簽：,單元格A單元格b,表格相關(guān)屬性,colspan：用在標(biāo)簽中，用來指定單元格橫向跨越的列數(shù)rowspan：作用是指定單元格縱向跨越的行數(shù)。,單元格1單元格2單元格3單元格4,CSS,CSS與HTML的區(qū)別：HTML用于結(jié)構(gòu)化內(nèi)容；CSS用于格式化結(jié)構(gòu)化的內(nèi)容。CSS的優(yōu)點(diǎn)：通過單個(gè)樣式表控制多個(gè)文檔的布局；更精確的布局控制；為不同的媒體類型（屏幕、打印等）采取不同的布局；無數(shù)高級(jí)、先進(jìn)的技巧。,基本的CSS語法,比如，要將網(wǎng)頁的顏色設(shè)置為紅色用HTML的話，我們可以這樣：用CSS的話，我們可以這樣：基本的CSS模型：,bodybackground-color:#FF0000;,行內(nèi)樣式表,方法一：行內(nèi)樣式表（使用HTML的style屬性）,例子這個(gè)頁面是紅色的,內(nèi)部樣式表,方法二：內(nèi)部樣式表（使用style元素）,例子bodybackground-color:#FF0000;這個(gè)頁面是紅色的,外部樣式表,方法三：外部樣式表（引用一個(gè)樣式表文件）外部樣式表就是一個(gè)擴(kuò)展名為css的文本文件。例如，比方說你的樣式表文件名為style.css，它通常被存放于名為style的目錄中。就像下面這樣：,例子,在HTML文檔里創(chuàng)建一個(gè)指向外部樣式表文件的鏈接（link），這行代碼必須被插入HTML代碼的頭部（header），即放在標(biāo)簽和標(biāo)簽之間。這個(gè)鏈接告訴瀏覽器：在顯示該HTML文件時(shí)，應(yīng)使用給出的CSS文件進(jìn)行布局。,外部樣式表,這種方法的優(yōu)越之處在于：多個(gè)HTML文檔可以同時(shí)引用一個(gè)樣式表。換句話說，可以用一個(gè)CSS文件來控制多個(gè)HTML文檔的布局。,外部樣式表,選擇符,類型選擇符：是網(wǎng)頁中已有的標(biāo)簽名作為名稱的選擇符。群組選擇符：除了可以對(duì)單個(gè)XHTML對(duì)象進(jìn)行樣式指定外，還可以對(duì)一組對(duì)象進(jìn)行相同的樣式指派。,BodyDivSpan,H1,h2,h3,p,spanfont-size:12px;font-family:arial,包含選擇符：當(dāng)我們只打算對(duì)某個(gè)對(duì)象的子對(duì)象進(jìn)行樣式指定時(shí)使用。包含選擇符指選擇符中前一個(gè)對(duì)象包含了后一個(gè)對(duì)象，對(duì)象之間用空格作為分隔。在XHTML中是如下格式：,H1spanfont-weight:bold;,這是我們的一段文本這是span內(nèi)的文本被h2套用的文本這是h2下的span,選擇符,選擇符,id選擇符id選擇符是根據(jù)DOM文檔對(duì)象模型原理鎖出現(xiàn)的選擇符類型。對(duì)于一個(gè)網(wǎng)頁而言，其中的每個(gè)標(biāo)簽均可以使用類似于id=“”的形式來對(duì)id屬性進(jìn)行名稱指派。在網(wǎng)頁中，每個(gè)id名稱只能使用一次。在CSS樣式中，id選擇符使用#符號(hào)進(jìn)行標(biāo)識(shí)。,#contentfont-size:14px;line-height:130%;,選擇符,class選擇符class是XHTML多個(gè)標(biāo)簽的組合。對(duì)于網(wǎng)頁設(shè)計(jì)而言，可以使用類似于class=“”的形式來對(duì)class屬性進(jìn)行名稱指派。與id不同，class允許重復(fù)使用。在CSS樣式中，id選擇符使用.點(diǎn)符號(hào)進(jìn)行標(biāo)識(shí)。,.p1Margin:10px;background-color:bule;,組織元素span,用div組織元素span的使用局限在一個(gè)塊元素內(nèi)，而div可以被用來組織一個(gè)或多個(gè)塊元素。HTML代碼相應(yīng)css代碼,國民黨親民黨民進(jìn)黨臺(tái)灣團(tuán)結(jié)聯(lián)盟,#bluebackground:blue;#greenbackground:green;,組織元素span,偽類：link偽類:link用于瀏覽者從未訪問過的鏈接。偽類：visited偽類:visited用于瀏覽者已訪問過的鏈接。,a:linkcolor:#6699CC;將未訪問過的鏈接設(shè)為淺藍(lán)色。,a:visitedcolor:#660099;將已訪問過的鏈接設(shè)為深紫色,偽類：active偽類:active用于活動(dòng)的鏈接（即獲得當(dāng)前焦點(diǎn)的鏈接）。,a:activebackground-color:#FFFF00;將活動(dòng)的鏈接設(shè)為具有黃色背景,偽類：hover偽類:hover用于有鼠標(biāo)懸停的鏈接。,a:hovercolor:orange;font-style:italic;,鏈接,CSS中的盒狀模型（boxmodel）用于描述一個(gè)為HTML元素形成的矩形盒子。盒狀模型還涉及為各個(gè)元素調(diào)整外邊距（margin）、邊框（border）、內(nèi)邊距（padding）和內(nèi)容的具體操作。下圖顯示了盒狀模型的結(jié)構(gòu)：,盒模型,盒模型,Article1:我失戀，郁悶消瘦無法排解。老爸看在眼里急在心中，但幾十年沒做親子教育一時(shí)半會(huì)兒也不知如何開導(dǎo)。一天又是吃不下飯，問也不答，老爸又急又疼，一拍桌子：“你也是黨員，我也是黨員，我們黨員和黨員之間有什么不可以談的!”失戀中的我硬是被這句話笑噴了飯。,我失戀，郁悶消瘦無法排解。老爸看在眼里急在心中，但幾十年沒做親子教育一時(shí)半會(huì)兒也不知如何開導(dǎo)。一天又是吃不下飯，問也不答，老爸又急又疼，一拍桌子：“你也是黨員，我也是黨員，我們黨員和黨員之間有什么不可以談的!”失戀中的我硬是被這句話笑噴了飯。,外邊距和內(nèi)邊距,為元素設(shè)置外邊距一個(gè)元素有上（top）、下（bottom）、左（left）、右（right）四個(gè)邊。外邊距（margin）表示從一個(gè)元素的邊到相鄰元素(或者文檔邊界)之間的距離。,bodymargin-top:100px;margin-right:40px;margin-bottom:10px;margin-left:70px;,Bodymargin:100px40px10px70px;,為元素設(shè)置內(nèi)邊距內(nèi)邊距（padding）也可以被理解成“填充物”。因?yàn)閮?nèi)邊距并不影響元素間的距離，它只定義元素的內(nèi)容與元素邊框之間的距離。通過為標(biāo)題設(shè)置內(nèi)邊距，可以控制在標(biāo)題文本周圍填充多少空白：,h1background:yellow;padding:20px20px20px80px;h2background:orange;padding-left:120px;,外邊距和內(nèi)邊距,邊框,邊框?qū)挾萣order-width邊框?qū)挾扔蒀SS屬性border-width定義，其值可以是“thin”（?。?、“medium”（普通）或“thick”（厚）等，也可以是像素值。如下圖所示：,邊框顏色border-colorCSS屬性border-color用于定義邊框的顏色。其值就是正常的顏色值，例如：“#123456”、“rgb(123,123,123)”、“yellow”等。,邊框,邊框樣式border-style邊框樣式有多種可供選擇。右圖顯示了8種不同樣式的邊框在InternetExplorer里的實(shí)際顯示效果。如果不想有任何邊框，可以為它取值為“none”或者“hidden”。,浮動(dòng)元素（float）,我們可以通過CSS屬性float令元素向左或向右浮動(dòng)。也就是說，令盒子及其中的內(nèi)容浮動(dòng)到文檔（或者是上層盒子）的右邊或者左邊,浮動(dòng)在很多情況下都很有用，它經(jīng)常與定位聯(lián)合使用。在網(wǎng)頁布局中使用廣泛。,元素的定位,CSS定位的原理把瀏覽器窗口想象成一個(gè)坐標(biāo)系統(tǒng)：,CSS定位的原理是：你可以將任何盒子（box）放置在坐標(biāo)系統(tǒng)的任何位置上。,h1position:absolute;top:100px;left:200px;,元素的定位,元素的定位,絕對(duì)定位采用絕對(duì)定位的元素不獲得任何空間。這意味著：該元素在被定位后不會(huì)留下空位。要對(duì)元素進(jìn)行絕對(duì)定位，應(yīng)將position屬性的值設(shè)為absolute。接著，你可以通過屬性left、right、top和bottom來設(shè)定將盒子放置在哪里。例如，我們要在文檔的四個(gè)角落各放置一個(gè)盒子：,#box1position:absolute;top:50px;left:50px;#box2position:absolute;top:50px;right:50px;#box3position:absolute;bottom:50px;right:50px;#box4position:absolute;bottom:50px;left:50px;,元素的定位,相對(duì)定位要對(duì)元素進(jìn)行相對(duì)定位，應(yīng)將position屬性的值設(shè)為relative。絕對(duì)定位與相對(duì)定位的區(qū)別在于計(jì)算位置的方式。采用相對(duì)定位的元素，其位置是相對(duì)于它在文檔中的原始位置計(jì)算而來的。這意味著，相對(duì)定位是通過將元素從原來的位置向右、向左、向上或向下移動(dòng)來定位的。采用相對(duì)定位的元素會(huì)獲得相應(yīng)的空間。例如，我們可以相對(duì)于三張圖片在頁面上的原始位置來對(duì)它們進(jìn)行相對(duì)定位。注意這些圖片將在文檔中各自的原始位置處留下空位。,#dog1position:relative;left:350px;bottom:150px;#dog2position:relative;left:150px;bottom:500px;#dog3position:relative;left:50px;bottom:700px;,用z-index進(jìn)行層次堆疊,CSS可以處理高度、寬度、深度三個(gè)維度。之前，我們已經(jīng)了解了前兩個(gè)維度。關(guān)于深度的問題，簡言之，就是關(guān)于元素堆疊的次序問題。為此，你可以為每個(gè)元素指定一個(gè)數(shù)字（z-index）。其原理是：數(shù)字較大的元素將疊加在數(shù)字較小的元素之上。比如，我們正在打撲克，并且拿了一手同花大順。我們可以通過為各張牌設(shè)定一個(gè)z-index的方式來表示這手牌：,層次可以應(yīng)用于許多情況之下。例如，可以用z-index實(shí)現(xiàn)為標(biāo)題（headline）增添效果（避免了采用圖片的方式）。這樣，一方面，裝載文本的速度比圖片要快；另一方面，采用文本可能更有利于提高網(wǎng)站的搜索引擎排名。,Web標(biāo)準(zhǔn)與驗(yàn)證,W3C即萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium），是一個(gè)制訂相關(guān)Web標(biāo)準(zhǔn)（如HTML、CSS和XML等）的非盈利組織。微軟、Mozilla基金會(huì)以及許多其他的公司與組織都是W3C的成員，它