HTML、CSS、JavaScript及相互關系

頁，又叫Web，其實就是一個后綴名為.html的文本文件。HTML文件采用超級文本標記語言(HyperText Markup Language)書寫而成，最終由客戶端瀏覽器解釋并呈現給用戶。

Web由HTML內容、CSS樣式、JavaScript前端行為三要素組成。開發一個網頁，就好比設計一出舞臺劇，首先要決定舞臺上有哪些演員(HTML網頁內容)、演員的扮相(CSS網頁樣式)、演員的動作及劇情(JavaScript網頁前端行為)。

1 HTML

HTML使用標記標簽來描述網頁，標記標簽是HTML語言中最基本的單位，是HTML中最重要的組成部分。

標記是HTML文檔中一些有特定意義的符號，這些符號指明網頁內容的含義或結構。

標記即標簽，不同的標記能實現不同的功能。HTML標記按功能可大致分為六大類。分別是語義標記、元標記、文本標記、容器標記、嵌入式標記，以及表單和表單元素標記六大類。

(1) 語義標記。又稱結構標記，是指盡量使用有相對應結構含義的HTML標記。語義標記的逐漸增加便于開發者閱讀并寫出優雅美麗的代碼，同時讓瀏覽器的“爬蟲”和機器更好地解析檢索。在沒有CSS的情況下，語義標記讓頁面也能呈現出很好的內容、代碼結構。簡而言之，語義標記的使用，即是為了網頁“裸奔時也好看”。

(2) 元標記。是指位于HTML文件頭部的一些特殊代碼，是解釋說明的標記。其主要功能就是對文檔進行說明，描述HTML文檔的整體信息。元標記向瀏覽者提供某一頁面的附加信息，告訴我們它是誰。當客戶機找服務器要東西時，它幫助一些搜索引擎進行頁面分析，使導出的某一頁面檢索信息能正確地放入合適的目錄中。

HTML元標記出現于網頁頭標簽處，主要包括標題標記、關鍵詞標記、描述標記等，合理運用元標記會使網頁在搜索引擎中表現更為突出。

(3) 文本標記。這是最重要、最基本的標記，一般只能嵌套文本、超鏈接的標簽。為了讓網頁中的文本看上去編排有序、整齊美觀、錯落有致，就要設置文本的標題、字號大小、字體顏色、字體類型以及換行、換段等。而為實現這一目的所使用的特定的HTML語言，就叫作文本標記。

(4) 容器標記。又稱作內容組織標記，可以簡單地理解為它是能嵌套其他所有標簽的標簽，是用來裝東西的容器。容器與容器之間也可以相互嵌套，表現為父級容器和子級容器。

如div標簽中可以鑲嵌span標簽，div可以看作是一個可以裝入其他標簽的大容器，span是一個只能裝文本的小容器，大容器當然可以放得下小容器。

(5) 嵌入式標記。常用于嵌入圖像、音頻、視頻、flash動畫、插件等多媒體元素，使網頁呈現方式更加多樣化，還可以嵌套某些標簽來指定視頻文件的路徑或者網址路徑，決定多媒體元素的屬性和播放方式等。

(6) 表單和表單元素標記。多用于制作網頁和用戶交互的界面、控件，是客戶端與服務器端進行信息交流的途徑。用戶可以使用諸如文本域、列表框、復選框及單選按鈕之類的表單元素輸入信息，然后單擊某個按鈕提交這些信息。

2 CSS

如果說HTML語言規定了網頁的具體內容，那么CSS(cascading style sheets)就是為了給這些內容進行規整和裝飾而存在的。CSS最初的誕生，就是因為HTML為了滿足頁面設計者的顯示要求而變得臃腫復雜，因而需要一種樣式表語言達到控制頁面呈現內容的效果。CSS讓整個頁面可視化程度更強，可以說是網頁的門面。如果將網頁比作一個舞臺，HTML是舞臺上的演員，那么CSS就是演員的扮相，更完美地將節目(即頁面內容)呈現在觀眾面前。

CSS即層疊樣式表。作為一種用來表現HTML或者XML的計算機語言,CSS可以對網頁元素位置的排版進行像素級別的精確控制,可以靜態地修飾網頁,也可以配合腳本語言(如后文會提到的JavaScript)動態地格式化網頁元素。

所謂層疊，是即樣式可以層層疊加。

每個HTML元素都有一組樣式屬性,它們可以通過CSS來設定。這些屬性涉及背景(background)、字體(fonts)、顏色(color)、鏈接(link)、邊框(border)、列表樣式(url)等。CSS就是一種先選擇HTML元素,然后設定選中元素屬性的機制。

CSS選擇器和要應用的樣式構成了一條CSS規則。

CSS規則由兩個主要的部分構成：選擇器及一條或多條聲明。選擇器(selector)就是想要改變樣式的HTML元素;每條聲明(declaration)由一個屬性(property)和一個值(value)構成。屬性是想要設置的樣式屬性(style attribute),每個屬性有一個值。屬性和值被冒號(:)分開,CSS聲明總是以分號(;)結束,聲明組以大括號({ })括起來。

3 JavaScript

JavaScript最早是由Netscape Communication(網景)公司開發出來的一種客戶端腳本語言,將JavaScript代碼直接嵌入在HTML頁面中，能對HTML頁面中的HTML、CSS和JavaScript本身進行增加、刪除、修改、查詢等操作，使得客戶端靜態頁面變成支持用戶交互并響應相應事件的動態頁面(DHTML=HTML+CSS+JavaScript)。它的出現彌補了HTML語言的缺陷，使得開發客戶端Web應用程序成為可能。

HTML Web運行在瀏覽器中，這就是說瀏覽器是Web的實際運行環境。如果將運行環境視為一個京劇表演的舞臺，則在這個舞臺上有網頁內容HTML(演員)、網頁樣式CSS(演員的扮相)、網頁行為JavaScript(演員的動作)。JavaScript只能在自己的舞臺上表演，能對舞臺上的既有存在(HTML、CSS、JavaScript)進行操作(增、刪、改、查)，而不能跨越到舞臺外面表演(功能受限，JavaScript程序不能操作瀏覽器之外的事物)。

更進一步思考與觀察，會發現兩個有趣的現象:

① 當網站被服務器軟件架設起來時(如同京劇正式開演)，由于遵守網絡安全協議，JavaScript這個演員的功能受限于表演的舞臺(也就是瀏覽器客戶區)。也就是說，此時JavaScript是存在功能受限的，能對HTML、CSS、JavaScript進行增刪改查，而不能對瀏覽器客戶區之外做任何事情，如不能操作硬盤等本地資源等。為了在互聯網上搭建網站，讓所有人都能看到的，還需要租用域名、空間。

② 當直接雙擊運行本地Web文件時(如同京劇在做排練)，JavaScript的功能相對不受限制。此時JavaScript可以訪問本地資源，如讀取本機IP、操縱本地文件系統等。但這樣架設的Web不能被他人通過網絡訪問，也不能被百度檢索。事實上，我們可以在本地放置無數個網頁，只要我們的硬盤容量足夠大。

JavaScript包含了三個部分的內容：JavaScript腳本語言規范EMCAScript(語言核心)、文檔對象模型DOM(以面向對象的方式操縱文檔內容)、瀏覽器對象模型BOM(以面向對象的方式操縱瀏覽器窗口元素)。

3.1 語言核心EMCA Script

EMCA 是歐洲計算機制造商協會(EuropeanComputer Manufacturers Association)的縮寫，EMCAScript就是這個協會制定的標準化腳本語言。我們知道，JavaScript是一門編程語言，而每一種語言都有它自己的基本語法如數據類型等，這些概念必須遵循一定的規范，瀏覽器開發者要嚴格依據這個規范來開發編譯器，JavaScript程序員要嚴格依據這個規范來調用API。也就是說，EMCAScript是JavaScript的語法規范，規定了JavaScript腳本的核心內容。打個比方，新華字典(也算是一種語言規范)規定了“血”這個字，而無論在“血液”中的讀“xuè”，還是在“血暈”中的讀“xiě”。新華字典規范了漢字，EMCAScript規范了JavaScript。

3.2 文檔對象模型DOM

文檔對象模型(document object model)是針對HTML和XML文檔的應用程序編程接口。DOM 把整個頁面規劃成由多個節點構成的文檔，我們可以用DOM API將頁面內容繪制成一個樹狀圖。在這種模型下，頁面中的每個部分都是可用程序操縱的節點，我們可以通過DOM 來方便地控制頁面的結構和內容(增加、刪除、修改、查詢等)，如我們就可以用document.getElementById()通過id號來查詢文檔中的元素。DOM 使得用戶頁面可以動態地變化，用戶可以和Web文檔內容進行交互。

3.3 瀏覽器對象模型

瀏覽器對象模型BOM(browser object model)是針對瀏覽器的應用程序編程接口。我們可以通過BOM 對瀏覽器窗口進行訪問和操作，例如彈出新的瀏覽器窗口，移動、關閉和更改瀏覽器窗口，提供詳細的網絡瀏覽器信息(navigator object)、詳細的頁面信息(location object)、詳細的用戶屏幕分辨率的信息(screen object)等。BOM 方便我們從瀏覽器上獲得信息，更好地和瀏覽器進行交互。例如，我們可以用window.alert()彈出消息框，用window.prompt()彈出提示框，使得用戶可以和瀏覽器窗口進行交互。

4 案例分析：選項卡控制

點擊沒同選項卡，實現如下切換效果：

代碼：

<html>
<head>
<title>tab control</title></head>
<style type="text/css">
#tab{
	position:relative;/* 定義選項卡的為相對定位，使其子級元素有定位參考對象 */
	width:45%;
	height:400px;
}
#tab h4{
	display:inline;
	background-color:#ccc;
	color:black;
}
#tab div{
	border:1px #666 solid;
	position:absolute; /*tab下的div疊在一起*/
	top:28px;
	left:0px;
	width:100%;
	height:370px;
	display:none;
}
#tab .block{
	display:block;
}
#tab .up{
    color:#999999;
	background-color:black;
}
</style>
<script>
function tabSwitch(tab,ao) {
	var h = document.getElementById(tab).getElementsByTagName("h4");
	var d = document.getElementById(tab).getElementsByTagName("div");
	var n = document.getElementById(tab).getElementsByTagName("div").length;
	for (var i = 0; i < n; i++) {
		if (ao - 1 == i) {
			h[i].className += " up";
			d[i].className += " block";
		} else {
			h[i].className = " ";
			d[i].className = " ";
		}
	}
}
</script>

<body>
<div id="tab">
<h4 onclick="tabSwitch('tab',1)" class="up">道德經</h4>
<h4 onclick="tabSwitch('tab',2)" >岳陽樓記</h4>
<h4 onclick="tabSwitch('tab',3)" >中庸</h4>
<div class="block">
	<p>上善若水。</p>
	<p>水善利萬物而不爭，處眾人之所惡，故幾於道。</p>
	<p>居善地，心善淵，與善仁，言善信，正善治，事善能，動善時。</p>
	<p>夫唯不爭，故無尤。</p>
</div>
<div>
	<p>不以物喜，不以己悲</p>
	<p>惟江上之清風，與山間之明月</p>
	<p>耳得之而為聲，目遇之而成色</p>
</div>
<div>
	<p>博學，審問，慎思，明辨，篤行。</p>
	<p>學之要能，問之要知，思之要得，辨之要明，行之要篤。</p>
	<p>雖愚必明，雖柔必強。</p>
</div>
</div>
</body>
</html>

ref：

王小峰《大話Web開發：基于知識管理角度》

－End－

本系列文章旨在記錄和總結自己在Java Web開發之路上的知識點、經驗、問題和思考，原來已經分享在我的CSDN博客，現在分享在頭條，希望能幫助更多碼農和想成為碼農的人。版權聲明：本文為CSDN博主「普通的碼農」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/liyongyan1202/article/details/89064944

錄

介紹
核心思想
基本結構
文本信息
鏈接
表單
總結

介紹

前面的文章多次使用到了HTML（HyperText Markup Language，中文就是超文本標記語言）。這門語言可以使用任何的文本編輯器進行編寫，寫出的文檔就是網頁，只要將文件名以后綴 .html 結尾，瀏覽器就可以解釋該文檔，并以一定的格式呈現出來。

HTML是Web前端三劍客之一，主要是負責數據的結構、框架或骨架，表示哪些數據是標題啊、主體啊、導航啊、鏈接啊、表格啊、段落啊、圖片啊、音頻、代碼啊等。簡而言之，就是表示數據是什么。

