HTML語言(上)

1、超文本標記語言-HTML（上）WEB技術(shù)Html是通向web技術(shù)世界的鑰匙WEB2一 什么是 HTML二 HTML 文檔三 HTML 標簽四 常用標簽五 HTML 表格六 HTML 背景附： 實例解析附： Web顏色目錄WEB3一什么是HTML?用來描述網(wǎng)頁的一種計算機語言英文全稱：Hyper Text Markup Language中文全稱：超文本標記語言!4一什么是HTML?HTML是一種標記語言，不是一種編程語言，它對大小寫不敏感。標記語言編程語言 標記語言標記語言就是一套標記標簽通過標記標簽來描述網(wǎng)頁的結(jié)構(gòu)和樣式?jīng)]有邏輯和算法，被動等待計算機讀取編程語言具有邏輯性和算法具有主動行為能力

2、，可向計算機發(fā)出指令常用的有C語言、C+、ASP、JAVA等WEB5二HTML文檔網(wǎng)頁HTML文檔等于HTML文檔也被稱為網(wǎng)頁，它包含html標簽和純文本之間的文本描述網(wǎng)頁之間的文本是頭文件之間的文本是網(wǎng)頁title之間的文本是網(wǎng)頁可見內(nèi)容 文檔的標題 這里是文檔的內(nèi)容 文檔基本結(jié)構(gòu)文檔 基本結(jié)構(gòu)文檔 代碼二HTML文檔備注：備注：HTMLHTML代碼一定要使用英文字符，否則不能識別代碼一定要使用英文字符，否則不能識別 。 如如 中文字符的雙引號中文字符的雙引號”和英文字符的雙引號和英文字符的雙引號“”“” 文檔編輯器二HTML文檔專業(yè)的 HTML 編輯器，功能強大使用復雜Dreamweave

3、rNotepad記事本記事本強 烈 推 薦 初 學 者 使 用 ， 更 有 利 于 學 習 Notepad使用方法二HTML文檔. 新建記事本 TEST1.txt. 保存并重命名為 TEST1.html1234. 記事本中輸入 HTML 代碼. 打開這個 .html 文件WEB9三HTML標簽雙標簽單標簽注釋標簽HTML標簽：就是尖括號包圍的關(guān)鍵詞，比如等三HTML標簽 標簽的分類標簽是成對出現(xiàn)的標簽對中第一個是開始標簽，第二個是結(jié)束標簽例子： 雙標簽標簽是單獨出現(xiàn)的例子： 單標簽, 開始尖括號之后緊跟！瀏覽器會忽略它們，也不顯示它們注釋標簽可提高代碼可讀性例子：注釋標簽三三HTML標簽標簽標

4、簽是擁有屬性的，且屬性總是在開始標簽中規(guī)定 標簽的屬性未使用屬性使用屬性注釋超鏈接標簽 鏈接的地址 =屬性Href的值表格標簽 表格填充色 =屬性bgcolor的值一個標簽可以擁有多個屬性WEB12S l o w l y a n d S t e a d i l y四常用標簽最常用的標簽定義HTML文檔字體加粗定義表格文檔的主體字體/大小/顏色表格的行文檔頭文件超鏈接表格的單元格文檔的標題圖像合并的單元格 to 文檔內(nèi)容的標題定義無序列表段落列表的條目水平線定義 有序列表換行定義 塊13 常用標簽 1四常用標簽定義HTML文檔文檔的主體文檔頭文件文檔的標題 文檔的標題 這里是文檔的內(nèi)容 標 簽代

5、 碼網(wǎng) 頁 效 果14常用標簽 2四常用標簽 這是一級標題 這是二級標題 這是三級標題 這是四級標題 這是五級標題 這是六級標題 to , 定義HTML文檔內(nèi)容的六級標題代 碼網(wǎng) 頁 效 果15常用標簽 3四常用標簽 這是第一段 這是第二段 這是第三段 段落標簽16常用標簽 4四常用標簽 換行，換行，不換行 換行標簽17常用標簽 5四常用標簽 不加粗，加粗 加粗標簽18常用標簽 6四常用標簽 水平線 水平線標簽的三個屬性sizecoloralignwidth19常用標簽 7四常用標簽 字號 顏色 字體 綜合 字體標簽的三個屬性sizeColorface20常用標簽 8四常用標簽 字號 顏色 注

6、釋標簽瀏覽器不顯示注釋標簽注釋標簽提高代碼可讀性21常用標簽 9四常用標簽 點擊下面的鏈接，在新窗口中打開百度 Go To Baidu 點擊下面的鏈接，在本窗口中打開百度 Go To Baidu 超鏈接標簽的二個主要屬性hreftarget22常用標簽 10四常用標簽 蘇州 杭州 上海 無序標簽23常用標簽 11四常用標簽 蘇州 杭州 上海 有序標簽24常用標簽 12四常用標簽 圖像標簽TEST1.html 網(wǎng)頁在“Q”盤里琥珀,jpg 圖片在“Q/圖文”里WEB25表格用來呈現(xiàn)數(shù)據(jù)或頁面布局五HTML 表格表表格格 數(shù)數(shù) 布布據(jù)據(jù) 局局26HTML表格 1五HTML 表格定義表格表格的行單元

7、格標 簽代 碼 第1行1列 第1行2列 第2行1列 第2行2列 網(wǎng) 頁 效 果兩行兩列表格27HTML表格 2五HTML 表格代 碼 第1行1列第1行2列 第2行1列第2行2列 第3行1列第3行2列 第4行1列第4行2列 網(wǎng) 頁 效 果四行兩列表格28HTML表格 3五HTML 表格代 碼 正確的空單元格 正確&nbsp &nbsp 錯誤的空單元格 錯誤 網(wǎng) 頁 效 果空單元格29HTML表格 4五HTML 表格代 碼 跨列單元格 1行3列 2行1列2行2列 2行3列 網(wǎng) 頁 效 果跨列表格30HTML表格 5五HTML 表格代 碼 跨行單元格 1行2列 2行2列 3行2列 4

8、行1列 4行2列 網(wǎng) 頁 效 果跨行表格31HTML表格 6五HTML 表格代 碼 下面是邊框粗細為1的表格 1磅 邊框 下面是邊框粗細為8的表格 8磅 邊框 網(wǎng) 頁 效 果屬性border32HTML表格 7五HTML 表格代 碼 下面的表格寬150磅 表格 寬150磅 下面的表格寬250磅 表格 寬250磅 網(wǎng) 頁 效 果屬性width33HTML表格 8五HTML 表格代 碼 左對齊 居中 右對齊 網(wǎng) 頁 效 果屬性align34HTML表格 9五HTML 表格代 碼 下面的表格填充綠色背景 綠色填充 下面的表格填充藍色背景 藍色填充 網(wǎng) 頁 效 果屬性bgcolorWEB35背景有約和網(wǎng)頁美化的重要方式之一六HTML 背景36HTML背景 1六HTML 背景純 色 背 景 這是一個純色背景網(wǎng)頁 這是一個純色背景網(wǎng)頁 這是一個純色背景網(wǎng)頁 這是一個純色背景網(wǎng)頁37HTML背景 2六HTML 背景 這是一個圖片背景網(wǎng)頁 這是一個圖片背景