HTML語法教學.ppt

1、HTML 語 法 教 學,2/64,HTML語法教學,2020年7月29日星期三,網(wǎng)頁架構(gòu) 分隔標簽 排版標簽 字體標簽 文字標簽 影像標簽 背景標簽,鏈接標簽 表格標簽 序列標簽 表單標簽 框架標簽 其他技巧,認識HTML語法,3/64,HTML語法教學,2020年7月29日星期三,網(wǎng)頁架構(gòu),網(wǎng)頁制作教學BODY之間則為主要語法所在，也是網(wǎng)頁的主要呈現(xiàn)部分。,4/64,HTML語法教學,2020年7月29日星期三,分隔標簽-【文字上的分隔標簽】,使用方法：強制斷行標簽、強制分段標簽,5/64,HTML語法教學,2020年7月29日星期三,分隔標簽-【分隔線標簽】,使用方法：上一段文字內(nèi)容下一

2、段文字內(nèi)容,6/64,HTML語法教學,2020年7月29日星期三,分隔標簽-【分隔線標簽】,使用方法：上一段文字內(nèi)容下一段文字內(nèi)容,7/64,HTML語法教學,2020年7月29日星期三,分隔標簽-【分隔線標簽】,使用方法：上一段文字內(nèi)容下一段文字內(nèi)容,8/64,HTML語法教學,2020年7月29日星期三,分隔標簽-【分隔線標簽】,使用方法：上一段文字內(nèi)容下一段文字內(nèi)容,9/64,HTML語法教學,2020年7月29日星期三,分隔標簽-【分隔線標簽】,使用方法：上一段文字內(nèi)容下一段文字內(nèi)容,10/64,HTML語法教學,2020年7月29日星期三,分隔標簽-【分隔線標簽】,使用方法：上一段

3、文字內(nèi)容下一段文字內(nèi)容,11/64,HTML語法教學,2020年7月29日星期三,排版標簽-【文字置左、置中、置右】,使用方法：分段標簽再加上一些簡單的屬性設(shè)定，就可以讓其整個文字段落置左、置中或置右了。,12/64,HTML語法教學,2020年7月29日星期三,排版標簽-【置中標簽】,使用方法： 這是置中,13/64,HTML語法教學,2020年7月29日星期三,排版標簽-【向右縮排標簽】,使用方法： 要縮排的文字,14/64,HTML語法教學,2020年7月29日星期三,排版標簽-【保存原始格式標簽】,使用方法：文字內(nèi)容,15/64,HTML語法教學,2020年7月29日星期三,字體標簽-

4、【標題標簽】,使用方法：標題內(nèi)容,16/64,HTML語法教學,2020年7月29日星期三,字體標簽-【設(shè)定字體大小標簽】,使用方法：文字內(nèi)容,17/64,HTML語法教學,2020年7月29日星期三,字體標簽-【字型變化標簽】,使用方法：文字,18/64,HTML語法教學,2020年7月29日星期三,字體標簽-【文字顏色設(shè)定】,使用方法：文字顏色,19/64,HTML語法教學,2020年7月29日星期三,文字標簽-【文字字型設(shè)定】,使用方法：文字,20/64,HTML語法教學,2020年7月29日星期三,文字標簽-【特殊字元】,使用方法： ；,21/64,HTML語法教學,2020年

5、7月29日星期三,文字標簽-【設(shè)定文字內(nèi)定值大小】,使用方法： 說 明： 改變文字大小的默認值； 標簽之后； 一般預定值為3。,22/64,HTML語法教學,2020年7月29日星期三,影像標簽-【影像標簽】,使用方法： ,23/64,HTML語法教學,2020年7月29日星期三,影像標簽-【網(wǎng)頁影像重要觀念】,路徑：,24/64,HTML語法教學,2020年7月29日星期三,影像標簽-【網(wǎng)頁影像重要觀念】,影像單位： 影像格式：,25/64,HTML語法教學,2020年7月29日星期三,背景標簽,使用方法：,26/64,HTML語法教學,2020年7月29日星期三,背景標簽,使用方法：,27

