HTML和CSS的簡單教程

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

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

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

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

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

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

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

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

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

10、：制作一個三行兩列的表格11.2表格標記屬性設(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表格標題標記 在html中通過在標記中使用標記為表格添加標題，而且可以控制標題文字的排列屬性。 基本語

11、法： 屬性描述align設(shè)置標題文字的水平對齊方式（left、center、right）lvalign設(shè)置標題文字的垂直對齊方式（top、bottom）示例11.4表格表頭標記 表頭指的是表格的第一行，在html中通過在標記中使用標記為表格設(shè)置表頭，表頭中的文字可以實現(xiàn)居中并且加粗顯示。 基本語法： 示例11.5行標記屬性設(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)中，有的單元格在水平方向上是跨多個單元格的，這就需要使用跨行屬性rowspan?；菊Z法：語法解釋：value代表單元格跨的行數(shù)。示例11.8跨列屬

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

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

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

16、l表單是html頁面與瀏覽器實現(xiàn)交互的主要手段，利用表單可以收集客戶端提交的有關(guān)信息。表單是網(wǎng)站實現(xiàn)交互功能的重要組成部分。13.1表單標記基本語法： .屬性描述Name表單的名稱Method定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種：get、postAction用來定義表單處理程序 在標記中，可以包含以下四個標記：標記描述表單輸入標記菜單和列表標記菜單和列表項目標記文本域標記13.2輸入標記輸入標記是表單中最常用的標記之一，常用的文本域、按鈕等都使用這個筆記?；菊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文字域的默認值13.4密碼域password在密碼域中可以輸入的文字以“*”星號顯示?；菊Z法：13.5文件域file可以通過文件域上傳文件?；菊Z法：13.6復(fù)選框checkbox基本語法： 語法注釋：checked表示此項

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

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

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

21、以彌補html對網(wǎng)頁格式化功能的不足，比如段落間距、行距；字體變化和大?。豁撁娓袷降膭討B(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標記中給出，用于設(shè)置該標記所定義信息的顯示效果。內(nèi)嵌樣式只對其所在的標記有效示例

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