多人都說我是一門很簡單的語言,看看書,看看視頻就能讀懂我。但是,如果你完全沒有接觸過我,就想通過看一遍教程,背背標簽,想要完全了解我,真的有點太天真了。
我叫“超文本標記語言",英文名字叫HTML,我沒有變量,沒有循環,沒有函數,我只是單純的一門靜態語言而已。你可以用我來描述靜態的東西,比如標題、段落、圖片。
工作的時候,瀏覽器大叔是播放器,我是資源,你們看到的影片是大叔根據我收藏的內容播放出來的。
我們來看一張圖,試著用語言描述一下:
在頁面的頂部有一欄標題欄,下面有張大圖,大圖下面三張圖和圖片介紹,圖文下面有一個標題,標題下面有三個圖文鏈接介紹。
這只是結合圖片來直觀的描述,但是對于瀏覽器來說,需要一個精確的描述。比如:大圖下面三張圖和圖片介紹,介紹中哪些文字需要強調?圖文下面的標題是主標題還是二級標題?
這些都是我作為HTML要表述的。配上CSS來精確的描述字體的顏色,粗細,大小,圖片的寬高,按鈕的位置。
其實了解我并不是一件難事,什么時候學習都不晚。這取決于你是否有足夠的興趣和毅力去堅持你的選擇問題。如果你要學習的話,那要確定自己是否堅定地走“敲代碼”這條不歸路。
入門容易,精通難,且學且珍惜。
在這里推薦一個我認為比較好的練習HTML的方法:拋開CSS,做純粹的代碼練習。其實就是單純的書寫HTML,最終的目的是他人可以通過閱讀這個HTML文件理解到頁面是怎樣的結構,甚至可以通過HTML代碼來畫出大概的頁面。
以下是HTML基本(常用)標簽的整理,希望對你有幫助。
基本
<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標題
<link> 文檔與外部資源的關系
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內容
<!--…--> 注釋
文本
<h1>...</h1> 標題字大小(h1~h6)
<b>...</b> 粗體字
<strong>...</strong> 粗體字(強調)
<i>...</i> 斜體字
<em>...</em> 斜體字(強調)
<u>...</u> 下劃線
<del>...</del> 刪除線(表示刪除)
<center>…</center> 居中文本
<ul>…</ul> 無序列表
<ol>…</ol> 有序列表
<li>…</li> 列表項目
<a href=”…”>…</a> 超鏈接
<font> 定義文本字體尺寸、顏色、大小
<sub> 下標
<sup> 上標
<br> 換行
<p> 段落
圖形
<img src=’”…”> 定義圖像
<hr> 水平線
表格
<table>…</table> 定義表格
<th>…</th> 定義表格中的表頭單元格
<tr>…</tr> 定義表格中的行
<td>…</td> 定義表格中的單元
其它
<form>…</form> 定義供用戶輸入的 HTML 表單
<frame> 定義框架集的窗口或框架
果想開發一個網站,除了要精通后端開發語言(如:php)外,還要精通HTML代碼。那么,什么是HTML呢?HTML是一種超文本標記語言,它包含有眾多的標簽,我們可以通過這些標簽,把不同的internet資源(如:文字、圖片、視頻、音頻、表單等等)整合在一個統一的文檔中,這就形成了我們可以看得見的網頁。那么,HTML都有哪些常用的標簽呢?
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最外層的標簽,所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中,有的標簽是成雙成對的,如:<html></html>(如下圖);而有的標簽是單個的,如:<hr>橫線標簽。
head頭部有以下幾種常用標簽:
meta:主要提供有關頁面的元信息。
link:用來定義文檔與外部資源的關系,最常用的是調用CSS樣式文件。
title:頁面標題的標簽。
script:用來調用JS文件或JS代碼。當然,script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是:獨自占有一行;標簽的高與寬、邊距可以修改;沒有設置寬與高時,默認繼承父標簽。例如:
<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>
前端頁面顯示的效果如下圖:
常用的塊級標簽有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同,它不能獨自占有一行,會與其它內聯標簽在同一樣展示;內聯標簽的高與寬、上下邊距是不能修改的,它里面的文字或圖片有多高,它就是多高。例如如下代碼:
<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樣式代碼跟塊級標簽的例子是一樣的,而顯示的效果就不一樣了,寬與高、上下邊距沒有效果。如下圖:
常用的內聯標簽有:span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽,既有一些內聯標簽的特性,也有一些塊級標簽的特點:它不能獨自占有一行,但是可以修改它的寬度和高度。例如下面這段代碼:
<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樣式代碼跟塊級標簽的那個例子仍然是一樣的,圖片的寬和高、上下邊距修改成功,而2個圖片不能獨自占有一行,而是在同一行。如下圖:
常用的內聯塊級標簽有:img、input、textarea。
4、區域標簽。
所謂區域標簽,就是主要用來劃分布局頁面區域的。如:頭部、主體內容、側邊欄、底部。這樣劃分的好處是:讓頁面布局更加清晰明了。
常用的區域標簽有:header(頭部)、footer(底部)、nav(導航)、aside(側邊欄)、section(主體)、article(獨立內容)。
5、表單標簽。
這個表單標簽我們也是會經常用到的,如:登錄網站的時候、提交數據的時候。如下圖的評論表單:
?表單常用的標簽有:form、input、select、option、textarea 。
以上就是我們開發網頁時,會常用到的HTML標簽。當然,HTML標簽遠不止這些,尤其是html5出來后,新增了許多的新標簽。但是,有些標簽在我們開發中很少用到,所以,這里就沒有做相應的介紹。
技時代,哪個行業工資最高?待遇最好?當然是互聯網IT行業。
2017年中國軟件產業規模已超過5萬億元,軟件和信息技術服務業占我國電子信息產業的比重將超過30%,軟件產業能力顯著提升。
但據國內權威數據統計,未來五年,我國信息化人才總需求量高達1500萬—2000萬人。其中“軟件開發”、“網絡工程”等人才的缺口最為突出。以軟件開發為例,我國軟件人才需求以每年遞增20%的速度增長,每年新增需求近百萬。
這也是目前很多非科班出身的同學為了搭上互聯網的快車開始學習編程的原因,但是剛開始應該選擇哪個學科,卻給很多同學帶來了很大困擾。
然而,大家對于“前端、后端、全棧”的概念還非常模糊,今天小編就帶大家去了解什么是前端、后端以及全棧。
一、前端方向
網站的“前端”是與用戶直接交互的部分,包括你在瀏覽網頁時接觸的所有視覺內容--從字體到顏色,以及下拉菜單和側邊欄。這些視覺內容,都是由瀏覽器解析、處理、渲染相關 HTML、CSS、Javascript 文件后呈現而來。
技能與工具
前端開發,就是要創造上面提到的網站面向用戶的部分背后的代碼,并通過建立框架,構建沉浸性的用戶體驗。為了實現這個目標,開發需要熟練運用下列語言、框架、工具庫:
三大語言: HTML,CSS,和 Javascript;
此外,掌握 jQuery 和 LESS 等工具庫也很重要,它們能幫助開發者以更高效的方式編碼;
很多前端開發崗也要求 Ajax 方法的使用經驗,它可以幫助你使用 Javascript 在后臺從服務器拉取數據,協助實現頁面的動態加載。
工程師的職責
-為網站上提供的產品和服務實現一流的Web界面,優化代碼并保持良好兼容性。
-Web前端表現層及與前后端交互的架構設計和開發。
-JavaScript程序模塊開發,通用類庫、框架編寫。
-利用各種Web技術模擬開發產品原型。
-配合后臺開發人員實現產品界面和功能。
-Web新技術調研和資訊整理。
-精通HTML/XHTML、CSS,熟悉頁面架構和布局,對Web標準和標簽語義化有深入理解。
-精通Ajax、JavaScript(或者ActionScript)、DOM等前端技術,掌握面向對象編程思想。
-熟悉一種以上后臺開發語言(如PHP/Java或C/C++/.NET)以及一種數據庫(如MySQL/Oracle),有Linux系統操作。
web前端開發工程師需要長期的web開發經驗,例如:
-對Web技術創新及豐富互聯網應用開發(Rich Internet Applications)有濃厚興趣。
-對用戶體驗、交互操作流程、及用戶需求有深入理解。
二、后端方向
是什么給網站前端提供支持?數據存放在哪里?這就涉及后端內容了。網站后端包括服務器、應用還有數據庫。后端開發者構建并維護這些組件,為網站提供多方面支持。
技能與工具
為了讓服務器、應用、數據庫能夠彼此交互,后端工程師需要具有如下技能:
用于應用構建的服務器端語言: PHP, Ruby, Python, Java, .Net 等;
數據相關工具: MySQL, Oracle, SQL Server 等;
PHP框架: Zend, Symfony, CakePHP等;
版本控制工具:SVN, CVS , Git 等;
還要熟練使用 Linux 作為開發和部署環境。
工程師的職責
在Web開發世界中,大多數后端開發人員從事于構建他們正在工作的應用程序背后的實際邏輯。
通常,前端開發人員構建用戶界面,而后端開發人員編寫代碼,使其工作。
例如,前端開發人員在應用程序中創建一個界面,上面有一個按鈕,按下按鈕來獲取客戶的數據。
后端開發人員寫可使得按鈕工作的代碼,通過指出從數據庫中提取哪些數據并將其傳回到前端(并最終顯示在那里)。
后端開發人員也可能會大量參與系統架構,決定如何組織系統的邏輯,以便能夠正常維護和運行。
他可能會參與構建框架或系統架構,以便于更容易編寫程序。后端開發人員比前端開發人員花費更多的時間在實現算法和解決問題上。
三、全棧
有時前后端之間并沒有明確的界限,“前端開發者通常需要額外學習后端技巧,反之亦然,尤其在特定市場條件下”,Matranga 說:“開發者需要跨領域知識,有時甚至需要成為全才。”
全棧工程師,最初是6年多以前由 Facebook 帶動的概念。全棧的核心,是指這批開發者能夠承擔包括前端、后端在內的所有功能開發任務,他們擁有一個技能全家桶。
“能夠同時承擔服務器端和客戶端工作會為你帶來更多機會,” Grovo 的全棧工程師 Federico Ulfo 說 “當然這也就意味著更多的挑戰。以廚藝作類比,掌握烹飪和烘焙都需要時間與經驗積累,同時掌握兩者要花費更多精力。照著菜譜做誰都可以,我此處所說的是做出真正美味東西的能力。”
技能與工具
-通過終端連接到非圖形化界面環境的遠程服務器
-基本的 shell 腳本編程
-管理服務器的用戶和用戶組
-管理服務器程序比如 Apache 和 Nginx,以便其服務于應用程序
-管理防火墻和權限
-安裝新軟件,更新軟件版本
工程師的職責
懂得如何通過 Docker 或虛擬機比如 Vagrant 來創建良好、健康、隔離的開發環境。
熟諳版本控制系統,才能夠可靠地生成可共享的、協作的代碼庫及其備份, 并且隨時間流逝跟蹤其變化。
除了實際管理的或虛擬化的服務器,開發者可能還需要知道云 – 托管平臺,像 Heroku、Google Clould、Azure、AWS 等。
看了這些,是不是對于選擇職業有了更清晰的認識了呢?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。