遼東學(xué)院 第2講 HTML與CSS

1、知識回顧網(wǎng)站的運行環(huán)境的搭建本講內(nèi)容1、HTML基礎(chǔ)2、CSS第2章 JSP輔助知識1 HTML是超文本標(biāo)記語言（Hyper Text Markup Language）的縮寫。不區(qū)分大小寫。 HTML文件中包含了要顯示在網(wǎng)頁上的信息，該信息包括瀏覽器中有什么文字、文字放的位置、什么字體，如果使用了圖片、聲音等資源,HTML文本還會告訴瀏覽器去什么地方查找這些資源及它們的存放網(wǎng)頁的位置等，HTML網(wǎng)頁使用元素來實現(xiàn)這些功能。一、HTML2 標(biāo)題 網(wǎng)頁的內(nèi)容 整個HTML文件處于與元素之間。用于聲明這個HTML文件 文件頭，用以存放重要信息 文件體，大部分元素運用于此部分文件的標(biāo)題，會出現(xiàn)于瀏覽器

2、頂部及作為別人收藏夾時名稱 定義頁面顯示內(nèi)容HTML文本的基本結(jié)構(gòu)如下： HTML語法結(jié)構(gòu)3hello!good morning us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5 1、區(qū)標(biāo)記4 可以設(shè)置網(wǎng)頁的背景色、背景圖片、超連接顏色、文本顏色、左邊距。 *=#rrggbb 十六進(jìn)制編碼，或者是下列預(yù)定

3、義色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 如： 2、屬性5 . #=1, 2, 3, 4, 5, 6, 7 ￥=顏色 *=字體標(biāo)題字體(Header) . #=1, 2, 3, 4, 5, 6, 7設(shè)置文本格式 ：黑體字 ：斜體字 ：刪除線 ：下劃線 ：下標(biāo) ：上標(biāo)相對改變字體大?。涸龃?：減?。涸龃?減小)n號3、文本屬性設(shè)定6 元素用來指定HTML文件中插入的圖像。其使用語法如下： src：表示圖像文件和視頻

4、文件的地址。 Height、width和border：表示圖像的高度、寬度和邊框?qū)挾取?vspace和hspace ：分別表示插入圖像的上下、左右空白區(qū)域的大小 。alt ：在瀏覽器尚未完全讀入圖象時，在圖象位置顯示的文字。元素有如下一些屬性： 4、圖像7 瀏覽器執(zhí)行元素時，把所在機(jī)器中的默認(rèn)播放器嵌入到瀏覽器中，以播放音樂或視頻，語法： autostart：用來指定音樂或視頻文件傳送完畢后是否立即播放，可選值是true和false。loop：指定文件重復(fù)播放的次數(shù),可選值是數(shù)字、true和false。 Controls：控制面板樣式 。console-正常面板，默認(rèn)值；smallconsol

5、e-小面板；playbutton-只顯示播放按鈕的面板；pausebutton-只顯示暫停按鈕的面板；stopbutton - 只顯示停止按鈕的面板；volumelever - 只顯示音量調(diào)節(jié)按鈕的面板。元素有如下一些屬性： 5、多媒體元素8段 換行 不換行 文字的分區(qū)顯示 .預(yù)格式化文本. 例pre.htm分割線 特殊符號<： ：空格6、版式控制 9在不同頁面間跳轉(zhuǎn)或在同一頁面不同位置間跳轉(zhuǎn)。連接到不同頁面 搜狐鏈接到當(dāng)前頁的特定位置(錨)：指定鏈接文件：指定鏈接的目標(biāo)地址鏈接到不同頁面的特定位置 target ：用來指定如何打開鏈接的頁面，取值_self在原頁面的窗口上打開，取值_bl