核心思想

HTML的核心思想很簡單，就是給你的信息打標記，舉個例子：

<這是一篇文章>
	<這是標題>XX爆炸性新聞</這是標題>
	<這是段落>
		某年某月某日，某某發生某事。。。
	</這是段落>
	<這是段落>
		其他事情。。。
	</這是段落>
</這是一篇文章>

尖括號 < > 及其里面的詞就是標記或者標簽，只不過HTML標準里面用的是英文單詞，我這只是用中文的詞來說明這個思想。

標記有開始標記和結束標記，結束標記里面多一個正斜杠，就是 </ > 。

真正的信息（就是要呈現給用戶看的）就寫在開始標記和結束標記之間，這就是標記的內容。有時候沒有內容，開始標記和結束標記可以合二為一，變成 < /> ，就是把正斜杠寫到右尖括號前面，或者省略正斜杠。

標記及其內容合起來叫做元素，比如例子中的開始標記<文章>和結束標記</文章>及其之間的內容就是一個元素?？梢钥吹皆乜梢郧短?，就是元素里面的內容可以再次包含元素，不過開始標記和結束標記要注意遙相呼應，事實上，編寫的時候可以采用縮進來增加層次感且不易出錯。

元素還有屬性，屬性可以有屬性值，也可以沒有，這些后面再討論。這里要提到的是一個編寫規范，不管是標記、屬性還是值，習慣上都采用英文小寫單詞用連字符（就是短橫線、減號）相連。表單中的需要發往Web服務器的數據可以使用后端的開發規范。

每一個元素都可以設置一個id屬性，其值必須在該網頁中是唯一的。

目前HTML的版本是HTML5，大多數瀏覽器版本都支持大部分常用的特性。再次強調，HTML的主要思想就是給你的信息打標記，這些標記表示數據的結構、框架或骨架，就是語義，至于數據如何呈現（比如呈現在哪個位置，什么顏色、字體、背景等等）和動態行為是由CSS（層疊樣式表，Cascading Style Sheets）和JavaScript來負責。它們都由瀏覽器來解釋執行。

基本結構

HTML5的網頁基本都有如下結構：

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
	<meta charset="utf-8" />
	<title>這里是網頁的標題</title>
</head>
<body>
</body>
</html>

可以看到，基本結構就是由各種標記組成的，只不過標記使用的是英文單詞，而且這些標記都是標準化（這樣各家瀏覽器都能識別）了的，瀏覽器必須識別它們。這些標記也很語義化（這樣人類能容易識別，便于開發和維護網頁），基本上都是使用語義相對應的英文單詞或縮寫，這也是理所當然的，便于記憶和使用嘛。

基本結構里面包含以下幾點：

第一行的DOCTYPE聲明了本網頁是HTML5網頁，根據HTML網頁的編寫規范，基本上這個詞是網頁文檔中唯一的大寫單詞；
<html>元素：所有信息都包含在這個元素里面，沒什么可說的，不過該元素有一個屬性lang，在這個網頁中，我把它的值設置為zh-cmn-hans，就是說本網頁的語言是是簡體中文，關于語言的編碼，也是相當復雜，有專門的標準，這里暫且不說；
<head>元素：它必須是<html>元素里面的第一個元素。它里面的信息除了下面的<title>元素之外，在瀏覽器上都是不可見的，就是說用戶在瀏覽器上不能直接看到里面的信息；
<body>元素：先說這個元素，這是<html>元素里面的第二個元素。你可以在這個元素里面放置你的信息，包括文本、圖像、音頻、視頻等，當然你又可以給這些信息打上合適的標記；
<meta>元素：它被包含在<title>元素里面，而且它由于沒有內容，所以開始標記和結束標記可以合二為一。它有一個屬性charset，非常重要，就是指示瀏覽器使用哪種字符編碼（簡單的理解就是編碼規定了如何將二進制數據映射到我們人類可識別的文字和符號，簡稱字符，因為計算機只能識別0、1的二進制數據）來讀取本文檔。

但是，僅僅告訴瀏覽器使用何種字符編碼還不行，網頁文檔本身在使用文本編輯器編寫完保存的時候，必須使用該字符編碼來保存；通過網絡傳輸的話，那傳輸時也必須使用該字符編碼來傳輸。

就好像我給你寫了一封信，信上指示你說要用英語來讀這封信，但信的內容卻是用中文寫的，那么你還是不能讀這封信。這里我使用了普遍采用的utf-8這種字符編碼，Web上基本都用這個，它能表示全球各個語言中的字符，而且占用字節數較少。字符編碼也是比較復雜但很重要的內容，這里暫且不說；

<title>元素：它的內容將顯示在瀏覽器上，如下圖：

OK，每個網頁都有這個基本結構，剩下的就是往<body>元素里面添加你的各種信息了。

文本信息

首先，我們可以向<body>元素里面添加文本，畢竟文字在我們的生活中占據很重要的位置，特別是在古代。文字可以寫成小說、劇本、新聞、資訊等等。添加文本很簡單，直接在元素里面敲文字（各種語言都行）就可以了。

如果光是這樣的話，那就談不上說HTML負責數據的結構、框架或骨架了。不錯，HTML還提供了很多標記來描述數據，這里先說一些常用的。

寫文章的時候通常要為文章起標題，而且有文章的總標題，副標題，文章內容相關的放在同一個標題下，標題下又可能有若干個子標題，就類似文檔的大綱似的。所以，HTML提供了<h1>、<h2>、<h3>、<h4>、<h5>、<h6>這六個標記來說明標題的語義。我們試試給信息打上這些標記會是什么樣子，先看代碼：

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
	<meta charset="utf-8" />
	<title>這里是網頁的標題</title>
</head>
<body>
	<h1>這是一級標題</h1><h2>這是一級標題</h2>
	<h3>這是一級標題</h3><h4>這是一級標題</h4>
	<h5>這是一級標題</h5><h6>這是一級標題</h6>
</body>
</html>

我特地把這些信息兩個一行來寫，看看瀏覽器是怎么處理的：

可以看到，瀏覽器會把各級標題的字體大小顯示的不太一樣，一級標題最大，六級標題最小。大多數瀏覽器都會這么處理。

