重蔚的php學習第二天之HTML篇

.昨日回顧

服務器軟件：Apache、IIS

瀏覽器是一個翻譯官，是一個解釋器。瀏覽器可以翻譯有HTML、CSS、JavaScript。

服務器端腳本程序：PHP、 .net、JSP、c#等

.php文件要由PHP腳本引擎來進行處理。

網站前臺(客戶端) 網站后臺(服務器端) 數據庫

HTML(結構) PHP MySQL

CSS JSP Oracle

JavaScript .net SqlServer

HTML結構：主要來說明，哪個地方是標題，哪個地方是段落，哪個地方是表格，哪個地方是表單。

CSS表現(格式)：主要功能是，給相對應的HTML標記定義各種各樣的格式。

JavaScript行為：主要用于與計算機網頁進行交互(交流)。

塊元素和行內元素

塊元素：寬度單獨占一個通欄寬，塊元素的前臺的其它元素，都要另起一行來排。

比如：<p> <pre> <hr> <h1>……<h6> <ul> <ol> <li>

DIV和SPAN就是一個容器，容器中可以存放任何可以存放在<body>中的內容或標記。

行內元素：行內元素沒有寬度和高度的概念，也就是說通過CSS無法給行內元素增加寬和高。多個行內元素會放在同一行，不會另起一行來排版。

2.<marquee></marquee>滾動字幕標記：塊元素

Direction：滾動的方向，取值：left、right、up、down

Behavior：滾動的方式，取值：scroll(滾動)、 alternate(彈動)、 slide(滾動一次)

Width：滾動的區域寬度，取值：px或%

Height；滾動的區域高度

bgColor：背景顏色，如：bgcolor=“#FF0000” bgcolor=“rgb(255,0,0)”

scrollAmount：滾動步長值，一步走多遠，值越大，走的越快

scrollDelay：兩次滾動的間隔時間，以毫秒為單位 1秒=1000毫秒

3.計算機進制

進制，就是一種進位方法。

10進制：有10個基本數，0、1、2、3、4、5、6、7、8、9，運算規則是：逢十進一

例如：9 10 19 20 29 30

2進制：有2個基本數，0、 1，運算規則是：逢二進一。比如：(10)2 11 100 101 110

8進制：有8個基本數，0、1、2、3、4、5、6、7，運算規則是：逢八進一。比如：(17)8 20 21 26 27 30

因為二進制太長，不方便記憶，因此小型機引入了八進制，八進制可以很好的反應二進制。

因此，一個八進制數，用3位二進制數來表示。

基R=2^3

16進制：有16個基本數，0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F，運算規則是：逢16進一

比如：EF F0 F1 F2 FE FF (100)16

16進制的一位對應4位二進制。基R=2^4

10進制	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19
2進制	1	10	11	100	101	110	111	1000	1001	1010	1011	1100
8進制	1	2	3	4	5	6	7	10	11	12	13	14	15	16	17	20
16進制	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	10	11	12	13

十進制轉成二進制

分為整數部分和小數部分，分別轉換。比如：將(10.125)10轉成二進制？ 1010.001

（1）整數部分轉成二進制：除2取余法。每次將整數除以2，取余數，一直除下去，直到整數部分(商)為0。最后讀數時，從下往上讀取。

第N次	整數10	商	余數
第1次	10/2	5	0
第2次	5/2	2	1
第3次	2/2	1	0
第4次	1/2	0	1	最后結果為：1010

（2）小數部分轉成二進制：乘2除整法。每次將小數部分乘以2，取整數，一直乘下去，直到小數部分為0。最后讀數時，從上往下讀取。

第N次	小數0.125	積	整數
第1次	0.125*2	0.25	0
第2次	0.25*2	0.5	0
第3次	0.5*2	1.0	1
				最后結果為：001

二進制轉成十進制

不分整數部分和小數部分，按權相加法。換句話說：二進制上的每一位，乘以所在位權(也就是2的幾次方)，最后將各個位的乘相加，就能得到十進制。

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

4.計算機編碼介紹(字符集)

計算機只能二進制，比如：a-z、A-Z、0-9、標點符號，計算機都不能直接識別。每個人都可以來約定一套字符編碼（比如：a用二進制100表示，b用二進制101表示,c用二進制的110表示等）

計算機是由美國人發明的，美國標準化局同樣制定了一套統一的編碼，叫ASCII碼。

ASCII碼

