前端小白基礎之html代碼規範

2020-12-16 碳烤生蠔

1. img標籤要寫alt屬性<img src="chime-logo.svg" alt="ABC Company">這是為了預防你圖片加載不出來，顯示alt裡的內容

2. 單標籤不要寫閉合標籤 因為寫了也沒用，還顯得你不懂html規範，我們不是寫XHTML。常見的單標籤有img、link、input、hr、br

<img src=" " alt=" ">和<img src=" " alt=" "></img>是一樣的

3. 自定義屬性要以data-開頭

<div data-sy=」11」></div>

4. td要在tr裡面，li要在ul/ol裡面

5. ul/ol的直接子元素只能是li，儘量少摻雜別的標籤

6. section裡面要有標題標籤，寫一個h1/h2/h3，這是獨立章節，不需要刻意隱藏起來

7. 行內元素裡面不可使用塊級元素，如果要在a標籤裡套一個div，就要給a標籤增加樣式display:block；

8. html要保持簡潔，不要套太多層

9. 特殊情況下才在html裡面寫script和style，其他情況直接在html文件裡引用css和js文件

10. 如果要在html裡寫樣式必須寫在head標籤裡

11. 特殊符號使用html實體。

:&copy; :&reg; >:&gt; <:&lt;等等

12. 類的命名使用小寫字母加中劃線連接

<div class=」sy-ab」></div>

13. 重複id和重複屬性，重複的id或者屬性執行函數的話，只會執行第一個，後面名字相同是不會執行的。

14. 不推薦使用屬性設置樣式,<img src="" alt width="400" height="300">應當把圖片的寬度和高度寫到css文件裡。例外<canvas width="800" height="600"></canvas>這個是可以寫到這裡的

15. 使用適合的標籤，不要局限於一個標籤，根據情況選擇更好處理的標籤

