關于html
HTML蒲牧、XML和XHTML
html是一種超文本標記語言梁肿,通過一些字符串來對網頁結構進行描述刃永,瀏覽器對這些字符串進行編譯從而展示出來DOM樹。
xml是一種可擴展標記語言补箍,相對于html語法更嚴謹改执,主要應用于存儲數(shù)據(jù)和結構。
xhtml是一種可擴展超文本標記語言坑雅,基于xml辈挂,和html類似,但語法更嚴謹霞丧。
HTML語義化
語義化 HTML 就是選擇合適的標簽呢岗、使用合理的代碼結構來編寫HTML的方式,使代碼更具可讀性蛹尝,也使得瀏覽器的爬蟲和機器能對代碼更好地解析后豫。
要實現(xiàn)HTML的語義化,就要求開發(fā)者掌握常用的HTML標簽突那,理解各種標簽所代表的含義挫酿,在不同的場景能使用合適的標簽,盡量不使用沒有語義信息的標簽愕难。
語義化帶來的是更清晰的頁面結構早龟,使頁面可讀性更強;更清晰的代碼結構猫缭,更利于開發(fā)團隊的開發(fā)和維護葱弟;更好的適應性,可以支持更多的設備的不同表現(xiàn)形式猜丹;與機器更良好的溝通芝加,使瀏覽器更容易渲染表現(xiàn),也使搜索引擎更容易獲取有效信息射窒。
內容和樣式分離
寫 HTML 的時候不管樣式, 重點在HTML的結構和語義化上藏杖,讓 HTML 能體現(xiàn)頁面結構或者內容。之后再去用CSS寫樣式脉顿。
HTML 內不允許出現(xiàn)屬性樣式蝌麸,盡量不要出現(xiàn)行內樣式。
寫 JS 的時候艾疟,盡量不要用 JS 去直接操作樣式来吩,而是通過給元素添加刪除class來控制樣式變化。
頁面展現(xiàn)的所有樣式蔽莱,都由CSS來負責實現(xiàn)误褪。
分離優(yōu)點:更易于維護,讓其他開發(fā)者更易閱讀碾褂,更規(guī)范兽间。使頁面邏輯更清晰。
常見meta
<meta charest="UTF-8"> ? 表示編碼格式為UTF-8
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 讓瀏覽器指定內核解析正塌,解決兼容性
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> ?適應移動端嘀略,同時初值寬度為原始恤溶,用戶不可調整寬度
<meta name="keywords" content="你好啊"> ?關鍵字,利于搜索引擎抓取
<meta name="description" content="我很好啊"> 利于搜索排名
文檔聲明
文檔聲明的作用是告訴瀏覽器用何種方式渲染頁面帜羊。
嚴格模式是指用doctype告訴瀏覽器用何種方式渲染頁面咒程;
混雜模式是指不用doctype告訴瀏覽器,讓其自行解析渲染讼育。
<!doctype html>是指告訴瀏覽器用最新的html5規(guī)范渲染頁面帐姻。
瀏覽器亂碼
瀏覽器出現(xiàn)亂碼一般是由于在制作頁面時使用非英文字符時奶段,保存的編碼格式與瀏覽器解析時的解碼格式不匹配饥瓷。為了解決這個問題,就要在頁面保存時就在HTML的里添加來聲明編碼格式痹籍,來告訴瀏覽器應該用什么解碼格式來解碼呢铆,例如使用UTF-8來編碼的頁面,添加<meta charset="UTF-8">來告訴瀏覽器使用UTF-8格式來解碼蹲缠,就不會出現(xiàn)亂碼了棺克。
常見瀏覽器
常見瀏覽器有IE、Google Chrome线定、Safari娜谊、opera、Firefox等斤讥,還有世界之窗纱皆、傲游瀏覽器、360安全瀏覽器周偎、搜狗告訴瀏覽器、QQ安全瀏覽器撑帖、獵豹安全瀏覽器等蓉坎。
Trident(IE內核):IE瀏覽器,很多國內瀏覽器胡嘿,以及很多雙核瀏覽器的其中“一核”都是Trident蛉艾。
Gecko:FireFox瀏覽器等。
Webkit:Chrome瀏覽器衷敌,Safari瀏覽器等勿侯。
Chromium/Blink:Chromium fork 自開源引擎 WebKit,卻把 WebKit 的代碼梳理得可讀性提高很多缴罗,Chrome瀏覽器就使用Chromium內核助琐,搜狗、360面氓、QQ瀏覽器等等雙核瀏覽器的一核都是Chromium兵钮。2013年谷歌宣布 Chromium 項目中研發(fā) Blink 渲染引擎蛆橡,內置于 Chrome 瀏覽器之中。
Presto:Opera瀏覽器先前使用的內核掘譬,Opera 在 2013 年 2 月宣布放棄 Presto后使用 WebKit 分支的 Chromium 引擎作為自家瀏覽器核心引擎泰演,在 Chrome 推出 Blink 引擎之后,Opera也轉而使用Blink 作為瀏覽器核心引擎葱轩。
目前移動端系統(tǒng)內置瀏覽器的內核睦焕, iOS 平臺主要是 WebKit,
Android 4.4 之前的系統(tǒng)瀏覽器內核是 WebKit靴拱;Android4.4 系統(tǒng)瀏覽器切換到了Chromium垃喊,內核是 Webkit 的分支 Blink;Windows Phone 8 系統(tǒng)瀏覽器內核則是 Trident缭嫡。
常見易錯標簽
<q></q>定義短引用
<iframe name="" src="url"></iframe>在頁面中嵌入一個頁面缔御。
<a target=""></a>當target的值為:
? ? ?_blank在新窗口中打開被鏈接文檔。
? ? ?_self默認妇蛀。在相同的框架中打開被鏈接文檔耕突。
? ? ?_parent在父框架集中打開被鏈接文檔。
? ? ?_top在整個窗口中打開被鏈接文檔评架。
? ? ? framename在指定的框架中打開被鏈接文檔眷茁。
其中href的錨點也可是頁面中的某個錨點,比如#div ? ??
<dl><dt></dt><dd></dd></dl> ?表示定義列表纵诞,定力列表的項目以及項目中的內容
常見的標簽:
h1-h6 標題標簽
p 段落標簽
a 鏈接標簽
href="#about" 跳轉到id為about的位置
href="/test" 跳轉到完整域名+test
img 圖片鏈接
alt 圖片無法展示時上祈,顯示內容,便于視力障礙人士使用
div 塊標簽
ul 無序列表
li ul的子標簽浙芙,ul下的直接元素必須是li
ol 有序列表
li ol的子元素
dl 展示有標題和內容的自定義表格
dt 標題子標簽
dl
button 按鈕標簽
strong 強調元素
em 中層強調元素
span 標記一段行內元素
iframe 在當前頁面嵌入一個頁面
table 用于展示表格登刺,不要用來做布局
thead、tbody嗡呼、tfoot 一般不用寫
tr 代表表格的一行
th 代表表格第一行的列內容
td 代表表格的一列