ASCII編碼用7位或8位(1個字節)二進制來表示，共可以表示128或256個字符。包括：大小寫字母、數字、標點符號、圖形符號等。

5.ANSI編碼

每個國家都想讓計算機能顯示或處理本國的語言，都對ASCII碼進行了擴展。

在中國(簡體字)，ANSI編碼是指GB2312或GBK。

在臺灣(繁體字)，ANSI編碼是指BIG5

在日本，ANSI編碼是指JIS。

……

注意：ANSI編碼是跟隨操作一齊安裝的，也就是，安裝了中文操作系統后，它的默認編碼就是GB2312。

6.GB2312編碼

GB2312是中國標準化局，在1980年制定的一套顯示簡體中文的編碼。

GB2312是用2個字節來顯示。共可以表示2^16=256*256=65536個字符。

GB2312共保存了6763個常用漢字，一級漢字3700個。

GBK編碼

對GB2312進行了擴充，可以顯示人名、古漢語中的一些罕見字等。

GBK也是用2個字節來表示。共存儲了2.3萬個左右的中文字符。

GBK的范圍，要比GB2312大的多。

BIG5編碼

BIG5用于臺灣、香港、澳門地區的繁體中文編碼。

Unicode編碼

用4個字節表示字符，共可以表示42個億個字符。

Unicode編碼可以顯示世界上所有國家的語言。

缺點：文件龐大，效率不高，不利于推廣。

UTF-8統一格式轉換

它會自動根據不同的字符，來選擇不同編碼長度。

7.<meta>標記

<head>標記中的內容在瀏覽器中，是不可見的。

主要用兩個常用的屬性：

http-equiv：主要設置一些控制信息，屬性值是固定的。比如：content-type

name：一般用于設置網頁描述信息，像關鍵字、網頁描述、網頁版權、作者等，屬性值是固定的。比如：keywords

content：是具體的參數或內容，與http-equiv和name屬性進行對應。

（1）設置網頁的字符集或編碼

（2）設置網頁刷新或跳轉

注意：刷新功能相當于瀏覽器中的刷新按鈕

（3）設置網頁關鍵字(SEO優化)，給搜索引擎(搜索機器人)使用

（4）設置網頁描述信息(SEO優化)

8.XHTML

XHTML是可擴展超文本標注語言，XHTML是更純凈的HTML，語法更嚴格。

XHTML的目的是為了取代HTML4.01。

XHTML是W3C的一個標準或規范。

編寫XHTML的規范，與HTML編寫有何不同？

1）所有的標記都必須被關閉。比如：<br>轉換<br /> <hr>轉換后 <hr />

2）XHTML要求所有的標記名稱必須小寫。比如：<meta><table><img><font>

3）XHTML要求所有的屬性名必須小寫，屬性值必須加引號。

4）XHTML要求所有的屬性必須有值。

<hr noshade=“noshade” />

<input type=“radio” checked=“checked” />

5）所有的標記要順序嵌套，不能交叉嵌套；

6）XHTML文件，必須要有DTD文檔類型定義；

DTD(Document Type Define)文檔類型定義

（1）嚴格型Strict

要求HTML代中，不能存在任何的表現，用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

可以使用任何表現的標記或屬性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

（3）框架型Frameset

制作框架網頁時使用的一種類型，框架主要用于網站的后臺管理。

框架技術：是將一個瀏覽器窗口劃分成不同區域，每個區域(窗口)都可以顯示一個獨立的網頁。（HTML第四天單獨講框架，現在作個了解）

9.W3C簡介

W3C是萬維網聯盟，是一個國際性的非盈利性組織，是WEB領域最具權威性的組織。已經制定多達200多項的標準。

比如：XHTML、CSS、ECMAScript(JavaScript)、DOM、 XML等。

10.超級鏈接

超級鏈接的功能：就是點擊某個鏈接，可以跳轉到目標頁面或文件。

超級鏈接的分類：

（1）按內容分類：文本鏈接、圖片鏈接、多媒體等

（2）按URL分類：相對URL、絕對URL、錨點

URL，指網址或路徑

URL(Uniform Resource Locator，統一資源定位器)，也就是指互聯網地址。

http://www.sina.com.cn/about/index.html

第一個部分：協議，指訪問什么類型的服務器，如：http://、FTP://、news://

第二個部分：主機名或主機的IP地址。如：www.sina.com.cn

第三個部分：文件夾名，如：about

第四個部分：文件名，如：index.html

