HTML和CSS的簡單教程

1、.HTML 簡明講義第一節(jié) HTML基礎(chǔ)1.1什么是HTML是一種超文本標(biāo)記語言（HyperTextMarkupLanguage）超文本：包含有鏈接關(guān)系的文本，且包含多媒體對象的文件。1.2 HTML標(biāo)記的格式1.3 HTML 文檔的基本結(jié)構(gòu)歡迎進(jìn)入 HTML 世界這會(huì)是一種很有趣的體驗(yàn)第二節(jié) 頁面的主體標(biāo)記 網(wǎng)頁的主體部分位于和這兩個(gè)標(biāo)記之間，放置的是頁面中的所有內(nèi)容，如文字、圖片、鏈接、表格、表單等。2.1文字顏色屬性Text 在沒有對文字進(jìn)行單獨(dú)定義顏色時(shí)，這個(gè)屬性對頁面中的所有文字產(chǎn)生作用。 基本語法：常用color_value顏色顏色名稱十六進(jìn)制代碼黑色black#000000綠色g

2、reen#009900灰色gray#808080白色white#FFFFFF黃色yellow#FFFF00紅色red#FF0000藍(lán)色blue#0000FF示例：設(shè)定頁面文字顏色為藍(lán)色2.2背景顏色屬性BgColor 設(shè)定整個(gè)頁面的背景顏色。 基本語法：示例：設(shè)定頁面背景顏色為深藍(lán)色（#336699），文字顏色為白色2.3背景圖片屬性BackGround 背景圖片位于網(wǎng)頁的最底層，文字和圖片等都位于它的上方。 基本語法：示例：設(shè)定頁面背景平鋪效果顯示2.4背景圖片固定屬性 BgProperties 背景圖片固定，是指不論瀏覽器的滾動(dòng)條如何拖動(dòng)，背景永遠(yuǎn)固定在相同位置，并不會(huì)隨著文字的滾動(dòng)而滾動(dòng)

3、。 基本語法：示例：設(shè)定頁面效果背景圖片固定顯示2.5上邊距屬性 TopMargin 定義頁面的上邊距，即內(nèi)容和瀏覽器上部邊框之間的距離。 基本語法：示例：設(shè)定頁面上邊距為302.6左邊距屬性 LeftMargin 定義頁面的左邊距，即內(nèi)容和瀏覽器左部邊框之間的距離。 基本語法： 示例：設(shè)定頁面左邊距為30第三節(jié) 文字內(nèi)容3.1輸入普通文字示例：3.2輸入空格符號(hào)示例： 3.3輸入常用特殊符號(hào)特殊符號(hào)符號(hào)碼“"&>示例：3.4注釋語句基本語法：基本語法：示例：3.5標(biāo)題字標(biāo)記標(biāo)題文字就是以某幾種固定的字號(hào)去顯示文字基本語法：定義六級(jí)標(biāo)題，從一到六級(jí)，每級(jí)標(biāo)題的字體大小

4、依次遞減標(biāo)記描述一級(jí)標(biāo)題二級(jí)標(biāo)題三級(jí)標(biāo)題四級(jí)標(biāo)題五級(jí)標(biāo)題六級(jí)標(biāo)題示例：3.6定義標(biāo)題字對齊屬性基本語法：屬性描述標(biāo)題左對齊標(biāo)題中對齊標(biāo)題右對齊示例：3.7文字修飾標(biāo)記標(biāo)記描述粗體粗體斜體斜體斜體上標(biāo)下標(biāo)大字體小字體下劃線刪除線刪除線示例：3.8字體標(biāo)記Font屬性描述face字體size字號(hào) 從1到7 逐漸增大color顏色示例：第四節(jié) 段落標(biāo)記 在html中，使用標(biāo)記來表示段落。4.1定義段落對齊屬性基本語法：屬性描述段落左對齊段落中對齊段落右對齊示例：4.2換行標(biāo)記與強(qiáng)制換行標(biāo)記標(biāo)記描述換行文字過長時(shí)，強(qiáng)制瀏覽器不換行。在默認(rèn)情況下，瀏覽器會(huì)對較長文字進(jìn)行自動(dòng)換行。示例：4.3預(yù)格式化標(biāo)記