那么問題來了，不是說HTML只負責信息的語義，不負責信息是如何展示的嗎？話雖如此，給不同語義的信息來個默認的展示效果，不就省的我們還要再寫信息如何展示的代碼了嘛。這又再一次體現了契約優先（本質就是由默認值）的思想。這就是說我們還是可以修改這些各級標題是如何展示的，比如字體、顏色等等，這就要用到CSS了。

注意，瀏覽器可以關閉CSS和JavaScript，就是讓這兩個技術不起作用，從這個角度看，給標記設置默認的展示效果也有這方面的原因。

雖然標記有默認的展示效果，但我們一定不能為了獲得這些類似的展示效果而強行給某些信息打上標記，而是應該使用CSS去獲得這些展示效果。比如，不能為了加大字體就強行把不是標題的內容打上<h1>標記，這應該交給CSS去做，是否打上<hn>標記（n代表1、2、3、4、5、6）應該考慮該內容在語義上是否是標題！

第二點很重要的是，明明代碼里面兩個標題一行，為何瀏覽器展示的效果確是每個標題占一行？

這是因為HTML規定了某些標記有個作用，瀏覽器遇到它就必須另起一行來展示，有這個作用的標記就叫塊級標記，沒有這個作用的就是行級標記（不知道是否可以這么劃分，通常的劃分方式是塊級標記是里面可以嵌套其他標記的，行級標記是里面不可以嵌套其他標記的）。

事實上，HTML規定文本里面的格式（縮進、換行、多個連續的空格等等）都沒用，瀏覽器會把這些格式壓縮成一個空格。比如下面的代碼實際展示的是一行：

<body>
	這是第一段。。。
	這是第二段。。。
	這是第三段。。。
</body>

展示效果成了：

這是第一段。。。 這是第二段。。。 這是第三段。。。

除了表示標題的標記以外，還有其他很多作用于文本，甚至是整個語義上的布局的標記，下面僅僅使用一段代碼來展示比較常用的標記，不做過多解釋說明。

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
	<meta charset="utf-8" />
	<title>這里是網頁的標題</title>
</head>
<body>
	<header>
		<h1>這里是網頁的頁眉，里面可以有導航</h1>
		<nav>
			這里是整個頁面的導航按鈕。。。
		</nav>
	</header>
	<main><!-- 一個頁面往往只有一個主體部分 -->
		<article><!-- 這里也可以使用通用容器標記<div> -->
			<header>
				<h2>這里是主體的頁眉，可以有主體的導航/目錄、介紹等等</h2>
				<nav>
					這里是目錄
				</nav>
				<p>這里是介紹</p>
			</header>
			<article>
				<h2>這里是第一篇文章</h2>
				<p>這里是段落一</p>
				<p>這里是段落二</p>
				<p>。。。</p>
			</article>
			<article>
				<h2>這里是第二篇文章</h2>
				<section>
					<h3>這里是第二篇文章的第一部分</h3>
					<p>與上面類似</p>
				</section>
				<section>
					<h3>這里是第二篇文章的第二部分</h3>
					<p>與上面類似</p>
				</section>
			</article>
		</article>
	</main>
	<aside>
		<h2>這里是附注，往往跟主體內容相關性沒那么強，但比較獨立，瀏覽器上通常會顯示主體的兩側</h2>
	</aside>
	<footer>
		<p>這里是整個頁面的頁腳，通常放一些版權聲明、隱私政策之類的。</p>
	</footer>
</body>
</html>

涉及到布局的標記有：

<header>：頁眉
<main>：主體
<footer>：頁腳
<aside>：附注

涉及到文本內容的標記有：

<nav>：導航
<h1>、…、<h6>：標題
<article>：文章
<section>：區塊，里面的內容通常有相似主題。
<p>：段落
<div>：通用語義，實在想不出什么語義，那就用它。

還有很多用來標記文本的，比如表示重要性的<strong>、表示強調的<em>、表示圖的<figure>和<figcaption>、表示引用或參考的<cite>、表示引述文本的<blockquote>和<q>、表示代碼的<code>等等。

以上這些標記在我們的Java Web開發中暫時用不到，所以都不討論。

鏈接

鏈接可以說是網頁的靈魂，正是它才能形成Web。表示信息是一個鏈接的標記是<a>。下面舉例：

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8" />
<title>這里是網頁的標題</title>
</head>
<body>
	<nav>
		<ul>
			<li><a >CSDN</a></li>
			<li><a >百度</a></li>
		</ul>
	</nav>
	<p>
		這里是某些文本。。。有些<a href="dir/file.html">東西</a>需要人們在另一個網頁中查看
	</p>
	<nav>
		<ul>
			<li><a href="#question1">What is HTML?</a></li>
			<li><a href="#question2">How does HTML work?</a></li>
		</ul>
	</nav>
	<article>
		<h1 id="question1">What is HTML?</h1>
		<p>
			HTML is ... <br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</p>
		
		<h2 id="question2">How does HTML work?</h2>
		<p>
			HTML is explained by browser ...
		</p>
	</article>
	<p></p>
</body>
</html>

在瀏覽器上呈現這樣：

上面的例子中<ul>標記表示是一個無序列表，<li>表示是列表中的一項。我們將CSDN、百度和東西打上<a>標記，表示它們都是一個鏈接，用鼠標點擊它們可以看到指定的另一個網頁。<br>表示需要換行，這里用來模擬頁面很長導致看不見question2。

可以看到，瀏覽器為列表、鏈接都設置了默認的樣式，鼠標移到鏈接上會變成手型。

鏈接必須要有一個href屬性，其值就是目標網頁的URL，當然可以是本網站內部的其他網頁，也可以是外部網站某個網頁，甚至是本網頁中的其他部分（需要使用元素的id屬性，如例子所示）。

表單

表單允許用戶向Web服務器提交數據，而不是僅僅用瀏覽器向Web服務器索要網頁。

最常用的表單應該要數登錄表單了。用戶通過輸入用戶名和密碼，點擊登錄按鈕向Web服務器發起登錄請求。

表單使用標記<form>，在<form>添加供用戶輸入信息的其他內容，常用的有文本框、密碼框、單選按鈕、復選按鈕、下拉列表選擇框以及最后的提交按鈕。我們先簡單介紹文本框、密碼框以及提交按鈕，其他的以后再介紹。