11.<a></a>超級鏈接的標記

格式：<a 屬性=“屬性值”>新浪網</a>

常用的屬性：

Href：指鏈接的目標文件或網址。比如：href=“http://www.toutiao.com”

Target：指目標文件的打開方式。

_blank：在新窗口中，來打開目標文件；

_self：在當前窗口中，來打開目標文件；

_top：在最頂層窗口中，來打開目標文件(在框架中講)；

_parent：在父窗口中，來打開目標文件(在框架中講)

Name：設置錨點的名稱。錨點是指：鏈接到同一個頁面的不同部分

舉例：<a href=http://www.toutiao.com target=“_blank”>頭條號</a>

12.相對路徑和絕對路徑

絕對URL：它總是以file:///協議開頭，去訪問目標文件。

如果將當前文件移動到其它地方，這個絕對URL路徑不需要修改。

絕對URL，只需要確定目標文件的路徑即可，與當前文件位置無關。

例如：<a href=“file:///E:/itcast/20140510/lesson/day2/4.html”>本地絕對路徑</a>

相對URL：要確定當前文件與目標文件的關系。

關系分為三種：

平級關系：直接寫目標文件的文件名即可。

下級關系：也就是目標文件所在的文件夾與當前文件是平級關系，當前文件與目標文件是上下級關系。

上級關系：目標文件位于上一層級。

../代表上一層文件夾

../../代表上二層文件夾

../../images/01.jpg

提示：在制作網站時，一般使用的都是相對路徑。

（3）下載鏈接：如果鏈接到的文件，網頁不能直接執行的話，都會出現下載提示。

瀏覽器可以直接執行的文件：.gif、.jpg、.png、html、.htm、.mp3、.swf等

（4）郵箱鏈接：mailto:beijing2000@126.com

13.錨點鏈接：指鏈接到一個網頁的不同地方

第一步：定義一個錨點或標記 <a name=“top”></a>

第二步：鏈接到錨點或標記 <a href=“#top”>返回頂部</a>

<a href=“intro.html#bottom”>鏈接到intro.html的底部</a>

14.<img>圖片標記，單邊標記

格式：<img 屬性＝“屬性值” />

常用的屬性：

Src：指圖片的URL，可以是相對路徑，也可以是絕對路徑。

Width：指圖片的寬度，單位px或%

Height：指圖片的高度

Align：圖片的水平對齊方式，取值：left center right ，left或right可以實現圖文混排

Alt：如果圖片不存在時，顯示的提示信息

Hspace：圖片左右的距離

Vspace：圖片上下的距離

舉例：<img src=“images/01.gif” width=“400” height=“300” alt=“寶寶圖片” />

如果保證圖片在調整過程中不變形（等比例縮放）：只需要設置width和height其中一個即可，另一個會自動縮放。

，第4個電商項目。

這是第3個項目電商的延續，因為是同一撥團隊繼續干的項目。這份經歷暫時不方便透露太多，只能說這是以我原來的第3個電商項目的技術團隊核心成員為班底的，又一個從零開始的項目，同樣是海淘。

經過半年多一點，現在已經走到了B輪。對于做海淘的電商而言，因為我們屬于后進者，節奏要比其他項目要快一些，要不是沒有任何機會的了，也就意味著別人可能是半年或3個月就融資一次，那么我們就得基本上2個月就進行一次融資，至少在C輪以前必須是這樣的速度，要么只有等死。

可想而知，要能完成這樣的融資節奏，那么開發、推廣和運營是怎樣的節奏呢？作為參與者當然是非常非常辛苦的。這幾個月不能說天天有發版，但基本上每周二周四會有一個小版本，1周或2周就得完成有一個中級版本，可能是多個版本交替迭代的，而一個月就一個大版本更新。那么，單就前端開發而言，如果沒有很好的模塊化、自動化、流程化的控制體系，速度就別說了？還好，半年來30來號技術開發，技術團隊的離職率基本為0，技術負責人的項目管理能力非常厲害的。

八，前端開發者快速升級通關的一些個人經驗總結。

