Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
TML 實(shí)例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>
實(shí)例解析
DOCTYPE 聲明了文檔類(lèi)型
位于標(biāo)簽 <html> 與 </html> 描述了文檔類(lèi)型
位于標(biāo)簽 <body> 與 </body> 為可視化網(wǎng)頁(yè)內(nèi)容
位于標(biāo)簽 <h1> 與 </h1> 作為一個(gè)標(biāo)題使用
位于標(biāo)簽 <p> 與 </p> 作為一個(gè)段落顯示
<!DOCTYPE html> 在HTML5中也是描述了文檔類(lèi)型。 |
什么是HTML?
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup Language
HTML 不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁(yè)面
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱(chēng)為 HTML 標(biāo)簽 (HTML tag)。
HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞,比如 <html>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如 <b> 和 </b>
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開(kāi)始和結(jié)束標(biāo)簽也被稱(chēng)為開(kāi)放標(biāo)簽和閉合標(biāo)簽
<標(biāo)簽>內(nèi)容</標(biāo)簽>
HTML 元素
"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴(yán)格來(lái)講, 一個(gè) HTML 元素包含了開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽,如下實(shí)例:
HTML 元素:
<p>這是一個(gè)段落。</p>
Web 瀏覽器
Web瀏覽器(如谷歌瀏覽器,Internet Explorer,F(xiàn)irefox,Safari)是用于讀取HTML文件,并將其作為網(wǎng)頁(yè)顯示。
瀏覽器并不是直接顯示的HTML標(biāo)簽,但可以使用標(biāo)簽來(lái)決定如何展現(xiàn)HTML頁(yè)面的內(nèi)容給用戶(hù):
HTML 網(wǎng)頁(yè)結(jié)構(gòu)
下面是一個(gè)可視化的HTML頁(yè)面結(jié)構(gòu):
<html>
<head>
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
</body>
</html>
只有 <body> 區(qū)域 (白色部分) 才會(huì)在瀏覽器中顯示。 |
HTML版本
從初期的網(wǎng)絡(luò)誕生后,已經(jīng)出現(xiàn)了許多HTML版本:
版本 | 發(fā)布時(shí)間 |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)。
網(wǎng)絡(luò)上有很多不同的文件,如果能夠正確聲明HTML的版本,瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容。
doctype 聲明是不區(qū)分大小寫(xiě)的,以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整網(wǎng)頁(yè)聲明類(lèi)型 DOCTYPE 參考手冊(cè)。
中文編碼
目前在大部分瀏覽器中,直接輸出中文會(huì)出現(xiàn)中文亂碼的情況,這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。
HTML 實(shí)例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁(yè)面標(biāo)題</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
一篇文章我們說(shuō)了單選框、多選框以及下拉框的使用,今天呢我們繼續(xù)看一下表單剩下的常用控件:提交按鈕以及重置按鈕。
提交按鈕,顧名思義就是當(dāng)我們填好了表單中的數(shù)據(jù)之后,我們需要通過(guò)提交按鈕來(lái)將數(shù)據(jù)傳遞到后臺(tái)的服務(wù)器中,供后臺(tái)程序使用。
使用語(yǔ)法:<input type="submit" value="提交數(shù)據(jù)">
詳細(xì)講解:
1、type:只有當(dāng)type值設(shè)置為submit時(shí),按鈕才有提交作用,才能正常的進(jìn)行表單的提交。(或者使用JavaScript代碼來(lái)觸發(fā)提交事件,這個(gè)到后期我們講解js的時(shí)候我進(jìn)行介紹)
2、value:按鈕上顯示的文字,顯示按鈕的名稱(chēng)。
當(dāng)用戶(hù)需要重置表單信息到初始時(shí)的狀態(tài)時(shí),比如用戶(hù)輸入“用戶(hù)名”后,發(fā)現(xiàn)書(shū)寫(xiě)有誤,可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。
使用語(yǔ)法:<input type="reset" value="重置數(shù)據(jù)">
詳細(xì)講解:
1、type:只有當(dāng)type值設(shè)置為reset時(shí),按鈕才有重置作用,點(diǎn)擊按鈕會(huì)將form表單內(nèi)的所有信息還原到初始未輸入的狀態(tài)。
2、value:按鈕上顯示的文字,顯示重置按鈕的名稱(chēng)
使用練習(xí):
我們創(chuàng)建一個(gè)表單,數(shù)據(jù)我們以post的形式提交到百度首頁(yè),表單里邊有姓名和年齡的輸入框,并且添加提交數(shù)據(jù)按鈕以及重置數(shù)據(jù)按鈕。具體代碼如下圖所示:
在網(wǎng)頁(yè)中的顯示效果就如下圖所示:
我們?cè)谛彰湍挲g輸入框中輸入內(nèi)容,點(diǎn)擊重置數(shù)據(jù)既可以清空里邊的內(nèi)容,還原到初始狀態(tài),點(diǎn)擊提交數(shù)據(jù)按鈕,那么數(shù)據(jù)將會(huì)提交到我們的指定鏈接處。
以上呢就是表單最常用的一些控件了,接下來(lái)我們對(duì)學(xué)到的表單知識(shí)進(jìn)行一次綜合的測(cè)試,我們來(lái)寫(xiě)一個(gè)完整的表單包含我們學(xué)到的所有知識(shí)。
我們?cè)谶@里就寫(xiě)一個(gè)網(wǎng)站制作常用的留言表,表格名稱(chēng)就叫留言表,然后表中包含有姓名輸入框、性別單選框(默認(rèn)選中男)、愛(ài)好多選框(默認(rèn)選中第一個(gè))、所在地區(qū)下拉框、留言?xún)?nèi)容多行文本框,以及提交信息按鈕和重置信息按鈕。數(shù)據(jù)提交呢我們還是提交到百度,提交類(lèi)型我們使用post。具體的代碼如下圖所示:
在網(wǎng)頁(yè)中的顯示效果就如下圖所示:
好了,到了這里我們的第一個(gè)表單就算是做完了,到這有人就會(huì)問(wèn)了,為什么別人的代碼在瀏覽器上看起來(lái)都是那么的規(guī)整,我這么寫(xiě)完看著怎么這么丑,接下來(lái)的文章我們將為大家介紹css的知識(shí)了,學(xué)習(xí)了css你也可以將你的頁(yè)面做的高達(dá)上起來(lái)。最后大家看完一定要自己動(dòng)手寫(xiě)一寫(xiě),只有自己寫(xiě)出的代碼才能體會(huì)到其中的樂(lè)趣,多加練習(xí)才是王道。
每日金句:人生最大的喜悅是每個(gè)人都說(shuō)你做不到,你卻完成它了!喜歡我的文章的小伙伴記得關(guān)注一下哦,每天將為你更新最新知識(shí)。
TML 基礎(chǔ)
非常簡(jiǎn)單的HTML文檔
HTML 標(biāo)題
HTML 段落
HTML 鏈接
HTML 圖片
實(shí)例解析
HTML 標(biāo)題
HTML 標(biāo)題
在html源碼中插入注釋
插入水平線
實(shí)例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文檔中折行的使用。
HTML 格式化的某些問(wèn)題。
實(shí)例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。
此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。
此例演示如何在 HTML 文件中寫(xiě)地址。
此例演示如何實(shí)現(xiàn)縮寫(xiě)或首字母縮寫(xiě)。
此例演示如何改變文字的方向。
此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語(yǔ)。
文本下劃線與刪除線
實(shí)例解析
HTML 樣式
HTML Style 元素
背景色樣式
字體樣式,顏色,大小
文本對(duì)齊樣式
設(shè)置文本字體
設(shè)置文本字體大小
設(shè)置文本字體顏色
設(shè)置文本字體,字體大小,字體顏色
HTML使用不同樣式
沒(méi)有下劃線的鏈接
鏈接到一個(gè)外部樣式表
實(shí)例解析
HTML 鏈接
創(chuàng)建超級(jí)鏈接
將圖像作為鏈接
在新的瀏覽器窗口打開(kāi)鏈接
鏈接到同一個(gè)頁(yè)面的不同位置
跳出框架
創(chuàng)建電子郵件鏈接
創(chuàng)建電子郵件鏈接 2
實(shí)例解析
HTML 圖像
插入圖像
從不同的位置插入圖片
排列圖片
本例演示如何使圖片浮動(dòng)至段落的左邊或右邊。
制作圖像鏈接
創(chuàng)建圖像映射
實(shí)例解析
HTML 表格
簡(jiǎn)單的表格
沒(méi)有邊框的表格
表格中的表頭
帶有標(biāo)題的表格
跨行或跨列的表格單元格
表格內(nèi)的標(biāo)簽
單元格邊距(Cell padding)
單元格間距(Cell spacing)
實(shí)例解析
HTML 列表
無(wú)序列表
有序列表
不同類(lèi)型的有序列表
不同類(lèi)型的無(wú)序列表
嵌套列表
嵌套列表 2
定義列表
實(shí)例解析
HTML Forms 和 Input
創(chuàng)建文本域(Text fields)
創(chuàng)建密碼域
復(fù)選框
單選按鈕
簡(jiǎn)單的下拉列表
預(yù)選下拉列表
本例演示如何創(chuàng)建一個(gè)文本域(多行文本輸入控件)。
創(chuàng)建一個(gè)按鈕
本例演示如何在數(shù)據(jù)周?chē)L制一個(gè)帶標(biāo)題的框。
帶有文本域與輸入域的表單
帶有復(fù)選框與提交按鈕的form表單
帶有單選框與提交按鈕的表單
發(fā)送郵件表單
實(shí)例解析
HTML iframe
內(nèi)聯(lián)框架 (HTML頁(yè)面中插入框架)
實(shí)例解析
HTML 頭部元素
描述了文檔標(biāo)題
HTML頁(yè)面中默認(rèn)的URL鏈接
提供文檔元數(shù)據(jù)
實(shí)例解析
HTML 腳本
插入一個(gè)腳本
使用 <noscript> 標(biāo)簽
實(shí)例解析
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。