HTML&CSS超文本標(biāo)記語言編程
時間：2023-09-05 21:54:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-05 21:54:01 來源：網(wǎng)站運(yùn)營
HTML&CSS超文本標(biāo)記語言編程：超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用。
“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。
詳細(xì)介紹1）、由來萬維網(wǎng)上的一個超媒體文檔稱之為一個頁面（外語：page）。作為一個組織或者個人在萬維網(wǎng)上放置開始點(diǎn)的頁面稱為主頁（外語：Homepage）或首頁，主頁中通常包括有指向其他相關(guān)頁面或其他節(jié)點(diǎn)的指針（超級鏈接），所謂超級鏈接，就是一種統(tǒng)一資源定位器（Uniform Resource Locator，外語縮寫：URL）指針，通過激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。在邏輯上將視為一個整體的一系列頁面的有機(jī)集合稱為網(wǎng)站（Website或Site）。超級文本標(biāo)記語言（英文縮寫：HTML）是為“網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語言。
網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。
2）、定義超級文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，
它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫出錯的標(biāo)記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。
語言特點(diǎn)超級文本標(biāo)記語言文檔制作不是很復(fù)雜，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是萬維網(wǎng)（WWW）盛行的原因之一，其主要特點(diǎn)如下：
1）、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便。
2）、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。
3）、平臺無關(guān)性：雖然個人計(jì)算機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，超級文本標(biāo)記語言可以使用在廣泛的平臺上，這也是萬維網(wǎng)（WWW）盛行的另一個原因。
4）、通用性：另外，HTML是網(wǎng)絡(luò)的通用語言,一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。
書寫方式 編輯 它其實(shí)是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為三種，
基本文本、文檔編輯軟件，使用微軟自帶的記事本或?qū)懽职宥伎梢跃帉?，?dāng)然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴(kuò)展名，這樣就方便瀏覽器認(rèn)出直接解釋執(zhí)行了。
推薦編輯器：Dreamweaver、HBuilder、Sublime Text代碼編輯器。
整體結(jié)構(gòu)一個網(wǎng)頁對應(yīng)多個HTML文件，超文本標(biāo)記語言文件以.htm（磁盤操作系統(tǒng)DOS限制的外語縮寫）為擴(kuò)展名或.html（外語縮寫）為擴(kuò)展名?？梢允褂萌魏文軌蛏蒚XT類型源文件的文本編輯器來產(chǎn)生超文本標(biāo)記語言文件，只用修改文件后綴即可。
標(biāo)準(zhǔn)的超文本標(biāo)記語言文件都具有一個基本的整體結(jié)構(gòu)，標(biāo)記一般都是成對出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語言文件的開頭與結(jié)尾標(biāo)志和超文本標(biāo)記語言的頭部與實(shí)體兩大部分。有三個雙標(biāo)記符用于頁面整體結(jié)構(gòu)的確認(rèn)。
標(biāo)記符<html>,說明該文件是用超文本標(biāo)記語言（本標(biāo)簽的中文全稱）來描述的,它是文件的開頭;而</html>,則表示該文件的結(jié)尾，它們是超文本標(biāo)記語言文件的開始標(biāo)記和結(jié)尾標(biāo)記。
頭部內(nèi)容<head></head>；這2個標(biāo)記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標(biāo)記是頁面的標(biāo)題、序言、說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。頭部中最常用的標(biāo)記符是標(biāo)題標(biāo)記符和meta標(biāo)記符，其中標(biāo)題標(biāo)記符用于定義網(wǎng)頁的標(biāo)題，它的內(nèi)容顯示在網(wǎng)頁窗口的標(biāo)題欄中，網(wǎng)頁標(biāo)題可被瀏覽器用作書簽和收藏清單。
設(shè)置文檔標(biāo)題和其它在網(wǎng)頁中不顯示的信息，比如direction方向、語言代碼Language Code（實(shí)體定義!ENTITY % i18n）、指定字典中的元信息、等等。
主體內(nèi)容<body></body>；，網(wǎng)頁中顯示的實(shí)際內(nèi)容均包含在這2個正文標(biāo)記符之間。正文標(biāo)記符又稱為實(shí)體標(biāo)記。
發(fā)展歷史 超文本標(biāo)記語言（第一版）——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）：
HTML 2.0——1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時
HTML 3.2——1997年1月14日，W3C推薦標(biāo)準(zhǔn)
HTML 4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)
HTML 4.01（微小改進(jìn)）——1999年12月24日，W3C推薦標(biāo)準(zhǔn)
HTML 5——2014年10月28日，W3C推薦標(biāo)準(zhǔn)[4] （詳見本處參考資料）
ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日發(fā)布，基于嚴(yán)格的HTML 4.01語法，是國際標(biāo)準(zhǔn)化組織和國際電工委員會的標(biāo)準(zhǔn)。
Wijmo是基于HTML5、jQuery、CSS3和SVG的一個控件包，能夠滿足構(gòu)建當(dāng)今Web系統(tǒng)的需求?；赪ijmo，您的系統(tǒng)運(yùn)行將更加快速和流暢，外觀也會更加引人入勝。Wijmo中所有新的控件都是在符合最新的UI設(shè)計(jì)潮流的基礎(chǔ)上，對新的以及改良后的主題進(jìn)行封裝。優(yōu)美的、專業(yè)的控件外觀會讓您的應(yīng)用程序引人注目。比如 ComponentOne Studio for ASP .NET Wijmo 控件包內(nèi)置的6個主題，同時可以使用jQuery UI項(xiàng)目提供的 30 多個主題，甚至可以使用 ThemeRoller 創(chuàng)建屬于您自己的系統(tǒng)主題。
HTML沒有1.0版本是因?yàn)楫?dāng)時有很多不同的版本。有些人認(rèn)為蒂姆·伯納斯-李的版本應(yīng)該算初版，這個版本沒有IMG元素。當(dāng)時被稱為HTML+的后續(xù)版的開發(fā)工作于1993年開始，最初是被設(shè)計(jì)成為“HTML的一個超集”。第一個正式規(guī)范為了和當(dāng)時的各種HTML標(biāo)準(zhǔn)區(qū)分開來，使用了2.0作為其版本號。HTML+的發(fā)展繼續(xù)下去，但是它從未成為標(biāo)準(zhǔn)。
HTML3.0規(guī)范是由當(dāng)時剛成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字繞排和復(fù)雜數(shù)學(xué)元素的顯示。雖然它是被設(shè)計(jì)用來兼容2.0版本的，但是實(shí)現(xiàn)這個標(biāo)準(zhǔn)的工作在當(dāng)時過于復(fù)雜，在草案于1995年9月過期時，標(biāo)準(zhǔn)開發(fā)也因?yàn)槿狈g覽器支持而中止了。3.1版從未被正式提出，而下一個被提出的版本是開發(fā)代號為Wilbur的HTML 3.2，去掉了大部分3.0中的新特性，但是加入了很多特定瀏覽器，例如Netscape和Mosaic的元素和屬性。HTML對數(shù)學(xué)公式的支持最后成為另外一個標(biāo)準(zhǔn)MathML。
HTML 4.0同樣也加入了很多特定瀏覽器的元素和屬性，但是同時也開始“清理”這個標(biāo)準(zhǔn)，把一些元素和屬性標(biāo)記為過時，建議不再使用它們。HTML的未來和CSS結(jié)合會更好。
HTML 5草案的前身名為Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。在2008年1月22日，第一份正式草案發(fā)布。
XHTML1.0——發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1日重新發(fā)布。
XHTML 1.1，于2001年5月31日發(fā)布，W3C推薦標(biāo)準(zhǔn)。
XHTML 2.0，W3C工作草案。
XHTML 5，從XHTML 1.x的更新版，基于HTML 5草案。
HTML4.01 是常見的版本。
相關(guān)要求HTML在編輯超文本標(biāo)記語言文件和使用有關(guān)標(biāo)記符時有一些約定或默認(rèn)的要求。
文本標(biāo)記語言源程序的文件擴(kuò)展名默認(rèn)使用htm（磁盤操作系統(tǒng)DOS限制的外語縮寫為擴(kuò)展名）或html（外語縮寫為擴(kuò)展名），以便于操作系統(tǒng)或程序辨認(rèn)，除自定義的漢字?jǐn)U展名。在使用文本編輯器時，注意修改擴(kuò)展名。而常用的圖像文件的擴(kuò)展名為gif和jpg。
超文本標(biāo)記語言源程序?yàn)槲谋疚募?，其列寬可不受限制，即多個標(biāo)記可寫成一行，甚至整個文件可寫成一行；若寫成多行，瀏覽器一般忽略文件中的回車符（標(biāo)記指定除外）；對文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號（實(shí)體符）“ （注意此字母必須小寫，方可空格）”表示非換行空格；表示文件路徑時使用符號“/”分隔，文件名及路徑描述可用雙引號也可不用引號括起。
標(biāo)記符中的標(biāo)記元素用尖括號括起來，帶斜杠的元素表示該標(biāo)記說明結(jié)束；大多數(shù)標(biāo)記符必須成對使用，以表示作用的起始和結(jié)束；標(biāo)記元素忽略大小寫，即其作用相同，但完整的空格可使用特殊符號“ （注意此字母必須小寫，方可空格）”；許多標(biāo)記元素具有屬性說明，可用參數(shù)對元素作進(jìn)一步的限定，多個參數(shù)或?qū)傩皂?xiàng)說明次序不限，其間用空格分隔即可；一個標(biāo)記元素的內(nèi)容可以寫成多行。
標(biāo)記符號，包括尖括號、標(biāo)記元素、屬性項(xiàng)等必須使用半角的西文字符，而不能使用全角字符。
HTML注釋由"<!--"號開始，由符號”-->“結(jié)束結(jié)束，例如<!--注釋內(nèi)容-->。注釋內(nèi)容可插入文本中任何位置。任何標(biāo)記若在其最前插入驚嘆號，即被標(biāo)識為注釋，不予顯示。
常見實(shí)體XHTML常用標(biāo)記1、文本標(biāo)題（h1-h6） <h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
...
<h6>六級標(biāo)題</h6>
2、 段落(p) <p>段落文本內(nèi)容</p>
標(biāo)識一個段落(段落與段落之間有段間距)
3、加粗 加粗有兩個標(biāo)記
1）.<b>加粗內(nèi)容</b>
2）.<strong>加粗內(nèi)容</strong>
4、傾斜 傾斜標(biāo)記
1）.<em></em>
2）.<i></i>
5、列表(ul,ol,dl) HTML中有三種列表，分別是：無序列表，有序列表，自定義列表
*無序列表
無序列表組成：
<ul>
<li></li>
<li></li>
<li></li>
．．．．．．
</ul>
*有序列表
有序列表組成：
<ol>
<li></li>
<li></li>
<li></li>
．．．．．．
</ol>
*自定義列表
<dl>
<dt>名詞</dt>
<dd>解釋</dd>
．．．．．
</dl>
6、插入圖片 <img src="目標(biāo)文件路徑及全稱" alt="圖片替換文本" title="圖片標(biāo)題" />
7、超鏈接的應(yīng)用 語法：
<a href="目標(biāo)文件路徑及全稱/連接地址" title="提示文本">鏈接文本/圖片</a>
8、數(shù)據(jù)表格的作用及組成 作用：顯示數(shù)據(jù)
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注：個tr表示一行;一個td表示一列(一個單元格)
*數(shù)據(jù)表格的相關(guān)屬性
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bgcolor="表格的背景色"
5）cellspacing="單元格與單元格之間的間距"
6）cellpadding="單元格與內(nèi)容之間的空隙"
7）對齊方式：align="left/center/right";
8)合并單元格屬性：
colspan=“所要合并的單元格的列數(shù)"合并列;
rowspan=“所要合并單元格的行數(shù)”合并行;
9、表單的應(yīng)用 表單的作用：用來收集用戶的信息的;
1）表單框 <form name="表單名稱" method="post/get" action="">
</form>
2）文本框 <input type="text" value="默認(rèn)值"/>
3)密碼框<input type="password" />
4)提交按鈕 <input type="submit" value="按鈕內(nèi)容" />
5)重置按鈕 <input type="reset" value="按鈕內(nèi)容" />
6）單選框/單選按鈕 <input type="radio" name="ral" />
<input type="radio" name="ral" />
<input type="radio" name="ral" checked="checked" />(默認(rèn)選中；)
7）復(fù)選框 <input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)
(checked="checked" :默認(rèn)選中)
8)下拉菜單 <select name="">
<option>菜單內(nèi)容</option>
</select>
9）多行文本框（文本域） <textarea name="textareal" cols="字符寬度" rows="行數(shù)">
</textarea>
10)按鈕 <input name="'" type="button" value=“按鈕內(nèi)容” />
（他和submit的區(qū)別是 ，submit是提交按鈕 起到提交信息的作用，button只起到跳轉(zhuǎn)的作用，不進(jìn)行提交。）
10、div的用法 <div id="id名" / class="class名"></div>
文檔區(qū)域，文檔布局對象
11、 span的用法 <span></span>文本結(jié)點(diǎn)（某一小段文本，或是某一個字）
在線咨詢