HTML標籤經常使用總結，鞏固基礎更紮實

時間  2019-11-24
標籤 html 標籤 經常 使用 總結 鞏固 基礎 紮實 欄目 HTML 简体版
原文   原文鏈接

一個好的網站是萬丈高樓，html標籤就是高樓裏的一磚一瓦，但願這篇文章能爲你打好基礎。javascript

首先講述html裏幾種元素的區別

至於我爲何要先講述這元素種類呢，由於本人在學習html就是忽略了一下這個知識點，更慘的是它仍是很重要的，吃了一點苦頭，因此這個放在開頭，沒基礎的能夠先看看，先記個大概，而後區分開各個元素的類別，元素的分類關係到一個網站基礎構架，看完下文對經常使用標籤的學習，能夠回來再看一次加深印象。css

塊狀元素

一個塊狀元素獨佔一行，可設置元素的高度、寬度、行高、頂和底邊距，不設置寬度時爲父類容器的寬度。
常見的塊狀元素標籤有：html

<div>、<h1>...<h6>、<p>、<ol>、<ul>、<li>、<table>、<address>、<blockquote>、<form>
複製代碼

內聯元素

和其餘元素都在一行上，不可設置元素的高度、寬度、頂和底邊距，寬度與高度由內容決定，就是它包含的文字或圖片的寬度，不可改變。
常見的內聯元素有：前端

<span>、<a>、<label>、<strong>、<em>、<br>、<i>、<q>、<var>、<cite>、<code>
複製代碼

內聯塊狀元素

和其餘元素都在一行上，元素的高度、寬度、行高、頂和底邊距均可設置（就是同時擁有塊狀元素和內聯元素的特色）
常見的內聯塊狀元素有：html5

<img>、<input>
複製代碼

區別：

種類 是否佔一行 可否設置寬高 可否設置垂直方向的邊距margin
塊狀元素 是 是 是
內聯元素 否 否 否
內聯塊級元素 否 是 是

HTML標籤

這裏就從html文檔最開始的元素，開始簡述各類經常使用標籤的含義及做用（包括html5的新增長的標籤）java

1.標籤<!DOCTYPE>

描述：定義文檔類型瀏覽器

1).<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於<html>標籤以前。
2).務必在html文檔開頭添加<!DOCTYPE> 聲明，這樣瀏覽器才能獲知文檔類型。
3).在html5之前有許多種聲明方式，這裏就不講述了，而在 HTML5 中只有一種聲明：服務器

<!DOCTYPE html>
複製代碼

2.標籤<html></html>

描述：定義 HTML 文檔佈局

1.告知瀏覽器其自身是一個 HTML 文檔。
2.<html> 與 </html> 標籤限定了文檔的開始點和結束點，在它們之間是文檔的頭部<head>和主體<body>。
3.代碼：post

<!DOCTYPE html>
<html>

</html>
複製代碼

3.標籤<head></head>

描述：（文檔頭部）定義關於文檔的信息

1).<head></head>中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等，大部分數據是不展現給網站讀者。
2).在<head>中可添加標籤有： <title>,<meta>,<base>,<link>,<script>,<style>，其中<title>定義文檔的標題，它是 head 部分中惟一必需的元素
3).代碼：

<!DOCTYPE html>
<html>
<head>
    <title>html文檔標題</title>
</head>
</html>
複製代碼

4.標籤<body></body>

描述：定義文檔的主體

1).包含文檔的全部內容（好比文本、超連接、圖像、表格和列表等）。
2).不同意在body元素這裏使用任何屬性。
3).代碼：

<!DOCTYPE html>
<html>
<head>
    <title>html文檔標題</title>
</head>
<body>網站主體部分</body>
</html>
複製代碼

5.標籤<script></script>

描述：定義客戶端腳本

1).type 屬性規定腳本的 MIME 類型,如javascript表示爲：type="text/javascript" 。
2).script 元素既能夠包含腳本語句，也能夠經過 src 屬性指向外部腳本文件，如：src="./myscript.js"。
3).代碼：

<script type="text/javascript" src="./myscript.js"></script><!--引用外部腳本文件，能夠相對路徑，也能夠絕對路徑-->

<script type="text/javascript"> document.write("Hello World!") </script><!--直接包含腳本語句-->
複製代碼