6、/64,HTML語法教學,2020年7月29日星期三,背景標簽-【內(nèi)文、鏈接文字顏色設(shè)定】,使用方法： ,28/64,HTML語法教學,2020年7月29日星期三,背景標簽-【內(nèi)文、鏈接文字顏色設(shè)定】,使用方法： ,29/64,HTML語法教學,2020年7月29日星期三,背景標簽-【內(nèi)文、鏈接文字顏色設(shè)定】,使用方法： ,已連結(jié)顏色,30/64,HTML語法教學,2020年7月29日星期三,背景標簽-【內(nèi)文、鏈接文字顏色設(shè)定】,使用方法： ,已連結(jié)顏色,31/64,HTML語法教學,2020年7月29日星期三,鏈接標簽-【W(wǎng)WW鏈接標簽基本概念】,相對路徑、絕對路徑,32/64,HTML語法

7、教學,2020年7月29日星期三,鏈接標簽-【網(wǎng)頁內(nèi)部的鏈接】,使用方法： 先在欲連結(jié)處作記號：這里是你想連結(jié)的點 設(shè)定連結(jié)：連結(jié),33/64,HTML語法教學,2020年7月29日星期三,鏈接標簽-【網(wǎng)頁外部的鏈接】,34/64,HTML語法教學,2020年7月29日星期三,表格標簽-【網(wǎng)頁中的表格】,一個2行3列的表格 步驟1：利用標簽告訴電腦我要做一個表格； 步驟2：利用一組標簽先做一行，然后在行中利用三組標簽再分出三個單元格； 步驟3：重復第二個步驟，再做一行然后再分三欄，如此才能得到一個3行2列的表格。,35/64,HTML語法教學,2020年7月29日星期三,表格標簽-【連結(jié)標簽的

8、參數(shù)】,使用方法：在連結(jié)后面加入 target=_參數(shù),36/64,HTML語法教學,2020年7月29日星期三,表格標簽-【連結(jié)標簽的參數(shù)】,使用方法：在連結(jié)后面加入 target=_參數(shù),37/64,HTML語法教學,2020年7月29日星期三,表格標簽-【合并表格欄位】,上下合并（行間的合并） 左右合并（列間的合并）,38/64,HTML語法教學,2020年7月29日星期三,表格標簽-【合并表格欄位】,上下合并（行間的合并） 左右合并（列間的合并）,39/64,HTML語法教學,2020年7月29日星期三,表格標簽-【表格欄位對齊位置設(shè)定】,例：一個寬100、高60的表格,40/64,H

9、TML語法教學,2020年7月29日星期三,表格標簽-【表格背景、底色設(shè)定】,41/64,HTML語法教學,2020年7月29日星期三,表格標簽-【表格背景、底色設(shè)定】,42/64,HTML語法教學,2020年7月29日星期三,表格標簽-【表格框線設(shè)定】,43/64,HTML語法教學,2020年7月29日星期三,表格標簽-【表格欄距設(shè)定】,44/64,HTML語法教學,2020年7月29日星期三,序列標簽-【無序標簽】,使用方法：,TYPE：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）,45/64,HTML語法教學,2020年7月29日星期三,序列標簽-【有序標簽】,使

10、用方法：,TYPE： 1（數(shù)字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）,46/64,HTML語法教學,2020年7月29日星期三,序列標簽-【列表標簽】,CSS（Cascading style sheet） CSS是由W3C于1996年12月所公布的一項新技術(shù)，什么叫做Cascading style sheet？簡單說來他是一種具有階層性的形式設(shè)定，能夠讓網(wǎng)頁設(shè)計者在設(shè)計網(wǎng)頁時，對于網(wǎng)頁上的任何物件均有更佳的操控性,47/64,HTML語法教學,2020年7月29日星期三,序列標簽-【列表標簽】,48/64,HTML語法教學,2020年7月29日星期三