6、ank新開一個瀏覽器窗口打開。7、超級連接10marquee direction=# bihavior=# loop=# scrollamount=# scrolldelay=# align=# bgcolor=# height=# width=# . 文字移動屬性的設(shè)置： 8、字幕11方向： #=left, right，up,down啦啦啦，我從右向左移！ 速度 啦啦啦，我走得好快喲！ 延時 啦啦啦，我走一步，停一停！ 字幕_方向、速度、延時12滾動方式： #=scroll, slide, alternate啦啦啦，我一圈一圈繞著走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我來回走耶！ 字幕_

7、滾動方式13循環(huán) #=次數(shù)；若未指定則循環(huán)不止(infinite)啦啦啦，我只走 3 趟喲！ 啦啦啦，我只走 3 趟喲！ 啦啦啦，我只走 3 趟喲！ 字幕_循環(huán)14對齊方式 #=top, middle, bottom啦啦啦，我會移動耶！對齊上沿、中間、下沿。 底色 #=rrggbb 16 進(jìn)制數(shù)碼，或者是下列預(yù)定義色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 啦啦啦，我會移動耶！ 字幕_對齊方式15面積 啦啦啦，我會移

8、動耶！ 空白*嗨,啦啦啦，我會移動耶！大家好！* 字幕_面積、空白16 表單是用戶和Web服務(wù)器交互的工具。表單由兩部分組成：HTML代碼和JSP程序。其中HTML代碼主要用來生成表單的可視化界面，JSP程序主要用來負(fù)責(zé)對表單所包含的信息進(jìn)行解釋或處理。 Name ：指定表單名稱Action ：設(shè)置處理表單數(shù)據(jù)程序URL的地址 9、表單17Method ：指定數(shù)據(jù)傳送到服務(wù)器的方式，可選值是get和post。選擇get方式時，將表單數(shù)據(jù)追加到action指定的地址后面，并傳送到服務(wù)器。當(dāng)選擇post方式時，則將表單數(shù)據(jù)按照HTTP協(xié)議中post傳輸方式傳送到服務(wù)器。OnReset： 主要針對重

9、置（Reset）按鈕，設(shè)置在按下Reset按鈕之后所要執(zhí)行的程序。 OnSubmit：主要針對提交（Submit）按鈕，設(shè)置在按下Submit按鈕之后所要執(zhí)行的程序。 Target ：指定輸入結(jié)果顯示在哪個窗口。用戶單擊表單的Submit按鈕，就會打開另外一個網(wǎng)頁，target屬性就指定了是在新窗口還是在表單所在窗口中打開新頁面?？蛇x值是 “_blank”、“_self”、“_top”和“_parent”。表單_form屬性值18 元素用來指定表單中數(shù)據(jù)的輸入方式及表單的提交按鈕。元素的基本語法如下： type ：輸入數(shù)據(jù)的類型 name ：當(dāng)前元素名稱 aligh ：設(shè)置表單的位置是靠左（l

10、eft）、靠右（right）、居中（middle）、靠上（top）還是靠底（bottom） 元素有如下一些屬性： 表單_輸入框元素 19 value ：設(shè)定輸入的默認(rèn)值，即用戶不輸入內(nèi)容時表單項的值 src ：針對“type=image”屬性設(shè)置來說，設(shè)定圖像文件的地址 checked ：表示選擇框中，此項被默認(rèn)選中 maxlength ：設(shè)定輸入單行文本時最多輸入的字符個數(shù) size ：設(shè)定在輸入多行文本時的最大輸入字符數(shù) onclick ：表示在按下按鈕時調(diào)用指定的子程序 onselect ：表示當(dāng)前項被選擇時調(diào)用指定的子程序 disabled ：用于設(shè)定禁用該表單項表單_屬性 reado

11、nly ：用于設(shè)定該表單項只讀20 text ：表示輸入單行文本 textarea ：表示輸入多行文本 password ：表示輸入數(shù)據(jù)為密碼，用“*”表示 checkbox ：表示復(fù)選框 radio ：表示單選框 submit ：表示提交按鈕，數(shù)據(jù)將被送到服務(wù)器 reset ：表示清除表單數(shù)據(jù)，以便重新輸入 file ：表示插入一個文件 hidden ：表示隱藏域 image ：表示插入圖片 button ：表示普通按鈕 select ：表示下拉列表框 表單_type屬性值21表單_文本和密碼、file控件文字和密碼輸入*=text, password 實例file控件請選擇你要上傳的文件：

