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