這純屬個人經驗，不一定適合你。還是那句話，如果感興趣就往下看，不強求。在評論里面，我說了，從轉行做全職前端，從切圖開始升級發展到做電商前端架構，只是花了2年時間。不管你信不信，這絕對是事實。當然，我是有好幾年php+前端混合開發基礎的，不算是從白丁開始的，但轉行那時候的前端技能最多就是初中級別，只會用jq插件完成邏輯。我現在的好幾下屬，做前端的時間都比我長，有個已經5年了，但依然找不到方向。我平時在招聘前端時，面試的前端好多都干了3-5年了，還是那樣。我不評論他們，，我只是覺得可能是大家沒有看清楚前端這個工種的未來，還沒有開竅。當然，也可能你還不夠努力。反正，種種原因吧，各有不同，我只能說我自己的。

這兩年，我手機里面全部是前端開發書籍，沒有100本頁有50本，背包里面總有一本關于技術開發的書籍。每天除了上班干活，吃喝拉撒睡外，全部時間幾乎全部放在看書寫代碼寫demo上面。以至于忽略了很多事情，包括對家人的照料。這些努力是你看不到的。當然，除了自身努力外，我確實也踏對了前端開發迅猛發展的節奏，比較早地接觸了Nodejs，比較早地看到了前端構建前端工程化的價值。不過，有時候一個人的價值往往不僅僅是看他的代碼能力有多少，經驗有多少，還要看你能號召多少人跟你一起干。技術人做到一定程度之后，再往上發展，需要有一定的號召力，因為絕大多數企業不會給你開那么高的薪酬，甚至給你股份期權。當有幾個人愿意跟隨你的時候，那么在找項目談價格時，就會掌控議價的主動權。因為，你已經不是一個人在戰斗，你的價值絕對不是以一個人的開發技能來衡量的，而是由跟隨你的團隊的整體實力來決定。當然，有人愿意跟著我，是因為這兩年我除了一直站在代碼開發的第一線外，還堅持了以下幾樣東西：

1，從不藏私。把你知道的東西，毫無保留地分享給你周圍的同學，記得是毫不保留。知道多少，分享多少，這樣才會不斷促使自己去知道的更多。技術層面不存在教會徒弟餓死師傅這種事情，如果你抱有這樣的想法，那就太狹隘了。

2，對代碼要有潔癖。潔癖到什么程度？包括一個空格，一個標點符號，不要覺得無所謂，一定要覺得有所謂。要追求能力極限上的完美，包括邏輯判斷的嚴謹、文檔的完善、代碼格式的完美。

3，言出必行。一個需求來到我這里，只要我有答應別人的時間節點，不管如何也要想盡辦法把它實現了。如果確實無法按時，一定提前溝通，但二次調整的時間一定一定要準時，下死命也要完成。事不過三，不給自己留任何后路或找理由。總之，言出必行既是項目管理能力問題，也是個人誠信問題，這樣團隊里的其他人才會愿意相信你，依賴你，跟隨你。‘’

其實，很多時候技術和經驗積累到一定程度之后，業務處理上的能力或技巧，大多數人的差距其實很小的，但拉開差距的往往不是技術本身，而是對待人，對待技術，或對待需求的態度不一樣。我不敢說，技術層面有多厲害，即便是現在的項目給我的技術評級是P7，之前也有拿到的幾個offer給我技術評級也是P6/P7，但我自認為沒有到達這個水準。既然如此，可能是對待人，對待技術，或對待需求的態度上做得不錯。

舉個新鮮的例子：前幾個月我們有一個微信jsSdk分享有禮的需求，這個需求非常重要，我決定自己書寫前端邏輯，避免耽誤與外部的合作。但這個需求關鍵的點是需要獲得兩次微信用戶授權，一個是交易授權簽名，一個是分享授權簽名。但由于后端開發同事沒有經驗，只做了交易授權簽名，但他也已經非常努力了，基本通宵達旦了，但當我發現另一個授權簽名沒有服務端接口時，前端的邏輯是走不通的，等別人調休完成再做嗎？但項目其實是務必在第二天提測，要不無法按時上線，而廣告已經投放出去了。如果是你會如何處理？當時已經是凌晨5點了，后端的同事都疲憊不堪回去休息了，我決定自己來書寫服務端另一個授權簽名的api，但這里有一個坑，授權簽名的算法里面要求前端post一個url，而這個URL必須是不經過轉義，但微信jsSDK里面沒有特別說明這個（可能是我沒看仔細忽略了），從安全的角度我習慣對前端ajax的url字段進行了轉義處理，導致一直調試不通，找了各種原因，還是沒找到原因。。。已經是早上9點多，別人已經又來上班，而我還沒有下班，但已經很困很困了，但知道這個需求很重要，咬牙再堅持，碰巧在這個頁面微信 JS 接口簽名校驗工具看到了問題所在，如圖