12、 實例22復(fù)選框(Checkbox) Banana Apple Orange 表單_復(fù)選框23單選框(RadioButton) Banana Apple Orange 表單_單選框24 元素用來設(shè)置下拉列表或滾動列表來選擇要提交的數(shù)據(jù)。下拉列表和滾動列表通過元素中使用若干個子元素來定義，其格式如下： value name ：設(shè)置選擇列表的名稱，供 應(yīng)用程序作識別之用。 multiple：設(shè)置選擇列表的選項 數(shù)量，即高度。 size：讓選擇列表有多重選項。元素有以下屬性： 元素有以下屬性： value ：設(shè)置該選項的值。 selected ：設(shè)置該選項 被選中。 表單_下拉列表25 元素用于表示

13、表單中可滾動的多行文本字段。其基本格式如下： name ：設(shè)置多行文本字段的名稱 cols ：設(shè)置多行文本字段的寬度 rows ：設(shè)置多行文本字段的高度 元素有如下一些屬性： wrap ：設(shè)置多行文本字段的換行，可選值如下： off ：表示不使用此屬性 physical ：表示會強迫瀏覽器在發(fā)送資料時必須將文本中 的換行元素送出 virtual ：送出連續(xù)成串的字表單_文本區(qū)域26 框架在一個屏幕上開幾個窗口，每個窗口顯示不同的HTML文件?？蚣芫W(wǎng)頁使用frameset代替body標(biāo)記。frameset標(biāo)記內(nèi)使用標(biāo)記來指定框架中每個子窗口的內(nèi)容。 瀏覽器不支持框架! 示例10、框架27 瀏覽器

14、不支持框架! 框架實例框架_實例28frameborder - 定義頁的邊框,取值為(1|0),缺省值為1 1 - 在每個頁面之間都顯示邊框 0 - 不顯示邊框 marginheight - 定義框架中HTML文件顯示的上下邊界的寬度,取值為px (像素) ,缺省值由瀏覽器決定 。marginwidth - 定義框架中HTML文件顯示的左右邊界的寬度,取值為px,缺省值由瀏覽器決定。 noresize - 定義瀏覽者是否可以改變邊框尺寸。scrolling - 定義是否有滾動條,取值為(yes|no|auto),缺省值為auto。 yes - 顯示滾動條 no - 不顯示滾動條 auto -

15、當(dāng)需要時再顯示滾動條 框架_參數(shù)設(shè)置29表格的基本語法 - 定義表格 - 定義表行 - 定義表頭 - 定義表元(表格的具體數(shù)據(jù))（1）表格尺寸設(shè)置邊框尺寸設(shè)置： 實例表格尺寸設(shè)置： 實例 11、表格30（2）表格的標(biāo)題 IE . #=left, center, right . #=top, bottom valign=top is default. 實例（3）表元間隙設(shè)置： 表元內(nèi)部空白設(shè)置： 實例表格_標(biāo)題、間隙31（4）表格內(nèi)文字的對齊/布局 #=left, center, right #=top, middle, bottom, baseline 實例（5）表格在頁面中的對齊/布局 #=

16、space value Nescape 實例表格_對齊方式32（6）跨多行、多列的表元跨多列的表元 跨多行的表元 實例（7）表格的分組顯示(Structured Table) IE按行分組 . - 表的題頭(Header) . - 表的正文(Body) . - 表的腳注(Footer) 實例表格_跨行（列）、分組33（8）表格的色彩 IE表元的背景色彩和背景圖象 實例#=rrggbb 16 進(jìn)制 RGB 數(shù)碼, 或者是下列預(yù)定義色彩名稱。表格邊框的色彩 實例表格邊框色彩的亮度控制 實例 表格_色彩34（9）表格中邊框的顯示 IE顯示所有 4 個邊框 實例只顯示上邊框 只顯示下邊框 只顯示上、下

