不懂HTML？看這篇文章就夠了

多人都說我是一門很簡單的語言，看看書，看看視頻就能讀懂我。但是，如果你完全沒有接觸過我，就想通過看一遍教程，背背標(biāo)簽，想要完全了解我，真的有點太天真了。

我叫“超文本標(biāo)記語言"，英文名字叫HTML，我沒有變量，沒有循環(huán)，沒有函數(shù)，我只是單純的一門靜態(tài)語言而已。你可以用我來描述靜態(tài)的東西，比如標(biāo)題、段落、圖片。

工作的時候，瀏覽器大叔是播放器，我是資源，你們看到的影片是大叔根據(jù)我收藏的內(nèi)容播放出來的。

我們來看一張圖，試著用語言描述一下：

在頁面的頂部有一欄標(biāo)題欄，下面有張大圖，大圖下面三張圖和圖片介紹，圖文下面有一個標(biāo)題，標(biāo)題下面有三個圖文鏈接介紹。

這只是結(jié)合圖片來直觀的描述，但是對于瀏覽器來說，需要一個精確的描述。比如：大圖下面三張圖和圖片介紹，介紹中哪些文字需要強調(diào)？圖文下面的標(biāo)題是主標(biāo)題還是二級標(biāo)題？

這些都是我作為HTML要表述的。配上CSS來精確的描述字體的顏色，粗細(xì)，大小，圖片的寬高，按鈕的位置。

其實了解我并不是一件難事，什么時候?qū)W習(xí)都不晚。這取決于你是否有足夠的興趣和毅力去堅持你的選擇問題。如果你要學(xué)習(xí)的話，那要確定自己是否堅定地走“敲代碼”這條不歸路。

入門容易，精通難，且學(xué)且珍惜。

在這里推薦一個我認(rèn)為比較好的練習(xí)HTML的方法：拋開CSS，做純粹的代碼練習(xí)。其實就是單純的書寫HTML，最終的目的是他人可以通過閱讀這個HTML文件理解到頁面是怎樣的結(jié)構(gòu)，甚至可以通過HTML代碼來畫出大概的頁面。

以下是HTML基本（常用）標(biāo)簽的整理，希望對你有幫助。

基本

<html>…</html> 定義 HTML 文檔

<head>…</head> 文檔的信息

<title>…</title> 文檔的標(biāo)題

<body>…</body> 可見的頁面內(nèi)容

注釋

文本

<h1>...</h1> 標(biāo)題字大小（h1~h6）

<b>...</b> 粗體字

<strong>...</strong> 粗體字(強調(diào))

<i>...</i> 斜體字

<em>...</em> 斜體字(強調(diào))

<u>...</u> 下劃線

<del>...</del> 刪除線(表示刪除)

<center>…</center> 居中文本

<ul>…</ul> 無序列表

<ol>…</ol> 有序列表

<li>…</li> 列表項目

<a href=”…”>…</a> 超鏈接

<font> 定義文本字體尺寸、顏色、大小

<sub> 下標(biāo)

<sup> 上標(biāo)

<br> 換行

<p> 段落

圖形

<img src=’”…”> 定義圖像

<hr> 水平線

表格

<table>…</table> 定義表格

<th>…</th> 定義表格中的表頭單元格

<tr>…</tr> 定義表格中的行

<td>…</td> 定義表格中的單元

其它

<form>…</form> 定義供用戶輸入的 HTML 表單

<frame> 定義框架集的窗口或框架

果想開發(fā)一個網(wǎng)站，除了要精通后端開發(fā)語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語言，它包含有眾多的標(biāo)簽，我們可以通過這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標(biāo)簽。

這個標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個標(biāo)簽的內(nèi)部。

<html>

</html>

三、雙標(biāo)簽和單標(biāo)簽。

在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個的，如：<hr>橫線標(biāo)簽。

四、head頭部標(biāo)簽。

head頭部有以下幾種常用標(biāo)簽：

meta：主要提供有關(guān)頁面的元信息。

link：用來定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。

title：頁面標(biāo)題的標(biāo)簽。

script：用來調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。

五、body主體標(biāo)簽。

1、塊級標(biāo)簽。

塊級標(biāo)簽的特性是：獨自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒有設(shè)置寬與高時，默認(rèn)繼承父標(biāo)簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內(nèi)聯(lián)標(biāo)簽。

內(nèi)聯(lián)標(biāo)簽與塊級標(biāo)簽不同，它不能獨自占有一行，會與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。

3、內(nèi)聯(lián)塊級標(biāo)簽。

