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

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