整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
服務(wù)器軟件：Apache、IIS
瀏覽器是一個(gè)翻譯官，是一個(gè)解釋器。瀏覽器可以翻譯有HTML、CSS、JavaScript。
服務(wù)器端腳本程序：PHP、 .net、JSP、c#等
.php文件要由PHP腳本引擎來進(jìn)行處理。
網(wǎng)站前臺(tái)(客戶端) 網(wǎng)站后臺(tái)(服務(wù)器端) 數(shù)據(jù)庫
HTML(結(jié)構(gòu)) PHP MySQL
CSS JSP Oracle
JavaScript .net SqlServer
HTML結(jié)構(gòu)：主要來說明，哪個(gè)地方是標(biāo)題，哪個(gè)地方是段落，哪個(gè)地方是表格，哪個(gè)地方是表單。
CSS表現(xiàn)(格式)：主要功能是，給相對(duì)應(yīng)的HTML標(biāo)記定義各種各樣的格式。
JavaScript行為：主要用于與計(jì)算機(jī)網(wǎng)頁進(jìn)行交互(交流)。
塊元素和行內(nèi)元素
塊元素：寬度單獨(dú)占一個(gè)通欄寬，塊元素的前臺(tái)的其它元素，都要另起一行來排。
比如：<p> <pre> <hr> <h1>……<h6> <ul> <ol> <li>
DIV和SPAN就是一個(gè)容器，容器中可以存放任何可以存放在<body>中的內(nèi)容或標(biāo)記。
行內(nèi)元素：行內(nèi)元素沒有寬度和高度的概念，也就是說通過CSS無法給行內(nèi)元素增加寬和高。多個(gè)行內(nèi)元素會(huì)放在同一行，不會(huì)另起一行來排版。
Direction：滾動(dòng)的方向，取值：left、right、up、down
Behavior：滾動(dòng)的方式，取值：scroll(滾動(dòng))、 alternate(彈動(dòng))、 slide(滾動(dòng)一次)
Width：滾動(dòng)的區(qū)域?qū)挾龋≈担簆x或%
Height；滾動(dòng)的區(qū)域高度
bgColor：背景顏色，如：bgcolor=“#FF0000” bgcolor=“rgb(255,0,0)”
scrollAmount：滾動(dòng)步長(zhǎng)值，一步走多遠(yuǎn)，值越大，走的越快
scrollDelay：兩次滾動(dòng)的間隔時(shí)間，以毫秒為單位 1秒=1000毫秒
進(jìn)制，就是一種進(jìn)位方法。
10進(jìn)制：有10個(gè)基本數(shù)，0、1、2、3、4、5、6、7、8、9，運(yùn)算規(guī)則是：逢十進(jìn)一
例如：9 10 19 20 29 30
2進(jìn)制：有2個(gè)基本數(shù)，0、 1，運(yùn)算規(guī)則是：逢二進(jìn)一。比如：(10)2 11 100 101 110
8進(jìn)制：有8個(gè)基本數(shù)，0、1、2、3、4、5、6、7，運(yùn)算規(guī)則是：逢八進(jìn)一。比如：(17)8 20 21 26 27 30
因?yàn)槎M(jìn)制太長(zhǎng)，不方便記憶，因此小型機(jī)引入了八進(jìn)制，八進(jìn)制可以很好的反應(yīng)二進(jìn)制。
因此，一個(gè)八進(jìn)制數(shù)，用3位二進(jìn)制數(shù)來表示。
基R=2^3
16進(jìn)制：有16個(gè)基本數(shù)，0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F，運(yùn)算規(guī)則是：逢16進(jìn)一
比如：EF F0 F1 F2 FE FF (100)16
16進(jìn)制的一位對(duì)應(yīng)4位二進(jìn)制。基R=2^4
| 10進(jìn)制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 2進(jìn)制 | 1 | 10 | 11 | 100 | 101 | 110 | 111 | 1000 | 1001 | 1010 | 1011 | 1100 | |||||||
| 8進(jìn)制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | |||
| 16進(jìn)制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | 10 | 11 | 12 | 13 |
十進(jìn)制轉(zhuǎn)成二進(jìn)制
分為整數(shù)部分和小數(shù)部分，分別轉(zhuǎn)換。比如：將(10.125)10轉(zhuǎn)成二進(jìn)制？ 1010.001
（1）整數(shù)部分轉(zhuǎn)成二進(jìn)制：除2取余法。每次將整數(shù)除以2，取余數(shù)，一直除下去，直到整數(shù)部分(商)為0。最后讀數(shù)時(shí)，從下往上讀取。
| 第N次 | 整數(shù)10 | 商 | 余數(shù) | ||
| 第1次 | 10/2 | 5 | 0 | ||
| 第2次 | 5/2 | 2 | 1 | ||
| 第3次 | 2/2 | 1 | 0 | ||
| 第4次 | 1/2 | 0 | 1 | 最后結(jié)果為：1010 | |
（2）小數(shù)部分轉(zhuǎn)成二進(jìn)制：乘2除整法。每次將小數(shù)部分乘以2，取整數(shù)，一直乘下去，直到小數(shù)部分為0。最后讀數(shù)時(shí)，從上往下讀取。
| 第N次 | 小數(shù)0.125 | 積 | 整數(shù) | ||
| 第1次 | 0.125*2 | 0.25 | 0 | ||
| 第2次 | 0.25*2 | 0.5 | 0 | ||
| 第3次 | 0.5*2 | 1.0 | 1 | ||
| 最后結(jié)果為：001 | |||||
二進(jìn)制轉(zhuǎn)成十進(jìn)制
不分整數(shù)部分和小數(shù)部分，按權(quán)相加法。換句話說：二進(jìn)制上的每一位，乘以所在位權(quán)(也就是2的幾次方)，最后將各個(gè)位的乘相加，就能得到十進(jìn)制。
1010.001 = 1*2^3 + 0*2^2 + 1*2^1 + 0*2^0 + 0*2^-1 + 0*2^-2 + 1*2^-3 = 8+2+ 1/8 = 10+0.125 = 10.125
計(jì)算機(jī)只能二進(jìn)制，比如：a-z、A-Z、0-9、標(biāo)點(diǎn)符號(hào)，計(jì)算機(jī)都不能直接識(shí)別。每個(gè)人都可以來約定一套字符編碼（比如：a用二進(jìn)制100表示，b用二進(jìn)制101表示,c用二進(jìn)制的110表示等）
計(jì)算機(jī)是由美國人發(fā)明的，美國標(biāo)準(zhǔn)化局同樣制定了一套統(tǒng)一的編碼，叫ASCII碼。
ASCII碼
ASCII編碼用7位或8位(1個(gè)字節(jié))二進(jìn)制來表示，共可以表示128或256個(gè)字符。包括：大小寫字母、數(shù)字、標(biāo)點(diǎn)符號(hào)、圖形符號(hào)等。
每個(gè)國家都想讓計(jì)算機(jī)能顯示或處理本國的語言，都對(duì)ASCII碼進(jìn)行了擴(kuò)展。
在中國(簡(jiǎn)體字)，ANSI編碼是指GB2312或GBK。
在臺(tái)灣(繁體字)，ANSI編碼是指BIG5
在日本，ANSI編碼是指JIS。
……
注意：ANSI編碼是跟隨操作一齊安裝的，也就是，安裝了中文操作系統(tǒng)后，它的默認(rèn)編碼就是GB2312。
GB2312是中國標(biāo)準(zhǔn)化局，在1980年制定的一套顯示簡(jiǎn)體中文的編碼。
GB2312是用2個(gè)字節(jié)來顯示。共可以表示2^16=256*256=65536個(gè)字符。
GB2312共保存了6763個(gè)常用漢字，一級(jí)漢字3700個(gè)。
GBK編碼
對(duì)GB2312進(jìn)行了擴(kuò)充，可以顯示人名、古漢語中的一些罕見字等。
GBK也是用2個(gè)字節(jié)來表示。共存儲(chǔ)了2.3萬個(gè)左右的中文字符。
GBK的范圍，要比GB2312大的多。
BIG5編碼
BIG5用于臺(tái)灣、香港、澳門地區(qū)的繁體中文編碼。
Unicode編碼
用4個(gè)字節(jié)表示字符，共可以表示42個(gè)億個(gè)字符。
Unicode編碼可以顯示世界上所有國家的語言。
缺點(diǎn)：文件龐大，效率不高，不利于推廣。
UTF-8統(tǒng)一格式轉(zhuǎn)換
它會(huì)自動(dòng)根據(jù)不同的字符，來選擇不同編碼長(zhǎng)度。
<meta>標(biāo)記是設(shè)置一些網(wǎng)頁文件頭方面的信息。主要包括：網(wǎng)頁編碼或字符集設(shè)置、網(wǎng)頁關(guān)鍵字、網(wǎng)頁描述、網(wǎng)頁刷新跳轉(zhuǎn)等。相當(dāng)于一封信的信封，信封有地址、郵編等重要。
<head>標(biāo)記中的內(nèi)容在瀏覽器中，是不可見的。
主要用兩個(gè)常用的屬性：
http-equiv：主要設(shè)置一些控制信息，屬性值是固定的。比如：content-type
name：一般用于設(shè)置網(wǎng)頁描述信息，像關(guān)鍵字、網(wǎng)頁描述、網(wǎng)頁版權(quán)、作者等，屬性值是固定的。比如：keywords
content：是具體的參數(shù)或內(nèi)容，與http-equiv和name屬性進(jìn)行對(duì)應(yīng)。
（1）設(shè)置網(wǎng)頁的字符集或編碼
<meta http-equiv=“content-type” content=“text/html;charset=GBK”>
（2）設(shè)置網(wǎng)頁刷新或跳轉(zhuǎn)
<meta http-equiv=“refresh” content=“5”> 表示每隔5秒鐘，刷新網(wǎng)頁
<meta http-equiv=“refresh” content=“5;url=http://www.baidu.com”> 表示5秒鐘后，跳轉(zhuǎn)到百度網(wǎng)
注意：刷新功能相當(dāng)于瀏覽器中的刷新按鈕
（3）設(shè)置網(wǎng)頁關(guān)鍵字(SEO優(yōu)化)，給搜索引擎(搜索機(jī)器人)使用
<meta name=“keywords” content=“程序開發(fā),平面設(shè)置,空間域名,網(wǎng)站維護(hù)”>
（4）設(shè)置網(wǎng)頁描述信息(SEO優(yōu)化)
<meta name=“description” content=“廣州網(wǎng)站建設(shè)思優(yōu)網(wǎng)絡(luò)公司,提供專業(yè)廣州網(wǎng)站制作及網(wǎng)站推廣相結(jié)合的建站方案,由專業(yè)廣州網(wǎng)站設(shè)計(jì)人員結(jié)合搜索引擎優(yōu)化經(jīng)驗(yàn)為您設(shè)計(jì)網(wǎng)站;廣州網(wǎng)頁設(shè)計(jì):020-87537332”>
XHTML是可擴(kuò)展超文本標(biāo)注語言，XHTML是更純凈的HTML，語法更嚴(yán)格。
XHTML的目的是為了取代HTML4.01。
XHTML是W3C的一個(gè)標(biāo)準(zhǔn)或規(guī)范。
編寫XHTML的規(guī)范，與HTML編寫有何不同？
1）所有的標(biāo)記都必須被關(guān)閉。比如：<br>轉(zhuǎn)換<br /> <hr>轉(zhuǎn)換后 <hr />
2）XHTML要求所有的標(biāo)記名稱必須小寫。比如：<meta><table><img><font>
3）XHTML要求所有的屬性名必須小寫，屬性值必須加引號(hào)。
4）XHTML要求所有的屬性必須有值。
<hr noshade=“noshade” />
<input type=“radio” checked=“checked” />
5）所有的標(biāo)記要順序嵌套，不能交叉嵌套；
6）XHTML文件，必須要有DTD文檔類型定義；
DTD(Document Type Define)文檔類型定義
（1）嚴(yán)格型Strict
要求HTML代中，不能存在任何的表現(xiàn)，用CSS去代替。比如：<font>、bgcolor、background等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
（2）過渡型transitional
可以使用任何表現(xiàn)的標(biāo)記或?qū)傩浴?/p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（3）框架型Frameset
制作框架網(wǎng)頁時(shí)使用的一種類型，框架主要用于網(wǎng)站的后臺(tái)管理。
框架技術(shù)：是將一個(gè)瀏覽器窗口劃分成不同區(qū)域，每個(gè)區(qū)域(窗口)都可以顯示一個(gè)獨(dú)立的網(wǎng)頁。（HTML第四天單獨(dú)講框架，現(xiàn)在作個(gè)了解）
W3C是萬維網(wǎng)聯(lián)盟，是一個(gè)國際性的非盈利性組織，是WEB領(lǐng)域最具權(quán)威性的組織。已經(jīng)制定多達(dá)200多項(xiàng)的標(biāo)準(zhǔn)。
比如：XHTML、CSS、ECMAScript(JavaScript)、DOM、 XML等。
超級(jí)鏈接的功能：就是點(diǎn)擊某個(gè)鏈接，可以跳轉(zhuǎn)到目標(biāo)頁面或文件。
超級(jí)鏈接的分類：
（1）按內(nèi)容分類：文本鏈接、圖片鏈接、多媒體等
（2）按URL分類：相對(duì)URL、絕對(duì)URL、錨點(diǎn)
URL，指網(wǎng)址或路徑
URL(Uniform Resource Locator，統(tǒng)一資源定位器)，也就是指互聯(lián)網(wǎng)地址。
http://www.sina.com.cn/about/index.html
第一個(gè)部分：協(xié)議，指訪問什么類型的服務(wù)器，如：http://、FTP://、news://
第二個(gè)部分：主機(jī)名或主機(jī)的IP地址。如：www.sina.com.cn
第三個(gè)部分：文件夾名，如：about
第四個(gè)部分：文件名，如：index.html
格式：<a 屬性=“屬性值”>新浪網(wǎng)</a>
常用的屬性：
Href：指鏈接的目標(biāo)文件或網(wǎng)址。比如：href=“http://www.toutiao.com”
Target：指目標(biāo)文件的打開方式。
_blank：在新窗口中，來打開目標(biāo)文件；
_self：在當(dāng)前窗口中，來打開目標(biāo)文件；
_top：在最頂層窗口中，來打開目標(biāo)文件(在框架中講)；
_parent：在父窗口中，來打開目標(biāo)文件(在框架中講)
Name：設(shè)置錨點(diǎn)的名稱。錨點(diǎn)是指：鏈接到同一個(gè)頁面的不同部分
舉例：<a href=http://www.toutiao.com target=“_blank”>頭條號(hào)</a>
絕對(duì)URL：它總是以file:///協(xié)議開頭，去訪問目標(biāo)文件。
如果將當(dāng)前文件移動(dòng)到其它地方，這個(gè)絕對(duì)URL路徑不需要修改。
絕對(duì)URL，只需要確定目標(biāo)文件的路徑即可，與當(dāng)前文件位置無關(guān)。
例如：<a href=“file:///E:/itcast/20140510/lesson/day2/4.html”>本地絕對(duì)路徑</a>
相對(duì)URL：要確定當(dāng)前文件與目標(biāo)文件的關(guān)系。
關(guān)系分為三種：
平級(jí)關(guān)系：直接寫目標(biāo)文件的文件名即可。
下級(jí)關(guān)系：也就是目標(biāo)文件所在的文件夾與當(dāng)前文件是平級(jí)關(guān)系，當(dāng)前文件與目標(biāo)文件是上下級(jí)關(guān)系。
上級(jí)關(guān)系：目標(biāo)文件位于上一層級(jí)。
../代表上一層文件夾
../../代表上二層文件夾
../../images/01.jpg
提示：在制作網(wǎng)站時(shí)，一般使用的都是相對(duì)路徑。
（3）下載鏈接：如果鏈接到的文件，網(wǎng)頁不能直接執(zhí)行的話，都會(huì)出現(xiàn)下載提示。
瀏覽器可以直接執(zhí)行的文件：.gif、.jpg、.png、html、.htm、.mp3、.swf等
（4）郵箱鏈接：mailto:beijing2000@126.com
第一步：定義一個(gè)錨點(diǎn)或標(biāo)記 <a name=“top”></a>
第二步：鏈接到錨點(diǎn)或標(biāo)記 <a href=“#top”>返回頂部</a>
<a href=“intro.html#bottom”>鏈接到intro.html的底部</a>
格式：<img 屬性＝“屬性值” />
常用的屬性：
Src：指圖片的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。
Width：指圖片的寬度，單位px或%
Height：指圖片的高度
Align：圖片的水平對(duì)齊方式，取值：left center right ，left或right可以實(shí)現(xiàn)圖文混排
Alt：如果圖片不存在時(shí)，顯示的提示信息
Hspace：圖片左右的距離
Vspace：圖片上下的距離
舉例：<img src=“images/01.gif” width=“400” height=“300” alt=“寶寶圖片” />
如果保證圖片在調(diào)整過程中不變形（等比例縮放）：只需要設(shè)置width和height其中一個(gè)即可，另一個(gè)會(huì)自動(dòng)縮放。
，第4個(gè)電商項(xiàng)目。
這是第3個(gè)項(xiàng)目電商的延續(xù)，因?yàn)槭峭粨軋F(tuán)隊(duì)繼續(xù)干的項(xiàng)目。這份經(jīng)歷暫時(shí)不方便透露太多，只能說這是以我原來的第3個(gè)電商項(xiàng)目的技術(shù)團(tuán)隊(duì)核心成員為班底的，又一個(gè)從零開始的項(xiàng)目，同樣是海淘。
經(jīng)過半年多一點(diǎn)，現(xiàn)在已經(jīng)走到了B輪。對(duì)于做海淘的電商而言，因?yàn)槲覀儗儆诤筮M(jìn)者，節(jié)奏要比其他項(xiàng)目要快一些，要不是沒有任何機(jī)會(huì)的了，也就意味著別人可能是半年或3個(gè)月就融資一次，那么我們就得基本上2個(gè)月就進(jìn)行一次融資，至少在C輪以前必須是這樣的速度，要么只有等死。
可想而知，要能完成這樣的融資節(jié)奏，那么開發(fā)、推廣和運(yùn)營(yíng)是怎樣的節(jié)奏呢？作為參與者當(dāng)然是非常非常辛苦的。這幾個(gè)月不能說天天有發(fā)版，但基本上每周二周四會(huì)有一個(gè)小版本，1周或2周就得完成有一個(gè)中級(jí)版本，可能是多個(gè)版本交替迭代的，而一個(gè)月就一個(gè)大版本更新。那么，單就前端開發(fā)而言，如果沒有很好的模塊化、自動(dòng)化、流程化的控制體系，速度就別說了？還好，半年來30來號(hào)技術(shù)開發(fā)，技術(shù)團(tuán)隊(duì)的離職率基本為0，技術(shù)負(fù)責(zé)人的項(xiàng)目管理能力非常厲害的。
八，前端開發(fā)者快速升級(jí)通關(guān)的一些個(gè)人經(jīng)驗(yàn)總結(jié)。
這純屬個(gè)人經(jīng)驗(yàn)，不一定適合你。還是那句話，如果感興趣就往下看，不強(qiáng)求。在評(píng)論里面，我說了，從轉(zhuǎn)行做全職前端，從切圖開始升級(jí)發(fā)展到做電商前端架構(gòu)，只是花了2年時(shí)間。不管你信不信，這絕對(duì)是事實(shí)。當(dāng)然，我是有好幾年php+前端混合開發(fā)基礎(chǔ)的，不算是從白丁開始的，但轉(zhuǎn)行那時(shí)候的前端技能最多就是初中級(jí)別，只會(huì)用jq插件完成邏輯。我現(xiàn)在的好幾下屬，做前端的時(shí)間都比我長(zhǎng)，有個(gè)已經(jīng)5年了，但依然找不到方向。我平時(shí)在招聘前端時(shí)，面試的前端好多都干了3-5年了，還是那樣。我不評(píng)論他們，，我只是覺得可能是大家沒有看清楚前端這個(gè)工種的未來，還沒有開竅。當(dāng)然，也可能你還不夠努力。反正，種種原因吧，各有不同，我只能說我自己的。
這兩年，我手機(jī)里面全部是前端開發(fā)書籍，沒有100本頁有50本，背包里面總有一本關(guān)于技術(shù)開發(fā)的書籍。每天除了上班干活，吃喝拉撒睡外，全部時(shí)間幾乎全部放在看書寫代碼寫demo上面。以至于忽略了很多事情，包括對(duì)家人的照料。這些努力是你看不到的。當(dāng)然，除了自身努力外，我確實(shí)也踏對(duì)了前端開發(fā)迅猛發(fā)展的節(jié)奏，比較早地接觸了Nodejs，比較早地看到了前端構(gòu)建前端工程化的價(jià)值。不過，有時(shí)候一個(gè)人的價(jià)值往往不僅僅是看他的代碼能力有多少，經(jīng)驗(yàn)有多少，還要看你能號(hào)召多少人跟你一起干。技術(shù)人做到一定程度之后，再往上發(fā)展，需要有一定的號(hào)召力，因?yàn)榻^大多數(shù)企業(yè)不會(huì)給你開那么高的薪酬，甚至給你股份期權(quán)。當(dāng)有幾個(gè)人愿意跟隨你的時(shí)候，那么在找項(xiàng)目談價(jià)格時(shí)，就會(huì)掌控議價(jià)的主動(dòng)權(quán)。因?yàn)椋阋呀?jīng)不是一個(gè)人在戰(zhàn)斗，你的價(jià)值絕對(duì)不是以一個(gè)人的開發(fā)技能來衡量的，而是由跟隨你的團(tuán)隊(duì)的整體實(shí)力來決定。當(dāng)然，有人愿意跟著我，是因?yàn)檫@兩年我除了一直站在代碼開發(fā)的第一線外，還堅(jiān)持了以下幾樣?xùn)|西：
1，從不藏私。把你知道的東西，毫無保留地分享給你周圍的同學(xué)，記得是毫不保留。知道多少，分享多少，這樣才會(huì)不斷促使自己去知道的更多。技術(shù)層面不存在教會(huì)徒弟餓死師傅這種事情，如果你抱有這樣的想法，那就太狹隘了。
2，對(duì)代碼要有潔癖。潔癖到什么程度？包括一個(gè)空格，一個(gè)標(biāo)點(diǎn)符號(hào)，不要覺得無所謂，一定要覺得有所謂。要追求能力極限上的完美，包括邏輯判斷的嚴(yán)謹(jǐn)、文檔的完善、代碼格式的完美。
3，言出必行。一個(gè)需求來到我這里，只要我有答應(yīng)別人的時(shí)間節(jié)點(diǎn)，不管如何也要想盡辦法把它實(shí)現(xiàn)了。如果確實(shí)無法按時(shí)，一定提前溝通，但二次調(diào)整的時(shí)間一定一定要準(zhǔn)時(shí)，下死命也要完成。事不過三，不給自己留任何后路或找理由。總之，言出必行既是項(xiàng)目管理能力問題，也是個(gè)人誠信問題，這樣團(tuán)隊(duì)里的其他人才會(huì)愿意相信你，依賴你，跟隨你。‘’
其實(shí)，很多時(shí)候技術(shù)和經(jīng)驗(yàn)積累到一定程度之后，業(yè)務(wù)處理上的能力或技巧，大多數(shù)人的差距其實(shí)很小的，但拉開差距的往往不是技術(shù)本身，而是對(duì)待人，對(duì)待技術(shù)，或?qū)Υ枨蟮膽B(tài)度不一樣。我不敢說，技術(shù)層面有多厲害，即便是現(xiàn)在的項(xiàng)目給我的技術(shù)評(píng)級(jí)是P7，之前也有拿到的幾個(gè)offer給我技術(shù)評(píng)級(jí)也是P6/P7，但我自認(rèn)為沒有到達(dá)這個(gè)水準(zhǔn)。既然如此，可能是對(duì)待人，對(duì)待技術(shù)，或?qū)Υ枨蟮膽B(tài)度上做得不錯(cuò)。
舉個(gè)新鮮的例子：前幾個(gè)月我們有一個(gè)微信jsSdk分享有禮的需求，這個(gè)需求非常重要，我決定自己書寫前端邏輯，避免耽誤與外部的合作。但這個(gè)需求關(guān)鍵的點(diǎn)是需要獲得兩次微信用戶授權(quán)，一個(gè)是交易授權(quán)簽名，一個(gè)是分享授權(quán)簽名。但由于后端開發(fā)同事沒有經(jīng)驗(yàn)，只做了交易授權(quán)簽名，但他也已經(jīng)非常努力了，基本通宵達(dá)旦了，但當(dāng)我發(fā)現(xiàn)另一個(gè)授權(quán)簽名沒有服務(wù)端接口時(shí)，前端的邏輯是走不通的，等別人調(diào)休完成再做嗎？但項(xiàng)目其實(shí)是務(wù)必在第二天提測(cè)，要不無法按時(shí)上線，而廣告已經(jīng)投放出去了。如果是你會(huì)如何處理？當(dāng)時(shí)已經(jīng)是凌晨5點(diǎn)了，后端的同事都疲憊不堪回去休息了，我決定自己來書寫服務(wù)端另一個(gè)授權(quán)簽名的api，但這里有一個(gè)坑，授權(quán)簽名的算法里面要求前端post一個(gè)url，而這個(gè)URL必須是不經(jīng)過轉(zhuǎn)義，但微信jsSDK里面沒有特別說明這個(gè)（可能是我沒看仔細(xì)忽略了），從安全的角度我習(xí)慣對(duì)前端ajax的url字段進(jìn)行了轉(zhuǎn)義處理，導(dǎo)致一直調(diào)試不通，找了各種原因，還是沒找到原因。。。已經(jīng)是早上9點(diǎn)多，別人已經(jīng)又來上班，而我還沒有下班，但已經(jīng)很困很困了，但知道這個(gè)需求很重要，咬牙再堅(jiān)持，碰巧在這個(gè)頁面 微信 JS 接口簽名校驗(yàn)工具 看到了問題所在，如圖
在php端對(duì)這一字段反轉(zhuǎn)義，調(diào)試就通了，在那天中午前能夠按時(shí)提測(cè)，最后沒有太大問題終于是上了線。雖然還有不少細(xì)節(jié)沒處理好，但至少別人接手可以輕易解決。那天我回家修休息已經(jīng)是下午3點(diǎn)了。也即是，我從前一天10點(diǎn)開始，一直干到了第二天的下午3點(diǎn)，就為了完成當(dāng)初承諾的時(shí)間節(jié)點(diǎn)。事實(shí)上，這個(gè)需求不是很難，但技術(shù)開發(fā)有非常明確的截止時(shí)間，而需求又是我自己親自做的。如果是其他同事，看到api似乎是服務(wù)端的事務(wù)，其實(shí)作為前端開發(fā)的你，人家都走了，你也跟著走人，最后擔(dān)主要責(zé)任的一定不是前端開發(fā)，對(duì)吧？但是，這不是我的做法，因?yàn)檫@個(gè)項(xiàng)目既然是由你來接手，并評(píng)估可以按時(shí)完成的，那么不管哪里出了問題，這都是你的問題。因此，我會(huì)去書寫服務(wù)端的api邏輯，盡管這似乎不是我的責(zé)任。好了，說了這么多。其實(shí)快速通關(guān)可能是需要時(shí)運(yùn)，但更多是個(gè)人的努力與堅(jiān)持。這個(gè)沒有什么訣竅的，而且很多時(shí)候和技術(shù)本身沒有關(guān)系，而是對(duì)待困難的態(tài)度要有點(diǎn)點(diǎn)不一樣。
最后，對(duì)于初學(xué)者來說，到底前端的路可以怎么走？
前面提過兩點(diǎn)，如果當(dāng)你要從中級(jí)跨入高級(jí)前端，這除了項(xiàng)目環(huán)境外，還需要你要有一定的堅(jiān)持，并且選對(duì)前端未來的發(fā)展路線，至少我認(rèn)為有以下幾種路線可供選擇：
1，業(yè)務(wù)層面的高手，做到非常了解某個(gè)領(lǐng)域的業(yè)務(wù)邏輯。比如垂直類電商的業(yè)務(wù)邏輯，這樣你其實(shí)可以嘗試帶隊(duì)，做項(xiàng)目管理，最終發(fā)展做項(xiàng)目經(jīng)理。
2，前端工程化解決能手。就是我在第六章羅里吧嗦列舉出來的一堆問題，你都能有腹案去解決，每個(gè)項(xiàng)目的工程化方案都是不一樣的，這種人才的需求也很旺盛，尤其是哪些基礎(chǔ)設(shè)施建設(shè)不太完善的項(xiàng)目。
3，nodejs服務(wù)端方面開發(fā)。這個(gè)可能在崗位上更像是后端開發(fā)了，只是前端可以通過這個(gè)方向進(jìn)入服務(wù)端開發(fā)的領(lǐng)域，做的牛逼，其實(shí)做一下CTO的夢(mèng)還是可以做一做的。
4，如果上面覺得都不適合你，但你對(duì)前端開發(fā)又比較了解，那么轉(zhuǎn)行做產(chǎn)品頁也是不錯(cuò)的選擇。具備開發(fā)思維的產(chǎn)品，在很多時(shí)候是一個(gè)優(yōu)勢(shì)。
5，創(chuàng)業(yè)。按現(xiàn)在的行情，前面4個(gè)方向任何一個(gè)方向做好了，作為打工者，你的收入都不會(huì)太低，一般不會(huì)低于25W年薪吧？如果第一點(diǎn)和第二點(diǎn)你都能做得很好，前端架構(gòu)師這種崗位就可以去試試，35W以下年薪可以不用考慮；如果你連第三點(diǎn)也做得不錯(cuò)，那么系統(tǒng)架構(gòu)師職位是可以去嘗試的，50W年薪的崗位就應(yīng)該在你的考慮范圍；如果你連這4點(diǎn)頁都做的比較到位，我覺得你最合適干第5點(diǎn)。此外，移動(dòng)互聯(lián)的前端開發(fā)也是一個(gè)很不錯(cuò)的發(fā)展方向，你也可以嘗試做webapp和hybrid app的開發(fā)；多端的開發(fā)能力，也是前端開發(fā)人員不錯(cuò)的發(fā)展方向。
很多朋友說，很喜歡有個(gè)人分享經(jīng)歷，其實(shí)這也是我的出發(fā)點(diǎn)，當(dāng)初我在前端的起步的時(shí)候，在知乎上看過有一位前輩的分享，這也是我學(xué)習(xí)的方向，今天下午我發(fā)的微頭條，希望可以幫到大家
JavaScript、CSS 相比，HTML 經(jīng)過三十多年的發(fā)展，似乎逐漸走進(jìn)無人問津的角落，如何才能讓 HTML 再次回到人們視野的中心。
作者 | Yaser Adel Mehraban
譯者 | 譚開朗，責(zé)編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
有多少次，身為開發(fā)者的你編寫了一個(gè)HTML塊而沒有意識(shí)到可能編碼得并不理想?
為什么
HTML一直處于無人問津的角落，因?yàn)镴avaScript和CSS總是吸引人們的注意力。
請(qǐng)?jiān)谀X海里先保留這種印象，因?yàn)槲乙靡恍┖?jiǎn)單的技巧來發(fā)揮作用，讓HTML再次回到人們視野的中心。
以下是創(chuàng)建一目了然、可維護(hù)和可擴(kuò)展的代碼的一些方法，其很好的應(yīng)用了HTML5的語義標(biāo)記元素，并將在支持的瀏覽器中正確呈現(xiàn)。
其緣由就不贅述了，讓我們來看看具體是什么吧。
文檔類型
在index.html的頂部位置，請(qǐng)確保聲明了DOCTYPE。這將在所有瀏覽器中激活標(biāo)準(zhǔn)模式，并告知瀏覽器該如何編譯文檔。請(qǐng)記住DOCTYPE不是HTML元素。
HTML5是這樣的：
<!DOCTYPE html>注意:如果應(yīng)用了框架，這已預(yù)先寫好。如果沒有，我強(qiáng)烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。
想了解更多關(guān)于其他文檔類型的信息嗎?點(diǎn)擊這里查看參考文件：https://html.com/tags/doctype/。
可選標(biāo)簽
有些標(biāo)簽在HTML5中是可選的，主要是因?yàn)樵厥请[式呈現(xiàn)的。信不信由你，你可以省略<html>標(biāo)簽，而頁面呈現(xiàn)得也很好。
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是一個(gè)有效的HTML，但在某些情況下就不能這樣做了。例如標(biāo)簽后面跟著注釋：
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是無效的，因?yàn)樽⑨屛挥?lt;thml>標(biāo)簽之外，解析樹發(fā)生了更改。
結(jié)束標(biāo)簽
應(yīng)始終記得結(jié)束標(biāo)簽，否則某些瀏覽器在呈現(xiàn)頁面時(shí)會(huì)出現(xiàn)問題。出于可讀性和其他原因，建議保留這些內(nèi)容，稍后我會(huì)詳細(xì)介紹。
<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>以上都是有效的標(biāo)簽，但也有一些特例，如下。
自閉合標(biāo)簽是有效的，但不是必需的。這些元素包括:
<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>注意:普通元素永遠(yuǎn)不能有自閉合標(biāo)簽。
<title />上面顯然是無效的。
字符集
預(yù)先定義字符集。最好是將它放在頂部元素中。
<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>上面是無效的，標(biāo)題無法正確呈現(xiàn)。正確寫法是將字符集移到頂部位置。
<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>語言
不忽略可選標(biāo)簽的另一個(gè)原因是在使用屬性時(shí)。在這種情況下，我們應(yīng)該定義web頁面的語言，這對(duì)于可訪問性和搜索非常重要。
<html lang="fr-CA">
...
</html>標(biāo)題
永遠(yuǎn)不要忽略標(biāo)題標(biāo)簽，否則可訪問性太差了。我個(gè)人就永遠(yuǎn)不會(huì)使用這樣的網(wǎng)站,因?yàn)槲覄偞蜷_它即刻在20多個(gè)頁面后就找不到了(瀏覽器選項(xiàng)卡不會(huì)有任何顯示)。
base標(biāo)簽
這是一個(gè)非常有用的標(biāo)簽，應(yīng)該謹(jǐn)慎使用。它將設(shè)置應(yīng)用程序的基本URL。一旦設(shè)置好，所有鏈接都將相對(duì)于這個(gè)基本URL，這可能會(huì)導(dǎo)致一些不必要的行為:
<base href="http://www.example.com/" />通過以上設(shè)置，href="#internal"將被編譯為href=http://www.example.com/#internal。或者h(yuǎn)ref="example.org"將被編譯為href="http://www.example.com/example.org"。
描述
這個(gè)meta標(biāo)簽非常有用，盡管嚴(yán)格來說它不是最佳寫法。但在搜索引擎時(shí)，這是超級(jí)有用的。
<meta name="description" content="HTML best practices">這有一個(gè)帖子“搜索引擎優(yōu)化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。
語義標(biāo)簽
雖然可以使用div創(chuàng)建UX工程師的線框，但這并不意味著必須這樣做。語義HTML為頁面提供了意義，而不單純是內(nèi)容顯示。像p、section、h{1-6}、main、nav等標(biāo)簽都是語義標(biāo)簽。如果使用p標(biāo)簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。
語義HTML超出了本文的范圍。但是我們應(yīng)該進(jìn)行檢查，就好比寫作所用的筆，而我們有鼠標(biāo)。
hr不應(yīng)該用于格式化
<hr>不是格式化元素，所以不要用它來格式化內(nèi)容。在HTML5中，這個(gè)標(biāo)簽代表了內(nèi)容的主題分離。正確的用法是這樣的:
<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>使用title屬性時(shí)要小心
title屬性是一個(gè)功能強(qiáng)大的工具，它可以幫助闡明頁面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。
HTML 5 規(guī)范道:
目前不鼓勵(lì)依賴title屬性，因?yàn)楹芏嘤脩舸聿话凑找?guī)范的訪問方式來暴露該屬性（例如，使用鼠標(biāo)等設(shè)備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現(xiàn)代手機(jī)或平板電腦）。
請(qǐng)閱讀有關(guān)如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。
單引號(hào)或雙引號(hào)
我見過的許多代碼庫，他們的標(biāo)記中混合了這兩種形式。這并不好，特別是當(dāng)你使用一個(gè)依賴于單引號(hào)的框架時(shí)，比如php，當(dāng)你在一個(gè)句子中使用單引號(hào)時(shí)，就像我現(xiàn)在做的一樣。另一個(gè)原因是保持一致，這總是好的。不要這樣寫:
<img alt="super funny meme" src='/img/meme.jpg'>而寫為：
<img alt="super funny meme" src="/img/meme.jpg">省略布爾值
當(dāng)涉及到屬性的布爾值時(shí)，建議省略，因?yàn)樗鼈儾惶砑尤魏沃担€會(huì)增加標(biāo)記的權(quán)重。
public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">
<!-- instead -->
<audio autoplay src="podcast.mp3">省略類型屬性
不需要向scriptand樣式標(biāo)簽添加type屬性。某些服務(wù)(如W3C的標(biāo)記驗(yàn)證工具)還會(huì)出現(xiàn)驗(yàn)證錯(cuò)誤。
驗(yàn)證標(biāo)記
可以使用W3C的標(biāo)記驗(yàn)證等服務(wù)以確保有效的標(biāo)記。
拒絕內(nèi)聯(lián)樣式
HTML中寫的是內(nèi)容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內(nèi)聯(lián)樣式，這將有利于開發(fā)人員和瀏覽器理解你的標(biāo)記。
總結(jié)
這些只是編寫標(biāo)簽時(shí)要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強(qiáng)烈建議你重復(fù)閱讀。
《GitHub HTML最佳實(shí)踐》：https://github.com/hail2u/html-best-practices
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp
希望你喜歡本文，并能寫出優(yōu)雅的標(biāo)簽。
原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5
本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來源出處。
【END】
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
