互聯(lián)網(wǎng)HTML新手入門課件

1、HTML第1頁，共31頁。HTML HTML（HyperText Markup Lanquage）即超文本標(biāo)記語言，是構(gòu)成網(wǎng)頁最基本的要素，也是編寫ASP文檔和開發(fā)各種Web應(yīng)用程序的基礎(chǔ)。第2頁，共31頁。2.1 HTML概述2.2 HTML常用標(biāo)記2.3 HTML表格標(biāo)記2.4 HTML框架標(biāo)記2.5 HTML表單標(biāo)記2.6 HTML其他標(biāo)記2.7 HTML文檔樣式第3頁，共31頁。2.1 HTML概述2.1.1 什么是HTML HTML是一種標(biāo)記語言每一個(gè)網(wǎng)頁元素通常由開始標(biāo)記（start tag）、結(jié)束標(biāo)記（end tag），以及夾在這兩個(gè)標(biāo)記中的內(nèi)容所組成。 主要由“屬性名稱 = 屬

2、性值”的方式來設(shè)定元素的屬性。一個(gè)HTML元素的形式可表示為： 內(nèi)容 第4頁，共31頁。 網(wǎng)頁標(biāo)題 這是正文部分！ 2.1.2 HTML文檔基本架構(gòu)（01.html）第5頁，共31頁。2.1.2 關(guān)于HTML的頭部（02.html）標(biāo)題(title) 鏈接(link) 樣式(style) 關(guān)于網(wǎng)頁信息(meta) 第6頁，共31頁。1標(biāo)記的屬性及其說明屬 性描 述TEXT設(shè)定頁面文字的顏色BGCOLOR設(shè)定頁面背景的顏色BACKGROUND設(shè)定頁面背景的圖像BGPROPERTIES設(shè)定頁面背景圖像是否隨頁面的滾動(dòng)而動(dòng)LINK設(shè)定默認(rèn)的鏈接顏色ALINK設(shè)定鼠標(biāo)靠近時(shí)的鏈接顏色VLINK設(shè)定已訪

3、問過的鏈接顏色TOPMARGIN設(shè)定頁面上邊與瀏覽器窗口頂端的距離LEFTMARGIN設(shè)定頁面左邊與瀏覽器窗口左端的距離第7頁，共31頁。2.2 常用標(biāo)記（03.html） 1標(biāo)題文字標(biāo)記 標(biāo)題文字 2分段標(biāo)記 文字 3換行標(biāo)記第8頁，共31頁。2.2 常用標(biāo)記（03.html）4橫線標(biāo)記格式：5文本縮排標(biāo)記格式： 文字 第9頁，共31頁。標(biāo) 記描 述將文字設(shè)置為粗體字將文字設(shè)置為斜體字設(shè)置為帶有下劃線的文字設(shè)置為位于右上角的上標(biāo)文字設(shè)置為位于右下角的下標(biāo)文字設(shè)置為帶有刪除線的文字標(biāo)明其間的文字為地址內(nèi)容強(qiáng)調(diào)其間的文字（通常為斜體）強(qiáng)調(diào)其間的文字（通常為黑體）2.2.5 字體屬性標(biāo)記第10頁，

4、共31頁。2.2 特殊字符標(biāo)記字 符對(duì)應(yīng)字符標(biāo)記對(duì)應(yīng)十進(jìn)制編碼標(biāo)記說 明大于符號(hào)&AND符號(hào)雙引號(hào)空格中點(diǎn)分節(jié)符號(hào)版權(quán)符號(hào)注冊(cè)符號(hào)第11頁，共31頁。格式：用作鏈接的文字或圖像2.1 HTML超鏈接（02.html）第12頁，共31頁。2.2 圖像標(biāo)記(03.html)格式：第13頁，共31頁。2.2 列表標(biāo)記(frame_a.html)1有序列表標(biāo)記格式： 列表項(xiàng)1 列表項(xiàng)2 列表項(xiàng)n2無序列表標(biāo)記格式： 列表項(xiàng)1 列表項(xiàng)2 列表項(xiàng)n第14頁，共31頁。2.3 HTML表格標(biāo)記（frame_c.html）1網(wǎng)頁中的表格 網(wǎng)頁中經(jīng)常需要使用各種表格元素，諸如“商品表”或“員工表”表格可以方便控

