html總結

什麼是html？html是超文本標記語言，超文本包含圖片，文字，連接，視頻，音頻等，標記是指標籤，因此叫超文本標記語言。

超文本元信息

　　元信息標籤：所謂元信息，是指描述自身的信息，元信息類標籤，就是html用於描述文檔自身的一類標籤。

　　它們一般出如今head標籤中，通常不會在頁面被顯示出來（與此相對，其餘標籤，如語義類標籤，描述的是業務）元信息多數狀況下是給瀏覽器、搜索引擎等機器閱讀的，有時候這些信息會在頁面以外顯示給用戶，有時候則不會。

　　head：元信息容器

　　meta：元信息通用標籤（name和http-equiv兩種鍵）

　　base：頁面的基準url（容易出錯，不建議使用，一般也不會用）

　　title：文檔標題

　　meta經常使用寫法：

　　　　<meta charset=」utf-8」 />：定義解析文檔的格式，建議放第一行

　　　　<meta http-equiv=」content-type」content=」text/html;charset=utf-8」 />：同時添加content-type這個http頭，而且指定了http編碼格式。

　　　　<metaname=」viewport」content=」width=device-width,initial-scale=1,minimum-scale=1,masimum-scale=1,user-scalab=no」 />：針對viewport的標準的適配移動端的meta元信息

　　　　description：頁面描述，可能被用於搜索引擎或者其餘場合

　　　　keywords：頁面關鍵字，對於seo場景很是關鍵

語義化標籤

　　錯誤的使用語義標籤，會給機器閱讀形成混淆、增長嵌套，給css編寫加劇負擔。

　　因此，對於語義標籤，個人態度是：「用對」比「不用」好，「不用」比「用錯」好。固然了，我以爲有理想的前端工程師仍是應該去追求「用對」它們。

　　實際上，html這種語言，並不像嚴謹的編程語言同樣，有一條非此即彼的線。

　　一些語義的使用其實會帶來爭議，因此個人建議是：你能夠儘可能只用本身熟悉的語義標籤，而且只在有把握的場景引入語義標籤。這樣，咱們才能保證語義標籤不被濫用，形成更多的問題。

 

合理使用標籤，語義化結構

　　標籤合理嵌套

　　　　span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p

　　　　嚴禁多div症、多span症、多table症，正確使用標籤表現DOM結構，在文檔去除css的狀況下，任然具備結構和可讀性，如下是html標記的使用規範：

　　　　p：文本段落；

　　　　dl：定義列表，可包括標題和內容簡介的列表；

　　　　ul：無序列表；

　　　　ol：有序列表；

　　　　h1~h6：文章標題、內容區塊標題，根據重要性由大到小區分，h1一個頁面只出現一次；

　　　　strong/em：強調文本；

　　　　img：圖像，必須加上alt屬性，當圖像沒法顯示時，可表示圖像信息，背景和按鈕使用css處理，不使用img元素；

　　　　table：數據網格，規則的分欄佈局，儘量顯性的定寬和定高。

　　合理化表單結構

 　　　　使用fieldset元素包裹相同類別的字段；

 　　　　使用legend元素表示字段類別名稱；

 　　　　使用label表示字段文本，添加必要的for屬性，以在點擊字段文本時，文本框能得到焦點；

　　　　文本框不使用size屬性定義寬度，而使用css的width屬性；

 　　　　添加maxlength屬性限制輸入字符的長度。

替換型元素和連接型元素

　　連接型元素：使用href引用外部文件的標籤是連接型元素（如link標籤引入css）。

　　替換型元素：使用src引入外部文件的標籤是替換型元素，如img；picture；video；audio；iframe。

　　script標籤：該標籤能夠引入js，也能夠直接寫js，因此script是連接型標籤，也是替換型標籤。

標籤的屬性

　　標籤的屬性一般以鍵值對形式出現，屬性只能出如今開始標籤或自閉和標籤中。

　　屬性名字所有小寫，屬性值必須使用雙或單引號包裹，若是屬性值和屬性名徹底同樣，直接寫屬性名便可

命名規則

　　良好統一的命名規範，便於多人開發維護時代碼統一，減小項目溝通和交接的成本，增長代碼的語義化。

　　id

　　　　頁面主體結構可使用id，其他時候id儘可能留給js和後臺使用。
　　class

　　　　樣式方面儘可能只使用class來控制。

　　　　類名所有用小寫，首字符必須是字母，禁止數字或其餘特殊字符。由以字母開頭的小寫字母（a-z）、數字（0-9）、中劃線 （-）組成。

　　　　能夠是單個單詞，也能夠是組合單詞，要求可以描述清楚模塊和元素的含義，使其具備語義化。

　　　　避免使用 123456…,red,blue,left,right之類的（如顏色、字號大小等）矢量命名，如class="left-news"、class="2" ，以免當狀態改變時名稱失去意義。

　　　　儘可能用單個單詞簡單描述class名稱。雙單詞或多單詞組合方式：形容詞-名詞、命名空間-名次、命名空間-形容詞-名詞。例如：news-list、mod-feeds、mod-my-feeds、cell-title

　　name：

 

命名空間

　　在編碼思想上，咱們能夠將頁面拆分紅不一樣的層級（佈局、模塊、元件）。

　　什麼是CSS命名空間？經過統一的命名規範定義命名的範圍，成爲CSS class & id命名空間。

　　佈局: 以語義化的單詞layout做爲命名空間，例如主欄佈局命名 layout-main，只改變layout-命名空間後面的命名，layout始終保留。佈局的命名空間爲layout-xxx。

　　模塊：頁面是由一個或多個模塊組成，模塊的英文單詞是module，規範簡寫成mod，如新聞模塊mod-news，照片展現模塊mod-photo-show。模塊的命名空間爲mod-xxx 。

　　元件：元件是屬於模塊內部的，也能夠說模塊是由元件和它內部的自有元素組成。如用戶照片信息元件cell-user-photo。元件的命名空間爲cell-xxx 。

 

css通用命名

　　(1)頁面框架命名，通常具備惟一性，推薦用ID命名

ID名稱	命名	ID名稱	命名
頭部	header	主體	main
腳部	footer	容器	wrapper
側欄	side_bar	欄目	column
佈局	layout

 

　　(2)模塊結構命名

CLASS名稱	命名	CLASS名稱	命名
模塊(如：新聞模塊)	mod (mod_news)	標題欄	title
內容	content	次級內容	sub_content

 

　　(3)導航結構命名

CLASS名稱	命名	CLASS名稱	命名
導航	nav	主導航	main_nav
子導航	sub_nav	頂部導航	top_nav
菜單	menu	子菜單	sub_menu

 

　　(4)通常元素命名

 

CLASS名稱	命名	CLASS名稱	命名
二級	sub	麪包屑	breadcrumb
標誌	logo	廣告	Bner (禁用banner或ad)
登錄	login	註冊	regsiter/reg
搜索	search	加入	join
狀態	status	按鈕	btn
滾動	scroll	標籤頁	tab
文章列表	list	短消息	msg/message
當前的	current	提示小技巧	tips
圖標	icon	註釋	note
指南	guide	服務	service
熱點	hot	新聞	news
下載	download	投票	vote
合做夥伴	partner	友情連接	link
版權	copyright	演示	demo
下拉框	select	摘要	summary
翻頁	pages	主題風格	themes
設置	set	成功	suc
按鈕	btn	文本	txt
顏色	color/c	背景	bg
邊框	border/bor	居中	center
上	top/t	下	bottom/b
左	left/l	右	right/r
添加	add	刪除	del
間隔	sp	段落	p
彈出層	pop	公共	global/gb
操做	op	密碼	pwd
透明	tran	信息	info
重點	hit	預覽	pvw
單行輸入框	input	首頁	index
日誌	blog	相冊	photo
留言板	guestbook	用戶	user
確認	confirm	取消	cancel
報錯	error	輪播（走馬燈）	carousel
插件（項目外和js.css等平級的文件夾）	plugIn	工具	tool

 圖片命名

　　背景圖片：bg001，bg002，bg003···

　　通常圖片：img001，img002，img003···

　　按鈕圖片：btn001，btn002，btn003···

　　特別圖片：如banner,logo按照具體狀況命名

全局基礎樣式

　　文本顏色：text-c1，text-c2，text-c3···

　　背景顏色：bg-c1，bg-c2，bg-c3···

　　邊框顏色：border-c1，border-c2，border-c3···