先上代碼：

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8" />
<title>這里是網頁的標題</title>
</head>
<body>
	<form method="post" action="login-success.html">
		<label for="user-name">用戶名：</label><input type="text" id="user-name" name="userName" />
		<label for="password">密碼：</label><input type="password" id="password" name="password" />
		<input type="submit" value="登錄"/>
	</form>
</body>
</html>

再看看瀏覽器上的呈現：

第一點，從呈現上看，用戶名和密碼都是文本框，不過，密碼的文本框會將輸入信息屏蔽，<input>標記使用type屬性來區分各類輸入方式：text是文本框、password是密碼框、radio是單選按鈕、checkbox是復選按鈕等。

其次，我為標記指定了id和name兩個屬性，id屬性用于<label>標記的for屬性，從而將兩個元素關聯起來，這樣，鼠標如果點擊其內容，其關聯的元素也會獲得焦點（就是在文本框內出現了不斷閃爍的輸入光標）。

而name屬性用于標識用戶輸入的該項數據，這樣Web服務器才能根據該名字取出對應的數據，可以理解為Web服務器應用程序中的變量名，或者參數名。

所以，name屬性的值通常遵循后端應用程序的開發規范，由于我們以后是使用Java Servlet技術作為后端應用的開發技術（還有PHP、Python、Go等技術），所以遵循Java的變量名命名規范（采用駝峰形式，比如userName）。

通常，表單中的每一項輸入都會有一個關聯的<label>元素，用于呈現，總不能光出現一個文本框在那吧，這樣用戶如何知道輸入什么數據呢！它有一個for屬性，用來指定關聯元素的id。

提交按鈕也是使用<input>標記，type屬性值是submit，還有一個value屬性，用來指定按鈕上呈現的文字。

最后，回過頭來看<form>標記，它必須指定一個action屬性，它的值通常是后端應用中處理用戶提交數據的一個程序的URL，比如可以是login.servlet、login.jsp、login.php、login.asp等等，后綴名通常表明了采用的后端應用開發技術。當然，我的例子里直接指定了一個HTML頁面（login-success.html，你需要創建這么一個頁面，相信你已經知道怎么創建了?。喈斢诓惶幚碛脩籼峤坏臄祿?，一般不能這么做！

那么，用戶提交的數據是如何提交到Web服務器的呢？答案當然就是HTTP啊，瀏覽器使用HTTP來向Web服務器請求網頁，再用它來向Web服務器提交數據也就理所當然了啊。瀏覽器會將用戶輸入的信息封裝成HTTP的報文格式，最后通過網卡發送出去。

在這篇文章提到過，HTTP報文里面含有HTTP方法，常用的有GET、POST等。<form>標記的method屬性就是用于指定提交數據的HTTP方法。默認值是get，但通常使用post，一方面get的語義就是獲取而不是提交。另一方面get會將表單數據作為參數直接暴露在瀏覽器的地址欄里面。最后get提交的數據不能太大。

我們把上述代碼中的元素的method屬性值修改為get，保存，然后用瀏覽器打開，輸入用戶名和密碼后點擊提交，效果呈現如下：

可以看到，使用GET方法提交表單數據會在URL上附加上你的數據，同時也可以看到<input>標記的name屬性值在這所起的作用，就是參數名的作用。

總結

到此為止，我們就先介紹這么多，我們來總結一下：

所謂大道至簡，一項技術的核心思想往往很簡單，HTML的核心思想就是給信息打標記；
一個網頁就是一個HTML文檔，它就只包含你的信息和標記兩種內容；
HTML負責的是數據的結構、框架或骨架，就是語義，至于數據如何呈現，就是樣式（比如呈現在哪個位置，什么顏色、字體、背景等等）和動態行為是由CSS（層疊樣式表，Cascading Style Sheets）和JavaScript來負責；
HTML、CSS和JavaScript都由瀏覽器來解釋執行，所以叫web前端三劍客；
既然有web前端三劍客，那就有web后端四劍客（Web服務器、數據庫、緩存、消息隊列），統稱為web七劍下天山；
給你的信息打標記時，一定只能考慮語義，尋找最符合語義的標記，而不要考慮標記的默認呈現效果，那只是契約優先思想的體現；
網頁的語言和字符編碼很重要，字符編碼通常使用utf-8；
瀏覽器會忽略你的信息的格式（縮進、換行等），應該使用標記或CSS來實現格式；
標記有塊級標記和行級標記之分，瀏覽器遇到塊級標記則另起一行展示；
鏈接是網頁的靈魂，使用<a>標記創建鏈接，必須指定href屬性；
表單用于向Web服務器提交數據，使用<form>標記創建表單，必須指定action屬性，通常指定method屬性值為post比較安全且傳輸數據量較大；
表單中的各項輸入常用<input>標記實現，使用type屬性指定各類輸入，如文本框、密碼框、單選、復選等，通常要為它關聯到一個<label>元素，同時指定id屬性和name屬性，name屬性的值通常遵從后端技術的命名規范。

CSDN 編者按】“如果我們把人類文明想象成汽車的話，那么軟件開發行業就相當于汽車的引擎，編程語言就像引擎的燃料?！弊鳛橐幻_發者，需跟隨技術潮流的發展來學習新技術。2020年，你有計劃新學一門編程語言嗎？

本文作者從一名架構師的角度，詳細分析了7種現代編程語言的優點與功能，你對哪門語言最感興趣呢？

作者 | Md Kamaruzzaman，軟件架構師

譯者 | 彎月，責編 | 伍杏玲

封圖| CSDN 下載于視覺中國

出品 | CSDN（ID：CSDNnews）

以下為譯文：

如果我們把人類文明想象成汽車的話，那么軟件開發行業就相當于汽車的引擎，而編程語言就像引擎的燃料。作為一名開發者，今年你應該學習哪種編程語言呢？

學習一種新的編程語言無疑是時間、精力和智力上的巨大投資，但是學習一種新的編程語言可以提升你的軟件開發技術力，促進你的職業發展。

在這里，我將獻上一份現代編程語言的列表，這些語言不僅有助于提高你的生產力，而且還可以促進你的職業發展，并讓你成長為更優秀的開發人員。這份列表還涵蓋了非常廣泛的領域：系統編程、應用程序開發、Web開發、科學計算等。

什么是現代編程語言？