內(nèi)聯(lián)塊級標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級標(biāo)簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標(biāo)簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：

常用的內(nèi)聯(lián)塊級標(biāo)簽有：img、input、textarea。

4、區(qū)域標(biāo)簽。

所謂區(qū)域標(biāo)簽，就是主要用來劃分布局頁面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨立內(nèi)容）。

5、表單標(biāo)簽。

這個表單標(biāo)簽我們也是會經(jīng)常用到的，如：登錄網(wǎng)站的時候、提交數(shù)據(jù)的時候。如下圖的評論表單：

?表單常用的標(biāo)簽有：form、input、select、option、textarea 。

以上就是我們開發(fā)網(wǎng)頁時，會常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠不止這些，尤其是html5出來后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒有做相應(yīng)的介紹。

技時代，哪個行業(yè)工資最高？待遇最好？當(dāng)然是互聯(lián)網(wǎng)IT行業(yè)。

2017年中國軟件產(chǎn)業(yè)規(guī)模已超過5萬億元，軟件和信息技術(shù)服務(wù)業(yè)占我國電子信息產(chǎn)業(yè)的比重將超過30%，軟件產(chǎn)業(yè)能力顯著提升。

但據(jù)國內(nèi)權(quán)威數(shù)據(jù)統(tǒng)計，未來五年，我國信息化人才總需求量高達1500萬—2000萬人。其中“軟件開發(fā)”、“網(wǎng)絡(luò)工程”等人才的缺口最為突出。以軟件開發(fā)為例，我國軟件人才需求以每年遞增20%的速度增長，每年新增需求近百萬。

這也是目前很多非科班出身的同學(xué)為了搭上互聯(lián)網(wǎng)的快車開始學(xué)習(xí)編程的原因，但是剛開始應(yīng)該選擇哪個學(xué)科，卻給很多同學(xué)帶來了很大困擾。

然而，大家對于“前端、后端、全棧”的概念還非常模糊，今天小編就帶大家去了解什么是前端、后端以及全棧。

一、前端方向

網(wǎng)站的“前端”是與用戶直接交互的部分，包括你在瀏覽網(wǎng)頁時接觸的所有視覺內(nèi)容--從字體到顏色，以及下拉菜單和側(cè)邊欄。這些視覺內(nèi)容，都是由瀏覽器解析、處理、渲染相關(guān) HTML、CSS、Javascript 文件后呈現(xiàn)而來。

技能與工具

前端開發(fā)，就是要創(chuàng)造上面提到的網(wǎng)站面向用戶的部分背后的代碼，并通過建立框架，構(gòu)建沉浸性的用戶體驗。為了實現(xiàn)這個目標(biāo)，開發(fā)需要熟練運用下列語言、框架、工具庫：

三大語言： HTML，CSS，和 Javascript；
此外，掌握 jQuery 和 LESS 等工具庫也很重要，它們能幫助開發(fā)者以更高效的方式編碼；
很多前端開發(fā)崗也要求 Ajax 方法的使用經(jīng)驗，它可以幫助你使用 Javascript 在后臺從服務(wù)器拉取數(shù)據(jù)，協(xié)助實現(xiàn)頁面的動態(tài)加載。

工程師的職責(zé)

-為網(wǎng)站上提供的產(chǎn)品和服務(wù)實現(xiàn)一流的Web界面，優(yōu)化代碼并保持良好兼容性。

-Web前端表現(xiàn)層及與前后端交互的架構(gòu)設(shè)計和開發(fā)。

-JavaScript程序模塊開發(fā)，通用類庫、框架編寫。

-利用各種Web技術(shù)模擬開發(fā)產(chǎn)品原型。

-配合后臺開發(fā)人員實現(xiàn)產(chǎn)品界面和功能。

-Web新技術(shù)調(diào)研和資訊整理。

-精通HTML/XHTML、CSS，熟悉頁面架構(gòu)和布局，對Web標(biāo)準(zhǔn)和標(biāo)簽語義化有深入理解。

-精通Ajax、JavaScript(或者ActionScript)、DOM等前端技術(shù)，掌握面向?qū)ο缶幊趟枷搿?/p>

-熟悉一種以上后臺開發(fā)語言(如PHP/Java或C/C++/.NET)以及一種數(shù)據(jù)庫(如MySQL/Oracle)，有Linux系統(tǒng)操作。

web前端開發(fā)工程師需要長期的web開發(fā)經(jīng)驗，例如：

-對Web技術(shù)創(chuàng)新及豐富互聯(lián)網(wǎng)應(yīng)用開發(fā)(Rich Internet Applications)有濃厚興趣。

