HTML小記

1.HTML、XML、XHTML 有什么區別

  • HTML——超文本標記語言，是語法較為松散的、不嚴格的Web語言
    HTML 被設計用來顯示數據，其焦點是數據的外觀，旨在顯示信息

  • XML——可擴展標記語言，主要用于存儲數據和結構參考
    XML 不是 HTML 的替代，是HTML的補充，被設計為傳輸和存儲數據，其焦點是數據的內容；
    XML 不會做任何事情。XML 被設計用來結構化、存儲以及傳輸信息。

    下面是 John 寫給 George 的便簽，存儲為 XML：

    <note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

    上面的這條便簽具有自我描述性。它擁有標題以及留言，同時包含了發送者和接受者的信息。
    但是，這個 XML 文檔仍然沒有做任何事情。它僅僅是包裝在 XML 標簽中的純粹的信息。我們需要編寫軟件或者程序，才能傳送、接收和顯示出這個文檔。
    以上引用自w3school_XML 簡介

  • XHTML——可擴展超文本標記語言，基于XML，作用與HTML類似，但語法更嚴格參考
    XHTML，是更嚴格更純凈的 HTML 版本，是作為一種 XML 應用被重新定義的 HTML，其目的是取代HTML；
    以上引用自w3school_XHTML 簡介

2. HTML 語義化

語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），能夠便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

3.內容與樣式分離的原則

當一個網頁呈現在面前時，是結構，樣式，行為這三部分共同作用的結果。
結構，HTML決定了網頁要展示的內容；
樣式，CSS確定了網頁的外觀風格；
行為，JS保證了網頁的交互效果。

我們一再強調的內容與樣式分離，主要是針對之前在HTML標簽中混雜著樣式和行為的使用方法而言；
理想的狀態，網頁源代碼由三部分組成：.html文件、.css文件和.js文件；或者妥協一點，樣式和行為放在html文件中，也要將樣式和行為從標簽中分離出來，分成各自的區域實現；

通過結構，樣式，行為分離，可以讓這三部分代碼各司其職，不僅保證了各自部分代碼的清晰簡潔，同時也有利用代碼的維護和復用，提高頁面加載、被搜索、以及修改時的效率
參考:
1.2 Web標準—結構、樣式和行為的分離
怎樣理解結構與樣式的徹底分離

4.常見的meta標簽

<meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
<meta> 標簽位于文檔的頭部，不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯的名稱/值對。
必須的屬性

屬性 值 描述
content some_text 定義與 http-equiv 或 name 屬性相關的元信息

可選的屬性

屬性 值 描述
http-equiv content-type
expires
refresh
set-cookie		 定義與 http-equiv 或 name 屬性相關的元信息
name author
description
keywords
generator
revised
others		 把 content 屬性關聯到一個名稱
scheme some_text 定義用于翻譯 content 屬性值的格式。

引自HTML <meta> 標簽

常用meta舉例說明：

  • <meta charset="utf-8">
    通知瀏覽器用編碼方式，頁面代碼保存時，也要注意編碼格式的選擇
  • <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    X-UA-Compatible是IE8的一個專有<meta>屬性，它告訴IE8采用何種IE版本去渲染網頁，在html的<head>標簽中使用
    content="IE=edge"，告訴 IE 以最高級模式渲染文檔；
    content="chrome=1"，強制 IE 使用 Chrome Frame 渲染
    content="IE=edge,chrome=1"，最佳兼容模式方案
    引自< 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="最有愛的前端學習社區">
    對搜索引擎的優化，可以通過keyword和description找到頁面

5.文檔聲明

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令，告知瀏覽器如何渲染頁面
<!DOCTYPE html>，聲明使用HTML5編寫

混雜模式：不加文檔聲明，讓瀏覽器按照自己方式渲染；
標準模式：按照使用的HTML版本，加上對應聲明，告知瀏覽器如何渲染

6.瀏覽器出現亂碼原因

瀏覽器出現亂碼的原因在于瀏覽器解析文件所用的編碼方式與文件被保存時的編碼方式不一致；
通常在編寫HTML文件時，可利用meta來指定瀏覽器的解碼方式，如<meta charset="utf-8">
或者在瀏覽器的設置中對編碼方式進行選擇，保證解碼方式與文件保存時的編碼方式一致

7.各瀏覽器使用內核

  • Trident內核：
    又稱為IE內核，由微軟開發，使用該內核的瀏覽器有：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8等。
  • Gecko內核：
    Gecko是最流行的排版引擎之一，使用它的最著名瀏覽器有Firefox、Netscape6至9。
  • WebKit內核：
    該內核特點在于源碼結構清晰、渲染速度極快。缺點是對網頁代碼兼容性不高，主要代表作品有Safari和Google的瀏覽器Chrome。
  • Presto內核：
    代表作品OperaPresto是由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。