“現代編程語言”這個說法本身就很含糊。許多人認為Python和JavaScript等語言是現代編程語言，還認為Java是一種古老的編程語言。實際上，這幾種語言大約在同一時間出現：1995年。

大多數主流編程語言是上個世紀開發的：七十年代（如C）、八十年代（如C ++）、九十年代（如Java、Python、JavaScript）。這些語言在設計上并沒有考慮現代軟件開發生態系統：多核CPU、GPU、快速的互聯網、移動設備、容器和云等。盡管許多語言中的許多功能都已進行一些改進，如并發等，而且在不斷調整自己以適應時代，但它們依然保留了向后兼容性，無法拋棄那些過時的舊功能。

在這方面，Python就做得很好（某種意義上也未必是好事），Python 2和Python 3兩者之間有明確的分界線。很多語言常常會為解決同一個問題提供十余種的方法，同時又沒有顧及到開發人員的感受。根據StackOverflow的開發人員調查，大多數舊時的主流編程語言在“最可怕的語言”排名都名列前茅：

如果非要在新舊編程語言之間劃個界限的話，那么應該是2007年6月29日，也就是第一臺iPhone發行的時候。在這之后，編程語言界發生了很大變化。因此，在本文的列表中，我只考慮2007年以后的編程語言。

為什么要學習新語言？

首先，現代編程語言充分利用現代計算機硬件（多核CPU、GPU、TPU）、移動設備、大量數據、高速互聯網、容器和云的優勢。大多數現代編程語言會關注開發人員的體驗，比如：

簡潔明了的代碼（減少樣板代碼）
內置的并發支持
空指針安全
類型推斷
簡潔的功能集
降低學習難度
融合所有編程范例的最佳功能

本文列表的許多編程語言都帶有革命性地變化，并將永久地改變軟件行業。一些已成為主流編程語言，還有一些則有望取得突破。因此選擇這些語言作為第二種編程語言是明智的做法。

Rust

一直以來，系統編程語言環境主要由靠近硬件的語言（如C、C ++等）主導。盡管它們可以完全控制程序和硬件，但是它們缺乏內存安全性。即使它們支持并發，使用C/C ++編寫并發程序也很困難，因為沒有并發安全性。還有一些流行的編程語言是解釋性語言，例如Java、Python、Haskell。這些語言具備安全性，但需要龐大的運行時或虛擬機。由于它們的運行時間長，因此Java等語言不適合于系統編程。

許多人曾嘗試將C/C ++的功能與Java、Haskell的安全性相結合。然而，Rust才是第一個成功實現了這一點的編程語言。

Graydon Hoare在業余項目中開發出了Rust，他的靈感來自研究編程語言Cyclone。Rust是開源的，由Mozilla與許多其他公司和社區一起領導這門語言的開發。Rust于2015年首次發布，并很快引起了社區的關注。

主要特征：

通過所有權和借用概念提供內存安全和并發安全。
內存安全和并發安全在編譯時確保，即如果程序代碼可以編譯，那么內存既安全又沒有數據競爭。這是Rust最吸引人的功能。
它還提供了Haskell中元編程的表現力。憑借不可變的數據結構和功能編程功能，Rust提供了功能并發和數據并發。
Rust的速度非常快，純Rust的性能甚至優于純C。
在沒有運行時的情況下，Rust可以完全控制現代硬件（TPU、GPU、多核CPU）。
Rust具有LLVM支持。因此，Rust提供一流的與WebAssembly的互操作性，而且Web代碼也非?？臁?/p>

流行度：

自2015年首次亮相以來，Rust已被開發人員廣泛接受，并在StackOverflow開發人員調查中連續四年（2016、2017、2018、2019）被評選為最受歡迎的語言：

根據GitHub Octoverse的調查，Rust是運行速度第二快的語言，僅次于Dart：

此外，根據編程語言流行度排名網站PyPl的數據，Rust排名第18位，并呈上升趨勢：

對比Rust提供的功能集，我們就會明白為什么微軟、亞馬遜、Google等科技巨頭相繼宣布投資Rust作為一種長期的系統編程語言。

根據Google統計的趨勢，在過去的5年中，Rust的熱度每年都在增加。

主要用途：

系統編程
Serverless 計算
商業應用

主要競爭對手：

C
C++
Go
Swift

在本世紀初，Google面臨兩個擴展問題：開發擴展和應用程序擴展。開發擴展問題指的是他們不能僅通過投入開發人員的方式來添加更多功能。應用程序擴展問題則指他們無法開發出一款能夠擴展到Google級別的計算機集群的應用程序。

所以在2007年左右，Google創建了一種新的編程語言，用于解決這兩個擴展問題。兩位才華橫溢的Google軟件工程師Rob Pike（UTF-8）和Ken Thompson（UNIX OS）創建了一種新語言。

2012年，Google正式發布了第一版的Go編程語言。Go是一種系統編程語言，但與Rust不同，它還具有Runtime和垃圾收集器（幾兆字節）。但是與Java或Python不同，這個Runtime包含了生成的代碼。最后，Go生成了一個本地的二進制代碼，可以在沒有附加依賴項或運行時的情況下在計算機中運行。

主要特征：

Go具有一流的并發支持。Go不通過線程和鎖提供“共享內存”并發性，因為編程難度太大。相反，它提供了基于CSP的消息傳遞并發性（基于Tony Hoare的論文）。Go使用“ Goroutine”（輕量級綠色線程）和“ Channel”進行消息傳遞。
Go最大的殺手級功能是：簡單，它是最簡單的系統編程語言。新手軟件開發人員只需幾天就可以編寫高效的代碼，就像Python一樣。有些大規模的云原生項目（如Kubernetes、Docker）都是用Go編寫的。
Go還內置了垃圾收集器，這意味著開發人員無需擔心C/C++中的內存管理問題。
Google投入了大量資金打造Go。因此Go擁有大量的工具支持。新手Go開發人員擁有大量的工具生態系統。
一般，開發人員80%的時間都花在了維護現有代碼上，用于編寫新代碼的時間只占20%。由于其簡單性，Go在語言維護方面表現出色。如今，Go在業務應用程序中大量使用。

流行度：

Go一問世就受到了軟件開發社區熱烈的歡迎。2009年-2018年，Go一直在TIOBE編程語言排行榜上徘徊。Go的成功為Rust等新一代編程語言鋪平了道路。

