html中的標簽元素大體被分為三種不同的類型:塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。HTML網頁基本標簽的嵌套規則:1.塊元素可以嵌套行元素2.行元素可以嵌套行元素3.行元素不可以嵌套塊元素4.文字類塊元素不可以嵌套塊元素5.容器類塊元素可以嵌套塊元素 ...
HTML 可以通過 <div> 和 <span> 將元素組合起來,大多數 HTML 元素被定義為塊級元素或內聯元素;塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束);實例: <h1>, <p>, <ul>, <table>
HTML 內聯元素:內聯元素在顯示時通常不會以新行開始,實例: <b>, <td>, <a>, <img>
HTML <div> 元素
- <div> 標簽可以把文檔分割為獨立的、不同的部分。
- HTML <div> 元素是塊級元素,它是可用於組合其他 HTML 元素的容器。
- <div> 元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前後顯示折行。
- 如果與 CSS 一同使用,<div> 元素可用於對大的內容塊設置樣式屬性。
- <div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。
完全table表格佈局網站:view-source:http://www.hongdalixin.com/
HTML <span> 與元素
- HTML <span> 元素是內聯元素,可用作文本的容器
- <span> 元素也沒有特定的含義。
- 當與 CSS 一同使用時,<span> 元素可用於為部分文本設置樣式屬性。
HTML網頁基本標簽的嵌套規則:
- 塊元素可以嵌套行元素
- 行元素可以嵌套行元素
- 行元素不可以嵌套塊元素
- 文字類塊元素不可以嵌套塊元素
- 容器類塊元素可以嵌套塊元素
B.拓展:css排版常用樣式、三種不同html類型、css佈局盒模型介紹
html中的標簽元素大體被分為三種不同的類型:塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
- 塊狀元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<address>、<blockquote>、<form>
- 內聯元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
- 內聯塊狀元素:<img>、<input>
總結:什麼是塊級元素?在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。如a{display:block;}就是將內聯元素a轉換為塊狀元素,從而使a元素具有塊狀元素特點。
塊級元素特點:1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。2、元素的高度、寬度、行高以及頂和底邊距都可設置。3、元素寬度在不設置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定一個寬度。
在html中,<span>、<a>、<label>、<strong>和<em>就是典型的內聯元素(行內元素)(inline)元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。如div{display:inline;}就是將塊狀元素div轉換為內聯元素,從而使div元素具有內聯元素特點。
內聯元素特點:1、和其他元素都在一行上;2、元素的高度、寬度及頂部和底部邊距不可設置;3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。
內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增),<img>、<input>標簽就是這種內聯塊狀標簽。
inline-block元素特點:1、和其他元素都在一行上;2、元素的高度、寬度、行高以及頂和底邊距都可設置。