標籤:sublime div 前端 span sub 影響 節點 作用 webstorm
不管學習什麼語言第一開始都是在學習其文法規範,前端也不例外,首先我們講解一下學習前端語言所使用的編輯器,現在在市面上大多使用的編輯器有:sublime webstorm HB等等,其實前端語言就算是使用簡單的記事本也可以進行編輯,編輯器只是開發過程中的一種工具,我們主要考慮的是使用何種編輯器能夠提高我們的開發效率。在這裡我們以sublime為編輯器說明。其次我們講解一下前端中html的文法特性:html是有各種的標籤組成,html只在乎標籤的嵌套結構,嵌套關係,誰嵌套誰,和換行、空格無關,不影響頁面的顯示,但要嚴格按格式寫,html中所有 文字之間有空格、換行、tab都將被摺疊為一個空格顯示也就是說html不是依據縮排來表示嵌套的,就是看標籤的嵌套關係,但良好的縮排,代碼更易讀,壓縮是為了追求極致的載入速度,所有沒有換行、縮排。成對的標籤要封閉。
html文法
使用四個空格的縮排,這是保證代碼在各種環境下顯示一致的唯一方式。
嵌套的節點應該縮排(四個空格)。
在屬性上,使用雙引號,不要使用單引號。
不要在自動閉合標籤結尾處使用斜線 - HTML5 規範 指出他們是可選的。
不要忽略可選的關閉標籤(例如, 和 </body>)
許多初學者都會或多或少的寫錯,但可能他們還不自知,因為效果一樣能夠輸出,比如:雙標籤沒有閉合,一些標點符號使用中文的,嵌套結構不正確等等。
html標籤
html標籤可分為容器級標籤和文本級標籤;
其中容器級標籤主要有:div h1-h6 ul>li ol>li 等
它的特點是可以直接給元素設定寬高,且寬度預設是父級元素寬度的百分百,高度自適應,它非常的“霸道”,在標準文檔流下不與其他的元素共存一行,但它可以嵌套任何的標籤包括它本身,注意成組的標籤不然ul>li ,ul的下一級只能寫li li下面可以嵌套任何的標籤。
文本級標籤 主要有:span a img input p 等
它的特點是不能直接設定寬高,寬高世自適應內容的寬高,且在標準文檔流下可以與其他的文本級元素共存一行
每一個標籤都有自己的的語義,及其所對應的預設樣式,像是我們會經常使用div來布局只充當一個盒子的作用,ul>li這一組標籤經常配合css用作導航條的部位。
以上只是前端中html的一些介紹,對於html這部分內容個人建議在學習的過程中先記憶每一個元素的基本預設樣式及常用於哪些地方,至於它們之間該如何嵌套比較的合適,一方面自己要使用一下,另一方面要看別的案例加以學習及總結。
學習html文法的規範性