如今，Go已是主流編程語言。最近，Go團隊宣布了有關“Go 2”的消息，這門編程語言的發展會更加穩固。

幾乎在所有的流行編程語言排行榜中，Go的排名都很高，已超過許多現有的語言。自2019年12月以來，在TIOBE指數排名中，Go名列第15位：

根據StackOverFlow的調查，十大最受喜愛的編程語言中，Go也位列其中：

此外，根據GitHub的數據，Go也是十大發展最迅速的語言之一：

Google趨勢顯示，在過去的5年中，Go的熱度每年都在增加。

主要用途：

系統編程
Serverless 計算
商業應用
云原生開發

主要競爭對手：

C
C++
Rust
Python
Java

Kotlin

Java 是企業軟件開發領域無可爭議的王者。近年來，Java受到了一些負面評論：過于冗長，大量樣板代碼，容易出現意外的復雜性。但是，關于Java虛擬機（JVM）的爭論卻很少。JVM是軟件工程的杰作，經過了時間的考驗，提供了硬核的runtime。

多年來，Scala等JVM語言一直在努力克服Java的缺點，想成為更好的Java，但他們都失敗了。最終，這場提升Java的探索以Kotlin的誕生結束。Jet Brains（流行的IDE IntelliJ背后的公司）開發了Kotlin，它可以在JVM上運行，克服了Java的很多缺點，提供許多現代功能。

與Scala不同的是，Kotlin比Java更簡單，還可在JVM中提供與Go或Python開發人員同等的生產力。

Google宣布Kotlin是一流的Android應用開發語言，因此Kotlin在社區中的接受度得到了大幅提高。自2017年以來，同樣受歡迎的Java Enterprise框架Spring也開始支持Kotlin。我曾嘗試結合Kotlin與Reactive Spring使用，體驗非常棒。

主要特征：

Kotlin的主要賣點在于其語言設計。我總是將Kotlin視為JVM上的Go/Python，因為它簡潔明了的代碼。因此，Kotlin的生產力很高。
與許多其他現代語言一樣，Kotlin提供了指針、安全性、類型推斷等功能。
由于Kotlin也運行在JVM中，因此現有Java庫龐大的生態系統都可供使用。
Kotlin是一流的Android應用開發語言，并且已經超過Java，成為開發Android應用的首選。
Kotlin得到了JetBrains和Open Source的支持，因此具有出色的工具支持。
Kotlin有兩個有趣的項目：Kotlin Native（將Kotlin編譯為原生代碼）和kotlin.js（Kotlin到JavaScript）。如果成功，則可以在JVM外部使用Kotlin。
Kotlin還提供了一種簡單的方式來編寫DSL（域特定語言）。

流行度：

自2015年首次發布以來，Kotlin的知名度不斷飆升。根據Stack Overflow，Kotlin是2019年第四大最受歡迎的編程語言：

Kotlin還是增長最快的編程語言之一，排名第四：

在流行編程語言排名網站PyPl的排名中，Kotlin名列第十二名，并具有較高的上升趨勢：

自從Google宣布Kotlin是一流的Android應用開發語言以來，Kotlin的流行趨勢出現了大幅上漲，如下所示：

主要用途：

企業應用程序
Android應用開發

主要競爭對手：

Java
Scala
Python
Go

TypeScript

JavaScript是一門優秀的編程語言，在2015年之前，JavaScript有很多缺點。著名的軟件工程師Douglas Crockford寫了一本書名為《JavaScript: The Good Parts》，暗示了JavaScript有很糟的部分。無模塊化，還有“回調地獄”，因此開發人員都不喜歡維護特別大的JavaScript項目。

Google甚至還開發了一個平臺，可將Java代碼反編譯為JavaScript代碼（GWT）。許多公司和個人都曾嘗試開發更好的JavaScript，例如CoffeeScript、Flow、ClojureScript。最終，微軟的TypeScript取得了成功。

微軟的一隊工程師在著名的Anders Hejlsberg的帶領下，創建了JavaScript的靜態類型、模塊化超集——TypeScript。

TypeScript可以編譯為JavaScript。于2014年首次發布后，TypeScript很快引起了社區的關注。Google當時還計劃開發JavaScript的靜態類型超集。Google對TypeScript青睞有加，以至于他們沒有開發新的語言，而是選擇與微軟合作改進TypeScript。

Google選擇TypeScript作為其SPA框架Angular 2+的主要編程語言。此外，流行的SPA框架React也提供對TypeScript的支持。另一個流行的JavaScript框架Vue.js也宣布將使用TypeScript開發新的Vue.js 3：

另外，node.js的創建者Ryan Dahl已決定使用TypeScript來開發安全的Node.js替代品Deno。

主要特征：

與Go或Kotlin同樣，TypeScript的主要特征也是語言設計。TypeScript憑借其簡潔明快的代碼，成為了目前最優雅的編程語言之一。就開發人員的生產力而言，它與JVM或Go/Python上的Kotlin并駕齊驅。TypeScript是生產力最高的JavaScript超集。
TypeScript是JavaScript的強類型超集，特別適合大型項目，而且可以稱為“可擴展的JavaScript”。
單頁應用程序框架的“三巨頭”（Angular、React、Vue.js）為TypeScript提供了出色的支持。在Angular中，TypeScript是首選的編程語言。在React和Vue.js中，TypeScript越來越受歡迎。
最大的兩家技術巨頭：微軟和Google正在合作開發由活躍的開源社區支持的TypeScript。因此，TypeScript擁有最好的工具支持。
由于TypeScript是JavaScript的超集，因此凡是可以運行JavaScript的任何地方都可以運行TypeScript，包括瀏覽器、服務器、移動設備、物聯網設備和云。

流行度：

開發人員喜歡TypeScript的優雅語言設計。在StackOverFlow最受歡迎的語言類別的調查中，TypeScript與Python并列第二名：

根據GitHub的排名，TypeScript是增長最快的編程語言之一，排名第五：

從GitHub的貢獻度來看，TypeScript排名第七，打進了前十：

Google的趨勢表明，在過去的幾年中，TypeScript的熱度越來越高：

主要用途：

Web UI開發
服務器端開發

主要競爭對手：

JavaScript
Dart

Swift