8.常見HTML標簽

  • h1~h6
<h1> </h1>

標題，按照數值增大，層級遞減

  • p
<p> </p>

段落，用于大段文字

  • a
<a> </a>

鏈接，錨點，可作為跳轉到其他頁面或本頁面指定位置使用；
例如：

a)  <a  target="_blank" title="饑人谷">饑人谷.com</a>
target設為_blank，點鏈接時會在新窗口打開，如果沒有target設置，會在當前頁面刷新打開
title是當鼠標懸停在鏈接上時，顯示的文字，在不點擊的情況下，了解鏈接指向

b)  <a href="#">xxx.com</a>
寫#，頁面不會跳轉和刷新

c)  <a href="#about">xxx.com</a>
當點擊時，會跳轉到當前頁面id為about的內容上

d)  <a href="/getCourse">xxx.com</a>
如果在網站上，/getCourse相當于根路徑下

  • Src為圖片地址，alt為對圖片的說明文字，當圖片展示不出來時，可顯示這個文字，對于視力有障礙的人，可以說明圖片內容，另外alt對于搜索引擎優化有作用，添加了圖片說明，便于引擎查找
    添加圖片，只閉合標簽，不需要加/

  • Div
    塊，用于給頁面劃分區塊，使結構清晰
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
    Id給元素唯一的標識，class是給一類元素劃分
  • ul li
    ul: unsort list 無序列表，用于表示并列的內容
    ul的直接子元素是li，可以嵌套
  • ol li
    ol: order list 有序序列表 用于表示帶步驟或者編號的并列內容
    ol的直接子元素只能是li，可以嵌套
  • dl dt dd
    用于展示一系列 “標題:內容... ”的場景
<dl>
  <dt>商品名稱:</dt>
  <dd>青花瓷</dd>
  <dt>特征:</dt>
  <dd>白色</dd>
  <dd>圓口</dd>
  <dt>商品介紹</dt>
  <dd>這是一個年代久遠的瓷器，很貴，易碎</dd>
</dl>

效果如下：
<dl>
<dt>商品名稱:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圓口</dd>
<dt>商品介紹</dt>
<dd>這是一個年代久遠的瓷器，很貴，易碎</dd>
</dl>

  • button 按鈕
<button>點我</button>
  • em strong span
    em強調，效果為斜體
    strong強調效果更強，效果為加粗
    span標簽，可以標注一些行內元素，進行包裹，用于添加樣式
  • iframe
    用于嵌入一個頁面 注意跨域操作問題
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href=”http://www.w3cschool.cc” target="myPage">W3Cschool.cc</a></p>

這里target指向了myPage，所以點擊鏈接時，會在iframe里打開鏈接
可以用iframe來復用圖表之類
跨域問題： 如果iframe中引用的頁面地址，與當前的域名是同樣的域名，是同一個域名下，不同頁面，那可以用JS獲取到iframe中的元素進行操作，如果域名不同，那只能展示，不能操作

  • table
    table用于表格，不能用于布局
    thead tbody tfoot可省略，瀏覽器會自動添加
    border-collapse: collapse;用于合并邊框
<table>
  <thead>
    <tr>
      <th>姓名</th>     ——th是表頭
      <th>年紀</th>
    </tr>
  </thead>
  <tbody>
    <tr>                ——tr是行
      <td>小明</td>   ——td是列
      <td>18</td>
    </tr>
    <tr>
      <td>小花</td>
      <td>20</td>
    </tr>  
  </tbody>
  <tfoot></tfoot>
</table>
  • html
    頁面的根節點，所有內容包含在html標簽內
    Html里面子節點只有head和body
    舉例：
    <html lang="zh">
    告訴瀏覽器當前頁面使用的語言是中文，zh代表中文
  • head
    當前頁面的頭信息，和內容展示無關，一般包含meta，title，引入樣式表css
  • title
    <title> </title>
    內容顯示在頁面頂端
  • body
    <body> </body>
    元素中所有內容都會顯示在瀏覽器窗口中
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,805評論 1贊 92
  • 源自SeeYouBug博客 地址為：http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲淚成雪閱讀 1,258評論 0贊 15
  • 關于 HTML 超文本標記語言（HyperText Markup Language，簡稱 HTML）是一種用于創建...
    _空空閱讀 1,101評論 0贊 1
  • 1. 瀏覽器頁面有哪三層構成，分別是什么，作用是什么? 構成：結構層、表示層、行為層分別是：HTML、CSS、Ja...
    程序猿人王小賤閱讀 1,894評論 1贊 11
  • 問答題1 /72瀏覽器頁面有哪三層構成，分別是什么，作用是什么?參考答案構成：結構層、表示層、行為層分別是：HTM...
    _Yfling閱讀 1,240評論 0贊 23