html知識點

  1. html,xml,xhtml之間的區(qū)別
  • HTML,超文本標記語言媳搪,是語法較為松散的铭段、不嚴格的Web語言;
  • XML秦爆,可擴展標記語言序愚,主要用于存儲數(shù)據(jù)和結(jié)構(gòu)參考
  • XHTML等限,可擴展超文本標記語言爸吮,基于XML,作用與HTML類似望门,但語法更嚴格參考w3school
  1. 怎樣理解 HTML 語義化

所謂 web 語義化形娇,語義化的含義就是用正確的標簽做正確的事情,html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化筹误,便于對瀏覽器桐早、搜索引擎解析;在沒有樣式CCS情況下也以一種文檔格式顯示厨剪,并且是容易閱讀的勘畔。搜索引擎的爬蟲依賴于標記來確定上下文和各個關(guān)鍵字的權(quán)重,利于 SEO丽惶。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護理解爬立。廣義上來說钾唬,不僅要使機器(搜索引擎等)易于理解,也要使人易于理解。在團隊協(xié)作開發(fā)中抡秆,對人的易于理解顯得尤為重要了奕巍,一個莫名其妙的 class 會讓后續(xù)的開發(fā)或者維護者一頭霧水,增加了協(xié)作成本儒士。

一些語義化實用建議

  • 根據(jù)文檔上下文結(jié)構(gòu)合理的選用最適合表達當前語義的標簽的止;

  • 盡可能少的使用無語義的標簽div和span;

  • 不要使用純樣式標簽着撩,如:b诅福、font、u等拖叙,一切表現(xiàn)改用css設(shè)置氓润;

  • h標簽的使用應(yīng)該根據(jù)重要性逐級遞減,沒有斷層薯鳍。并且一個頁面只能有一個h1咖气;

  • 提高關(guān)鍵詞密度婆赠,如圖片替換alt播瞳,鏈接說明title扛施;

  • 正確使用內(nèi)容容器八孝,如段落p可免,列表ul, ol, li, dl, dt, dd

  • 需要強調(diào)的文本变勇,可以包含在strong或者em標簽中(瀏覽器預(yù)設(shè)樣式骡送,能用CSS指定就不用他們)溯香,strong默認樣式是加粗(不要用b)砸民,em是斜體(不用i)抵怎;

  • 使用表格時,標題要用caption岭参,表頭用thead反惕,主體部分用tbody包圍,尾部用tfoot包圍演侯。表頭和一般單元格要區(qū)分開姿染,表頭用th,單元格用td秒际;

  • 表單域要用fieldset標簽包起來悬赏,并用legend標簽說明表單的用途;

  • 每個input標簽對應(yīng)的說明文本都需要使用label標簽娄徊,并且通過為input設(shè)置id屬性闽颇,在lable標簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

  1. 怎樣理解內(nèi)容與樣式分離的原則
  • 一個網(wǎng)頁分為三個部分:Html——結(jié)構(gòu)寄锐,css——表現(xiàn)兵多,javascrip——行為尖啡。內(nèi)容也就是html,樣式也就是css剩膘。所以內(nèi)容和樣式的分離衅斩,就是指在網(wǎng)頁編碼的過程中,要將html和css兩大部分分開怠褐。
  • 寫 HTML 的時候先不管樣式, 重點放在HTML的結(jié)構(gòu)和語義化上畏梆,讓 HTML 能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式奈懒。
    寫 JS 的時候奠涌,盡量不要用 JS 去直接操作樣式,而是通過給元素添加刪除class來控制樣式變化
    HTML 內(nèi)不允許出現(xiàn)屬性樣式筐赔,盡量不要出現(xiàn)行內(nèi)樣式
分離原則的優(yōu)點
  • 瀏覽器加載網(wǎng)頁頁面速度變快铣猩。分離原則下,大部分頁面代碼寫在了CSS當中茴丰,頁面體積容量變得更小达皿。
  • 網(wǎng)頁修改設(shè)計時,效率贿肩、省時峦椰。根據(jù)html標簽內(nèi)ID或class的標記,到CSS里找到相應(yīng)的ID或class汰规,可以快速替換指定位置的樣式汤功,不會破壞頁面架構(gòu)和其他部分的樣式。典型的應(yīng)用就是網(wǎng)頁換膚溜哮,使用相同的 html 結(jié)構(gòu)滔金,不同的 css 樣式。
  • 更好地被搜索引擎收錄茂嗓〔鸵穑基于內(nèi)容與樣式分離的原則,html的語義化就是首要考慮的,網(wǎng)頁中語義化的標簽代碼就會更加適合搜索引擎述吸。css樣式的分離忿族,它可以根據(jù)不同的瀏覽器,達到顯示效果的統(tǒng)一蝌矛。保證網(wǎng)頁架構(gòu)不變形的前提下道批,放心在不同瀏覽器渲染顯示樣式。
  1. 有哪些常見的meta標簽
    定義針對搜索引擎的關(guān)鍵詞:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
    定義對頁面的描述:
    <meta name="description" content="免費的 web 技術(shù)教程入撒。" />
    定義頁面的最新版本:
    <meta name="revised" content="David, 2008/8/8/" />
    每 5 秒刷新一次頁面:
    <meta http-equiv="refresh" content="5" />
  2. 文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?

