HTML知識點

關于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 代表表格的一列

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末纸俭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子南窗,更是在濱河造成了極大的恐慌揍很,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件万伤,死亡現(xiàn)場離奇詭異窒悔,居然都是意外死亡,警方通過查閱死者的電腦和手機敌买,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門简珠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人虹钮,你說我怎么就攤上這事北救〖霾伲” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵珍策,是天一觀的道長托启。 經常有香客問我,道長攘宙,這世上最難降的妖魔是什么屯耸? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮蹭劈,結果婚禮上疗绣,老公的妹妹穿的比我還像新娘。我一直安慰自己铺韧,他們只是感情好多矮,可當我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哈打,像睡著了一般塔逃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上料仗,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天湾盗,我揣著相機與錄音,去河邊找鬼立轧。 笑死格粪,一個胖子當著我的面吹牛,可吹牛的內容都是我干的氛改。 我是一名探鬼主播帐萎,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼胜卤!你這毒婦竟也來了疆导?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤瑰艘,失蹤者是張志新(化名)和其女友劉穎是鬼,沒想到半個月后肤舞,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體紫新,經...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年李剖,在試婚紗的時候發(fā)現(xiàn)自己被綠了芒率。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡篙顺,死狀恐怖偶芍,靈堂內的尸體忽然破棺而出充择,到底是詐尸還是另有隱情,我是刑警寧澤匪蟀,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布椎麦,位于F島的核電站,受9級特大地震影響材彪,放射性物質發(fā)生泄漏观挎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一段化、第九天 我趴在偏房一處隱蔽的房頂上張望嘁捷。 院中可真熱鬧,春花似錦显熏、人聲如沸雄嚣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽缓升。三九已至,卻和暖如春履肃,著一層夾襖步出監(jiān)牢的瞬間仔沿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工尺棋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留封锉,地道東北人。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓膘螟,卻偏偏與公主長得像成福,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子荆残,可洞房花燭夜當晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內容

  • HTML奴艾、XML和XHTML的區(qū)別 HTML,超文本標記語言内斯,被設計用來顯示數(shù)據(jù)蕴潦,標記內容的格式,“超文本”體現(xiàn)在...
    佳聯(lián)閱讀 348評論 0 0
  • 什么是HTML俘闯? HTML指的是超文本標記語言 HTML不是一種編程語言潭苞,而是一種標記語言 標記語言是一套標記標簽...
    Echolate閱讀 442評論 0 1
  • HTML、XML真朗、XHTML 的區(qū)別: HTML此疹,超文本標記語言,是語法較為松散的、不嚴格的Web語言蝗碎。 XML湖笨,...
    石林濤閱讀 370評論 0 2
  • 1、HTML蹦骑、XML慈省、XHTML 有什么區(qū)別 HTML是超文本標記語言(Hyper Text Markup Lan...
    imtns閱讀 272評論 0 1
  • 1、HTML眠菇、XML辫呻、XHTML 有什么區(qū)別? HTML是超文本標記語言(Hyper Text Markup La...
    不是我的簡書閱讀 663評論 0 0