相關焦點

  • HTML|前端網頁的設計基礎知識
    歡迎點擊「算法與編程之美」↑關注我們！
  • JavaScriptGame教程-前端小白奧利給(一)
    前端小白奧利給（一）👩duang~本節講解視頻
  • HTML代碼書寫規範指南
    HTML 代碼約定很多 Web 開發人員對 HTML 的代碼規範知之甚少。
  • 前端程式設計師入門html的4大方法,這兩本神書真心經典!
    近日，有不少的程式設計師問w3cschool這邊，前端開發應該怎麼學?有個小白程式設計師表示，自己走了很多彎路，學java開發沒學透不能就業，現在學前端又不知道如何下手，前後算起來浪費了不少的時間。前端有三架馬車你一定要學會「駕馭」，HTML+CSS+Javascript。照目前看來，網上各種前端學習資料又多又雜，確實讓不少入門前端的小夥伴不知所措。要選什麼學習資料?如何入門前端開發?0、Come on，來點國外的土特產視頻!
  • html語言是什麼?前端工程師需要明白什麼?
    ，處理瀏覽器兼容問題其實就是要處理同一html文件在不同瀏覽器顯示不同效果的問題。html從1993年誕生25年以來從當初1.0發展現在5.0(html5)，而html5經過近幾年的發展現在已經十分火熱了，現在網頁布局方法基本上都是「div+css」，傳統的table布局現在用的已經很少只有一些特殊功能頁面才會用到table布局比如說調查問卷。下面就為大家介紹「學好html語言需要掌握什麼?前端工程師需要明白什麼?」
  • 重新理解前端HTML篇-DTD到底是什麼?
    大家好我是落塵，一名新進晉級的菜鳥小編，也是一名前端開發攻城獅，從今天起帶大家重新理解前端，重新學習前端，讓大家有新的理解
  • HTML入門基礎篇
    作為WEB前端系列的第一篇文章，本文從最基礎的HTML來開始介紹，本文針對零基礎的對前端感興趣的同學，保證所有人都能看得懂
  • 小白入門網頁前端必知html基礎知識
    <html><head>...</head><body>...</body></html>代碼講解：<html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。
  • 小白如何學習web前端開發知識
    在掌握基礎模塊的基礎上，Web前端工程師還必須進一步將技能層次化、系統化，從而能夠視線頁面架構、移動頁面開發等等任務。不僅新人小白需要努力，就連已經入職0~3年的前端開發工程師，也需要不斷學習了解前端高階知識和技能，不斷修煉自身武功。
  • 前端硬核面試專題之 HTML 24 問
    前端硬核面試專題1. 前言本文講解前端面試的 HTML 的內容。複習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！注意：文章的題與題之間用下劃線分隔開，答案僅供參考。筆者技術博客首發地址  GitHub，歡迎關注。2. HTML為什麼利用多個域名來存儲網站資源會更有效 ？
  • html菜鳥教程,HTML新手如何快速入門
    第一：開發工具的選擇1、Nodepad++，作為一種文本編輯器，可以通過顏色標記各種html的標籤，同時可以提示出來基本的html語法，但是缺點也比較明顯：沒有集成容器運行，同時也不支持自動補標籤的功能。但是作為新手前期的開發IDE，能夠幫助新手快速記憶打好基礎。
  • 從零開始學習web前端技術路線圖
    HTML名為「超文本標記語言」，是整個頁面的結構基礎，它承載了我們的頁面內容。1、基礎w3school 在線教程（http://www.w3school.com.cn/h.asp）：內容非常的基礎，適合小白學習，對 HTML 有一個入門了解。
  • ​if 我是前端團隊 Leader,怎麼制定前端協作規範?
    降低新成員融入團隊的成本, 同時也一定程度避免挖坑提高開發效率、團隊協作效率, 降低溝通成本實現高度統一的代碼風格，方便review, 另外一方面可以提高項目的可維護性規範是實現自動化的基礎規範是一個團隊知識沉澱的直接輸出規範包含哪些內容?
  • 網頁前端技術HTML教程第一講
    （當然網頁不是單純的Html代碼寫的，還有其他的代碼比如CSS JavaScript JQuery 等）其他的後續會給大家講。Html是基礎，所以在學其他之前我們必須先學會Html，打好基礎。第二：Html簡單的講就是用來編寫網頁的。第三：用Html代碼編寫的網頁，使用瀏覽器打開。第四：市面上有很多的瀏覽器，我不 一 一 介紹。
  • html+css+javas
    關於前端的學習資料和視頻可謂多之又多，學習方法也是大相逕庭，有推薦跟著慕課網的，也有W3C的，傳智播客，這裡就簡單提一下吧。我想大部分都是零基礎的居多吧，所以一些必備的基礎知識都沒有的話，後面的學習是很困難的。這裡既然是自學，那麼對入門的書籍或者視頻選擇應當由淺入深。好了話不多說，進入乾貨環節。
  • 前端自學之路之HTML入門
    DOCTYPE html><html><head><meta charset="utf-8" /><title>開始學習前端</title></head><body><div>今天是2018-01-21&
  • 前端html,css基本知識
    上一篇講到過html和css相當於人的身體和衣服的關係，html的歷史發展百度上可以搜到，這裡簡單了解一下，1989年開發出了世界上第一個Web伺服器與Web客戶端，並將這項發明取名為world wide web，也就是我們現在所說的WWW全球資訊網。HTML也因此誕生。
  • 10行代碼實現實時Html編輯器
    本文蟲蟲給大家介紹一種很簡單的無限制在線Html編輯器，實現所寫即所得UI和樣式實時刷新，JS代碼也能進行熱加載執行重新渲染，而且這些實現都非常簡單，只用到了很少的html和css代碼。Html內容可編輯—contenteditable要使Html可以編輯實際上很簡單只要一個body標籤就足矣。
  • Web前端開發規範手冊
    規範目的　　為提高團隊協作效率, 便於後臺人員添加功能及前端後期優化維護,
  • python自學 第二章 python語言基礎之語法特點(注釋、代碼縮進、編碼規範)
    今天我們主要學習python基礎的語法特點。在python中，通常包含3種類型的注釋，分別為單行注釋、多行注釋和中文編碼聲明注釋。例如指定編碼為UTF-8，可以使用下面的中文編碼聲明注釋：說明： 在上面的代碼中， -*- 沒有特殊的作用，只是為了美觀才加上的。所以上面的代碼也可以使用「# coding=utf-8」代替。