文檔聲明是為了告訴瀏覽器隆豹,你的 HTML 文檔是用的什么版本的 HTML 來寫的,這樣瀏覽器才能按照你聲明的版本來正確的解析你的 HTML 文檔茅逮。嚴格模式(推薦)現(xiàn)在也稱為標準模式噪伊,在該模式下簿煌,瀏覽器會嚴格按照 HTML 和 CSS 標準來解析、渲染你的文檔鉴吹。

混雜模式(不推薦)的由來是一個歷史問題。在互聯(lián)網(wǎng)早期惩琉,網(wǎng)頁一般寫成兩個版本:一個寫給網(wǎng)景公司的 Navigator瀏覽器豆励,一個寫給微軟公司的IE瀏覽器。當W3C制定了 Web 標準后瞒渠,這兩個瀏覽器不能馬上開始按標準來解析渲染頁面良蒸,因為這樣會破壞當時大部分頁面的顯示效果。所以各瀏覽器就引入了混雜模式伍玖,在該模式下嫩痰,瀏覽器會模擬Navigator 4和IE5的非標準行為來解析渲染頁面,這樣做就是為了兼容在W3C標準出現(xiàn)之前就存在的那些“不標準”的頁面窍箍。

<!doctype html> 的作用就是讓瀏覽器進入標準模式串纺,使用最新的 HTML5標準來解析渲染頁面;如果不寫椰棘,瀏覽器就會進入混雜模式纺棺,而這是我們要避免的。

  1. 瀏覽器亂碼的原因是什么邪狞?如何解決

亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的祷蝌。 亂碼一般是英文以外的字符才會出現(xiàn)。
為啥純粹的英文不會出現(xiàn)亂碼問題帆卓,即使編碼方式和解碼方式不一致巨朦?那是因為前面講過了 utf-8、gbk對英文都是采用1個字節(jié)的編碼方式剑令,并且使用了相同的碼字糊啡。

  1. 常見的瀏覽器有哪些,什么內(nèi)核
  • IE瀏覽器 內(nèi)核Trident
  • Chrome 內(nèi)核 webkit
  • safari 內(nèi)核 webkit
  • Firefox 內(nèi)核 Gecko
  • opera 內(nèi)核 Blink
  1. 列出常見的標簽尚洽,并簡單介紹這些標簽用在什么場景
  • h1~h6 用作標題悔橄,h1最大 h6最小
  • p 段落,表示大段文字
  • a 鏈接腺毫,鏈接到一個地址
  • img 用來展示圖片癣疟,自閉合標簽
  • div 用來給頁面劃分區(qū)塊,使結(jié)構(gòu)更清晰
  • ul 無序列表
  • ol 有序列表
  • strong 很重要的強調(diào)
  • em 強調(diào)一下
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末潮酒,一起剝皮案震驚了整個濱河市睛挚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌急黎,老刑警劉巖扎狱,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件侧到,死亡現(xiàn)場離奇詭異,居然都是意外死亡淤击,警方通過查閱死者的電腦和手機匠抗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來污抬,“玉大人汞贸,你說我怎么就攤上這事∮』” “怎么了矢腻?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長射赛。 經(jīng)常有香客問我多柑,道長,這世上最難降的妖魔是什么楣责? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任竣灌,我火速辦了婚禮,結(jié)果婚禮上腐魂,老公的妹妹穿的比我還像新娘帐偎。我一直安慰自己,他們只是感情好蛔屹,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布削樊。 她就那樣靜靜地躺著,像睡著了一般兔毒。 火紅的嫁衣襯著肌膚如雪漫贞。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天育叁,我揣著相機與錄音迅脐,去河邊找鬼。 笑死豪嗽,一個胖子當著我的面吹牛谴蔑,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播龟梦,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼隐锭,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了计贰?” 一聲冷哼從身側(cè)響起钦睡,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎躁倒,沒想到半個月后荞怒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體洒琢,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年褐桌,在試婚紗的時候發(fā)現(xiàn)自己被綠了衰抑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡荧嵌,死狀恐怖停士,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情完丽,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布拇舀,位于F島的核電站逻族,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏骄崩。R本人自食惡果不足惜聘鳞,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望要拂。 院中可真熱鬧抠璃,春花似錦、人聲如沸脱惰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拉一。三九已至采盒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蔚润,已是汗流浹背磅氨。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留嫡纠,地道東北人烦租。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像除盏,于是被迫代替她去往敵國和親叉橱。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容