標籤:hit 文檔 相同 文字 log tab table 筆記 har
HTML <div> 和 <span>
可以通過<div>和<span>將HTML元素組合起來.
HTML塊元素
大多數HTML元素被定義為區塊層級元素或者內斂元素
區塊層級元素在瀏覽器現實的額時候,通常會以新行來開始(和結束)
例子:<h1>,<p>,<ul>,<table>等。
HTML 內斂元素
內斂元素在顯示的時候通常不會以新行開始
例子:<b>,<td>,<a>,<img>等
HTML <div>元素
HTML <div>元素是區塊層級元素,他是可以用來組合其它HTML元素的額容器。
<div>元素沒有特定的含義,除此之外,由於它屬於區塊層級元素 瀏覽器會在其前後顯示折行。
如果與CSS(樣式 後面的部落格中將會具體介紹)一同使用,<div>元素可用於對大的內容設定樣式屬性。
<div>元素的另一個常見的應用就是文檔布局,他取代了使用表格定義布局的老式方法,使用<table>元素進行布局不是表格的正確用法。<table>元素的作用是顯示表格化的資料。
HTML <span>元素
HTML <span>元素是內斂元素 可用作文本的容器。
<span>元素也沒有特定的含義
當與CSS一起使用的時候 <span>元素可用於為部分文本設定樣式屬性。
HTML 類
對 HTML 進行分類(設定類),使我們能夠為元素的類定義 CSS 樣式。
為相同的類設定相同的樣式,或者為不同的類設定不同的樣式。
分類區塊層級元素
HTML <div> 元素是區塊層級元素。它能夠用作其他 HTML 元素的容器。
設定 <div> 元素的類,使我們能夠為相同的 <div> 元素設定相同的類:
例子:
<head> <meta charset="UTF-8"> <title>塊和類</title> <style type="text/css"> .cities { background-color: black; color: white; margin: 20px; padding: 20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>倫敦是英國的首都 也是世界金融中心</p> </div> <div class="cities"> <h2>Paris</h2> <p>巴黎是法國的手抖 也是世界浪漫之都</p> </div> <div class="cities"> <p>東京是日本的首都,也是世界有色文化中心</p> </div> </body>
分類行內元素
HTML <span> 元素是行內元素,能夠用作文本的容器。
設定 <span> 元素的類,能夠為相同的 <span> 元素設定相同的樣式。
例子:
<head> <meta charset="UTF-8"> <title>塊和類</title> <style type="text/css"> span.spanC { color: blue; } </style> </head> <body> <h1>我的<span class="spanC">重要的</span>標題</h1> </body>
上個例子中span中包涵的文字 將會顯示藍色。可見span可以為部分文本設定樣式。
HTML 學習筆記(塊 和 類)