HTML 標籤與佈局

鹽酸不是酸發表於2019-04-05
HTML

HTML介紹

HTML（HyperText MarkupLanguage）簡稱超文字標記語言。它和CSS、JavaScript組合完成一個網頁的設計。對於一個網頁，HTML定義網頁的結構，CSS描述網頁的樣子，JavaScript則實現人機互動。

HTML語義化

說起HTML，最常提到的就是它的語義化。簡單來說，HTML語義化就是：頁面內容的結構化，即使用合乎語義的標籤來表述內容。舉個例子：文章標題用header，章節用section,段落使用p，等等。語義化的好處在於：(1)提高可訪問性（幫助輔助技術更好的閱讀和轉譯你的網頁）。(2)提高可檢索性（便於搜尋引擎解析）。(3)提高互用性（便於程式碼的後期維護）。

HTML常用標籤介紹

<header>

  • 使用場景：定義文章的介紹資訊，如標題、Logo、搜尋框、作者名稱等等。

<nav>

  • 使用場景：導航欄等
  • 描繪一個含有多個超連結的區域，這個區域包含轉到其他頁面，或者頁面內部其他部分的連結列表.。結構一般是ul標籤下 多個li標籤。

<main>

  • 使用場景：文件的主要內容。
  • 它在文件中是唯一存在的，不可定義多個。它不應包含在文件中重複出現的內容，比如側欄、導航欄、站點標誌或搜尋表單。

<section>

  • 使用場景：內容專題、功能模組。
  • 表示文件中的一個區域（或節） ，一般包含標題，內容。如果不含標題，不建議使用。

<article>

  • 使用場景：論壇帖子、雜誌或新聞文章、部落格、使用者提交的評論它是一個獨立可複用的結構。

<aside>

  • 使用場景：側邊欄、標註框、廣告欄等。
  • 作為側邊欄、廣告欄時（一般和article並列）；作為標註框時（巢狀在article內）

<footer>

  • 頁尾，通常包含作者、版權資訊或者相關連結等

section和article的比較

  • article和section最大的區別在於article具有很大的獨立性，也就是說如果拋開上下文，單獨拿出這個結構出來，還能夠清晰的表達這個結構的功能。舉個例子：一個新聞網站它包含很多板塊，比如科技、時事、娛樂等，這些模組可以使用section。在這些模組下有許多文章，這寫文章可以使用article。一篇文章，除了內容可能還有下面的評論。我們可以使用section表示評論這一個模組，在評論模組下是一條條具體的評論，而這一條條評論可以使用article。
  • 在上面的例子中，使用section將一篇文章劃分為：文章內容和評論這兩部分。article則是一條條評論。這樣一對比，我們就能清晰的知道section相對於article來說模組之間的聯絡性要大的多。

<i> <b>

  • i和b標籤都不具有語氣強調作用。i一般用來表示：專業術語、外語短語等，表現形式是斜體 。b一般用於：關鍵字、論文導語等等，表現形式是粗體

<em> <strong>

  • em表示文字內容的強調，強調位置的不同往往會影響語義。比如：貓是可愛的動物。這句話側重在表述貓這種動物。但是：貓是可愛的動物。這句話側重在是，表達了一種不可置於的語氣。strong表示醒目強調，意在表達內容重要性、緊急性、嚴重性等。

<iframe>

  • 表示巢狀的瀏覽上下文，有效地將另一個HTML頁面嵌入到當前頁面中。 具體操作如下圖：
    HTML 標籤與佈局
  • iframe的作用是在頁面中巢狀一個外部頁面。
  • iframe的預設寬度是100px、高度是50px。我們可以通過<style>標籤去設定寬度和高度， 得注意的是iframe的寬度可以設定為100%，但是高度卻不可以設定100%。
  • iframe標籤內的（src=""）連結可以是任何網站，但是如果為("#")的話則預設是當前頁面。frameborder=0屬性表示的是iframe邊框為0，如果不為0則iframe是有邊框的
  • iframe可以通過name屬性和a標籤連結在一起，即通過a標籤的target和iframe相連，如上圖所示，當我們點選“我說一個a連結”時，是在iframe內跳轉至新頁面。

<a>

  • 超連結
  • a標籤中的(href="")表示引用的連結地址，當我們點選連結時有兩種情況。
  • 第一種是在標籤內新增download屬性，即<a href="" download >下載</a>，這種情況是點選連結就可以下載(href="")內容。注意：當網頁宣告content type 'application/octet-stream' 時，預設為自動下載東西。當網頁宣告content type "text/html"時，則需要加上download。
  • 第二種就是我們常見的連結跳轉，即點選連結就可以訪問對應的地址。在訪問時新增target屬性可以定義跳轉的方式。<a href="" target="" >開啟網頁</a>。
  • target有四種方式分別是：_blank、 self、parent、top。_blank 表示在新的頁面開啟。_self 表示在本頁面開啟。_parent 表示在父級頁面開啟。_top即頂層頁面。

href

  • 關於href="（）"，括號中的內容可以有多種（假設現在的頁面是file:///C:/Users/Administrator/Desktop/1.html）:
  • 如果href="qq.com" 則表示開啟的是(Desktop中)qq.com檔案。
  • 如果href="//qq.com" 則表示開啟的是file://qq.com檔案(即當前頁面的協議file://)。
  • 如果href="xxx.html" 則表示開啟的是Desktop/xxx.html。
  • 如果href="#sss" 則表示不重新整理網頁只是當前頁面跳轉（#錨點）。
  • 如果href=""?name=xxx"開啟的是file://index.html?name=xxx。
  • 如果href="javascript:;" 則表示空連線，點選後什麼也不發生。

<frame>

  • 文件中的一個區域，這個區域包含有互動控制元件，用來向web伺服器提交資訊。 具體操作如下圖：
    HTML 標籤與佈局
  • form和a標籤都是請求標籤，但是唯一不同的是form表示的是post請求，它是通過method="post"來設定請求的，預設請況下是get請求。
  • form標籤傳送請求是通過和input標籤結合來使用，從圖中可以看到有三個提交按鈕，只有（提交1、提交3）可以提交請求，（提交2）不可以提交。即提交方式可以通過（input標籤設定type="submit"）或者（直接使用button標籤）。
  • form標籤的target請求方式和a標籤相同。
  • form標籤在請求（action=""）時可以通過在網址後面新增(?name=xxx)來新增請求資料。

checkbox radio

HTML 標籤與佈局

  • CheckBox和radio都是選擇框，我們可以通過設定lable標籤和它們結合實現點選字型內容也能夠實現選擇。即通過<input id="xxx"><lable for="xxx">(內容)</lable>實現
  • CheckBox和radio都可以設定name值，name值表示請求時附帶的引數。但是二者唯一不同之處是當radio的多個選擇的name值相同時，只能夠選擇一個選項。

<select> 表單控制元件，可以建立選項選單

HTML 標籤與佈局

  • select可以建立選擇選單，通過option標籤的value屬性可以新增所需要的內容。
  • 我們可以通過select標籤內的 multiple屬性設定選單可以為多項選擇。
  • 通過option標籤的disable設定該選項不可以選擇。
  • 通過option標籤的selected設定預設選擇。

<table> 表單控制元件，可以建立選項選單

HTML 標籤與佈局

  • table標籤可以分成thead、tbody、tfoot、結構。
  • tr(table row)表示一行。
  • th(table head)表示表頭。
  • td(table data)表示資料。
  • colgroup標籤和col組合使用，可以對錶格每一列進行設定。

相關文章