初步認識HTML

初識html

HTML、XML、XHTML 有什么區(qū)別

都是ML結(jié)尾,共同點就是都是標記語言。

  • HTML,超文本標記語言,是語法較為松散的、不嚴格的Web語言;
  • XML,可擴展標記語言,主要用于存儲數(shù)據(jù)和結(jié)構(gòu)[參考]-(http://w3school.com.cn/xml/xml_intro.asp);
  • XHTML,可擴展超文本標記語言,基于XML,作用與HTML類似,但語法更嚴格參考。

怎樣理解 HTML 語義化

根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合適的標簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
為何要語義化?

  • 為了在沒有CSS的情況下,頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看;
  • 用戶體驗:例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用;
  • 有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重;
  • 方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)以意義的方式來渲染網(wǎng)頁;
  • 便于團隊開發(fā)和維護,語義化更具可讀性,是下一步吧網(wǎng)頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。
    寫代碼時應(yīng)注意什么?
  • 盡可能少的使用無語義的標簽div和span;
  • 在語義不明顯時,既可以使用div或者p時,盡量用p, 因為p在默認情況下有上下間距,對兼容特殊終端有利;
  • 不要使用純樣式標簽,如:b、font、u等,改用css設(shè)置。
  • 需要強調(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)起來。

怎樣理解內(nèi)容與樣式分離的原則

  • 寫 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)樣式
    CSS與HTML分離的優(yōu)點
    1.使頁面載入得更快由于將大部分頁面代碼寫在了CSS當中,使得頁面體積容量變得更小。相對于表格嵌套的方式的逐層加載速度快。
    2.修改設(shè)計時更有效率在修改頁面的時候更加容易省時。根據(jù)區(qū)域內(nèi)容標記,到CSS里找到相應(yīng)的ID,使得修改頁面的時候更加方便,也不會破壞頁面其他部分的布局樣式。而表格布局則更不省事。
    3.保持視覺的一致性DIV+CSS最重要的優(yōu)勢之一:保持視覺的一致性;以往表格嵌套的制作方法,會使得頁面與頁面,或者區(qū)域與區(qū)域之間的顯示效果會有偏差。
    4.更好地被搜索引擎收錄由于將大部分的HTML代碼和內(nèi)容樣式寫入了CSS文件中,這就使得網(wǎng)頁中代碼更加適合搜索引擎。
    5.對瀏覽者和瀏覽器更具親和力對瀏覽者和瀏覽器更具親和力,由于CSS富含豐富的樣式,使頁面更加靈活性,更加的美觀,它可以根據(jù)不同的瀏覽器,而達到顯示效果的統(tǒng)一和不變形。

有哪些常見的meta標簽

  • 指定字符集:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  • 向搜索引擎說明你的網(wǎng)頁的關(guān)鍵字:
    <meta name="keywords" content="關(guān)鍵字"/>
  • 告訴搜索引擎你的站點的主要內(nèi)容:
    <meta name="description" content=""/>
  • 告訴搜索引擎你的站點的制作的作者:
    <meta name="author" content=""/>
  • 定時讓網(wǎng)頁在指定的時間n內(nèi)跳轉(zhuǎn)
    <meta http-equiv="refresh" content="n;url="/>
  • 勇于設(shè)定網(wǎng)頁的到期時間,一旦過期則必須到服務(wù)器上重新調(diào)用,需要注意的是必須使用GMT時間格式:
    <meta http-equiv="expires" content="Mon,12 May 2010 00:00:00 GMT"/>
  • 禁用緩存:
    <meta http-equiv="pragma" content="no-cache"/>
  • cookie設(shè)定,如果網(wǎng)頁過期,存盤的cookie將會被刪除,需要注意的是也必須使用GMT時間格式:
    <meta http-equiv="set-cookie" content="Mon,12 May 2010 00:00:00 GMT" />

文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?

  1. <!DOCTYPE> 聲明位于文檔中的最前面,處于 <html> 標簽之前。告知瀏覽器以何種模式來渲染文檔。
  2. 嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。
  3. 在混雜模式中,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
  4. DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)

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

亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
亂碼一般是英文以外的字符才會出現(xiàn)

  1. 比如[網(wǎng)頁源代碼]是gbk的編碼,而內(nèi)容中的中文字是utf-8編碼的,這樣瀏覽器打開即會出現(xiàn)html亂碼。反之網(wǎng)頁是編碼utf-8,內(nèi)容是gbk也會出現(xiàn)亂碼。
  2. html網(wǎng)頁編碼是gbk,而程序從數(shù)據(jù)庫中調(diào)出呈現(xiàn)是utf-8編碼的內(nèi)容也會造成編碼亂碼。
  3. 瀏覽器不能自動檢測網(wǎng)頁編碼,造成網(wǎng)頁亂碼。

解決方法有:

  1. 使用軟件進行編輯HTML網(wǎng)頁內(nèi)容,推薦使用subline進行[HTML代碼]編輯和開發(fā)。盡量不要直接使用記事本進行編輯HTML代碼。
  2. 開發(fā)網(wǎng)頁,必須網(wǎng)頁加入meta charset編碼標簽
  3. 避免HTML中文亂碼的關(guān)鍵:確保HTML文件實際編碼方式和charset設(shè)定的編碼方式一致。當然,所設(shè)的編碼方式必須是系統(tǒng)支持的,這是最基本的。

常見的瀏覽器有哪些,什么內(nèi)核

常見瀏覽器 內(nèi)核
IE Trident
Safari WebKit
Chrome Blink
Opera Blink
Firefox Gecko

列出常見的標簽,并簡單介紹這些標簽用在什么場景

h1~h6

標題

  • h1代表頁面最大的標題
  • h2二級標題
  • h3... 更弱的標題

p

段落,表示大段文字

a

鏈接,鏈到一個地址
<a target="_blank" title="饑人谷">饑人谷.com</a>

div

語義為“一大塊”,用于給頁面劃分區(qū)塊,讓結(jié)構(gòu)更清晰

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容