網(wǎng)絡(luò)編輯必讀手冊(cè)4:HTML語(yǔ)言大全
網(wǎng)絡(luò)編輯必讀手冊(cè)4:HTML語(yǔ)言大全
HTML字體(Fonts)
在HTML里,可以用font這個(gè)元素及其屬性來(lái)設(shè)定字體的大小,顏色和字體風(fēng)格。
字體大小
用字體大小屬性(size)來(lái)設(shè)定字體的大小。示例代碼如下:
這一段的字體大小的值是2。
演示示例
字體風(fēng)格
用face屬性來(lái)設(shè)定字體風(fēng)格。示例代碼如下:
這一段的字體風(fēng)格是arial。
演示示例
字體顏色
用顏色屬性(color)來(lái)設(shè)定字體顏色。
字體顏色代碼請(qǐng)參見(jiàn)HTML顏色參考(HTML Color Reference)。
這一段的字體顏色是紅色
演示示例
注意
HTML4的標(biāo)準(zhǔn)中,已經(jīng)不建議使用font及其屬性來(lái)設(shè)定字體,而是建議用CSS來(lái)設(shè)定字體的大小,顏色,字體風(fēng)格等。有關(guān)CSS中和文字的相關(guān)屬性,請(qǐng)參見(jiàn)我們教程中的:
CSS常用文本屬性
CSS常用字體屬性
HTML背景顏色和背景圖片
HTML的 有兩個(gè)關(guān)于背景的屬性,一個(gè)是 bgcolor,是設(shè)置背景顏色的;另一個(gè)是 background,是設(shè)置背景圖片的。
bgcolor屬性
bgcolor屬性用來(lái)設(shè)置HTML網(wǎng)頁(yè)的背景顏色。
示例
background屬性
background屬性用來(lái)設(shè)置HTML網(wǎng)頁(yè)的背景圖片。background屬性值是背景圖片的路徑和文件名,如:
如果背景圖片小于網(wǎng)頁(yè)顯示窗口,那么這個(gè)背景圖片會(huì)自動(dòng)重復(fù)。
示例
建議
bgcolor和background這兩個(gè)的屬性,在新的HTML標(biāo)準(zhǔn)(HTML 4 and XHTML)里已不建議使用,而建議用CSS設(shè)置背景顏色和圖片。
為保證瀏覽器載入網(wǎng)頁(yè)的速度,建議盡量不要使用字節(jié)過(guò)大的圖片作為背景圖片。
HTML頭部信息(Head)
HTML頭部信息(head)里包含關(guān)于所在網(wǎng)頁(yè)的信息。頭部信息(head)里的內(nèi)容,主要是被瀏覽器所用,不會(huì)顯示在網(wǎng)頁(yè)的正文內(nèi)容里。
另外,搜索引擎如google,yahoo,baidu等也會(huì)查找你網(wǎng)頁(yè)中的head信息。為了讓搜索引擎能夠收錄你的網(wǎng)頁(yè),你也要填寫適當(dāng)?shù)膆ead信息。(網(wǎng)站被搜索引擎收錄,還有其它的方法,比如被其它網(wǎng)站鏈接,這里不贅述,請(qǐng)瀏覽搜索引擎網(wǎng)站。)
下面說(shuō)幾個(gè)常用的head信息里的html元素,如標(biāo)題(title),鏈接(link),樣式(style)以及關(guān)于信息(meta)。
標(biāo)題(title)
標(biāo)題(title)是最常用的head信息。它不顯示在HTML網(wǎng)頁(yè)正文里,顯示在瀏覽器窗口的標(biāo)題欄里。見(jiàn)圖:
示例代碼如下:HTML中文教程頭部信息(head)之標(biāo)題(title)說(shuō)明
鏈接(link)
用鏈接(link)可以建立和外部文件的鏈接。常用的是對(duì)CSS外部樣式表(external style sheet)的鏈接。示例代碼如下:
有關(guān)CSS外部樣式表和示例,詳見(jiàn)CSS簡(jiǎn)介。
樣式(style)
用樣式(style)可以設(shè)值網(wǎng)頁(yè)的內(nèi)部樣式表(internal style sheet)。示例代碼如下: body {background-color:white; color:black;} h1 {font: 18pt arial bold;}
有關(guān)CSS內(nèi)部樣式表和示例,詳見(jiàn)CSS簡(jiǎn)介。
關(guān)于網(wǎng)頁(yè)信息(meta)
在計(jì)算機(jī)語(yǔ)言里,你經(jīng)?梢钥吹揭粋(gè)前綴 -- meta,meta是“關(guān)于”(about)的意思。
這meta解釋起來(lái)比較拗口,比如metadata,意為描述data的data,英文即data about data。還有一個(gè)詞叫metalanguage,表示一種描述其它語(yǔ)言的語(yǔ)言。再舉一個(gè)例子,metafile,表示描述其它文件的文件。
在HTML里,meta標(biāo)記(meta tags)表示用來(lái)描述網(wǎng)頁(yè)的有關(guān)信息。示例代碼如下:
利用meta中的Refresh你還可以實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)頁(yè)面的功能。示例代碼:
演示示例
HTML頭部信息(Head)
HTML頭部信息(head)里包含關(guān)于所在網(wǎng)頁(yè)的信息。頭部信息(head)里的內(nèi)容,主要是被瀏覽器所用,不會(huì)顯示在網(wǎng)頁(yè)的正文內(nèi)容里。
另外,搜索引擎如google,yahoo,baidu等也會(huì)查找你網(wǎng)頁(yè)中的head信息。為了讓搜索引擎能夠收錄你的網(wǎng)頁(yè),你也要填寫適當(dāng)?shù)膆ead信息。(網(wǎng)站被搜索引擎收錄,還有其它的方法,比如被其它網(wǎng)站鏈接,這里不贅述,請(qǐng)瀏覽搜索引擎網(wǎng)站。)
下面說(shuō)幾個(gè)常用的head信息里的html元素,如標(biāo)題(title),鏈接(link),樣式(style)以及關(guān)于信息(meta)。
標(biāo)題(title)
標(biāo)題(title)是最常用的head信息。它不顯示在HTML網(wǎng)頁(yè)正文里,顯示在瀏覽器窗口的標(biāo)題欄里。見(jiàn)圖:
示例代碼如下:
HTML中文教程頭部信息(head)之標(biāo)題(title)說(shuō)明
鏈接(link)
用鏈接(link)可以建立和外部文件的鏈接。常用的是對(duì)CSS外部樣式表(external style sheet)的鏈接。示例代碼如下:
有關(guān)CSS外部樣式表和示例,詳見(jiàn)CSS簡(jiǎn)介。
樣式(style)
用樣式(style)可以設(shè)值網(wǎng)頁(yè)的內(nèi)部樣式表(internal style sheet)。示例代碼如下:
body {background-color:white; color:black;}
h1 {font: 18pt arial bold;}
有關(guān)CSS內(nèi)部樣式表和示例,詳見(jiàn)CSS簡(jiǎn)介。
關(guān)于網(wǎng)頁(yè)信息(meta)
在計(jì)算機(jī)語(yǔ)言里,你經(jīng)?梢钥吹揭粋(gè)前綴 -- meta,meta是“關(guān)于”(about)的意思。
這meta解釋起來(lái)比較拗口,比如metadata,意為描述data的data,英文即data about data。還有一個(gè)詞叫metalanguage,表示一種描述其它語(yǔ)言的語(yǔ)言。再舉一個(gè)例子,metafile,表示描述其它文件的文件。
在HTML里,meta標(biāo)記(meta tags)表示用來(lái)描述網(wǎng)頁(yè)的有關(guān)信息。示例代碼如下:
利用meta中的Refresh你還可以實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)頁(yè)面的功能。示例代碼:
演示示例
HTML代碼示例
HTML文本格式示例
一個(gè)非常簡(jiǎn)單的HTML文件HTML簡(jiǎn)單段落在HTML寫多個(gè)段落在HTML里如何換行HTML正文標(biāo)題HTML居中顯示的標(biāo)題在HTML文件里加一條橫線(horizontal rule)HTML文件的代碼注釋HTML常用格式TagHTML預(yù)格式文本(preformatted text)HTML不同計(jì)算機(jī)輸出的TagHTML里加入地址HTML里表示刪除插入的Tag
HTML超鏈接示例
如何創(chuàng)建HTML超鏈接(hyperlinks)將圖片作為一個(gè)超鏈接在HTML文件里跳轉(zhuǎn)在新窗口打開(kāi)一個(gè)鏈接鏈接到一個(gè)郵箱地址
HTML表格(Table)示例
HTML簡(jiǎn)單表格沒(méi)有邊界的表格有邊界的表格HTML表格的表頭表格空單元格帶標(biāo)題的表格包含多行或多列的表格單元格一個(gè)表格單元格里的內(nèi)容表格的單元格內(nèi)容和單元格邊界之間的距離(CellPadding)表格中單元格之間的距離(Cellspacing)給表格加背景顏色或者背景圖片表格單元格對(duì)齊方式(align)表格的單元格背景顏色和背景圖片
HTML框架(Frame)示例
列分的框架(Frame, cols)行分的框架(Frame, rows)既有行分又有列分的框架(Frame, rows, cols)用框架(Frame)導(dǎo)航使用內(nèi)嵌框架(IFrame)如何固定框架(Frame)大小
HTML列表(List)示例
不排序列表(Unordered List)排序列表(ordered list)不排序列表的類型(Type)設(shè)置嵌套的列表(nested list)定義列表(definition list)HTML不同類型(Type)的排序列表
HTML表單(Form)示例
HTML表單控件-單行文本輸入框HTML表單控件-密碼輸入框HTML表單控件-復(fù)選框(checkbox)HTML表單控件-復(fù)選框(checkbox)缺省已選(checked)HTML表單控件-單選框(radio)HTML表單控件-單選框(radio)缺省已選(checked)HTML表單控件(Form Control)-下拉框(select)單選HTML表單控件-下拉框(select)多選(multiple)HTML表單控件-下拉框多選-下拉框設(shè)置(size)HTML表單控件-多行輸入框(textarea)HTML表單控件-圖片提交(input type=image)
HTML圖片(Image)示例
在HTML里插入圖片HTML里圖片的對(duì)齊方式(Align)HTML的圖片大小(Height,Width)HTML圖片的說(shuō)明(Alt屬性)
HTML字體(font)示例
HTML字體大小(font size)HTML字體顏色(font color)HTML字體風(fēng)格(font face)
HTML網(wǎng)頁(yè)背景顏色和背景圖片示例
HTML背景顏色HTML里加背景圖片
HTML頭部信息(Head)示例
利用Meta的Refresh自動(dòng)跳轉(zhuǎn)到指定頁(yè)面