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頁面嵌入到當前頁面中。 具體操做以下圖：

  

• 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服務器提交信息。 具體操做以下圖：

  

• form和a標籤都是請求標籤，可是惟一不一樣的是form表示的是post請求，它是經過method="post"來設置請求的，默認請況下是get請求。
• form標籤發送請求是經過和input標籤結合來使用，從圖中能夠看到有三個提交按鈕，只有（提交一、提交3）能夠提交請求，（提交2）不能夠提交。即提交方式能夠經過（input標籤設置type="submit"）或者（直接使用button標籤）。
• form標籤的target請求方式和a標籤相同。
• form標籤在請求（action=""）時能夠經過在網址後面添加(?name=xxx)來添加請求數據。

checkbox radio

• CheckBox和radio都是選擇框，咱們能夠經過設置lable標籤和它們結合實現點擊字體內容也可以實現選擇。即經過<input id="xxx"><lable for="xxx">(內容)</lable>實現
• CheckBox和radio均可以設置name值，name值表示請求時附帶的參數。可是兩者惟一不一樣之處是當radio的多個選擇的name值相同時，只可以選擇一個選項。

<select> 表單控件，能夠建立選項菜單

• select能夠建立選擇菜單，經過option標籤的value屬性能夠添加所須要的內容。
• 咱們能夠經過select標籤內的 multiple屬性設置菜單能夠爲多項選擇。
• 經過option標籤的disable設置該選項不能夠選擇。
• 經過option標籤的selected設置默認選擇。

<table> 表單控件，能夠建立選項菜單

• table標籤能夠分紅thead、tbody、tfoot、結構。
• tr(table row)表示一行。
• th(table head)表示表頭。
• td(table data)表示數據。
• colgroup標籤和col組合使用，能夠對錶格每一列進行設置。