6.標籤<style></style>

描述：定義文檔樣式信息

1).type 屬性是必需的，惟一可能的值是 type="text/css"。
2).<style> 元素位於 <head> 部分中，同樣能夠引用外部的層疊樣式表或者直接包含樣式語句 ,不過引用外部的層疊樣式表要使用<link>標籤。
3).代碼：

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" /><!--引用外部的層疊樣式表-->
    <style type="text/css"> a{ color:blue; } </style><!--直接包含樣式語句-->
</head>
複製代碼

7.標籤<div></div>

描述：定義文檔中的分區或節

1).把文檔分割爲獨立的、不一樣的部分,就像是把網站分割成一個個具備屬性的方塊，<div> 是最經常使用的佈局標籤。
2).經過給 <div> 加上 class 或 id 屬性能夠應用額外的樣式。
3).代碼：

<div class=" " id=" ">塊狀元素</div>
複製代碼

8.標籤<h1>...<h6>

描述：六個不一樣的 HTML 標題

1).<h1>定義最大的標題。<h6> 定義最小的標題。
2).代碼：

<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
複製代碼

9.標籤<p></p>

描述：定義段落

1).段落樣式建議不要直接屬性取值定義，最好在樣式表中規定。
2).<p>元素會自動在其先後建立一些空白。瀏覽器會自動添加這些空間，也能夠在樣式表中規定 3).代碼：

<p>這是段落。</p>
<p>這是段落。</p>
複製代碼

10.標籤<ol></ol> ，<ul></ul> ，<li></li>

描述：<ol></ol>定義有序列表，<ul></ul>定義無序列表，<li></li>定義列表項目

1).<ol>有三個屬性值的注意的：type規定在列表中使用的標記類型（如一、A、a、I、i）默認是數字；start規定有序列表的起始值；reversed規定列表順序爲降序(9,8,7...)。
2).建議不要直接屬性取值定義類型，最好在樣式表中規定類型。
3).<li>標籤可用在有序列表 <ol> 和無序列表 <ul> 中。
4)代碼：

<ol type="a" start="4" reversed="reversed">
  <li>標記類型爲a</li>
  <li>從4（就是d）開始</li>
  <li>規定倒序</li>
</ol>
<ul>
  <li>一個無序列表</li>
  <li>一個無序列表</li>
  <li>一個無序列表</li>
</ul>
複製代碼

11.標籤 <table></table>,<tr></tr>,<th></th>,<td></td>

描述： <table></table>定義表格,<tr></tr>定義表格中的行,<th></th>定義表格中的表頭單元格,<td></td>定義表格中的單元

1). 有一個屬性要注意的，是summary規定表格的摘要，這個的值網站讀者不可見的，可是使搜索引擎更好的讀懂表格內容，增長了表格的可讀性（語義化），屏幕閱讀器也能夠利用該屬性。
2).想深刻了解表格繪製的能夠去了解<caption>、<col>、<colgroup>、<thead>、<tfoot>、<tbody> 元素 3).代碼：

<!--兩行兩列表格-->
<table>
  <tr>
    <th>onehead</th>
    <th>twohead</th>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
</table>
複製代碼

12.標籤<address></address>

描述：定義文檔做者或擁有者的聯繫信息

1). 當<address> 元素位於 <body>元素內，則它表示文檔聯繫信息。當 <address> 元素位於 <article> 元素內，則它表示文章的聯繫信息。文本一般呈現爲斜體。
2).一般連同其餘信息被包含在 <footer> 元素中。
3).代碼：

<address>
Written by <a href="https://juejin.im">掘金</a>
</address>
複製代碼

13.標籤<blockquote></blockquote>，<q></q>

描述：<blockquote></blockquote>標記長的引用,<q></q>標記短的引用

1).<blockquote> 與 </blockquote> 之間的全部文本都會從常規文本中分離出來，常常會在左、右兩邊進行縮進（增長外邊距），並且有時會使用斜體。
2).<q></q>的短文本引用，呈現形式瀏覽器常常在引用的內容先後添加引號。
3).代碼：

<html>
<body>
    <span>Here comes a long quotation:</span>
    <blockquote>
    This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
    </blockquote>
    <!--瀏覽器在 blockquote 元素先後添加了換行，並增長了外邊距。-->
    <q>112233445566778899</q>
</body>
</html>

複製代碼

14.標籤<form></form>

描述：用於爲用戶輸入建立 HTML 表單

1).表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等。
2).表單用於須要向服務器傳輸數據的網頁部分，想深刻地瞭解表單還能夠了解 <menus>、<textarea>、<fieldset>、<legend>、<label>元素，它們都可被表單包含， 結合使用。
3).屬性：

屬性 值 描述
action URL 規定當提交表單時向何處發送表單數據
enctype 規定在發送表單數據以前如何對其進行編碼
method get\post 規定用於發送 form-data 的 HTTP 方法
name form_name 規定表單的名稱
target _blank，_self，_parent，_top，framename 規定在何處打開 action URL
autocomplete on\off 規定是否啓用表單的自動完成功能(h5新增屬性）
novalidate novalidate 若是使用該屬性，則提交表單時不進行驗證(h5新增屬性）

4).代碼：

<form>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 
複製代碼

15.標籤<span></span>

描述：定義文檔中的節

1).<span> 標籤被用來組合文檔中的行內元素，以便經過樣式來格式化它們。
2).若是不對 span 應用樣式，那麼 <span> 元素中的文本與其餘文本不會任何視覺上的差別，經常添加<span>元素就是爲了給行內元素添加更多的樣式和區分其餘行內元素，能夠爲<span>添加class或id屬性，增長適當的語義。
3).代碼：

<span>行內元素</span>
複製代碼

16.標籤<label></label>

描述：爲 input 元素定義標註（標記）

1).<label> 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是在 <label> 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。
2)."for" 屬性可把 label 綁定到另一個元素。請把 "for" 屬性的值設置爲相關元素的 id 屬性的值。
3).代碼：

<form action="" method="get" id="">
<label>Male
<input type="radio" name="sex" id="male" value="male" />
</label>
<label>Female
<input type="radio" name="sex" id="female" value="female" />
</label>
<input type="submit" value="提交" />
</form>
<p>如下的label位於 form 元素以外，可是設置了for="male",綁定到了form表單內的id爲male的元素，仍然是表單的一部分。運行代碼請嘗試點擊這個 label，能夠切換到 radio 控件。</p>

<label for="male" form="nameform">Male</label>
複製代碼

17.標籤<a></a>

描述：定義超連接，用於從一張頁面連接到另外一張頁面（跳轉功能）

1).其最重要的屬性是 href 屬性，它指示連接的目標，例如：href="juejin.im"。
2).有一個規定，若是不使用 href 屬性，則不可使用以下屬性：download, hreflang, media, rel, target 以及 type 屬性。
3).download屬性規定被下載的超連接目標；
hreflang屬性規定被連接文檔的語言；
media屬性規定被連接文檔是爲什麼種媒介/設備優化的；
rel屬性規定當前文檔與被連接文檔之間的關係；
target屬性規定在何處打開連接文檔；
type屬性規定被連接文檔的的 MIME 類型。
具體用法與前文講得其餘元素的屬性用法基本同樣，不重複。
4).代碼：

<a href="https://juejin.im">掘金</a>
複製代碼

18.短語元素

描述：
<em>把文本定義爲強調的內容，對瀏覽器通常呈現斜體；
<strong>把文本定義爲語氣更強的強調的內容，對瀏覽器通常呈現斜體；
<code>定義計算機代碼文本，能夠以代碼形式輸入給讀者看；
<var>定義變量，能夠將此標籤與<pre> 及 <code> 標籤配合使用；
<cite>定義引用,以斜體顯示，可以使用該標籤對參考文獻的引用進行定義，好比書籍或雜誌的標題

1).一般狀況下不反對也不建議使用這些短語元素，爲了達到某種視覺效果可以用樣式表解決的，最好用樣式表。
2).代碼：

<em>須要強調的文本。斜體</em>

<strong>須要強調的文本。加粗</strong>

<code>一行代碼語言</code>
<!--注：若是是多行代碼，可使用<pre></pre>標籤-->

<var>變量</var>

<address>
    <cite>The Scream</cite>
    by Edward Munch. Painted in 1893.
</address>
複製代碼

19.標籤<i></i>、<mark></mark>

描述：<i></i>定義顯示斜體文本效果;<mark></mark> 標籤訂義帶有記號的文本