5、 保留文字在源代碼中的格式，瀏覽器在顯示內(nèi)容時(shí)，會(huì)完全按照其真正的文本格式來顯示。基本語法：示例：第五節(jié) 水平線標(biāo)記 水平線用于段落與段落之間的分割，使文檔結(jié)構(gòu)更加清晰。5.1插入水平線基本語法：示例：5.2水平線屬性設(shè)置基本語法：屬性描述語法width設(shè)置水平線寬度size設(shè)置水平線高度noshade水平線去除陰影color設(shè)置水平線顏色align在水平方向上，設(shè)置居中、居左和居右示例：第六節(jié) 列表標(biāo)記在html頁面中，列表可以起到提綱挈領(lǐng)的作用。列表分為兩種類型：列表類型描述有序列表 按照數(shù)字或字母等順序排列列表項(xiàng)目無序列表按照項(xiàng)目符號(hào)來標(biāo)記無序的列表項(xiàng)目 6.1有序列表設(shè)置基本語法： 項(xiàng)

6、目1項(xiàng)目2項(xiàng)目3標(biāo)記描述ol有序列表li列表項(xiàng)目屬性描述type1 數(shù)字1、2、3a 小寫字母 a、b、cA 大寫字母A、B、Ci 小寫羅馬數(shù)字I 大寫羅馬數(shù)字start設(shè)置有序列表項(xiàng)目的起始值示例：6.2無序列表設(shè)置基本語法： 項(xiàng)目1項(xiàng)目2項(xiàng)目3標(biāo)記描述ul無序列表li列表項(xiàng)目屬性描述typedisc circle square 示例：6.3無序列表和有序列表的嵌套（難點(diǎn)）示例：6.4定義列表標(biāo)記（選學(xué)）定義列表是一種兩個(gè)層次的列表，用于解釋名詞的定義，名詞為第一層次，解釋為第二層次，并且不包含項(xiàng)目符號(hào)，類似于字典詞條一樣?；菊Z法： 名詞一解釋一名詞二解釋二名詞三解釋三標(biāo)記描述dl定義列表

7、的聲明dt名詞標(biāo)題dd解釋名詞示例：6.5定義列表的嵌套（難點(diǎn)）示例：第七節(jié) 插入圖片 在html頁面中可以使用標(biāo)記插入圖片，網(wǎng)頁中常用的圖片格式為JPEG和GIF。標(biāo)記需要配合其它屬性來完成工作屬性描述src圖片所在路徑alt鼠標(biāo)移動(dòng)到圖片上時(shí)顯示的提示文字width、height圖片寬度和高度border設(shè)置圖片邊框?qū)挾葀space設(shè)置圖片與文字的上下距離hspace設(shè)置圖片與文字的左右距離alignTop 文字的中間線位于圖片上方Middle 文字的中間線位于圖片中間Bottom 文字的中間線位于圖片底部Left 文字位于圖片左側(cè)Right 文字位于圖片右側(cè)示例：第八節(jié) 多媒體頁面之滾動(dòng)

8、文字在HTML頁面中通過 標(biāo)記可以實(shí)現(xiàn)如字幕一般的滾動(dòng)文字效果，在一個(gè)排版整齊的頁面中，添加適當(dāng)?shù)臐L動(dòng)文字可以使頁面更有動(dòng)感。8.1滾動(dòng)方向?qū)傩訢irection 基本語法：滾動(dòng)文字direction屬性值描述up滾動(dòng)文字向上down滾動(dòng)文字向下left滾動(dòng)文字向左right滾動(dòng)文字向右示例：8.2滾動(dòng)方式屬性Behavior 基本語法：滾動(dòng)文字behavior屬性值描述scroll循環(huán)往復(fù)slide下只進(jìn)行一次滾動(dòng)alternate交替進(jìn)行滾動(dòng)示例：8.3滾動(dòng)速度屬性ScrollAmount 基本語法：滾動(dòng)文字示例：8.4滾動(dòng)延遲屬性ScrollDelay 基本語法：滾動(dòng)文字示例：8.5滾動(dòng)

