最近所接手的一個項目是一個前後端分離的項目,因爲公司暫時抽調不出前端支援這個項目,所以我被臨時抽調在這個項目中充當一個前端開發的一個角色.由於之前做過一年多的J2EE開發,所以對於前端開發還是很快能上手的.只是因爲之前的html、css常用標籤與用法在腦海裏面已經很模糊了,所以導致在開發的過程中經常是不明其所以然,一個標籤一個標籤的、一個屬性一個屬性的試,導致開發效率極低,所以我打算趁國慶假期開始好好的複習鞏固下,廢話不多說,開始正文.
一.塊級元素與行內元素的區別
1.1 在標準文檔流裏面,塊級元素具有以下特點:
(1).塊級元素總是在新行上開始,佔據一整行,其寬度自動填滿其父元素寬度,垂直向下排列.(注:若想使其水平方向排序,可使用左右浮動(float:left/right)讓其水平方向排列.)
(2).塊級元素可以設置寬高,並且寬度高度以及外邊距,內填充都可隨意控制.(注:塊級元素即使設置了寬度,仍然是獨佔一行的)
(3).塊級元素可以包含行內元素和其他塊級元素.
1.2 在標準文檔流裏面,行內元素具有以下特點:
(1).行內元素和其他行內元素都會在一條水平線上排列,都是在同一行的
(2).行內元素不可以設置寬高,寬度高度隨文本內容的變化而變化,但是可以設置行高(line-height),同時在設置外邊距margin上下無效,左右有效,內填充padding可以隨意控制;
(3).行內元素不能包含塊級元素,只能容納文本或者其他行內元素.
二.塊級元素與行內元素的相互轉換
行內元素與塊級函數可以相互轉換,通過修改display屬性值來切換塊級元素和行內元素,行內元素display:inline,塊級元素display:block。
2.1 塊級元素轉換爲行級元素:
2.2 行級元素轉換爲塊級元素:
三.塊級元素與行內元素的分類
3.1 常見塊級元素與行內元素的分類:
3.2 基本塊級元素與行內元素的分類:
html中的塊級元素:
標籤 | 描述 |
---|---|
<address> | 定義地址。 |
<article> | 定義文章。 |
<aside> | 定義頁面內容之外的內容。 |
<audio> | 定義聲音內容。 |
<blockquote> | 定義長的引用。 |
<canvas> | 定義圖形。 |
<caption> | 定義表格標題。 |
<dd> | 定義定義列表中項目的描述。 |
<div> | 定義文檔中的節。 |
<dl> | 定義定義列表。 |
<dt> | 定義定義列表中的項目。 |
<details> | 定義元素的細節。 |
<fieldset> | 定義圍繞表單中元素的邊框。 |
<figcaption> | 定義 figure 元素的標題。 |
<figure> | 定義媒介內容的分組,以及它們的標題。 |
<footer> | 定義 section 或 page 的頁腳。 |
<form> | 定義供用戶輸入的 HTML 表單。 |
<h1> to <h6> | 定義 HTML 標題。 |
<header> | 定義 section 或 page 的頁眉。 |
<hr> | 定義水平線。 |
<legend> | 定義 fieldset 元素的標題。 |
<li> | 定義列表的項目。 |
<menu> | 定義命令的列表或菜單。 |
<meter> | 定義預定義範圍內的度量。 |
<nav> | 定義導航鏈接。 |
<noframes> | 定義針對不支持框架的用戶的替代內容。 |
<noscript> | 定義針對不支持客戶端腳本的用戶的替代內容。 |
<ol> | 定義有序列表。 |
<output> | 定義輸出的一些類型。 |
<p> | 定義段落。 |
<pre> | 定義預格式文本。 |
<section> | 定義 section。 |
<table> | 定義表格。 |
<tbody> | 定義表格中的主體內容。 |
<td> | 定義表格中的單元。 |
<tfoot> | 定義表格中的表注內容(腳註)。 |
<th> | 定義表格中的表頭單元格。 |
<thead> | 定義表格中的表頭內容。 |
<time> | 定義日期/時間。 |
<tr> | 定義表格中的行。 |
<ul> | 定義無序列表。 |
html中的行內元素:
標籤 | 描述 |
---|---|
<a> | 定義錨。 |
<abbr> | 定義縮寫。 |
<acronym> | 定義只取首字母的縮寫。 |
<b> | 定義粗體字 |
<bdo> | 定義文字方向。 |
<big> | 定義大號文本。 |
<br> | 定義簡單的折行。 |
<button> | 定義按鈕 (push button)。 |
<cite> | 定義引用(citation)。 |
<code> | 定義計算機代碼文本。 |
<command> | 定義命令按鈕。 |
<dfn> | 定義定義項目。 |
<del> | 定義被刪除文本。 |
<em> | 定義強調文本。 |
<embed> | 定義外部交互內容或插件。 |
<i> | 定義斜體字。 |
<img> | 定義圖像。 |
<input> | 定義輸入控件。 |
<kbd> | 定義鍵盤文本。 |
<label> | 定義 input 元素的標註。 |
<map> | 定義圖像映射。 |
<mark> | 定義有記號的文本。 |
<objec> | 定義內嵌對象。 |
<progress> | 定義任何類型的任務的進度。 |
<q> | 定義短的引用。 |
<samp> | 定義計算機代碼樣本。 |
<select> | 定義選擇列表(下拉列表)。 |
<small> | 定義小號文本。 |
<span> | 定義文檔中的節。 |
<strong> | 定義強調文本。 |
<sub> | 定義下標文本。 |
<sup> | 定義上標文本。 |
<textarea> | 定義多行的文本輸入控件。 |
<time> | 定義日期/時間。 |
<tt> | 定義打字機文本。 |
<var> | 定義文本的變量部分。 |
<video> | 定義視頻。 |
<wbr> | 定義可能的換行符。 |
四.結束語
在創作這邊文章的時候有借鑑一下文章,在此表示感謝: