校招進行時（三）---html基礎

這篇文章銜接上篇，主要羅列一些前端面試中可能問到的html中最基本的問題。

(格式有點亂，內容有點水，羅列了一些基本用法，你們隨便看看)

經常使用標籤

容器標籤

• div

  div標籤自己無特殊意義，做爲一個塊級容器，主要用於組合其餘html元素經常使用於頁面的佈局。

• span

  span標籤與div標籤相似，自己無特殊意義，但它在結合諸如class,lang,或者dir屬性時，可做爲行內元素的容器。它起到描述（文檔內容）的做用。

文本標籤

• h1-h6

  h標籤用於設置網頁標題或文章標題，爲了符合語義化，儘可能用h1做爲整個網頁或網站的標題，h2做下一級標題，以此類推

• p

  p標籤用於設置網頁的文體，是大多數文字的主要標籤，表示文章或某些文字的一個段落。

• em 與 strong

  em標籤的做用是強調內容，strong標籤的做用是着重內容，在瀏覽器中都會被渲染成加粗字體，可是在英文文章中，表示強調的文字會用斜體，例如：專有名詞、術語、外來名詞等；而strong則使用粗體，表示須要着重表現的文字。同時，若是使用盲人閱讀設備，strong標籤中的內容會被重讀。

列表與表格標籤

• ul、ol 與 li

  ul標籤表明多項無序列表，即無數值排序的集合；而ol標籤表明多項有序列表，是有數值排序的集合。當li標籤嵌套在ul標籤中時，是無序列表中的列表項，此時li的順序在列表中沒有意義；而當li嵌套在ol標籤中時，則是有序列表中的列表項，此時第一個li標籤則排序爲一，以此類推。

• dl 與 dt、dd

  dl是一個定義列表，用來解釋說明一些術語或特定詞句。其中dt爲術語部分（待解釋部分），dd爲dt的解釋說明部分。

• table

  table標籤用於定義表格，在早期因爲瀏覽器對css技術的不支持，人們大量利用table標籤進行頁面佈局，在現代的前端開發中已經摒棄了這種佈局方式。可是也不用一棒子打死，table佈局在佈局表單內容時仍是要方便的多。

  在使用table標籤時，tr標籤訂義行，th標籤訂義表頭，td標籤訂義表格單元，更復雜的表格還會包含caption、col、colgroup、thead、tfoot 以及 tbody 元素。

  注意：在 HTML5 中，table標籤僅支持 "border" 屬性，而且只容許使用值 "1" 或 ""

表單標籤

• form

  form標籤在文檔中定義了一個表單，表單中有各類表單控件，最後瀏覽器會將表單中的信息提交到服務器。其中，form標籤有幾個經常使用的重要屬性：

  • name

  name標籤可讓咱們方便的用js找到某個特定的表單，從而找到此表單下的表單控件，這樣就能夠對錶單中的各個部分進行控制了。（form表單中的表單控件也有name屬性）

  • action

  action屬性是當前表單所要提交到的服務器處理url，表單會被提交到action屬性中的頁面進行處理。

  • method

  提交表單到服務器的方法，可選GET和POST，兩個方法的特色和做用可到網上查閱，從此我也會慢慢整理。

• input

  input標籤用於接收用戶的填寫的信息，經過form表單提交到服務器，同時經過設置type屬性的不一樣值能夠賦予input標籤不一樣的功能，經常使用功能以下：

  • text（默認）: 用於接收文本信息如用戶名等

  • password: 用於接收密碼

  • radio: 單選按鈕（使用value屬性標註提交值）

  • checkbox: 複選框（使用value屬性標註提交值）

  • file: 文件上傳

  • image: 圖像上傳

  • data: 輸入日期控件（年月日）

• button

  將button標籤歸類到這裏實際上是不太合適的（可是我不知道怎麼歸了啊=。=）button標籤在表單中主要是用於提交表單，當用戶填寫完成後點擊按鈕進行表單的提交等操做。經過設置type屬性也有不一樣的做用：

  • submit: 此按鈕提交表單數據給服務器。未指定時，此值爲默認值，或者若是此屬性動態變爲空值或無效值

  • reset: 此按鈕重置全部組件爲初始值

  • button: 此按鈕沒有默認行爲。它能夠有與元素事件相關的客戶端腳本，當事件出現時可觸發

• select 與 option
  
  select標籤爲下拉菜單，須要配合option標籤一塊兒使用，option標籤爲下拉菜單中的選項。經過指定select標籤中的mutiple或size屬性可設置select爲下拉菜單或是列表框

• textarea

  用於定義多行文本域，cols和rows屬性是必需要填寫的，他們用於指定文本域的寬度和高度。多行文本域比較特殊，除了普通的事件屬性，他還能夠指定onselect屬性，用於表示文本域裏面的內容被選中時候的事件。

超連接（錨點）