11、,表單標簽-【各種輸入類型】,1、文本輸入框,NAME=名稱，設(shè)定名稱。 SIZE=數(shù)值，設(shè)定寬度。 VALUE=預設(shè)內(nèi)容。 ALIGN=“對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、 BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。 MAXLENGTH=數(shù)值，設(shè)定最大長度。,49/64,HTML語法教學,2020年7月29日星期三,表單標簽-【各種輸入類型】,2、單選表單,NAME=名稱。 VALUE=“內(nèi)容”，設(shè)

12、定此欄的內(nèi)容、值或是意義。 ALIGN=對齊方式，是設(shè)定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。 CHECKED，是設(shè)定此一欄位為預設(shè)選取值。,50/64,HTML語法教學,2020年7月29日星期三,表單標簽-【各種輸入類型】,3、復選框表單,NAME=名稱。 VALUE=內(nèi)容，設(shè)定此欄的內(nèi)容、值或是意義。 ALIGN=對齊方式，是設(shè)定此一欄位的對齊方式

13、，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。 CHECKED，設(shè)定此欄為預設(shè)選取值。,51/64,HTML語法教學,2020年7月29日星期三,表單標簽-【各種輸入類型】,4、密碼框表單,NAME=“名稱”。 SIZE=數(shù)值，設(shè)定此欄顯現(xiàn)的寬度。 VALUE=“內(nèi)容”，設(shè)定此欄預設(shè)內(nèi)容。 ALIGN=對齊方式，是設(shè)定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（

14、向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。 MAXLENGTH=數(shù)值，設(shè)定此欄位可輸入的最大長度。,52/64,HTML語法教學,2020年7月29日星期三,表單標簽-【各種輸入類型】,5、提交按鈕,NAME=“名稱”。 VALUE=“內(nèi)容”，設(shè)定此欄預設(shè)內(nèi)容。 ALIGN=對齊方式，是設(shè)定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEF

15、T（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。,53/64,HTML語法教學,2020年7月29日星期三,表單標簽-【各種輸入類型】,6、普通按鈕,NAME=“名稱”。 VALUE=“內(nèi)容”，設(shè)定此欄預設(shè)內(nèi)容。 ALIGN=對齊方式，是設(shè)定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABS

16、BOTTOM（絕對置下）等。,54/64,HTML語法教學,2020年7月29日星期三,表單標簽-【各種輸入類型】,7、隱藏表單,NAME=“名稱”。 VALUE=“內(nèi)容”，設(shè)定此欄值、文字或意義。,55/64,HTML語法教學,2020年7月29日星期三,表單標簽-【大量文字輸入元件】,NAME=名稱。 WRAP=“設(shè)定值”，是設(shè)定此元件的換行模式。三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，發(fā)送資料時，也視為沒有換行）、PHYSICAL（輸入文字會自動換行，發(fā)送資料時，會將螢幕上的自動換行，視為換行效果送出）。

17、 COLS=數(shù)值，設(shè)定列數(shù)。 ROWS=“數(shù)值”，設(shè)定行數(shù)。,56/64,HTML語法教學,2020年7月29日星期三,表單標簽-【下拉式選單】,SIZE=“數(shù)值”，是設(shè)定選單大小。 MULTIPLE，設(shè)定選單為復選。,57/64,HTML語法教學,2020年7月29日星期三,框架標簽,58/64,HTML語法教學,2020年7月29日星期三,框架標簽-【開始分割1】,59/64,HTML語法教學,2020年7月29日星期三,框架標簽-【開始分割2】,60/64,HTML語法教學,2020年7月29日星期三,框架標簽-【開始分割3】,61/64,HTML語法教學,2020年7月29日星期三,框架標簽-【其他標簽參數(shù)說明】,COLS=“120,*”，垂直切割畫面，三組、四組； ROWS=“120,*”，橫向切割畫面。 frameborder=0，設(shè)定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。 framespacing=5，表示框架與框架間保留空白的距離。,62/64,HTML語法教學,2020年7月29日星期三,框架標簽-【其他標簽參數(shù)說明】,SRC=“a.htm”，設(shè)定此框架中要顯示的網(wǎng)頁名稱。 NAME=“1”，設(shè)定這個框架的名稱。 frameborder=0，同上。 scrolling=“no”，設(shè)定是否要顯示卷軸。 Noresize，