9、循環(huán)屬性Loop 基本語法：滾動(dòng)文字示例：8.6滾動(dòng)范圍屬性Width、Height 基本語法：滾動(dòng)文字示例：8.7滾動(dòng)背景屬性BgColor 基本語法：滾動(dòng)文字示例：第九節(jié) 嵌入多媒體內(nèi)容在頁面中可以放置mp3、電影、swf動(dòng)畫等多種多媒體內(nèi)容?；菊Z法：滾動(dòng)文字示例：第十節(jié) 嵌入背景音樂使用標(biāo)記可以嵌入多種格式的背景音樂，最常用的為mid格式的文件?；菊Z法：示例：背景音樂循環(huán)次數(shù)屬性基本語法：基本語法：示例：第十一節(jié) 使用表格 表格是用于排列內(nèi)容的最佳手段，在html頁面中，絕大多數(shù)頁面都是使用表格進(jìn)行排版。11.1表格相關(guān)標(biāo)記標(biāo)記描述表格標(biāo)記行標(biāo)記單元格標(biāo)記表格標(biāo)題標(biāo)記表格表頭標(biāo)記示例

10、：制作一個(gè)三行兩列的表格11.2表格標(biāo)記屬性設(shè)置屬性描述border設(shè)置表格邊框線寬度width、height設(shè)置表格的寬度和高度bordercolor設(shè)置表格邊框顏色borderlight設(shè)置表格亮邊框顏色（左上邊框顏色）bordercolordark設(shè)置表格暗邊框顏色（右下邊框顏色）bgcolor設(shè)置表格背景顏色background設(shè)置表格背景圖片align設(shè)置表格對齊方式cellspacing設(shè)置表格單元格和單元格之間的距離cellpadding設(shè)置單元格內(nèi)容和邊框之間的距離示例11.3表格標(biāo)題標(biāo)記 在html中通過在標(biāo)記中使用標(biāo)記為表格添加標(biāo)題，而且可以控制標(biāo)題文字的排列屬性。 基本語

11、法： 屬性描述align設(shè)置標(biāo)題文字的水平對齊方式（left、center、right）lvalign設(shè)置標(biāo)題文字的垂直對齊方式（top、bottom）示例11.4表格表頭標(biāo)記 表頭指的是表格的第一行，在html中通過在標(biāo)記中使用標(biāo)記為表格設(shè)置表頭，表頭中的文字可以實(shí)現(xiàn)居中并且加粗顯示。 基本語法： 示例11.5行標(biāo)記屬性設(shè)置屬性描述bordercolor設(shè)置行的邊框顏色borderlight設(shè)置行的亮邊框顏色（左上邊框顏色）bordercolordark設(shè)置行的暗邊框顏色（右下邊框顏色）bgcolor設(shè)置行的背景顏色background設(shè)置行的背景圖片align設(shè)置行內(nèi)容水平對齊方式vali

12、gn設(shè)置行內(nèi)容垂直對齊方式示例11.6單元格屬性設(shè)置、屬性描述align設(shè)置單元格內(nèi)容水平對齊方式valign設(shè)置單元格內(nèi)容垂直對齊方式width、height設(shè)置單元格的寬度和高度bgcolor設(shè)置單元格背景顏色background設(shè)置單元格背景圖片bordercolor設(shè)置單元格邊框顏色borderlight設(shè)置單元格亮邊框顏色（左上邊框顏色）bordercolordark設(shè)置單元格暗邊框顏色（右下邊框顏色）示例11.7跨行屬性在復(fù)雜的表格結(jié)構(gòu)中，有的單元格在水平方向上是跨多個(gè)單元格的，這就需要使用跨行屬性rowspan。基本語法：語法解釋：value代表單元格跨的行數(shù)。示例11.8跨列屬

13、性在復(fù)雜的表格結(jié)構(gòu)中，有的單元格在垂直方向上是跨多個(gè)單元格的，這就需要使用跨列屬性colspan?；菊Z法：語法解釋：value代表單元格跨的列數(shù)。示例11.9表格嵌套（重點(diǎn)）示例第十二節(jié) 建立超鏈接超鏈接是網(wǎng)頁頁面中最重要的元素之一，一個(gè)網(wǎng)站是由多個(gè)頁面組成的，頁面之間依據(jù)鏈接確定相互的導(dǎo)航關(guān)系。12.1鏈接標(biāo)記 鏈接雖然在網(wǎng)站設(shè)計(jì)中占有不可替代的地位，但是其標(biāo)記只有一個(gè)，那就是標(biāo)記。鏈接標(biāo)記具有如下屬性： 屬性描述href指定鏈接地址name給鏈接命名title鏈接提示文字target指定鏈接的目標(biāo)窗口示例12.2關(guān)于鏈接路徑鏈接路徑類型描述絕對路徑.c

