㈠ 2019-05-31（前端第六節知識點）表格、元素的層級、背景
如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的
通過z-index屬性可以用來設置元素的層級
可以為z-index指定一個正整數作為值，該值將會作為當前元素的層級，層級越高，越優先顯示
設置元素的透明背景
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
alpha(opacity=透明度)
透明度，需要一個0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明
這種方式支持IE6，但是這種效果在IE Tester中無法測試
使用background-image來設置背景圖片
語法：background-image:url(相對路徑);
- 如果背景圖片大於元素，默認會顯示圖片的左上角
- 如果背景圖片和元素一樣大，則會將背景圖片全部顯示
- 如果背景圖片小於元素大小，則會默認將背景圖片平鋪以充滿元素
可以同時為一個元素指定背景顏色和背景圖片，這樣背景顏色將會作為背景圖片的底色
一般情況下設置背景圖片時都會同時指定一個背景顏色
可選值：
repeat，默認值，背景圖片會雙方向重復（平鋪）
no-repeat，背景圖片不會重復，有多大就顯示多大
repeat-x， 背景圖片沿水平方向重復
repeat-y，背景圖片沿垂直方向重復
背景圖片默認是貼著元素的左上角顯示
通過background-position可以調整背景圖片在元素中的兆唯位置
可選值察液：
該屬性可以使用 top right left bottom center中的兩個值來指定一個背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個值，則第二個值默認是center
也可以直接指定兩個偏移量
第一個值是水平偏移量
- 如果指定的是一個正值，則圖片會向右移動指定的像素
- 如果指定的是一個負值，則圖片會向左移動指定的像素
第二個是垂直偏移量
- 如果指定的是一個正值，則圖片會向下移動指定的像素
- 如果指定的是一個負值，則圖片會向上移動指定的像素
background-attachment用來設置背景圖片是否隨頁面一起滾動
可選值：
scroll，默認值，背景圖片隨著窗口滾動
fixed，背景圖片會固定在某一位置，不隨頁面滾動
不隨窗口滾動的圖片，我們一般都是設置給body，而不設置給其他元素
做完功能以後，發現在第一次切換圖片時，會發現圖片有一個非常快的閃爍，這個閃爍會造成一次不佳的用戶體驗
產生問題的原因：
背景圖片是以外部資源的形式載入進網頁的，瀏覽器每載入一個外部資源就需要單獨的發送一次請求
但是我們的外族沒培部資源並不是同時載入，瀏覽器會在資源被使用時才去載入資源
我們這個練習，一上來瀏覽器只會載入link.png
由於hover和active的狀態沒有馬上觸發，所以hover.png和active.png並不是立即載入的
當hover被觸發時，瀏覽器才去載入hover.png
當active被觸發時，瀏覽器才去載入active.png
由於載入圖片需要一定的時間，所以在載入和顯示過程會有一段時間，背景圖片無法顯示，導致出現閃爍的情況
為了解決該問題，可以將三個圖片整合為一張圖片，這樣可以同時將三張圖片一起載入，就不會出現閃爍的問題了
然後再通過background-position來切換要顯示的圖片的位置，這種技術叫做圖片整合技術（CSS-Sprite）
在HTML中，使用table標簽來創建一個表格
在table標簽中使用tr來表示表格中的一行，有幾行就有幾對tr
在tr中需要使用td來創建一個單元格，有幾個單元格就有幾個td
table和td邊框之間默認有一個距離，通過border-spacing屬性可以設置這個距離
border-collapse可以用來設置表格的邊框合並
如果設置了邊框合並，則border-spacing自動失效
隔行變色：
tbody > tr.nth-child（even/odd）
有一些情況下表格是非常的長的，這時就需要將表格分為三個部分，表頭，表格的主體，表格底部
在HTML中為我們提供了三個標簽：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個標簽的作用，就來區分表格的不同的部分，他們都是table的子標簽，都需要直接寫到table中，tr需要寫在這些標簽當中
thead中的內容，永遠會顯示在表格的頭部
tfoot中的內容，永遠都會顯示表格的底部
tbody中的內容，永遠都會顯示表格的中間
如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody
並且將所有的tr都放到tbody中，所以注意tr並不是table的子元素，而是tbody的子元素
以前表格更多的情況實際上是用來對頁面進行布局的，但是這種方式早已被CSS所淘汰了
表格的列數由td最多的那行決定
表格是可以嵌套，可以在td中在放置一個表格
㈡ web前端學習HTML表格的屬性標記有哪些
HTML表格的基本結構包括<table>、<caption>、<tr>、<td>、<th>等標記
1：<table>標記有以下屬性
① width屬性：表示表格的寬度
② height屬性：表示表格的高度
③ border屬性：表示表格外邊框的寬度
④ align屬性表示表格的顯示位置：left居左顯示；center居中顯示；right居右 顯示。
⑤ cellspacing屬性：單元格之間的間距
⑥ cellpadding屬性：單元格內容與邊框的顯示距離
⑦ frame屬性：控製表格邊框外層的四條線框
⑧ rules屬性：控制顯示單元格之間的分割線
2：<caption>標記用於表格中使用標題
<caption>標記的align屬性有四個取值：
① top表示標題放在表格的上部
② bottom表示標題放在表格的下部
③ left表示標題放在表格的左部
④ right表示標題放在表格的右部
3：<tr>標記用來定義表格的行，對於每一個表格行，都是由一對<tr>...</tr>標記表示。<tr>標記有如下幾種屬性
① bgcolor屬性用來設置背景顏色
② align屬性用來設置垂直方向對齊方式
③ valign屬性用來設置水平方向對齊方式
4：<td>和<th>都是單元格的標記，其必須嵌套在<tr>標記中，成對出現。<th>是表頭標記，<th>中的文字會被默認加粗，而<td>不會，<td>是數據標記，表示該單元格的具體數據。兩者的標記屬性是一樣的：
① bgcolor屬性用來設置背景顏色
② align屬性用來設置垂直方向對齊方式
③ valign屬性用來設置水平方向對齊方式
④ width屬性用來設置表格的寬度
⑤ height屬性用來設置表格的高度
⑦ rowspan設置單元格所佔行數
⑧ colspan設置單元格所佔列數
㈢ 如何正確使用html基本標簽
H5e教育html5開發為您解答：
1. 文檔聲明：<!Doctype>
其實這跟 WCAG 根本上連不上什麼直接關系，但為了一個兼容性更好，特別是向後兼容的頁面，我推薦你這樣寫：
<!Doctype html>
2. 鏈接：<a>
互聯網的聯幾乎可以說是用 <a> 來實現的，作為一個頁面最常見的標簽。我們應該如何對待呢？
為關鍵鏈接添加 accesskey
除非萬不得已，不要去掉 focus 時虛線框
<a href="" title="" accesskey="M" rel="" hidefocus>Link</a>
3. 縮寫: <abbr>
對於用 HTML Tag 的正確使用，也是非常重要的，這有利於讀屏軟體使用者對於頁面結構的理解。特別是在 H1,H2,H3 等這些標簽的使用，濫用非常容易造成結構費解。當然，使用一般的標簽，再利用 CSS 來使視覺上形成對比這也是常人能辨識的。但讀屏軟體用戶呢。當然，這里只是順帶提起需要注意頁面標簽的使用方法，而 abbr 最重要的應該是應該添加一皮逗個 title 屬性對縮寫進行描述。比如：
<abbr title="Web Developer" >WD</abbr>
4. 大段引用: <blockquote>，一般引用: <cite>
有大段引用的時候，使用 <blockquote>，而行內引用則使用 <cite>，讓你的結構更加易讀：
<blockquote>
之前就一直想寫這樣的一篇文章，分享一下如何去創造一個可訪問性更世升好的頁面。今天的計劃里有一條把 HTML T ag 和 WCAG標准結合起來。我推薦你這樣去寫你的 HTML，讓某些人的生活可以更容易。
</blockquote>
<p>某A給我印象最深刻的一句話是，<cite>「做前端要有愛。不要動不動就有朩有地對各種人使用咆哮體」</cite>。</p>
5. 刪除：<del>
在紙上寫東西不能像在計算機上寫東西一樣，可以用撤銷鍵可以按，但當我們想要強調某些東西是被刪除的怎麼辦？那就是使用 <del> 標簽了。比如這樣：
<del>HTML上表示強調時，請使用 <b> 標簽</del>
HTML上表示強調時，請使用 <strong> 標簽
效果是這樣的：
HTML上表示強調時，請使用 <b> 標簽
HTML上表示強調時，請使用 <strong> 標簽
6. 定義列表：<dl>
去年帶著新人做支付寶前端博客的時候，他們給我印象最深刻的是很喜歡用 <dl>。當時在想，這些同學挺不錯的，對語義化的理解還不錯。我們還是比較少用到定義列表的。而是使用一般的 <ul> <ol> 這兩個。<dl> 也是應該慎用的，最好只使用在某些有「定義」意義的條目，如 w3school 的這個例子，對咖啡和牛奶的定義：
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
7. 無序/有序列表 <ul>/<ol>
列表，這個對於每個前端來說，都熟悉不過了。因為結構可以非常靈活地進行應用，在導航、列表、Tab 等，都經常要要用到。這個就無須多說了。但有一點還是需要明白的，不要相信什麼 <ul>/<ol> 是 <table> 的替代品。在我們常用的 HTML Tags 中，每個標簽都有自己的作用，誰都不是誰的替代品。
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
8. 表格: <table>
如果是一個表格，那就，就不要用段落來替代，更不要用列表。除非萬不得已，並且他們是可以轉換的。另外，表格中還有一些需要注意的點：
給 <table> 添加 summary 屬性，有些表格非常大，並不需要去讀完整個
添加 <tbody>，如果我沒記錯搜握老，如果沒添加的話，瀏覽器會自動為你添加
必要時使用 <col> <colgroup> 來控製表示的欄
<table summary="sofish's blog status">
<thead>
<tr>
<th>DATE</th>
<th>IP</th>
<th>PV</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011.3.11</td>
<td>3000</td>
<td>8000</td>
</tr>
</tbody>
</table>
9. 格式化片段 <code>/<pre>
<code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范圍更廣，並且是塊狀元素，可能被使用來格式化各種文本，特別是代碼。使用沒有需要特別注意的，主要是語義上的正確使用，比如不要用 <pre> 來代替一般的 <p>。
<code>text-align:center</code>
<pre>
{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
</pre>
10. 換行: <br>
在現代網頁中，使用 <br> 的情況是非常少的。網頁中的留白，一般都是使用 CSS 的 padding 和 margin 來實現。這樣更精準，並用更容易控制。現在推薦的用法是，使用到一般的段落 <p> 中做簡單的換行，而不是用來控制頁面留白。
<p>我是一個段落。<br />
詩歌都會用換行的。
</p>
11. 分割線: <hr>
<hr> 具有非常好的語義作用。但他的視覺效果很難控制。之前就寫過這樣的文章關於<hr />在各瀏覽器中的問題。一般也都很少用。如果專門為讀屏軟體使用者提供單獨頁面的話，或許 <hr> 會大有用處。
<h3>標題一</h3>
<p>Lorem Ipsum is ...</p>
<hr />
<h3>標題二</h3>
<p>This is the entry of... </p>
12. 無語義標簽：<div>/<span>
其實 <div>/<span> 這兩個標簽是有語義的，都是 defines a section in a document。是的，和 HTML5 中的 <section> 其實是一樣的。只是，因為搜索引擎的的原因，搜索引擎認為它們是無語義標簽，因此他們成了 「無語義」 標簽。推薦用法是盡量使用其他來做為頁面框架的容器，比如布局、添加額外的視覺效果，而不是段落等的替代品。
<div id="container">
<div id="content">
</div>
<div id="sidebar">
<ul>
<li><span>God</span>, oh my zsh</span></li>
</ul>
</div>
</div>
13. 段落/標題: <p>,<h1>/<h2>/<h3>…
這幾個標簽幾乎可以說是一個頁面標簽等級結構中最重要的標簽。我們可以用一本書的結構來說明這幾個標簽，而我們構建一個頁面的時候，也應該有這樣的一種思想在腦中：
書的名稱：H1
書的每個章節標題: H2
章節內的文章標題: H3
章節的段落: P
小標題/副標題: H4/H5/H6
是的，當然還有引用 <blockquoute>，技術類書中提供的代碼 <pre class="code">，一些需要注意點的列表 <ul>，一些方便比較的表格 <table> 等。
<h1>LOGO</h1>
<h2>Title</h2>
<div class="entry">
<h3>Summary:</h3>
<p>lorem ipsum is ...<em>emphasize</em></p>
</div>
14. 強調: <em>/<strong>
<em> emphasize 的縮寫。而 <strong> 是 strong emphasize。可能很多剛入門前端的同學會對 <em>、<strong>、<cite> 、<i>、<b> 這幾個標簽的使用拿捏不準。<i> 和 <b> 基本上是被廢置的，相當於現在的 <em> 和 <strong>，一般情況下他們對於內容重要性的排序是這樣的：strong > em ≈ cite。
<strong>注意：</strong>別使用老掉牙的標簽，比如<cite>FONT、CENTER</cite>等，特別是 <em>FONT</em>。
15. 表單項: <input>/<textarea>/<select>
表單項是 HTML 中相對比較復雜的標簽，需要注意的點也比較多：
需要給每個表單項添加 <label> 對其進行描述，當不能使用 label 時，為表單項添加 title 屬性
當表單項是必填項的時候，使用 「*「 符號來標記
Flash 創建表單項一般是不會生成 <label> 的，請勾上 auto label 那個選項
<form method="post" action="http://sofish.de">
<fieldset><legend>My Form</legend>
<label for="firstname">* First name:</label> <input type="text" id="firstname" />
<label for="speech">Say something:</label>
<textarea id="speech" />
</textare>
<input type="submit" value="submit" title="submit button" />
</fieldset>
</form>
16. 圖片: <img>
對於圖片，盲人看不到。提供 alt 來表示替代文本。告訴他們這是一張什麼樣的圖。
<img src="http://sofish.de/favicon.ico" alt="幸福收藏夾的 favicon" />
17. 框架: <iframe>
盡量避免 <iframe>框架的使用，但當你需要使用的時候，最好提供一個 title 屬性對其進行描述。
<iframe src="http://sofish.de" title="幸福收藏夾" /></iframe>
18. 流媒體：<video>/<audio>/<object>/<embed>
媒體也是比較復雜的格式，處理起來比較麻煩。通常我們可以這樣做：
為視聽媒體提供相應的文本，包括相應的場景，比如演講中的鼓掌等有利有閱讀者感知現在氣氛的，都應該體現在演講文本中。其他的依此類推。
如果像交響樂這種不能提供具體描述的，可以進行簡單的說明
如果文本較長，不能在當前頁面展示，可以在媒體後提供一個鏈接到相應替代文本的鏈接
如果媒體中有可能會引起癲癇發作的，應做相應的說明
<audio src="mozart.mp4">莫扎特39號交響曲</audio>
19. 網頁標題：<title>
㈣ table標簽是什麼類型的元素
table標簽是什麼意思
table標簽定義HTML表格，每個表格均有若干行（由<tr>標簽定義），每行被分割為若干單元格（由 <td>標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
html table標簽 語法
作用：定義 HTML 表格。
說明：簡單的 HTML 表格由 table 元素以及一個或團友多個 tr、th 或 td 元素組成。tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。更復告或帶雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
注釋：在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 屬性是不被贊襪蘆成使用的。在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 屬性是不被支持的。
希望這些因為能給你提供一些幫助
㈤ <tr><dr><thead><table><td>在html中代表什麼意思
tr代表 行肢塵洞或稱橫
dr代表 這個還真不是很確定不兄鏈是是否是為編輯環歷枯境的意思
thead代表 表頭
table代表 表格
td代表 單元格或稱豎
㈥ table中tr和td是誰的縮寫
首標簽<舉物table>和尾標簽</table>分別表示一個表格的開始與結束。
tr是table row（表格行）」的縮寫，用於表示一行的開始和結束。
td是「table data（表格數據）」的縮寫握睜，用於表示行中各個單正皮液元格（cell）的開始和結束。
㈦ web前端中有哪些塊級
web前端的css中有塊級元素和行內元素。
常見塊級元素：
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 標題一級
<h2>...</h2> 標題二級
<h3>...</h3> 標題三級
<h4>...</h4> 標題四級
<h5>...</h5> 標題五級
<h6>...</h6> 標題六級
<hr> 水平分割線
<p>...</p> 段落
<pre>...</pre> 預格式化
<blockquote>...</blockquote> 段落縮進 前後5個字元
<marquee>...</marquee> 滾動文本
<ul>...</ul> 無序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定義列表
<table>...</table> 表格
<form>...</form> 表單
<div>...</div>
HTML5新增塊級元素
<header>...</header>簽定義文檔的頁眉（介紹信息）。
<section>...</section>標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
<footer>...</footer>標簽定義文檔或節的頁腳。應當含有其包含元素的信息。頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等 等。可以在一個文檔中使用多個 <footer> 元素。聯系信息應該位於 <address> 標簽中。
<aside>...</aside>標簽定義其所處內容之外的內容。其內容應該與附近的內容相關。可做側欄。
<nav>...</nav>標簽定義導航鏈接的部分。
<main>...</main>標簽規定文檔的主要內容。其元素中的內容對於文檔來說應當是唯一的。它不應包含在文檔中重復出現的內容，比如側欄、導航欄、 版權信息、站點標志或搜索表單。在一個文檔中，不能出現一個以上的 <main> 元素。<main> 元素不能是以下元素的後代： <article>、<aside>、<footer>、<header> 或 <nav>。
<article>...</article>標簽規定獨立的自包含內容。元素的潛在來源：論壇帖子、報紙文章、博客條目、用戶評論。
<figure>...</figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）
㈧ div和table的區別
1、速度和載入方式方面的區別
div 和 table 的差異不是速度，而是載入方式，速度只能是指網路速度，如果速度足夠快，是沒有差異的。
div 的載入方式是即讀即載入，遇到 <div> 沒有遇到 <模旁/div> 的時候一樣載入 div 中的內容，讀多少載入多少；table 的載入方式是完成後載入，遇到 <table> 後，在讀到 </table> 之前，table 中的內容不載入，或者傳輸中斷了(document.onload()事件)的時候載入，這是因為TABLE牽涉到多行多列問題,所以只有當TABLE所有內容載入完畢,IE才知道該怎麼顯示
2、在網頁應用中的差別
如果頁面首尾加 table ，那麼必須等整個頁面讀完了才載入
如果頁面首尾加 div ，無任何影響
3、DIV與Table布局在大型網站的可用性比較
DIV與TABLE本身並不存在什麼優缺點，所謂web標准只是推薦的是正確的使用標簽，好比說:DIV用於布局，而TABLE則本來就是轉二維數據的。讓TABLE做該做的事，並不是說頁面里不出現TABLE就是多麼多麼牛。
用DIV進行排版的優勢就是我旦拆橡不說，大家應該都比較清楚。DIV是標准，是大勢所趨，但並不意味著所有的頁面都適合用它來做。
中國的門戶和國外的有很御扮大的區別，中國網民並不喜歡信息量少的頁面，YAHOO到了中國頁面上的內容就多了不少，而上次改為簡潔的頁面後訪問量下降的厲害以至於沒過幾天就又改了回來。正式由於中國的國情造就了搜狐、新浪這樣門戶。
為什麼DIV不適合他們?下面我從幾個方面來逐一說明:
精簡代碼:
大家都說DIV的布局精簡代碼，但是用DIV替代TABLE所節約的代碼又被CSS(樣式)所佔用，而這些樣式大多用於控制DIV的排版布局。那你會說了，CSS可以放在外部重用啊，要想得到這個問題的答案請往下看。
重用性與下載量:
統一使用一個.css的樣式表文件，可以實現修改一次，全站修改的效果，這樣使得維護的成本更低。但是請大家換一個角度想，如果所有頁面在載入時都要訪問一個文件，那這個文件每天的下載量，特別時在搜狐、新浪的網站平台上將達到幾億次，這就需要後面有很多台前端web伺服器在做支撐，那後台的成本無形中也提高了很多。如果後台支撐沒有做好，那麼頁面就會出現花屏，之前所作的工作也是白費。很多人會問，這樣的幾率太小了。我們所作的工作就是為了避 免這一兩次意外的發生，如果意外發生了，對於門戶後果將是不堪設想的。
HTTP通訊:
統一的樣式表文件採用外部調用的形式，這樣每次載入單個頁面都會多一次對伺服器的http請求伺服器都會增加一次響應，這樣對前端web伺服器 會是很大的消耗。而原來很長時間都是將css和js寫在頁面前端(大家可以看看sohu和sina的頁面，大多都是採用這樣的形式)，而不是作為外部調用 的形式，也是為了盡量避免給伺服器增加消耗。
頁面緩存:
每次用戶訪問的頁面，都會在瀏覽器緩存中保存一定時間，以保證用戶下次再訪問該頁面時能夠大大提高頁面顯示速度。而每次修改都會使頁面重新下載，對於每個外部導入的樣式文件也是如此，如果CSS文件修改，那麼訪問網站的每一個頁面都會重新下載，而以往的將樣式寫在頁面中的方式，只是修改的頁面需要重新下載。
兼容性:
對於CSS(樣式表)並不是所有瀏覽器的所有版本都支持的很好，比如IE5以前的瀏覽器對於CSS的支持就不是很好。而現在使用IE5以前版本 瀏覽器的用戶不在少數，這樣就使得在頁面製作的過程中需要針對不同瀏覽器版本進行測試，以保證兼容性，無形中也增加很多工作量(至少我接觸的開發人員製作 div頁面比table頁面的標准時間要長一些)。
橫切與延展性:
橫切——傳統的布局方式為了使頁面下載的更快，把頁面自上而下分成若干個塊，但是往往採用DIV進行布局的頁面都會出現這樣的情況，由於每塊中間欄或者其他欄內容條數不固定導致兩邊欄目沒有同時自適應，而出現留白。
以上我們只是討論某一技術在某一領域的可用性，而非技術本身。
說了這么多並不是說DIV這種布局方式不好，而是說我們應該正確的看待Table在以內容為基礎的大型門戶中的作用，而不是人雲亦雲。之所以 DIV的布局方式沒有在大型網站應用，不是說門戶沒有用DIV是技術落後，是裡面的人沒有前瞻性，而是多種原因決定的。網易之所以全部採用DIV的方式是因為內容並不是他們主攻方向。而對於其他門戶來說，這樣的決策是要靠時間來驗證的。只是現在這個時機還不成熟而已。
4、DIV+CSS
而現在我認為DIV +CSS並不是字面上的含義那麼簡單，而有兩重內在含義：
4.1、結構與表現分離，用DIV完成結構，用CSS控製表現，這樣帶來的好處非常多，DIV精簡了頁面，提高了靈活性。而精通CSS的設計師能避免DIV的重復嵌套，從而大大提高頁面載入速度，以及站點的可以維護性。
4.2、選用DIV 來配合CSS的原因，CSS 的核心是 「盒子模型」，而沒有哪個標簽能比DIV更好的詮釋「盒子模型」的精髓，TABLE的結構過於復雜，並不能很好的做到這一點，雖然TABLE+CSS也是一種選擇，但別忘了DIV還有另外一個優勢，浮動層疊，而且用TABLE進行布局的網站是不能通過W3C驗證的。
其實DIV的好處還遠遠不止這些，例如彈性布局，用戶自定義布局，DIV都展現出不可思議的靈活性，而富有語義的結構對搜索引擎的友好度也比TABLE要來的高，更不用說跨平台的應用。DIV+CSS為我們提供了一個優雅而規范的技術框架，讓我們能用最少的重復勞動，完成更多更美觀的頁面，從而提升整個團隊的效率，甚至改變長期以來網頁設計師與網頁程序員無法同步工作的問題。
㈨ web前端 不要用table標簽做
這個效果如何：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
html,body{
height:100%;
}
#container{
width:90%;
height:100%;
background-color:#F9F9F9;
padding:10px;
旁枝margin:0auto;
}
.logo{
background:url(163.png)no-repeat;
width:160px;
height:200px;
float:left;
margin-left:20px;
margin-top:20px;
}
.box{
width:160px;
height:200px;
background-color:#E8E8E8;
float:left;
margin-left:20px;
margin-top:20px;
}
.boxdl{
width:140px;
list-style:none;
float:left;
margin:10px;
}
.boxdldt{
width:100px;
font-weight:bold;
font-size:14px;
運信敏margin:10px;
}
.boxdldd{
width:40px;
float:left;
font-size:12px;
margin:10px12px;
}
.box:hover{
background-color:#206F96;
color:#FEFEFE;
}
</style>
</head>
<body>
<divid="container">
<divclass="logo"></div>
<divclass="box">
<dl>
<dt>新聞</dt>
<dd>國內</dd>
<dd>國際</dd>
<dd>社會</dd>
<dd>軍事</dd>
<dd>圖片</dd>
<dd>評論</dd>
<dd>探索</dd>
<dl>
</div>
<divclass="box">
<dl>
<dt>新聞</dt>
<dd>國內</dd>
<dd>國際</dd>
<dd>社會</dd>
<dd>軍事</dd>
<dd>圖片</dd>
<dd>評論</dd>
坦銀<dd>探索</dd>
<dl>
</div>
<divclass="box">
<dl>
<dt>新聞</dt>
<dd>國內</dd>
<dd>國際</dd>
<dd>社會</dd>
<dd>軍事</dd>
<dd>圖片</dd>
<dd>評論</dd>
<dd>探索</dd>
<dl>
</div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
</div>
</body>
</html>
㈩ html 行級元素和塊級元素標簽列表分別有哪些
行內元素列表:
<a>標簽可定義錨
<abbr>表示一個縮寫形式
<acronym>定義只取首字母縮寫
<b>字體加粗
<bdo>可覆蓋默認的文本方向
<big>大號字體加粗
<br>換行
<cite>引用進行定義
<code>定義計算機代碼文本
<dfn>定義一個定義項目
<em>定義為強調的內容
<i>斜體文本效果
<img>向網頁中嵌入一幅圖像
<input>輸入框
<kbd>定義鍵盤文本
<label>標簽為
<input> 元素定義標注（標記）
<q>定義短的引用
<samp>定義樣本文本
<select>創建單選或多選菜單
<small>呈現小號字體效果
<span>組合文檔中的行內元素
<strong>語氣更強的強調的內容
<sub>定義下標文本
<sup>定義上標文本
<textarea>多行的文本輸入控制項
<tt>打字機或者等寬的文本效果
<var>定義變數
塊級元素列表:
<address>定義地址
<caption>定義表格標題
<dd>定義列表中定義條目
<div>定義文檔中的分區或節
<dl>定義列表
<dt>定義列表中的項目
<fieldset>定義一個框架集
<form>創建 HTML 表單
<h1>定義最大的標題
<h2>定義副標題
<h3>定義標題
<h4>定義標題
<h5>定義標題
<h6>定義最小的標題
<hr>創建一條水平線
<legend>元素為
<fieldset>元素定義標題
<li>標簽定義列表項目
<noframes>為那些不支持框架的瀏覽器顯示文本，於 frameset 元素內部
<noscript>定義在腳本未被執行時的替代內容
<ol>定義有序列表
<ul>定義無序列表
<p>標簽定義段落
<pre>定義預格式化的文本
<table>標簽定義 HTML 表格
<tbody>標簽表格主體（正文）
<td>表格中的標准單元格
<tfoot>定義表格的頁腳（腳注或表注）
<th>定義表頭單元格
<thead>標簽定義表格的表頭
<tr>定義表格中的行
(10)前端中table是誰的標簽擴展閱讀：
一，從概念的角度解釋塊級元素和行內元素
1. 塊級元素，一般都是從新行開始，它可以容納行內元素和其他塊元素，常見塊級元素比如div/p等。「form」這個快元素比較特殊,他只能來容納其他塊元素
2. 行內元素：也叫做內聯元素，一般都是語義級別的基本元素，內聯元素已辦只能容納文本或者其他內聯元素。
塊元素（block element）和內聯元素（inline element）都是html規范中的概念。塊元素和內聯元素的基本差異是塊元素一般都是從新行開始的。
而當加了css控制以後，塊元素可以變為內聯元素，內聯元素也可以變為塊元素。
二，塊級元素和內聯元素的區別
1. 塊級元素會獨佔一行，其寬度自動填滿其父元素寬度
行內元素不會獨佔一行，相鄰的行內元素會排列到同一行里，直到一行排不下，才會換行，其寬度隨元素的內容變化而變化，
2. 一般情況下，塊級元素可以設置width,height屬性，行內元素設置width,height無效
（注意，塊級元素設置了width寬度屬性後仍然是獨佔一行的）
3. 塊級元素可以設置margin,padding屬性
行內元素的水平方向的padding-left和padding-right都會產生邊距效果，但是豎直方向上的padding-top和padding-bottom都不會產生邊距效果