當初喬布斯拒絕在iOS中支持Java（和JVM），他認為Java不再是主流編程語言。如今我們發現喬布斯當初的估計是錯的，雖然iOS仍然不支持Java。蘋果選擇了Objective-C作為iOS中的首選編程語言。Objective-C是一門很難掌握的語言，它不支持現代編程語言所要求的高生產力。

后來，蘋果的Chris Lattner和其他人開發了一種多范例、通用的、編譯編程語言——Swift，來替代Objective-C。Swift的第一個穩定版本于2014年發布。Swift還支持LLVM編譯器工具鏈（也由Chris Lattner開發）。Swift與Objective-C代碼庫具有出色的互操作性，并且已確立為iOS應用開發中的主要編程語言。

主要特征：

Swift的殺手級功能之一是其語言設計。語言本身很簡單，語法簡潔，比Objective-C更高效。
Swift還提供了現代程序語言的功能：安全。此外，它還提供了語法糖來避免“厄運金字塔”。
作為一種編譯語言，Swift和C++一樣快。
Swift支持LLVM編譯器工具鏈。因此，我們可以在服務器端編程，甚至瀏覽器編程（使用WebAssembly）中使用Swift。
Swift提供了自動引用計數（ARC）支持，可抑制內存管理的不善。

流行度：

開發人員對Swift的喜愛不亞于許多其他現代編程語言。根據StackOverflow的調查，Swift在最受歡迎的編程語言中排名第六：

2019年，在TIOBE的編程語言排名中，Swift的排名上升到了第10名。鑒于這種編程語言只有5年的歷史，可以說是成績斐然：

Google的趨勢表明，在過去的幾年中，Swift的熱度出現了激增：

主要用途：

iOS應用開發
系統編程
客戶端開發（通過WebAssembly）

主要競爭對手：

Objective-C
Rust
Go

Dart

Dart是Google出品的第二大編程語言。Google是Web和Android領域的巨頭，因此Google在Web和應用領域開發自己的編程語言也不足為奇。在丹麥軟件工程師Lars Bak（領導Chrome的 JavaScript V8引擎開發）的帶領下，Google于2013年發布了Dart。

Dart是一種通用編程語言，支持“強類型”和“面向對象”編程。Dart也可以轉編譯為JavaScript，凡是JavaScript可以運行的任何地方（例如Web、移動、服務器）幾乎都可以運行 Dart。

主要特征：

與Go一樣，Dart也非常注重開發人員的工作效率。由于Dart簡潔的語法，以及高效的生產力，受到開發人員的喜愛。
Dart還提供“強類型”和“面向對象”編程。
Dart是少數同時支持JIT編譯（運行時編譯）和AOT編譯（創建時編譯）的編程語言之一。因此，Dart可以針對JavaScript運行時（V8引擎），并且Dart可以編譯為快速的原生代碼（AOT編譯）。
跨平臺原生應用程序開發平臺Flutter選擇了Dart作為開發iOS和Android應用的編程語言。從那以后，Dart的流行度越來越高。
與Goog的Go編程語言一樣，Dart也具有出色的工具支持和龐大的Flutter生態系統。Flutter的日益普及也會推動Dart的采用率升高。

流行度：

根據GitHub Octoverse數據顯示，Dart是2019年增長最快的編程語言，去年它的流行度增長了五倍：

根據TIOBE指數顯示，Dart排名第23，僅用了4年時間就超過了很多其他的現代編程語言：

根據StackOverflow的調查，Dart在最受歡迎的編程語言中排名第12：

受Flutter的影響，Google的趨勢表明，在過去的兩年中，Dart的熱度急劇上升：

主要用途：

應用開發
UI開發

主要競爭對手：

JavaScript
TypeScript

Julia

本文提及的大多數編程語言都是由大型公司開發的，但Julia是個例外。科技計算領域通常都會使用動態語言，例如Python、Matlab。雖然這些語言提供易于使用的語法，但不適用于大規模的科技計算。他們需要使用C/C ++庫執行CPU密集型任務，因此這就產生了著名的“兩種語言”的問題，因為他們需要粘合代碼來綁定兩種語言。由于編寫的代碼需要在兩種語言之間來回切換，因此總是會損失部分性能。

為了解決這個問題，麻省理工學院的一隊研究人員計劃從頭開始創建一種新的語言，這種語言既可以利用現代硬件的優勢，而且還結合其他語言的優勢。于是，Julia誕生了。

Julia是一種動態的高級編程語言，提供一流的并發、并行和分布式計算支持。Julia的第一個穩定版本于2018年發布，并很快受到社區和行業的關注。Julia可用于科學計算、人工智能和許多其他領域，而且還可以解決“兩種語言”的問題。

主要特征：

與Rust一樣，Julia的主要特征在于語言的設計。這種語言在不犧牲性能的情況下，將高性能和科學計算中現有編程語言的一些功能結合在一起。就目前的情況來看，Julia出色地完成了這項任務。
Julia是一種動態編程語言，支持類型系統但類型不是必須的。因此，Julia這種編程語言很容易學習，生產力很高。
Julia的核心是多調度編程范例。
Julia內部支持并發、并行和分布式計算。
Julia為I/O密集型任務提供異步I/O。
Julia的運行速度非?？?，可用于需要數百萬個線程的科學計算。

流行度：

Julia在許多領域主要與Python競爭。由于Python是最流行的編程語言之一，因此Julia想晉升主流還需要幾年的時間。

雖然Julia非常新（只有一歲），但仍在TIOBE指數中排到第43名：

Google趨勢顯示，在過去的一年中，Julia的熱度在穩步增長：

但是考慮到Julia的功能集，以及NSF、DARPA、NASA、因特爾等公司的推動，相信Julia取得突破的進展只是時間的問題。

主要用途：

科學計算
高性能計算
數據科學
可視化

主要競爭對手：

Python
Matlab

原文鏈接：https://towardsdatascience.com/top-7-modern-programming-language-to-learn-now-156863bd1eec

本文為 CSDN 翻譯，轉載請注明來源出處。

在線咨詢

上一篇：PHP哈希表碰撞攻擊原理
下一篇：PHP 表單和用戶輸入

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML、CSS、JavaScript及相互關系

1 HTML

2 CSS

3 JavaScript

4 案例分析：選項卡控制

錄

介紹

核心思想

基本結構

文本信息

鏈接

表單

總結

您的項目需求

HTML、CSS、JavaScript及相互關系