14、n相對路徑1、 要鏈接到同一目錄下的文件時(shí)，只需要輸入要鏈接文件的名稱2、 要鏈接到下一級(jí)目錄中的文件，只需要先輸入目錄名，然后加“/”，再輸入文件名3、 要鏈接到上一級(jí)目錄中的文件，則先輸入“./”，再輸入目錄名、文件名根路徑以“/”開頭，代表根目錄，再輸入目錄名、文件名示例12.3內(nèi)部鏈接 所謂內(nèi)部鏈接，是指在同一網(wǎng)站內(nèi)部，不同html頁面之間的鏈接關(guān)系。基本語法：鏈接文字示例target屬性描述_parent在上一級(jí)窗口中打開，經(jīng)常使用于分幀的框架頁_blank在新窗口中打開_self在同一個(gè)窗口中打開，默認(rèn)設(shè)置_top在瀏覽器的整個(gè)窗口中打開，忽略任

15、何框架12.4書簽鏈接 建立書簽鏈接，分為兩步：一是建立書簽，二是為書簽建立鏈接?；菊Z法：書簽鏈接文字 鏈接文字 鏈接文字示例target屬性描述_parent在上一級(jí)窗口中打開，經(jīng)常使用于分幀的框架頁_blank在新窗口中打開_self在同一個(gè)窗口中打開，默認(rèn)設(shè)置_top在瀏覽器的整個(gè)窗口中打開，忽略任何框架12.5外部鏈接 所謂外部鏈接，是指跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，和其他網(wǎng)站中的頁面或者其他元素之間的鏈接關(guān)系。服務(wù)url格式描述wwwhttp:/鏈接到外部網(wǎng)站ftpftp:/鏈接到文件傳輸服務(wù)器e-mailmailto:啟動(dòng)郵件基本語法：鏈接文字鏈接文字鏈接文字第十三節(jié) 建立頁面表單 Htm

16、l表單是html頁面與瀏覽器實(shí)現(xiàn)交互的主要手段，利用表單可以收集客戶端提交的有關(guān)信息。表單是網(wǎng)站實(shí)現(xiàn)交互功能的重要組成部分。13.1表單標(biāo)記基本語法： .屬性描述Name表單的名稱Method定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種：get、postAction用來定義表單處理程序 在標(biāo)記中，可以包含以下四個(gè)標(biāo)記：標(biāo)記描述表單輸入標(biāo)記菜單和列表標(biāo)記菜單和列表項(xiàng)目標(biāo)記文本域標(biāo)記13.2輸入標(biāo)記輸入標(biāo)記是表單中最常用的標(biāo)記之一，常用的文本域、按鈕等都使用這個(gè)筆記?；菊Z法： 屬性描述Name域的名稱Type域的類型 在type屬性中，可以包含以下屬性值：Type屬性值描述Text文字域P

17、assword密碼域File文件域Checkbox復(fù)選框Radio單選框Button普通按鈕Submit提交按鈕Reset重置按鈕Hidden隱藏域Image圖像域（圖像提交按鈕）13.3文字域text在文字域中可以輸入任何類型的文本、數(shù)字或字母，輸入內(nèi)容以單行顯示?；菊Z法：屬性描述Name文字域的名稱Maxlength文字域最大輸入字符數(shù)Size文字域的寬度Value文字域的默認(rèn)值13.4密碼域password在密碼域中可以輸入的文字以“*”星號(hào)顯示?；菊Z法：13.5文件域file可以通過文件域上傳文件?；菊Z法：13.6復(fù)選框checkbox基本語法： 語法注釋：checked表示此項(xiàng)

18、被默認(rèn)選中； value表示選中項(xiàng)目后提交給服務(wù)器端的值。13.7單選框radio基本語法： 語法注釋：checked表示此項(xiàng)被默認(rèn)選中； value表示選中項(xiàng)目后提交給服務(wù)器端的值。13.8普通按鈕button基本語法： 語法注釋：value表示表示顯示在按鈕上的文字。13.9提交按鈕submit單擊提交按鈕后，可以實(shí)現(xiàn)表單內(nèi)容的提交?；菊Z法：13.10重置按鈕reset單擊重置按鈕后，可以清除表單的內(nèi)容，恢復(fù)成默認(rèn)的表單內(nèi)容設(shè)定。基本語法：13.11圖像域image圖像域是指可以用于提交按鈕位置上的圖片，這幅圖片具有按鈕功能?；菊Z法：13.12隱藏域hidden隱藏域在頁面中對于用戶是