17、邊框 只顯示左、右邊框 只顯示右邊框 不顯示任何邊框 表格_邊框35（10）表格中分隔線(Rules)的顯示 IE 顯示所有分隔線 實例只顯示組(Groups)與組之間的分隔線 只顯示行與行之間的分隔線 只顯示列與列之間的分隔線 不顯示任何分隔線 表格_分割線36 CSS：Cascading Style Sheets（層疊樣式表單）,也叫樣式表，可以設(shè)置文本、圖像，背景等網(wǎng)頁屬性。其中，不同的樣式可以嵌套，嵌套中內(nèi)層的樣式繼承外層樣式，故稱層疊樣式。如：層疊樣式表單 二、CSS37（一）CSS的語法結(jié)構(gòu) CSS語言是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行。CSS的語法: 選擇符屬性:

18、屬性值如： body color: black 1、選擇符可以是多種形式，一般是你要定義樣式的HTML標(biāo)記，例如BODY、P、TABLE，屬性和值要用冒號隔開。例：body color: black，效果是使頁面中的文字為黑色。CSS_語法結(jié)構(gòu)382、如果需要對一個選擇符指定多個屬性時，我們使用分號將所有的屬性和值分開。 例：p text-align: center; color: red，段落居中排列;并且段落中的文字為紅色。 3、如果屬性的值是多個單詞組成，必須在值上加引號，比如字體的名稱經(jīng)常是幾個單詞的組合。例： p font-family: “sans serif” ，定義段落字體為s

19、ans serif。 4、相同屬性和值的選擇符可以組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復(fù)定義:h1, h2, h3, h4, h5, h6 color: green CSS_語法結(jié)構(gòu)39 5、可以單獨對某種元素包含關(guān)系定義樣式表，例如元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義:table afont-size: 12px 6、把相同的元素分類定義成不同的樣式，采用類選擇符或ID選擇符，在自定義類的名稱前面加一個圓點或#:p.center text-align: center或.center text-align: center或#cen

20、ter text-align: centerCSS_語法結(jié)構(gòu)40 7、不同標(biāo)識符的使用 選擇符是可以是HTML標(biāo)記，也可以是非HTML標(biāo)記。非HTML標(biāo)記要在選擇符前加.或# ,如:body color: black .link1color:red #foot color: black HTML標(biāo)記在網(wǎng)頁內(nèi)直接調(diào)用即可。如：我們都是社會主義的接班人 對于非HTML標(biāo)記，則采用如下調(diào)用方式：連接或今天我們說一段，說一段 效果CSS_語法結(jié)構(gòu)41（二） CSS的使用方法1、行內(nèi)定義CSS： 樣式表 這里Style是內(nèi)嵌到中來定義該段落內(nèi)的格式的。是用直接定義的。該方法在指令中加入樣式規(guī)則，否則采用

21、網(wǎng)頁的默認(rèn)設(shè)置。 效果CSS用法_行內(nèi)定義CSS422、植入樣式表（在文件頂部定義CSS)： 在頂部定義CSS 自定義樣式 效果CSS用法_植入樣式表433、鏈接到樣式表上 mystyle.css文件H1 color: blue; font-family: impact P bgcolor: yellow; font-family: courier 樣式表引用： css at a 樣式表文件的使用 實例CSS用法_鏈接到樣式表 444、輸入樣式表 輸入外部樣式表同鏈接到樣式表類似。輸入外部樣式表方法能同其它方法結(jié)合使用。例如： My First Stylesheet Stylesheets: The Tool of the Web Design Gods Amaze your friends! Squash your enemies! 效果CSS用法_輸入樣式表 45 對于H1在外部樣式表文件和植入 的樣式表中都設(shè)定了規(guī)則。在兩者沖突的 情況