5、制網(wǎng)頁中各種元素的布局，以便整齊地安排網(wǎng)頁中眾多的文字和圖片等。第15頁，共31頁。 3表格應(yīng)用示例2.3 HTML表格標(biāo)記 (frame_b.html)第16頁，共31頁。2.5 HTML表單標(biāo)記(frame_b.html) 2.5.1 表單簡介1網(wǎng)頁中的表單 表單的英文名稱為form ，用于在網(wǎng)頁中為瀏覽者提供一個(gè)輸入各種信息的界面，以便Web應(yīng)用程序和Web數(shù)據(jù)庫獲取這些信息。大多數(shù)網(wǎng)站的網(wǎng)頁設(shè)計(jì)都需要使用表單元素，例如通過表單來完成用戶注冊(cè)信息的輸入或者商品訂購信息的輸入等。第17頁，共31頁。2.5 HTML表單標(biāo)記(frame_b.html)2表單定義格式 第18頁，共31頁。2.

6、4 HTML框架標(biāo)記1網(wǎng)頁中的框架框架元素用來將整個(gè)瀏覽器窗口劃分為多個(gè)不同的矩形區(qū)域，標(biāo)記用來定義一個(gè)窗口內(nèi)的框架數(shù)、各框架的尺寸等，框架標(biāo)記則用來具體定義某個(gè)框架的名稱、在該框架中顯示的HTML文檔等。第19頁，共31頁。2框架定義格式 3框架應(yīng)用示例第20頁，共31頁。2.5.2 常用表單域標(biāo)記1 標(biāo)記格式：說明：標(biāo)記中可以有6個(gè)屬性，分別為：type、name、value、size、maxlength和checked。第21頁，共31頁。2 標(biāo)記格式： 文字 文字 3 標(biāo)記格式：第22頁，共31頁。2.6 HTML其他標(biāo)記2.6.1 動(dòng)態(tài)文字標(biāo)記格式：第23頁，共31頁。2.6.2 層

7、標(biāo)記格式： HTML元素序列第24頁，共31頁。2.6.3 嵌入多媒體信息標(biāo)記格式： 第25頁，共31頁。2.7 HTML文檔樣式 在HTML文檔中除了可用各種標(biāo)記對(duì)文字或段落等元素分別設(shè)置格式外，還可應(yīng)用樣式來進(jìn)行格式設(shè)置。在設(shè)計(jì)HTML網(wǎng)頁時(shí)，可采用下列方式定義和應(yīng)用樣式：l在文檔頭部定義樣式塊。l在文檔主體部分對(duì)個(gè)別元素（如段落、表格單元等）單獨(dú)定義樣式。l 使用外部樣式表或稱層疊樣式表CSS（Cascading Style Sheets）。第26頁，共31頁。2.7.1 在文檔頭部定義樣式1格式： HTML標(biāo)記屬性名稱：屬性值；屬性名稱：屬性值 HTML標(biāo)記屬性名稱：屬性值；屬性名稱：

8、屬性值 2樣式塊中的各種屬性第27頁，共31頁。屬 性說 明取 值Font-Size字體大小Points、 Inches、 Pixels、 CentimeterFont-Family字體FontNameFont-Weight字體粗細(xì)Lighter、 Medium、 BoldFont-Style斜體Normal、 ItalicLine-Height行距Points、 Inches、 Pixels、 CentimeterColor文本顏色ColorName、 RGB tripletText-Decoration文本修飾效果None、 Underline、 Italic、 Line-ThroughT

9、ext-Aligh文本對(duì)齊Left、 Right、 CenterText-Indent文本縮進(jìn)Points、 Inches、 Pixels、 CentimeterMargin-Left頁面左邊界Points、 Inches、 Pixels、 CentimeterMargin-Right頁面右邊界Points、 Inches、 Pixels、 CentimeterBackground背景圖片或顏色URL、 Color-Name、 RGB triplet第28頁，共31頁。2.7.2 為單個(gè)元素定義樣式對(duì)一些元素單獨(dú)設(shè)置style屬性示例：這是一段紅色粗體文字這是一個(gè)棕色宋體字標(biāo)題163網(wǎng)站 姓名 第29頁，共31頁。2.7.3 使用級(jí)聯(lián)樣式表CSS 級(jí)聯(lián)樣式表CSS實(shí)際上是用來規(guī)范HTML文檔格式的樣式定義文件，可統(tǒng)一定義網(wǎng)站中多個(gè)網(wǎng)頁內(nèi)容的顯示格式。減少