19、不可見的?；菊Z法：13.13菜單和列表標(biāo)記基本語法： 屬性描述Name菜單或列表名稱Multiple列表中的項(xiàng)目多選Size顯示的選項(xiàng)數(shù)目Value選項(xiàng)值Selected默認(rèn)選項(xiàng)13.14文本域標(biāo)記制作多行的文字域?；菊Z法：屬性描述Name文本域名稱Rows文本域的行數(shù)Cols文本域的列數(shù)Value文本域的默認(rèn)值第十四節(jié) 元信息標(biāo)記 元信息標(biāo)記的功能是定義頁面中的信息，這些文件信息不會(huì)出現(xiàn)在網(wǎng)頁的顯示之中，只會(huì)出現(xiàn)在原源代碼中。通過標(biāo)記的屬性可以提供頁面的關(guān)鍵字、作者、描述等多種信息。屬性描述http-equiv生成一個(gè)http標(biāo)題域Name元信息關(guān)鍵字Content關(guān)鍵字取值內(nèi)容14.1

20、設(shè)定關(guān)鍵字關(guān)鍵字是為搜索引擎提供的，關(guān)鍵字之間用逗號(hào)隔開。基本語法：14.2設(shè)定描述用以描述網(wǎng)站的主題，供搜索引擎尋找網(wǎng)頁?；菊Z法：14.3設(shè)定作者用以顯示頁面作者姓名及個(gè)人信息?；菊Z法：14.4設(shè)定字符集基本語法： 將Charset設(shè)置為gb2312時(shí)，頁面字符集為簡體中文。14.5設(shè)定自動(dòng)刷新基本語法： value為頁面刷新間隔秒數(shù)。14.6設(shè)定自動(dòng)跳轉(zhuǎn)基本語法： value為頁面跳轉(zhuǎn)間隔秒數(shù)；url_value為頁面跳轉(zhuǎn)后打開的文件地址。第十五節(jié) CSS樣式表概述15.1什么是CSSCSS（cascading style sheets）中文翻譯為“層疊樣式表”，簡稱樣式表。 CSS可

21、以彌補(bǔ)html對網(wǎng)頁格式化功能的不足，比如段落間距、行距；字體變化和大??；頁面格式的動(dòng)態(tài)更新；排版定位等。 15.2 css基本語法css樣式主要由三部分組成選擇器 selector屬性名 property屬性值 value示例P font-size:25px; color:blank15.3 css的三種寫法內(nèi)嵌樣式（inline style）內(nèi)部樣式表（internal style sheet）外部樣式表（external style sheet）內(nèi)嵌樣式 inline style 以屬性的形式直接在html標(biāo)記中給出，用于設(shè)置該標(biāo)記所定義信息的顯示效果。內(nèi)嵌樣式只對其所在的標(biāo)記有效示例

22、1501.html內(nèi)部樣式表 internal style sheet 在html頁面的頭信息元素中給出，可以同時(shí)設(shè)置多個(gè)標(biāo)記所定義信息的顯示效果。內(nèi)部樣式表只對所在的網(wǎng)頁有效 示例1502.html外部樣式表 external style sheet 外部樣式表將樣式設(shè)置保存到獨(dú)立的外部文件中，然后在要使用這些樣式的html頁面中進(jìn)行引用。外部樣式表為純文本文件，后綴為.css；外部樣式表可被應(yīng)用到多個(gè)頁面中示例1503.html15.4樣式的優(yōu)先級(jí)-樣式繼承 XHTML中的子標(biāo)簽會(huì)繼承部分父標(biāo)簽的樣式特征。例如：定義bodycolor:red;，那么頁面中body之下所有的標(biāo)簽及標(biāo)簽下的所有子標(biāo)簽的文本都將變?yōu)榧t色。示例1504.html15.5樣式的優(yōu)先級(jí)-!important 在兩行相同類型的CSS樣式定義中，往往優(yōu)先執(zhí)行后面一個(gè)，可以通過!important語法，提升某一句樣