HTML(HyperText Markup Language,中文:超文本標記語言)是一種用于創建網頁結構和內容的標記語言。它由一系列標簽組成,這些標簽描述了網頁中的各個元素和其它相關信息。通過使用HTML標簽和屬性,開發人員可以定義文本、圖像、鏈接、表格、表單等元素,并控制它們的外觀和行為。本文主要介紹HTML的基本概念、歷史背景和用途。
參考文檔:https://www.cjavapy.com/article/3297/
HTML實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
HTML文檔的后綴名可以是.html或.htm,都可以使用,沒有區別。
注意:對于中文網頁需要使用<meta charset="utf-8"> 聲明編碼,否則會出現亂碼。有些瀏覽器(如 360 瀏覽器)會設置 GBK 為默認編碼,則你需要設置為<meta charset="gbk"> 。
1)標簽(Tag)
HTML使用標簽來定義網頁中的各個元素。標簽通常以尖括號< >的形式出現,如<p>表示段落,<img>表示圖像等。標簽可以包含屬性,用于提供額外的信息或控制元素的行為。
2)元素(Element)
一個完整的HTML元素由開始標簽、內容和結束標簽組成。例如,<p>這是一個段落</p>就是一個完整的段落元素。
3)屬性(Attribute)
HTML標簽可以具有屬性,用于提供元素的額外信息或控制元素的行為。屬性以鍵值對的形式出現,例如<img src="image.jpg">中的src屬性指定了圖像的源文件。
4)文檔結構
一個HTML文檔由<html>、<head>和<body>等標簽組成。其中,<html>標簽用于定義整個HTML文檔的根元素,<head>標簽用于定義文檔的頭部信息,如標題和樣式表鏈接,<body>標簽用于定義文檔的主體內容。
5)塊級元素和內聯元素
HTML元素可以被分類為塊級元素和內聯元素。塊級元素以塊的形式顯示,獨占一行或一塊空間,如<p>、<div>等。內聯元素以行內的方式顯示,不會獨占一行,如<span>、<a>等。
6)嵌套
HTML元素可以嵌套在其他元素內部,形成一個層次結構。例如,<div>元素可以包含<p>元素,<p>元素可以包含<span>元素。
7)<!DOCTYPE> 聲明
HTML文檔的開頭通常會包含一個DOCTYPE聲明,用于指定文檔的HTML版本。
例如:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
HTML(HyperText Markup Language)是一種用于創建網頁結構和內容的標記語言,而Web瀏覽器(如谷歌瀏覽器,Internet Explorer,Firefox,Safari)是用于顯示和解釋HTML文檔的應用程序。Web瀏覽器通過解析HTML文檔,將其轉換為可視化的網頁。瀏覽器會讀取HTML文檔中的標簽和內容,并根據這些標簽和內容的定義,渲染出網頁的結構和樣式。HTML提供了各種標簽和屬性,用于定義文本、圖像、鏈接、表格、表單等在網頁中的展示和交互方式。瀏覽器在解析HTML時,會根據標簽和屬性的定義,將文本顯示為段落、標題或其他格式,顯示圖像、鏈接,并響應用戶的交互操作。
通過HTML和Web瀏覽器的結合,用戶可以在瀏覽器中訪問和瀏覽各種網頁內容,包括網頁文本、圖像、視頻、音頻等多媒體元素,并與網頁進行交互,如點擊鏈接、填寫表單、提交數據等。
大部分瀏覽器中,直接輸出中文會出現中文亂碼的情況,需要在頭部將字符聲明為 UTF-8 或 GBK。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
頁面標題</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
HTML有多個版本,每個版本都有不同的特性和改進。
版本 | 發布時間 |
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2014 |
1)HTML 1.0
HTML 1.0是最早的HTML版本,于1993年發布。它只包含一些基本的標簽和屬性,用于創建簡單的文本和鏈接。HTML 1.0的目標是定義一種通用的超文本標記語言。
2)HTML 2.0
HTML 2.0于1995年發布,是對HTML 1.0的改進和擴展。它引入了一些新的標簽和屬性,如圖像標簽和表格標簽,以支持更豐富的內容展示。
3)HTML 3.2
HTML 3.2于1997年發布,是對HTML 2.0的進一步改進。它引入了一些新的標簽和屬性,如表單標簽和框架標簽,以支持交互性和頁面布局。
4)HTML 4.01
HTML 4.01于1999年發布,是對HTML 3.2的修訂和擴展。它引入了更多的標簽和屬性,如層標簽和樣式表,以支持更靈活的頁面設計和樣式控制。
5)XHTML 1.0
XHTML(eXtensible HyperText Markup Language)是基于XML的HTML版本。XHTML 1.0于2000年發布,它嚴格遵循XML的語法規則,要求所有標簽和屬性都要正確嵌套和閉合。
6)HTML5
HTML5是HTML的最新版本,于2014年正式發布。HTML5引入了許多新的特性和API,如語義化標簽、多媒體支持、Canvas繪圖、本地存儲等。HTML5還支持響應式設計,以適應不同設備和屏幕尺寸。
HTML是構建網頁結構和內容的基礎語言,它提供了豐富的標簽和屬性,使得開發者可以創建各種類型的網頁,并實現不同的功能和效果。HTML用于定義網頁的整體結構,包括標題、段落、列表、標題、導航菜單等元素。通過使用不同的HTML標簽和屬性,可以將文本、圖像、音頻、視頻等內容組織起來,并構建頁面的層次結構。HTML可以用于展示文本內容和多媒體元素,如圖像、音頻和視頻。通過使用適當的HTML標簽和屬性,可以插入和顯示各種類型的媒體內容,從而使網頁更加豐富和吸引人。HTML提供了創建表單的標簽和元素,可以用于收集用戶的輸入數據。通過使用表單元素如文本框、復選框、單選按鈕和下拉列表等,用戶可以輸入數據并提交給服務器進行處理。
參考文檔:https://www.cjavapy.com/article/3297/
能夠寫出基本的頁面(里面包含圖片、各種標簽和鏈接)
我們主要用的開發工具有chrome、hbuilder、Photoshop
瀏覽器是網頁顯示、運行的平臺,常用的瀏覽器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我們平時稱為五大瀏覽器。
瀏覽器內核又可以分成兩部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 :它負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入 CSS 等),以及計算網頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言,執行 javascript語言來實現網頁的動態效果。
最開始渲染引擎和 JS 引擎并沒有區分得很明確,后來 JS 引擎越來越獨立,內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多,如果加上沒什么人使用的非商業的免費內核,可能會有10多種,但是常見的瀏覽器內核可以分這四種:Trident、Gecko、Blink、Webkit。
了解一點:移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
Android手機而言,使用率最高的就是Webkit內核,大部分國產瀏覽器宣稱的自己的內核,基本上也是屬于webkit二次開發。
iOS以及WP7平臺上,由于系統原因,系統大部分自帶瀏覽器內核,一般是Safari或者IE內核Trident的
結構標準:結構用于對網頁元素進行整理和分類,咱們主要學的是HTML。 最重要
表現標準:表現用于設置網頁元素的版式、顏色、大小等外觀樣式,主要指的是CSS。
行為標準:行為是指網頁模型的定義及交互的編寫,咱們主要學的是 Javascript
HTML(英文Hyper Text Markup Language的縮寫)中文譯為“超文本標簽語言”。是用來描述網頁的一種語言。
所謂超文本,因為它可以加入圖片、聲音、動畫、多媒體等內容,不僅如此,它還可以從一個文件跳轉到另一個文件,與世界各地主機的文件連接。
<h1> 我是一個大標題 </h1>
注意: 體會 文本 標簽 語言 幾個詞語
總結: HTML 作用就是用標記標簽來描述網頁,把網頁內容在瀏覽器中展示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1.HTML標簽:
作用所有HTML中標簽的一個根節點。 最大的標簽 根標簽
2 head標簽: 文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
注意在head標簽中我們必須要設置的標簽是title
3.title標簽: 文檔的標題
作用:讓頁面擁有一個屬于自己的標題。
4.body標簽:文檔的主體 以后我們的頁面內容 基本都是放到body里面的
body 元素包含文檔的所有內容(比如文本、超鏈接、圖像、表格和列表等等。)
在HTML頁面中,帶有“< >”符號的元素被稱為HTML標簽,如上面提到的 HTML、head、body都是HTML骨架結構標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令,也稱為HTML標簽或 HTML元素
1.雙標簽
<標簽名> 內容 </標簽名>
該語法中“<標簽名>”表示該標簽的作用開始,一般稱為“開始標簽(start tag)”,“</標簽名>” 表示該標簽的作用結束,一般稱為“結束標簽(end tag)”。和開始標簽相比,結束標簽只是在前面加了一個關閉符“/”。
比如 <body>我是文字 </body>
2.單標簽
<標簽名 />
單標簽也稱空標簽,是指用一個標簽符號即可完整地描述某個功能的標簽。
比如 <br />
標簽的相互關系就分為兩種:
1.嵌套關系
<head> <title> </title> </head>
2.并列關系
<head></head> <body></body>
首先 HTML和CSS是兩種完全不同的語言,我們學的是結構,就只寫HTML標簽,認識標簽就可以了。 不會再給結構標簽指定樣式了。
HTML標簽有很多,這里我們學習最為常用的,后面有些較少用的,我們可以查下手冊就可以了。
排版標簽
單詞縮寫: head 頭部. 標題 title 文檔標題
為了使網頁更具有語義化,我們經常會在頁面中用到標題標簽,HTML提供了6個等級的標題,即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式如下:
<hn> 標題文本 </hn>
<p> 文本內容 </p>
<hr />是單標簽
<br />
div span 是沒有語義的 是我們網頁布局主要的2個盒子 css+div
div 就是 division 的縮寫 分割, 分區的意思 其實有很多div 來組合網頁。
span, 跨度,跨距;范圍
語法格式:
<div> 這是頭部 </div> <span>今日價格</span>
在網頁中,有時需要為文字設置粗體、斜體或下劃線效果,這時就需要用到HTML中的文本格式化標簽,使文字以特殊的方式顯示。
b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈
使用HTML制作網頁時,如果想讓HTML標簽提供更多的信息,可以使用HTML標簽的屬性加以設置。其基本語法格式如下:
<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>
在上面的語法中,
1.標簽可以擁有多個屬性,必須寫在開始標簽中,位于標簽名后面。
2.屬性之間不分先后順序,標簽名與屬性、屬性與屬性之間均以空格分開。
3.任何標簽的屬性都有默認值,省略該屬性則取默認值。
采取 鍵值對 的格式 key="value" 的格式
比如:
<hr width="400" />
屬性 是 寬度
值 是 400
單詞縮寫: image 圖像
HTML網頁中任何元素的實現都要依靠HTML標簽,要想在網頁中顯示圖像就需要使用圖像標簽,接下來將詳細介紹圖像標簽<img />以及和他相關的屬性。其基本語法格式如下:
該語法中src屬性用于指定圖像文件的路徑和文件名,他是img標簽的必需屬性。
<img src="圖像URL" />
單詞縮寫: anchor 的縮寫 [???k?(r)] ?;窘忉?錨, 鐵錨 的
在HTML中創建超鏈接非常簡單,只需用標簽環繞需要被鏈接的對象即可,其基本語法格式如下:
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href:用于指定鏈接目標的url地址,當為標簽應用href屬性時,它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用
target:用于指定鏈接頁面的打開方式,其取值有self和blank兩種,其中self為默認值,blank為在新窗口中打開方式。
注意:
1.外部鏈接 需要添加 http:// www.baidu.com
2.內部鏈接 直接鏈接內部頁面名稱即可 比如 < a href="index.html"> 首頁
3.如果當時沒有確定鏈接目標時,通常將鏈接標簽的href屬性值定義為“#”(即href="#"),表示該鏈接暫時為一個空鏈接。
4.不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈接。
通過創建錨點鏈接,用戶能夠快速定位到目標內容。
創建錨點鏈接分為兩步:
1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本(被點擊的) <a href="#two"> 2.使用相應的id名標注跳轉目標的位置。 <h3 id="two">第2集</h3>
base 可以設置整體鏈接的打開狀態
base 寫到 <head> </head> 之間
把所有的連接 都默認添加 target="_blank"
在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字,就需要使用注釋標簽。其基本語法格式如下:
<!-- 注釋語句 --> ctrl + / 或者 ctrl +shift + /
注釋內容不會顯示在瀏覽器窗口中,但是作為HTML文檔內容的一部分,也會被下載到用戶的計算機上,查看源代碼時就可以看到。
實際工作中,通常新建一個文件夾專門用于存放圖像文件,這時再插入圖像,就需要采用“路徑”的方式來指定圖像文件的位置。
根目錄 當前目錄
路徑可以分為: 相對路徑和絕對路徑
以引用文件之網頁所在位置為參考基礎,而建立出的目錄路徑。因此,當保存于不同目錄的網頁引用同一個文件時,所使用的路徑將不相同,故稱之為相對路徑。
絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對,意指當所有網頁引用同一個文件時,所使用的路徑都是一樣的
“D:webimglogo.gif”,或完整的網絡地址,例如“http://www.itcast.cn/images/l...”。
無序列表的各個列表項之間沒有順序級別之分,是并列的。其基本語法格式如下:
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ul>
注意:
有序列表即為有排列順序的列表,其各個列表項按照一定的順序排列定義,有序列表的基本語法格式如下:
<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ol>
所有特性基本與ul 一致。
但是實際工作中, 較少用 ol img src="media/1.jpg" />
定義列表常用于對術語或名詞進行解釋和描述,定義列表的列表項前沒有任何項目符號。其基本語法如下:
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ... </dl>
在HTML網頁中,要想創建表格,就需要使用表格相關的標簽。創建表格的基本語法格式如下:
<table> <tr> <td>單元格內的文字</td> ... </tr> ... </table>
在上面的語法中包含三對HTML標簽,分別為 table</table、tr</tr、td</td,他們是創建表格的基本標簽,缺一不可,下面對他們進行具體的解釋
1.table用于定義一個表格。
2.tr 用于定義表格中的一行,必須嵌套在 table標簽中,在 table中包含幾對 tr,就有幾行表格。
3.td /td:用于定義表格中的單元格,必須嵌套在<tr></tr>標簽中,一對 <tr> </tr>中包含幾對<td></td>,就表示該行中有多少列(或多少個單元格)。
注意:
1. <tr></tr>中只能嵌套<td></td> 2. <td></td>標簽,他就像一個容器,可以容納所有的元素
表頭一般位于表格的第一行或第一列,其文本加粗居中,如下圖所示,即為設置了表頭的表格。設置表頭非常簡單,只需用表頭標簽th</th替代相應的單元格標簽td</td即可。
在使用表格進行布局時,可以將表格劃分為頭部、主體和頁腳(頁腳因為有兼容性問題,我們不在贅述),具體 如下所示:
<thead></thead>:用于定義表格的頭部。
必須位于<table></table> 標簽中,一般包含網頁的logo和導航等頭部信息。
<tbody></tbody>:用于定義表格的主體。
位于<table></table>標簽中,一般包含網頁中除頭部和底部之外的其他內容。
表格的標題: caption
定義和用法
caption 元素定義表格標題。
<table> <caption>我是表格標題</caption> </table>
caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。
跨行合并:rowspan 跨列合并:colspan
合并單元格的思想:
將多個內容合并的時候,就會有多余的東西,把它刪除。 例如 把 3個 td 合并成一個, 那就多余了2個,需要刪除。 公式: 刪除的個數 = 合并的個數 - 1
合并的順序 先上 先左
表格的學習要求: 能手寫表格結構,并且能合并單元格。
表單控件:
包含了具體的表單功能項,如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息:
一個表單中通常還需要包含一些說明性的文字,提示用戶進行填寫和操作。
表單域:
他相當于一個容器,用來容納所有的表單控件和提示信息,可以通過他定義處理表單數據所用程序的url地址,以及數據提交到服務器的方法。如果不定義表單域,表單中的數據就無法傳送到后臺服務器。
在上面的語法中,input /標簽為單標簽,type屬性為其最基本的屬性,其取值有多種,用于指定不同的控件類型。除了type屬性之外,input /標簽還可以定義很多其他的屬性,其常用屬性如下表所示。
label 標簽為 input 元素定義標注(標簽)。
作用: 用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點
如何綁定元素呢?
for 屬性規定 label 與哪個表單元素綁定。
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
如果需要輸入大量的信息,就需要用到textarea/textarea標簽。通過textarea控件可以輕松地創建多行文本輸入框,其基本語法格式如下:
<textarea cols="每行中的字符數" rows="顯示的行數"> 文本內容 </textarea>
使用select控件定義下拉菜單的基本語法格式如下
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>
注意:
在HTML中,form標簽被用于定義表單域,即創建一個表單,以實現用戶信息的收集和傳遞,form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下:
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件 </form>
常用屬性:
注意: 每個表單都應該有自己表單域。
如需轉載,請注明出處,否則將追究法律責任。
然CSS并不是一種很復雜的技術,但就算你是一個使用CSS多年的高手,仍然會有很多CSS用法/屬性/屬性值你從來沒使用過,甚至從來沒聽說過。
對于CSS的color
屬性,相信所有Web開發人員都使用過。如果你并不是一個特別有經驗的程序員,我相信你未必知道color
屬性除了能用在文本顯示,還可以用作其它地方。
你可以先看一下下面的演示:
HTML代碼
<img alt="Example alt text" ><ul> <li>Example list item</li></ul><ol> <li>Example list item</li></ol><hr>
CSS代碼
body { color: yellow; background: #444; font-size: 20px; font-family: Arial, sans-serif; text-align: center;}ul { border: solid 2px; text-align: left;}ol { text-align: left;}hr { border-color: inherit;}
請注意,上面的代碼里只使用了一個color
屬性,就是在body
元素上,設置成了yellow
。但是,你也看到了,所有這個頁面上的東西都變成了黃色,包括:
無法顯示的圖片的alt
文字
list元素的邊框
無序list元素前面的小點
有序list元素前面的數字
還有hr
元素
有趣的是,這個hr
元素,缺省情況下它并不從body
上繼承color
的屬性,但我使用border-color: inherit
強制讓它繼承。這是個很詭異的特征。
在CSS規范里是這樣說的:
這個屬性聲明了元素文本內容的前景色(foreground color)。除此之外,它的值還被用于其它地方間接的引用….比如,其它可以接受顏色值的屬性。
我無法想象出還有什么地方的屬性能用“前景色”來描述,如果你知道,請在評論里告訴我。
2.CSS里的visibility屬性有個collapse屬性值:collapse
對于CSS里的visibility
屬性,相信你用過不下幾百次。大多時候,你會把它的值設置成visible
(這是所有頁面元素的缺省值),或者是hidden
。后者相當于display: none
,但仍然占用頁面空間。
其實visibility可以有第三種值,就是collapse。當一個元素的visibility屬性被設置成collapse值后,對于一般的元素,它的表現跟hidden
是一樣的。但例外的是,如果這個元素是table相關的元素,例如table行,table group,table列,table column group,它的表現卻跟display: none
一樣,也就是說,它們占用的空間也會釋放。
但遺憾的是,各種瀏覽器對collapse
值的處理方式不一樣??匆幌孪旅娴难菔荆?/p>
HTML代碼
<table cellspacing="0" class="table"> <tr> <th>Fruits</th> <th>Vegetables</th> <th>Rocks</th> </tr> <tr> <td>Apple</td> <td>Celery</td> <td>Granite</td> </tr> <tr> <td>Orange</td> <td>Cabbage</td> <td>Flint</td> </tr></table><p><button>collapse行1</button></p><p><button>hide行1</button></p><p><button>重置</button></p>
CSS代碼
body { text-align: center; padding-top: 20px; font-family: Arial, sans-serif;}table { border-collapse: separate; border-spacing: 5px; border: solid 1px black; width: 500px; margin: 0 auto;}th, td { text-align: center; border: solid 1px black; padding: 10px;}.vc { visibility: collapse;}.vh { visibility: hidden;}button { margin-top: 5px;}
Javascript代碼
var btns = document.getElementsByTagName('button'), rows = document.getElementsByTagName('tr');btns[0].addEventListener('click', function () { rows[1].className = 'vc';}, false);btns[1].addEventListener('click', function () { rows[1].className = 'vh';}, false);btns[2].addEventListener('click', function () { rows[1].className = '';}, false);
演示
CSS-Tricks的Almanac建議說不要使用這個值,因為瀏覽器的不統一。
據我的觀察:
在谷歌瀏覽器里,使用collapse
值和使用hidden
值沒有什么區別。 (See this bug report and comments)
在火狐瀏覽器、Opera和IE11里,使用collapse
值的效果就如它的字面意思:table的行會消失,它的下面一行會補充它的位置。
說實話,估計這個值很少人會使用它,但你要知道確實可以使用這樣的一個值,如果以前不知道它,那么,現在,在有些罕見的地方,你也許就會變得聰明一點了。
3.CSS的background簡寫方式里新增了新的屬性值
在CSS2.1里,background
屬性的簡寫方式包含五種屬性值 – background-color
, background-image
, background-repeat
, background-attachment
, and background-position
。從CSS3開始,又增加了3個新的屬性值,加起來一共8個。下面是按順序分別代表的意思:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
注意里面的反斜杠,它更font
和border-radius里簡寫方式使用的反斜杠的用法相似。反斜杠可以在支持這種寫法的瀏覽器里在position
后面接著寫background-size。除此之外,你開可以增加另外兩個描述它的屬性值: background-origin和 background-clip
.它的語法用起來像下面這個樣子:
.example { background: aquamarine url(img.png) no-repeat scroll center center / 50% content-box content-box;}
你可以用下面的演示檢測你的瀏覽器是否支持這種寫法:
關于瀏覽器的支持情況,大概所有的現代瀏覽器都支持這些新屬性值,但對于一些非常老舊的瀏覽器(IE6/7/8),最好在代碼里提供一些萬一不支持的補救機制。
4.CSS的clip屬性只在絕對定位的元素上才會生效
之前說到了background-clip
,你可能會想到clip
屬性。它的用法是下面這個樣子:
.example { clip: rect(110px, 160px, 170px, 60px);}
它的作用是按指定的尺寸、規定的大小裁剪元素。很多簡單,但唯一你需要注意的事情是,clip
只會在絕對定位的元素上生效。所有,你必須這樣做:
.example { position: absolute; clip: rect(110px, 160px, 170px, 60px);}
在下面的演示中,你可以看到當元素在絕對定位/相對定位的切換中表現出來的效果:
但是,你也可以將元素的position
設置成position: fixed
,因為,根據css官方規范,fixed
的元素也屬于‘absolutely positioned’元素。
5.元素豎向的百分比設定是相對于容器的寬度,而不是高度
這是一個很讓人困惑的CSS特征,我之前也談到過它。我們大家都知道,當按百分比設定一個元素的寬度時,它是相對于父容器的寬度計算的,但是,對于一些表示豎向距離的屬性,例如padding-top
,padding-bottom
,margin-top
,margin-bottom
等,當按百分比設定它們時,依據的也是父容器的寬度,而不是高度。
下面是一個實例演示,你可以調整容器的寬度,但你會發現,黃塊塊的padding-bottom
的距離也會隨之寬度而變大或變小。
HTML代碼
<div class="wrapper" id="w"> <div class="box" id="b"></div></div><input type="range" min="120" max="400" value="400" class="range" id="r"><output>寬度是: <span id="op">400px</span></output><output>黃塊塊的Padding bottom是:<br><span id="op2">10%</span></output>
CSS代碼
body { font-family: Arial, sans-serif; padding-top: 30px; text-align: center;}.wrapper { width: 400px; margin: 0 auto; border: solid 1px black;}.box { width: 100px; height: 100px; background: gold; margin-left: auto; margin-right: auto; padding-top: 10%; padding-bottom: 10%; margin-bottom: 5%;}.range { display: block; margin: 20px auto;}output { text-align: center; display: block; font-weight: bold; padding-bottom: 20px;}output span { font-weight: normal;}
實例演示
上面的代碼中,我們對內部子元素聲明了3個豎向的距離,都是百分比形式。當移動滑塊時,我們的js代碼只需修改了容器的寬度。但是,這個這三個屬性高度都跟隨著變化,可以看出,它們的百分比計算是基于容器的寬度,而不是高度的。
6.border屬性比你想象的要復雜
我們很多人都用過這樣的寫法:
.example { border: solid 1px black;}
這里的border
屬性的用法實際上是一種簡寫的形式,它分別設置了border-style
, border-width
, 和border-color
— 用一句代碼表示它們三個。
但不要忘記,border-style
, border-width
, 和border-color
也都有自己的簡寫形式。所以,border-width
可以寫成這樣:
.example { border-width: 2px 5px 1px 0;}
這樣,四個邊的寬度被一次設定。border-color
和 border-style
屬性也可以這樣做。下面的這個實例演示就是用的這種寫法:
HTML代碼
<div class="box">
CSS代碼
body { font-family: Arial, sans-serif;}.box { width: 150px; height: 150px; margin: 20px auto; border-color: peachpuff chartreuse thistle firebrick; border-style: solid dashed dotted double; border-width: 10px 3px 1px 8px;}p { text-align: center;}
演示
其實,這些每個屬性還可以繼續細化,被拆分成border-left-style
, border-top-width
, border-bottom-color
….
但是,你無法用border
的簡寫分別對四個邊設置不同的值,只能分開來設置。所以,border
是一個簡寫里還有簡寫的屬性。
7.text-decoration屬性變成了屬性簡寫
我相信有些小知識會讓你大吃一驚。
跟著最新的CSS規范,text-decoration
現在的寫法是這樣的:
a { text-decoration: overline aqua wavy;}
text-decoration
屬性現在需要用三種屬性值來表示了:text-decoration-line
, text-decoration-color
, and text-decoration-style
.
但不幸的是,目前只有火狐瀏覽器實現了對這些新屬性的支持。
你可以用火狐瀏覽器試一試下面的演示:
HTML代碼
<a href="#" id="a">IT'S LIKE WATER, PEOPLE
(You should see a wavy line on top. Currently works only in Firefox)
CSS代碼
body { padding: 30px; text-align: center; font-family: Arial, sans-serif;}a, a:visited { color: blue; background: aqua; -moz-text-decoration-color: aqua; -moz-text-decoration-line: overline; -moz-text-decoration-style: wavy; text-decoration-color: aqua; text-decoration-line: overline; text-decoration-style: wavy;}
演示
在這演示中,我們沒有使用簡寫形式,而是分開描述每個屬性。這是可以更好的保證瀏覽器的向后兼容,使那些目前不支持這種寫法的瀏覽器也不受影響。
8.border-width屬性可以使用預定義常量值
也許對與你來說這并不是一個什么新鮮信息。除了可以使用標準寬度值(例如5px或1em)外,border-width
屬性可以接受預定義的常量值:medium
, thin
, 和 thick
事實上,如果你不給border-width
屬性賦值,那它的缺省值是“medium”。下面的演示就是用了預定義常量值:
HTML代碼
<div class="example">
CSS代碼
body { font-family: Arial, sans-serif; text-align: center;}.example { width: 100px; height: 100px; margin: 20px auto; background: aqua; border: solid thick red;}
演示
在瀏覽器使用這些預定義常量值時,CSS規范里并沒有規定都應該是什么寬度,但從我的觀察看,它們的值分別是 1px, 3px, 和 5px.
9.為什么沒有人使用border-image
之前我曾經寫過一篇關于CSS的border-image
屬性的文章。現在幾乎所有的現代瀏覽器都支持這個屬性——除了IE10及以下IE版本。
看起來這是一個非常漂亮的CSS功能,它可以讓你用圖片修飾元素的邊框。下面是一個實例演示,你可以拖拽調整里面的方塊的大小,看看有什么邊框圖案的變化。
HTML代碼
<div class="bi"><p><上面的方塊使用了圖片描邊。在這個方塊的右下角,有一個可以調整這個方塊大小的小三角,點住它,拖動它調整方塊大小,看看有什么效果。.</strong></p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
CSS代碼
body { font-family: Arial, sans-serif; text-align: center;}.bi { border: 45px solid transparent; -webkit-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round; -moz-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round; border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round; font-family: Arial, Helvetica, sans-serif; color: #222; width: 500px; margin: 30px auto 30px auto; overflow: hidden; resize: both;}
演示
但不幸的是,這么好的一個功能,卻沒有看到多少人使用它,也許是我的眼界太窄。如果你在哪看到過有人使用border-image
屬性,或你在真正項目中使用了它,請留言告訴我。
10.你知道table里的empty-cells屬性嗎?
css里的empty-cells
屬性是所有瀏覽器都支持的,甚至包括IE8,它的用法是下面這個樣子:
table { empty-cells: hide;}
估計你從語義上已經猜出它的作用了。它是為HTML table服務的。它會告訴瀏覽器,當一個table單元格里沒有東西時,就隱藏它。下面的演示里,你可以點擊里面按鈕,它會切換empty-cells
的屬性值,看看table的顯示有什么變化。
HTML代碼
<table cellspacing="0" id="table"> <tr> <th>Fruits</th> <th>Vegetables</th> <th>Rocks</th> </tr> <tr> <td></td> <td>Celery</td> <td>Granite</td> </tr> <tr> <td>Orange</td> <td></td> <td>Flint</td> </tr></table> <button id="b" data-ec="hide">切換EMPTY-CELLS</button>
CSS代碼
body { text-align: center; padding-top: 20px; font-family: Arial, sans-serif;}table { border: solid 1px black; border-collapse: separate; border-spacing: 5px; width: 500px; margin: 0 auto; empty-cells: hide; background: lightblue;}th, td { text-align: center; border: solid 1px black; padding: 10px;}button { margin-top: 20px;}
js代碼
var b = document.getElementById('b'), t = document.getElementById('table');b.onclick = function () { if (this.getAttribute('data-ec') === 'hide') { t.style.emptyCells = 'show'; this.setAttribute('data-ec', 'show'); } else { t.style.emptyCells = 'hide'; this.setAttribute('data-ec', 'hide'); }};
演示
在上面的演示中,我為能讓單元格的邊框顯示出來,在單元格的邊框間添加了空隙。有時候這個屬性不會有任何視覺效果,因為你必須讓你里面有可見的東西。
11.font-style的oblique屬性值
對與css的font-style
屬性,我估計大家每次見到的都是使用“normal”或 “italic”兩個屬性值。但事實上,你還可以讓它賦值為“oblique”。請看下面的演示:
HTML代碼
<h1>Oblique Text</h1><h1>Italic Text</h1>
CSS代碼
h1 { font-weight: normal; font-family: Georgia, serif; font-style: oblique; text-align: center; font-size: 50px;}h1:nth-child(2) { font-style: italic;}p { font-family: Arial, sans-serif; text-align: center;}
演示
這是什么意思?為什么“oblique”和斜體”italic”的效果是一樣的?
CSS規范中是這樣描述“oblique”的:
“…讓一種字體標識為斜體(oblique),如果沒有這種格式,就使用italic字體?!?/p>
這里描述所用的“oblique”和“italic”都是傾斜的意思?!皁blique”在維基百科里的解釋就是一種排版術語,就是一種傾斜的文字,但不是斜體。
因為“oblique”對于font-style
來說是一種合法的屬性值,它可和italic進行互換,除非真有一種字體只提供了oblique體而沒有提供斜體。
但我似乎從來沒有聽說過哪種字形提供過oblique字體,也許我錯了。研究發現,一種字庫好像不能同時提供斜體和oblique兩種字體,因為oblique基本上是一種模仿的斜體,而不是真正的斜體。
所以,如果我沒有猜錯的話,如果一種字庫里沒有提供斜體字,那當使用CSS的font-style: italic
時,瀏覽器實際上是按font-style: oblique
顯示的。
12.word-wrap和overflow-wrap是等效的
word-wrap
并不是一個很常用的CSS屬性,但在特定的環境中確實非常有用的。我們經常使用的一個例子是讓頁面中顯示一個長url時換行,而不是撐破頁面,下面是一個例子。
HTML代碼
<p class="p" id="p">supercalifragilisticexpialidocious</p><button id="b" data-ww="break-word">TOGGLE word-wrap</button>
CSS代碼
body { font-family: Arial, sans-serif; text-align: center;}.p { font-size: 24px; text-align: center; width: 200px; margin: 20px auto; border: solid 1px black; min-height: 60px; word-wrap: break-word;}button { display: block; margin: 0 auto;}
JS代碼
var p = document.getElementById('p'), b = document.getElementById('b');b.onclick = function () { if (this.getAttribute('data-ww') === 'break-word') { p.style.wordWrap = 'normal'; this.setAttribute('data-ww', 'normal'); } else { p.style.wordWrap = 'break-word'; this.setAttribute('data-ww', 'break-word'); }};
演示
因為這個屬性最初是由微軟發明的,所以,所有的瀏覽器都支持這個屬性。
盡管有所有的瀏覽器都支持,但W3C決定要用overflow-wrap
替換word-wrap
,我想可能是他們認為word-wrap
用詞不當。overflow-wrap
跟word-wrap
具有相同的屬性值,但現在,word-wrap
被當作overflow-wrap
的備選寫法。
雖然已經有不少的瀏覽器支持overflow-wrap
這種寫法,但看起來沒必要使用overflow-wrap
來讓老的瀏覽器不支持。所有的瀏覽器都會繼續支持word-wrap
這種寫法。
這其中有多少是以前不知道的?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。