• a

  a標籤用於建立一個到其餘網頁，文件，或同一頁面內的位置，固然也能夠是電子郵件地址或任何其餘URL的超連接。下面是幾個經常使用的屬性：

  • href

  這是一個必需屬性爲錨定義一個超文本連接來源。這表示連接目標的URL或URL片斷

  • download

  此屬性指示瀏覽器下載URL而不是導航到URL，所以將提示用戶將其保存爲本地文件。

  若是屬性有一個值，它將在保存提示中用做預先填寫的文件名 (用戶仍然能夠根據須要更改文件名)。對容許的值沒有限制，可是 / 和 被轉換爲下劃線。大多數文件系統限制文件名中的一些標點符號，瀏覽器會相應地調整建議的名稱。

  • target

  該屬性指定在何處顯示連接的資源。 取值爲標籤（tab），窗口（window），或框架（iframe）等瀏覽上下文的名稱或其餘關鍵詞。如下關鍵字具備特殊的意義:

  • _self: 當前頁面加載，會覆蓋掉當前頁面。此值是默認的，若是沒有指定屬性的話

  • _blank: 新窗口打開，根據瀏覽器的不一樣設置，會在新標籤頁或新的瀏覽器窗口中打開頁面

  • _parent: 加載響應到當前框架的父框架或當前的HTML5瀏覽上下文的父瀏覽上下文。若是沒有parent框架或者瀏覽上下文，此選項的行爲方式相同_self。

  • _top: IHTML4中：加載的響應成完整的，原來的窗口，取消全部其它frame。 HTML5中：加載響應進入頂層瀏覽上下文（即，瀏覽上下文，它是當前的一個的祖先，而且沒有parent）。若是沒有parent框架或者瀏覽上下文，此選項的行爲方式相同_self

圖片標籤

• img

  用來設置文檔中的圖像內容，主要屬性以下：

  • src: 圖像的 URL，這個屬性對 <img> 元素來講是必需的

  • alt: 這個屬性定義了描述圖像的替換文本。若是圖像的URL是錯誤的，該圖像不在支持的格式列表中，或者若是圖像尚未被下載,用戶將看到這個顯示。

  注意：在標準規範中，省略這個屬性代表該圖像是內容的關鍵部分，但沒有等效的文本可用。把這個屬性設置爲空字符串，代表該圖像不是內容的關鍵部分，非可視化瀏覽器在渲染的時候可能會忽略它。

html5新增經常使用標籤

3D效果與動畫

• canvas

canvas 標籤訂義圖形，好比圖表和其餘圖像。這個 HTML 元素是爲了客戶端矢量圖形而設計的。它本身沒有行爲，但卻把一個繪圖 API 展示給客戶端 JavaScript 以使腳本可以把想繪製的東西都繪製到一塊畫布上。

音頻視頻

• audio

audio 標籤用於在文檔中表示音頻內容。它能夠包含多個音頻資源， 這些音頻資源可使用 src 屬性或者source 元素來進行描述； 瀏覽器將會選擇最合適的一個來使用。對於不支持 audio 元素的瀏覽器，audio 元素也能夠做爲瀏覽器不識別的內容加入到文檔中。

• video

用於在文檔中嵌入視頻內容。

ps.對於html5來講，經常使用的標籤大概就這麼多，緣由仍是瀏覽器的兼容問題，大多數標籤使用起來不方便。主要使用仍是特定場景下的api調用，如攝像頭，gps定位等。html5的具體特性可查閱MDN:HTML5

特殊標籤

• <!DOCTYPE>

準確的說，!DOCTYPE不該該算是一個html標籤。<!DOCTYPE> 告知瀏覽器當前的 HTML (或 XML)文檔是哪個版本,應該用那種規範來解析當前文檔. Doctype 是一條聲明,而不是一個標籤; 也能夠把它叫作 "文檔類型聲明", 或 簡稱爲 "DTD".

• meta

meta標籤位於html文檔頭部中的head標籤中。meta標籤用來描述一個HTML網頁文檔的屬性，例如做者、日期和時間、網頁描述、關鍵詞、頁面刷新等元數據。這些數據將用於服務搜索引擎和其餘網絡服務.

因爲meta標籤的屬性實在太多，這裏列舉幾個經常使用屬性：

• name

  name屬性主要用於描述網頁，好比網頁的關鍵詞，敘述等。與之對應的屬性值爲content，content中的內容是對name填入類型的具體描述。其中name屬性有三個經常使用的取值，分別是：

  • keyword: 告訴搜索引擎你網站的關鍵詞

  • description: 用於告訴搜索網站你網站的主要內容

  • viewport: 移動設備窗口設置

  其中重點說下viewport的設置：

  width: 控制 viewport 的大小，能夠指定的一個值，例如 600 或 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）

  height: 和 width 相對應，指定高度

  initial-scale: 初始縮放比例，也便是當頁面第一次 load 的時候縮放比例

  maximum-scale: 容許用戶縮放到的最大比例

  minimum-scale: 容許用戶縮放到的最小比例

  user-scalable: 用戶是否能夠手動縮放

  <meta name="viewport" content="width=device-width, initial-scale=1">

  • http-equiv
    
    這個屬性用於設置http請求相關參數。使用方法與name同樣，須要配合content使用，先使用http-equiv定義，再使用content進行相關設置。

    • content-Type: 設置字符集，在html5中已經修改成 charset，通常推薦設置成 utf-8 字符集

      <meta charset="utf-8">

    • X-UA-Compatible: 設置瀏覽器採用何種版本渲染當前頁面，通常選擇最新版本

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    • cache-control: 指定請求和響應遵循的緩存機制

    no-cache: 先發送請求，與服務器確認該資源是否被更改，若是未被更改，則使用緩存。
    

    no-store: 不容許緩存，每次都要去服務器上，下載完整的響應。（安全措施）
    

    public : 緩存全部響應，但並不是必須。由於max-age也能夠作到相同效果
    

    private : 只爲單個用戶緩存，所以不容許任何中繼進行緩存。（好比說CDN就不容許緩存private的響應）
    

    maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器從新請求。例如：max-age=60表示響應能夠再緩存和重用 60 秒。

    no-siteapp: 禁止自動轉碼。假設某網頁沒有進行移動端適配，在移動端進行瀏覽時，從某個入口（例如百度）進入該網頁，能夠防止該入口對網頁進行移動設備轉碼。雖然轉碼的意圖是好的，可是有的時候轉碼以後效果不盡人意，就能夠設置這個屬性。

    <meta http-equiv="Cache-Control" content="no-siteapp" />