【文章內(nèi)容簡(jiǎn)介】 嵌套其他塊元素 ? 內(nèi)聯(lián)元素 ? 文本 ? 結(jié)束標(biāo)記： /div 必需 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang等 Span內(nèi)聯(lián)元素分組 ? |Span元素的作用 ? Span提供了一種對(duì)內(nèi)聯(lián)元素分組的方法 ? Span 常用來和樣式表配合 ? span往往被用來設(shè)置同一行文字內(nèi)的不同格式 Span內(nèi)聯(lián)元素語法 ? 開始標(biāo)記 ： span 必需 ? 內(nèi)容 ： ? 嵌套其他塊元素 ? 內(nèi)聯(lián)元素 ? 文本 ? 結(jié)束標(biāo)記： /span 必需 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang等 Div、 span應(yīng)用舉例 p span style=color:red 好雨 /span 知時(shí)節(jié) div style=color:green。fontsize:19pt 當(dāng)春乃發(fā)生 隨風(fēng)潛入夜 潤(rùn)物細(xì)無聲 /div /p hr水平線元素 ? hr的作用 ? 該元素可以在文檔中劃一條水平線，當(dāng)文檔比較大時(shí)常用來分割文檔 ? 主要屬性 ? Width 寬度 ? Size 高度 ? Noshade 該行不帶陰影 ? Color 線條顏色 ?語法 ?開始標(biāo)記 ： hr 必需 ?內(nèi)容 ： ?無 ?結(jié)束標(biāo)記： 禁用 hr水平線元素應(yīng)用舉例 ? hr ? hr color=FF0066 size=20pt noshade ? hr width=50% 加強(qiáng)元素和強(qiáng)調(diào)元素 ? strong、 em ? 默認(rèn)效果：給字體加粗和斜體顯示 ? 方法：選中文本，然后在屬性檢查器中選擇相應(yīng)按鈕 加強(qiáng)元素和強(qiáng)調(diào)元素語法 ? Strong 和 em ? 開始標(biāo)記：必需 ? 內(nèi)容： ? 內(nèi)聯(lián)元素 ? 文本 ? 結(jié)束標(biāo)記：必需 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang等 加強(qiáng)元素和強(qiáng)調(diào)元素應(yīng)用舉例 ? 可以取消 strong和 em變粗變斜的效果， ? emhtml/em是一個(gè)strong標(biāo)記語言/strong 文本標(biāo)題元素 ? h1h2h3h4h5h6標(biāo)題 1標(biāo)題 6 ? 這六個(gè)元素的作用是讓文字已跟醒目的方式顯示，往往用于文章的標(biāo)題 h1標(biāo)題 1/h1 h2 標(biāo)題 2/h2 h3 標(biāo)題 3 /h3 h4標(biāo)題 4 /h4 h5標(biāo)題 5 /h5 h6標(biāo)題 6 /h6 文本標(biāo)題元素語法 ? 從 h1到 h6 ? 開始標(biāo)記：必需 ? 內(nèi)容： ? 內(nèi)聯(lián)元素 ? 文本 ? 結(jié)束標(biāo)記：必需 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang等 列表元素 ? liulol ? 列表是指將具有相似特征或者是具有現(xiàn)后順序的幾行文字進(jìn)行對(duì)齊排列 ? 列表分為有序列表 ol和無序列表 ul兩種 ? li列表項(xiàng)元素用來包含兩種列表的列表項(xiàng)，也就是列表內(nèi)容 列表元素語法 … ? Ul無序列表元素 ? 開始標(biāo)記：必需 ? 內(nèi)容： ? 列表項(xiàng) ? 結(jié)束標(biāo)記：必需 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang ? Type 列表符號(hào)，可取值為 disc,square,circle … 列表元素語法 … ? Ol有序列表元素 ? 開始標(biāo)記：必需 ? 內(nèi)容： ? 列表項(xiàng) ? 結(jié)束標(biāo)記：必需 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang ? Type 列表符號(hào)，可取值為 1,A,a,i,I ? Start 起始符號(hào) … 列表元素語法 ?LI有序列表元素 ?開始標(biāo)記：必需 ?內(nèi)容： ? 內(nèi)聯(lián)元素 ? 文本 ?結(jié)束標(biāo)記：可選 ?主要屬性 ? Id、 class、 align、 title、 style、 lang ? Type 列表符號(hào)，可取值為 disc,square,circle， 1,A,a,i,I ? value 序列號(hào) 列表元素應(yīng)用舉例 p書的類型 無序列表 /p ul li type=circle法律 /li li文學(xué) /li li type=square計(jì)算機(jī) /li li type=disc英文教材 /li /ul p學(xué)生表 有序列表 /p ol start =2 li張力 /li li type=a王鵬 /li li type=A黎明 /li li type=I趙敏 /li li type=i孟經(jīng) /li /ol 定義列表，術(shù)語，定義元素 ? dldtdd ? 定義列表往往用于要給出一類事物的定義的情形，如名詞解釋、字典等 ? dl標(biāo)記定義一個(gè)定義列表 ? dt標(biāo)記定義了定義列表中的一個(gè)術(shù)語 ? dd標(biāo)記對(duì)定義列表中的術(shù)語提供定義 定義列表元素語法 … ? DL定義列表元素 ? 開始標(biāo)記：必需 ? 內(nèi)容： ? 術(shù)語 ? 定義 ? 結(jié)束標(biāo)記：必需 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang … 定義列表元素語法 … ? DT定義術(shù)語元素 ? 開始標(biāo)記：必需 ? 內(nèi)容： ? 內(nèi)聯(lián)元素 ? 文本 ? 結(jié)束標(biāo)記：可選 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang … 定義列表元素語法 ? DD定義元素 ? 開始標(biāo)記：必需 ? 內(nèi)容： ? 內(nèi)聯(lián)元素 ? 文本 ? 結(jié)束標(biāo)記：可選 ? 主要屬性 ? Id、 class、 align、 title、 style、 lang p縮寫術(shù)語的解釋： /p dl dtHTMLddHyper Text Markup Language/dd/dt dtASPddActiveX Server Page/dd/dt dtXMLddeXtensible Markup Language/dd/dt dtCSSddCascading Style Sheet/dd/dt /dl 定義列表舉例 網(wǎng)頁中的注釋 ? 在 HTML中使用 ！ 標(biāo)記加入注釋 ? 注釋以 ！ 開始，瀏覽器將忽略它之后看到的所有代碼，直到看到一個(gè) “ ” ? 注釋有利于 HTML帶嗎的可讀性，在動(dòng)態(tài)網(wǎng)頁中還有其它的用處 ? 給代碼加上注釋是一個(gè)好習(xí)慣 注釋應(yīng)用舉例 !下面是關(guān)于定義列表的舉例 p縮寫術(shù)語的解釋： /p dl dtHTMLddHyper Text Markup Language/dd/dt dtASPddActiveX Server Page/dd/dt dtXMLddeXtensible Markup Language/dd/dt dtCSSddCascading Style Sheet/dd/dt /dl 這句話不被顯示 網(wǎng)頁中的實(shí)體 ? 實(shí)體指 ? 網(wǎng)頁中表達(dá)一些在 HTML語言中有特殊意義的字符，直接使用它們會(huì)帶來誤會(huì) ? 比如 、 、 amp。、 ” 、還有空格等 ? 鍵盤上沒有的，但常常會(huì)使用 ? 比如： ? 169。：版權(quán)符號(hào) ? ?：商標(biāo)符號(hào) ? 174。：注冊(cè)符號(hào) 實(shí)體表示方式 ? 有三種方式來表示實(shí)體 ? 一般，以 ” amp?！?號(hào)開始，并以分號(hào) ” 。” 結(jié)束 ? 使用轉(zhuǎn)意字符 ? 比如： amp。copy； 代表版權(quán)符號(hào) 169。 ? 注意：并不是所有實(shí)體都有相應(yīng)的轉(zhuǎn)意字符 ? 使用十進(jìn)制符號(hào) ? 在 amp。后加上 和一個(gè)十進(jìn)制的數(shù)字來表示實(shí)體 ? 比如：版權(quán)符號(hào)可以表示成 amp。169； ? 使用十六進(jìn)制符號(hào) ? 和十進(jìn)制相同，但在 后面加上的是一個(gè)十六進(jìn)制的值并在值前加上小寫的 x表示十六進(jìn)制 ? 比如：版權(quán)符號(hào)表示成十六進(jìn)制為 amp。Xa9。 任務(wù) 23：編排段落、文本、字體 ? 編排段落、文本、字體 ? 對(duì)網(wǎng)頁中的段落、區(qū)塊、文本、字體進(jìn)行編排，熟悉有關(guān)元素的使用 ? 參見實(shí)驗(yàn)指導(dǎo)書：任務(wù) 2－ 3 內(nèi)容線索 ? HTML快速入門 ? CSS快速入門 ? 什么是 CSS及 CSS的基本語法 ? 為什么用 CSS ? 用 CLASS和 ID屬性來定義和使用樣式表 HTMLamp。CSS工作機(jī)制 ? 文檔結(jié)構(gòu)和顯示分離 ? 即 HTML標(biāo)記不管外觀顯示的事情，外觀由 CSS來約定并由瀏覽器解釋決定 ? 結(jié)構(gòu)與顯示分離的好處是便于網(wǎng)頁的維護(hù)，可以對(duì)頁面元素進(jìn)行靈活地處理 ?顯示 ?結(jié)構(gòu) css scripting html DOM 瀏覽器顯示結(jié)果 什么是 CSS ? CSS的全稱是 Cascading Style Sheets層疊樣式表，又叫級(jí)聯(lián)樣式表，簡(jiǎn)稱樣式表 CSS的語法特點(diǎn) ? 在文檔中引入樣式表的標(biāo)志是使用樣式 style標(biāo)記，并把它放在head中 ? 語法：樣式名 {（ [屬性：屬性值 ]。 [屬性：屬性值 ]） } ? 屬性值沒有用引號(hào)包圍起來（除非單一一個(gè)只是有多個(gè)詞組成的，例如字體風(fēng)格屬性 fontfamily:”Book Antiqua”） 樣式表舉例 style type=TEXT/CSS ! .classstyle1{ fontfamily : 仿宋 。 fontsize:12pt。 } 〉 /style 樣式名 屬性名 屬性值 為什么用 CSS ? 便于修改維護(hù) ? 可以節(jié)省代碼量 ? 增強(qiáng)的格式化能力 CLASS和 ID屬性 ? 大多數(shù)塊元素都有這兩個(gè)屬性 ? ID屬性 ? 用來作為頁面中某個(gè)元素的唯一標(biāo)識(shí) ? CLASS屬性 ? 用來指定頁面中的元素屬于某一類（可以是不同標(biāo)記的元素） CLASS和 ID類型的樣式表 ? 語法： ? 為 CLASS指定樣式的語法是在類名前加上 (.)，然后將樣式定義寫在隨后的大括號(hào)內(nèi) ? 如： .classstyle1{color： blue。} ? ID指定樣式的方法是用 ()取代 (.)作為開頭 ? 如： idstyle{color： green} CLASS和 ID型樣式表應(yīng)用舉例 … style type=TEXT/CSS ! .classstyle1{ fontfamily:仿宋 。 fontsize:12pt。 } .classstyle2{ fontfamily:華文楷體 。 fontsize:15pt。 fontstyle:italic。 } idstyle{ fontfamily:隸書 。 fontsize:19pt。 color:blue。 } /style 定義樣式 … CLASS和 ID型樣式表應(yīng)用舉例 p class=classstyle1段落一 classstyle1效果 /p p id=idstyle段落二idstyle效果 /p p 在一行中 span class=classstyle2使用樣式可以使用span標(biāo)記。classstyle2效果/span/p div class=classstyle段落三 classstyle1效果/div 將樣式應(yīng)用到元素中 任務(wù) 24：使用內(nèi)聯(lián)樣式表加強(qiáng)文本效 ? 使用內(nèi)聯(lián)樣式表加強(qiáng)文本效 ? 創(chuàng)建幾個(gè) class類型的內(nèi)聯(lián)樣式表。并為 p， body標(biāo)簽制定新的樣式。利用樣式表來給文本加強(qiáng)效果 ? 參見實(shí)驗(yàn)指導(dǎo)書：任務(wù) 2－ 4 問題與討論 ? 問： html文檔的三個(gè)部分是什么 ? ? 問：為什么說 html文檔是一種結(jié)構(gòu)化文檔 ？ ? 問：結(jié)構(gòu)和顯示分離的原則能帶來什么好處？ ? 問：使用 CSS的理由？ 問題與解答 … ? 問：