在php端對這一字段反轉義，調試就通了，在那天中午前能夠按時提測，最后沒有太大問題終于是上了線。雖然還有不少細節沒處理好，但至少別人接手可以輕易解決。那天我回家修休息已經是下午3點了。也即是，我從前一天10點開始，一直干到了第二天的下午3點，就為了完成當初承諾的時間節點。事實上，這個需求不是很難，但技術開發有非常明確的截止時間，而需求又是我自己親自做的。如果是其他同事，看到api似乎是服務端的事務，其實作為前端開發的你，人家都走了，你也跟著走人，最后擔主要責任的一定不是前端開發，對吧？但是，這不是我的做法，因為這個項目既然是由你來接手，并評估可以按時完成的，那么不管哪里出了問題，這都是你的問題。因此，我會去書寫服務端的api邏輯，盡管這似乎不是我的責任。好了，說了這么多。其實快速通關可能是需要時運，但更多是個人的努力與堅持。這個沒有什么訣竅的，而且很多時候和技術本身沒有關系，而是對待困難的態度要有點點不一樣。

最后，對于初學者來說，到底前端的路可以怎么走？

前面提過兩點，如果當你要從中級跨入高級前端，這除了項目環境外，還需要你要有一定的堅持，并且選對前端未來的發展路線，至少我認為有以下幾種路線可供選擇：

1，業務層面的高手，做到非常了解某個領域的業務邏輯。比如垂直類電商的業務邏輯，這樣你其實可以嘗試帶隊，做項目管理，最終發展做項目經理。

2，前端工程化解決能手。就是我在第六章羅里吧嗦列舉出來的一堆問題，你都能有腹案去解決，每個項目的工程化方案都是不一樣的，這種人才的需求也很旺盛，尤其是哪些基礎設施建設不太完善的項目。

3，nodejs服務端方面開發。這個可能在崗位上更像是后端開發了，只是前端可以通過這個方向進入服務端開發的領域，做的牛逼，其實做一下CTO的夢還是可以做一做的。

4，如果上面覺得都不適合你，但你對前端開發又比較了解，那么轉行做產品頁也是不錯的選擇。具備開發思維的產品，在很多時候是一個優勢。

5，創業。按現在的行情，前面4個方向任何一個方向做好了，作為打工者，你的收入都不會太低，一般不會低于25W年薪吧？如果第一點和第二點你都能做得很好，前端架構師這種崗位就可以去試試，35W以下年薪可以不用考慮；如果你連第三點也做得不錯，那么系統架構師職位是可以去嘗試的，50W年薪的崗位就應該在你的考慮范圍；如果你連這4點頁都做的比較到位，我覺得你最合適干第5點。此外，移動互聯的前端開發也是一個很不錯的發展方向，你也可以嘗試做webapp和hybrid app的開發；多端的開發能力，也是前端開發人員不錯的發展方向。

很多朋友說，很喜歡有個人分享經歷，其實這也是我的出發點，當初我在前端的起步的時候，在知乎上看過有一位前輩的分享，這也是我學習的方向，今天下午我發的微頭條，希望可以幫到大家

JavaScript、CSS 相比，HTML 經過三十多年的發展，似乎逐漸走進無人問津的角落，如何才能讓 HTML 再次回到人們視野的中心。

作者 | Yaser Adel Mehraban

譯者 | 譚開朗，責編 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下為譯文：

有多少次，身為開發者的你編寫了一個HTML塊而沒有意識到可能編碼得并不理想?

為什么

HTML一直處于無人問津的角落，因為JavaScript和CSS總是吸引人們的注意力。

請在腦海里先保留這種印象，因為我要用一些簡單的技巧來發揮作用，讓HTML再次回到人們視野的中心。

以下是創建一目了然、可維護和可擴展的代碼的一些方法，其很好的應用了HTML5的語義標記元素，并將在支持的瀏覽器中正確呈現。

其緣由就不贅述了，讓我們來看看具體是什么吧。

文檔類型

在index.html的頂部位置，請確保聲明了DOCTYPE。這將在所有瀏覽器中激活標準模式，并告知瀏覽器該如何編譯文檔。請記住DOCTYPE不是HTML元素。

HTML5是這樣的：

<!DOCTYPE html>

注意:如果應用了框架，這已預先寫好。如果沒有，我強烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。

想了解更多關于其他文檔類型的信息嗎?點擊這里查看參考文件：https://html.com/tags/doctype/。

可選標簽

有些標簽在HTML5中是可選的，主要是因為元素是隱式呈現的。信不信由你，你可以省略<html>標簽，而頁面呈現得也很好。

<!DOCTYPE HTML>

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是一個有效的HTML，但在某些情況下就不能這樣做了。例如標簽后面跟著注釋：

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是無效的，因為注釋位于<thml>標簽之外，解析樹發生了更改。

結束標簽

應始終記得結束標簽，否則某些瀏覽器在呈現頁面時會出現問題。出于可讀性和其他原因，建議保留這些內容，稍后我會詳細介紹。

<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>

以上都是有效的標簽，但也有一些特例，如下。

自閉合標簽是有效的，但不是必需的。這些元素包括:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

注意:普通元素永遠不能有自閉合標簽。

<title />

上面顯然是無效的。

字符集

預先定義字符集。最好是將它放在頂部元素中。

<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>

上面是無效的，標題無法正確呈現。正確寫法是將字符集移到頂部位置。

<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>

語言

不忽略可選標簽的另一個原因是在使用屬性時。在這種情況下，我們應該定義web頁面的語言，這對于可訪問性和搜索非常重要。

<html lang="fr-CA">
...
</html>

標題

永遠不要忽略標題標簽，否則可訪問性太差了。我個人就永遠不會使用這樣的網站,因為我剛打開它即刻在20多個頁面后就找不到了(瀏覽器選項卡不會有任何顯示)。

base標簽

這是一個非常有用的標簽，應該謹慎使用。它將設置應用程序的基本URL。一旦設置好，所有鏈接都將相對于這個基本URL，這可能會導致一些不必要的行為:

<base href="http://www.example.com/" />

通過以上設置，href="#internal"將被編譯為href=http://www.example.com/#internal。或者href="example.org"將被編譯為href="http://www.example.com/example.org"。

描述

這個meta標簽非常有用，盡管嚴格來說它不是最佳寫法。但在搜索引擎時，這是超級有用的。

<meta name="description" content="HTML best practices">

這有一個帖子“搜索引擎優化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。

語義標簽

雖然可以使用div創建UX工程師的線框，但這并不意味著必須這樣做。語義HTML為頁面提供了意義，而不單純是內容顯示。像p、section、h{1-6}、main、nav等標簽都是語義標簽。如果使用p標簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。

語義HTML超出了本文的范圍。但是我們應該進行檢查，就好比寫作所用的筆，而我們有鼠標。

hr不應該用于格式化

<hr>不是格式化元素，所以不要用它來格式化內容。在HTML5中，這個標簽代表了內容的主題分離。正確的用法是這樣的:

<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屬性時要小心

title屬性是一個功能強大的工具，它可以幫助闡明頁面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。

HTML 5 規范道:

目前不鼓勵依賴title屬性，因為很多用戶代理不按照規范的訪問方式來暴露該屬性（例如，使用鼠標等設備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現代手機或平板電腦）。

請閱讀有關如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。

單引號或雙引號

我見過的許多代碼庫，他們的標記中混合了這兩種形式。這并不好，特別是當你使用一個依賴于單引號的框架時，比如php，當你在一個句子中使用單引號時，就像我現在做的一樣。另一個原因是保持一致，這總是好的。不要這樣寫:

<img alt="super funny meme" src='/img/meme.jpg'>

而寫為：

<img alt="super funny meme" src="/img/meme.jpg">

省略布爾值

當涉及到屬性的布爾值時，建議省略，因為它們不添加任何值，還會增加標記的權重。

public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">

<!-- instead  -->

<audio autoplay src="podcast.mp3">

省略類型屬性

不需要向scriptand樣式標簽添加type屬性。某些服務(如W3C的標記驗證工具)還會出現驗證錯誤。

驗證標記

可以使用W3C的標記驗證等服務以確保有效的標記。

拒絕內聯樣式

HTML中寫的是內容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內聯樣式，這將有利于開發人員和瀏覽器理解你的標記。

總結

這些只是編寫標簽時要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強烈建議你重復閱讀。

《GitHub HTML最佳實踐》：https://github.com/hail2u/html-best-practices
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp

希望你喜歡本文，并能寫出優雅的標簽。

原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5

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

【END】

在線咨詢

上一篇：html中滾動字體的設置
下一篇：zabbix 源碼安裝部署指導書

您的項目需求

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

整合營銷服務商