神奇的標籤---塊級元素，行內元素，空元素

時間 2019-11-16

標籤神奇標籤元素简体版

原文原文鏈接

最近有人問我，前端模塊爲何是空着的。是呀，前端模塊一直沒有着手開始寫，不是由於沒有東西可寫，是一直在想着以什麼樣的前端開篇，有太多東西要寫，但若是沒有規劃的寫，可能長此以往的就遺棄了。因此再三決定，從我第一次認識前端知識開始寫起，固然對於那些前端大牛，也許這篇文章沒有養分，但我相信也不乏一些剛起步進入前端行業的新人，因此你們選擇性預覽。javascript

前端是一個很容易入門，但卻很難走進去的一個行業。看似簡單，但一旦深刻，就「不可自拔」。說到，前端，確定少不了要認識他的組成元素，那這就涉及到塊級元素，行內元素以及一些空元素。css

Html標籤

html標籤訂義：

是由一對尖括號包裹的單詞構成,例如: <html>.
標籤不區分大小寫<html> 和 <HTML>, 推薦使用小寫.
標籤分爲兩部分: 開始標籤<html> 和 結束標籤</html>, 兩個標籤之間的部分咱們叫作標籤體.
有些標籤功能比較簡單,使用一個標籤便可,這種標籤叫作自閉和標籤,例如: <br/><hr/><input/><img/>
標籤能夠嵌套,例如:<a><b><b/><a/>;可是不能交叉嵌套,例如:<a><b><a/><b/>

塊級元素

老是在新行上開始；
高度，行高以及外邊距和內邊距均可控制；
寬度缺省是它的容器的100%，除非設定一個寬度。
它能夠容納內聯元素和其餘塊元素html

塊級元素分類(雙標籤，eg：<div></div>)：

<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 定義 HTML 標題。
<div> 定義文檔中的節。
<p> 定義段落。
<ul>  定義無序列表。
<ol>  定義有序列表。
<li>  定義列表的項目。
<dl>  自定義定義列表。
<dt>  自定義定義列表中的項目。
<dd>  自定義定義列表中項目的描述。
<table> 定義表格。
<thead> 定義表格中的表頭內容。
<tbody> 定義表格中的主體內容。
<tfoot> 定義表格中的表注內容（腳註）。
<th>  定義表格中的表頭單元格。
<tr>  定義表格中的行。
<td>  定義表格中的單元。
<pre> 定義預格式文本。
<address> 定義地址。
<article> 定義文章。
<aside> 定義頁面內容以外的內容。
<audio> 定義聲音內容。
<video> 定義視頻。
<blockquote>  定義長的引用。
<canvas>  定義圖形。
<caption> 定義表格標題。
<details> 定義元素的細節。
<fieldset>  定義圍繞表單中元素的邊框。
<figcaption>  定義 figure 元素的標題。
<figure>  定義媒介內容的分組，以及它們的標題。
<footer>  定義 section 或 page 的頁腳。
<form>  定義供用戶輸入的 HTML 表單。
<header>  定義 section 或 page 的頁眉。
<nav> 定義導航連接。
<noframes>  定義針對不支持框架的用戶的替代內容。
<noscript>  定義針對不支持客戶端腳本的用戶的替代內容。
<legend>  定義 fieldset 元素的標題。
<menu>  定義命令的列表或菜單。
<meter> 定義預約義範圍內的度量。
<output>  定義輸出的一些類型。
<section> 定義 section。

行內元素

和其餘元素都在一行上；
高，行高及外邊距和內邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變；
內聯元素只能容納文本或者其餘內聯元素；前端

設置寬度width 無效。
設置高度height 無效，能夠經過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。java

<a> 定義錨。
<abbr>  定義縮寫。
<span>  定義文檔中的節。
<strong>  定義強調文本。
<i> 定義斜體字。
<acronym> 定義只取首字母的縮寫。
<b> 定義粗體字。
<button>  定義按鈕 (push button)。
<sub> 定義下標文本。
<sup> 定義上標文本。
<textarea>  定義多行的文本輸入控件。
<em>  定義強調文本。
<bdo> 定義文字方向。
<big> 定義大號文本。
<cite>  定義引用(citation)。
<code>  定義計算機代碼文本。
<command> 定義命令按鈕。
<dfn> 定義定義項目。
<del> 定義被刪除文本。
<embed> 定義外部交互內容或插件。
<kbd> 定義鍵盤文本。
<label> 定義 input 元素的標註。
<map> 定義圖像映射。
<mark>  定義有記號的文本。
<objec> 定義內嵌對象。
<progress>  定義任何類型的任務的進度。
<q> 定義短的引用。
<samp>  定義計算機代碼樣本。
<select>  定義選擇列表（下拉列表）。
<small> 定義小號文本。
<tt>  定義打字機文本。
<var> 定義文本的變量部分。

空標籤

沒有閉合標籤的標籤被稱做爲空標籤。
在咱們使用的標籤中，有的具備閉合標籤。例如<td>標籤，它有閉合標籤</td>。可是也有一部分標籤沒有閉合標籤，例如<br />標籤，這一類標籤咱們稱之爲空標籤。web

<input />  用於爲基於Web的表單建立交互式控件，以便接受來自用戶的數據。
<img /> 表明文檔中的一個圖像。
<isindex /> 使瀏覽器顯示一個對話框，提示用戶輸入單行文本。
<hr/>  定義水平線。
<br>  定義簡單的折行。
<area /> 在圖片上定義一個熱點區域
<base /> 指定用於一個文檔中包含的全部相對URL的基本URL。
<basefont /> 用來設置文檔的默認字體大小。（目前已廢棄 ）
<bgsound /> IE瀏覽器中設置網頁背景音樂的元素。
<col /> 定義表格中的列，並用於定義全部公共單元格上的公共語義。它一般位於`<colgroup>`元素內。
<embed /> 用於表示一個外部應用或交互式內容的集合點，換句話說，就是一個插件。 
<frame /> ，它定義了一個特定區域，另外一個 HTML 文檔能夠在裏面展現。(已廢棄)
<link /> 指定了外部資源與當前文檔的關係. 這個元素的使用方法包括爲導航定義關係框架.這個元素常常用來連接css文件。
<meta /> 元素表示那些不能由其它HTML元相關元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元數據信息.
<param />  定義了 <object>的參數
<plaintext /> 將起始標籤後面的任何東西渲染爲純文本，不會解釋爲 HTML。它沒有閉合標籤，由於任何後面的東西都會看作純文本。(已廢棄)
<spacer /> 它能夠向頁面插入間隔。它由 Netscape 設計，用於實現單像素佈局圖像的相同效果，Web 設計師用它來向頁面添加空白，而不須要實際使用圖片。（已廢棄）

Html模板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Fanstyle</title>
    <!-- 設置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容國產瀏覽器的高速模式 -->
    <meta name="renderer" content="webkit">
    <meta name="Author" content="孟繁勝遊" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
      
    </style>
</head>
<body>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。