-對用戶體驗、交互操作流程、及用戶需求有深入理解。

二、后端方向

是什么給網(wǎng)站前端提供支持？數(shù)據(jù)存放在哪里？這就涉及后端內(nèi)容了。網(wǎng)站后端包括服務(wù)器、應(yīng)用還有數(shù)據(jù)庫。后端開發(fā)者構(gòu)建并維護這些組件，為網(wǎng)站提供多方面支持。

技能與工具

為了讓服務(wù)器、應(yīng)用、數(shù)據(jù)庫能夠彼此交互，后端工程師需要具有如下技能：

用于應(yīng)用構(gòu)建的服務(wù)器端語言： PHP, Ruby, Python, Java, .Net 等；
數(shù)據(jù)相關(guān)工具： MySQL, Oracle, SQL Server 等；
PHP框架： Zend, Symfony, CakePHP等；
版本控制工具：SVN, CVS , Git 等；
還要熟練使用 Linux 作為開發(fā)和部署環(huán)境。

工程師的職責(zé)

在Web開發(fā)世界中，大多數(shù)后端開發(fā)人員從事于構(gòu)建他們正在工作的應(yīng)用程序背后的實際邏輯。

通常，前端開發(fā)人員構(gòu)建用戶界面，而后端開發(fā)人員編寫代碼，使其工作。

例如，前端開發(fā)人員在應(yīng)用程序中創(chuàng)建一個界面，上面有一個按鈕，按下按鈕來獲取客戶的數(shù)據(jù)。

后端開發(fā)人員寫可使得按鈕工作的代碼，通過指出從數(shù)據(jù)庫中提取哪些數(shù)據(jù)并將其傳回到前端（并最終顯示在那里）。

后端開發(fā)人員也可能會大量參與系統(tǒng)架構(gòu)，決定如何組織系統(tǒng)的邏輯，以便能夠正常維護和運行。

他可能會參與構(gòu)建框架或系統(tǒng)架構(gòu)，以便于更容易編寫程序。后端開發(fā)人員比前端開發(fā)人員花費更多的時間在實現(xiàn)算法和解決問題上。

三、全棧

有時前后端之間并沒有明確的界限，“前端開發(fā)者通常需要額外學(xué)習(xí)后端技巧，反之亦然，尤其在特定市場條件下”，Matranga 說：“開發(fā)者需要跨領(lǐng)域知識，有時甚至需要成為全才。”

全棧工程師，最初是6年多以前由 Facebook 帶動的概念。全棧的核心，是指這批開發(fā)者能夠承擔(dān)包括前端、后端在內(nèi)的所有功能開發(fā)任務(wù)，他們擁有一個技能全家桶。

“能夠同時承擔(dān)服務(wù)器端和客戶端工作會為你帶來更多機會，” Grovo 的全棧工程師 Federico Ulfo 說 “當(dāng)然這也就意味著更多的挑戰(zhàn)。以廚藝作類比，掌握烹飪和烘焙都需要時間與經(jīng)驗積累，同時掌握兩者要花費更多精力。照著菜譜做誰都可以，我此處所說的是做出真正美味東西的能力。”

技能與工具

-通過終端連接到非圖形化界面環(huán)境的遠程服務(wù)器

-基本的 shell 腳本編程

-管理服務(wù)器的用戶和用戶組

-管理服務(wù)器程序比如 Apache 和 Nginx，以便其服務(wù)于應(yīng)用程序

-管理防火墻和權(quán)限

-安裝新軟件，更新軟件版本

工程師的職責(zé)

懂得如何通過 Docker 或虛擬機比如 Vagrant 來創(chuàng)建良好、健康、隔離的開發(fā)環(huán)境。

熟諳版本控制系統(tǒng)，才能夠可靠地生成可共享的、協(xié)作的代碼庫及其備份，并且隨時間流逝跟蹤其變化。

除了實際管理的或虛擬化的服務(wù)器，開發(fā)者可能還需要知道云 – 托管平臺，像 Heroku、Google Clould、Azure、AWS 等。

看了這些，是不是對于選擇職業(yè)有了更清晰的認(rèn)識了呢？

在線咨詢

上一篇：JavaScript中的堆棧 stack heap
下一篇：ES6新增數(shù)值的擴展

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

不懂HTML？看這篇文章就夠了

一、文檔類型聲明。

二、html主標(biāo)簽。

三、雙標(biāo)簽和單標(biāo)簽。

四、head頭部標(biāo)簽。

五、body主體標(biāo)簽。

您的項目需求