1).<i>被用來表示科技術語、其餘語種的成語俗語、想法、宇宙飛船的名字等。
2).<mark> 被標記的/高亮顯示的文本。
3).代碼：

<i> 標籤必定要和結束標籤一塊兒用 </i>

<mark>標記的/高亮顯示的文本</mark>
複製代碼

20.標籤<input>

描述：用於蒐集用戶信息

1).<input>元素很重要，也不少樣化。根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段(text)、掩碼後的文本控件(password)、隱藏的輸入字段(hidden)、單選按鈕(radio)、複選框(checkbox)、按鈕(button)、提交按鈕(submit)、供文件上傳按鈕(file)、圖像形式的提交按鈕(image)、定義重置按鈕(reset)等 。
2).value屬性規定 input 元素的值；placeholder屬性規定幫助用戶填寫輸入字段的提示；readonly屬性規定輸入字段爲只讀。
3).<input>還有個不少其餘的屬性，就不一一列舉了
4).代碼：

<input type="text" value="文本框" />
<input type="password" value="密碼框" />
<input type="hidden" value="不可見輸入框" />
<input type="button" value="按鈕"/>
<input type="image" value="image" />
<input type="file" value="file" />
<input type="submit" value="提交" />
<input type="reset" value="重置"/>
<input type="radio" value="單選框" />
<input type="chexkbox" value="複選框" />
複製代碼

21.標籤<img>

描述：向網頁中嵌入一幅圖像

1).<img> 標籤建立的是被引用圖像的佔位空間，並不會在網頁中插入圖像，而是從網頁上連接圖像。
2).有兩個必需的屬性：src 屬性規定顯示圖像的 URL（能夠絕對路徑，也能夠相對路徑） 和 alt 屬性規定圖像的替代文本。
3).代碼：

<img src="./img/a.jpg" alt="圖片1" />
<img src="https://preview.qiantucdn.com/58pic/35/00/10/86c58PICwHV9K52N5wa58PIC58PIC_PIC2018.jpg!w1024_small" alt="圖片2" />
複製代碼

22.標籤<br>,<hr>

描述：<br>定義簡單的折行；<hr>定義水平線

1).<br> 標籤只是簡單地開始新的一行，若是但願文本流在內聯表格或圖像的下一行繼續輸出，使用 clear 屬性：left、right 或者 all，每一個值都表明一個邊界或兩邊的邊界。
2).<hr>水平分隔線能夠在視覺上將文檔分隔成各個部分。
3).代碼：

<br/>
<hr/>
複製代碼

23.標籤<footer></footer>

描述：定義文檔或節的頁腳

1).頁腳一般包含文檔的做者、版權信息、使用條款連接、聯繫信息等，但<footer>是 HTML 5 中的新標籤，IE 8 以及更早的版本不支持。
2).能夠在一個文檔中使用多個 <footer> 元素。
3).代碼：

<footer>
    <div></div>
    <address>
    Written by <a href="https://juejin.im">掘金</a>
    </address>
</footer>
複製代碼

24.標籤<header></header>

描述：定義文檔的頁眉（介紹信息）

1).<header> 標籤是 HTML 5 中的新標籤，IE 8 以及更早的版本不支持。
2).做爲介紹內容或者導航連接欄的容器，在一個文檔中，您能夠定義多個<header> 元素。
3).代碼：

<header>
    <div>頁眉</div>
</header>
複製代碼

25.標籤<meta>

描述：提供了 HTML 文檔的元數據

1).<meta> 標籤一般位於<head> 區域內，不會顯示在客戶端，可是會被瀏覽器解析；一般用於指定網頁的描述，關鍵詞，文件的最後修改時間，做者及其餘元數據。
2).在實際使用中，最經常使用到它的一個屬性是charset，定義文檔的字符編碼（中文爲"UTF-8"),這是html5出現的新屬性，取代了之前複雜的代碼寫法。
3).代碼：

<head>
    <meta charset="UTF-8">
</head>
複製代碼

以上是我總結的較爲經常使用的html標籤及用法，不少都是在我學習HTML時筆記的整理，在html中這只是一部分標籤，想深刻前端學習，剩下的標籤也要好好學。 如文中有不對的地方請指出，謝謝觀看！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程