整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。
主要內容：這是HTML課程的第六課，在這節課程中主要講解一下HTML中body的屬性，以及表格元素。希望大家根據這個教程可以學習一下。
上節回顧
在上節中主要講解了超鏈接和圖片的知識點。上節請戳->網頁前端開發基礎教程05-網頁中插入圖片和超鏈接，界面更絢麗
當然講解的并不是很全面，只是把常用的HTML屬性進行講解了出來，在后期會進行做項目，到時候，直接回顧一下，馬上就能搞懂了。這次直接講解一下HTML中的body屬性以及表格元素。
PS：其實HTML這個東西很簡單，只需要根據對應的元素，學會標簽指的是什么就可以了，就和諜戰片中中的密碼本一樣，按照密碼本書寫對應的格式，寫上去就能直接顯示了。只是學會這種標簽的樣式而已。自己學習HTML也是可以的。最重要的還是進行實踐。
body的屬性
body是整個頁面的主體元素，我們把內容寫入到body元素中，那應該如何設置主體的背景顏色、背景圖片呢？
下面就一一來講解一下。使用Sublime創建一個HTML文件。
設置背景顏色，屬性為bgcolor，值為RGB顏色或者顏色的英文單詞。
2.背景圖片設置，背景圖片照樣可以用路徑的方式寫入到HTML文件中。屬性為background例如：
當然body的屬性值，比較少，而且幾乎不太用，在以后的時候要使用CSS代替這些東西。
表格
表格在網頁中還是很常用的，比如在按照每行數據進行展示的時候，就需要用到表格啦。所以就需要學習一下表格應該如何寫。
OK，我們先建立一個最簡單的學生信息表：
其中table（表格）、tr（一行）、（一個單元格）。這三個時表格最基本的元素。并依次有個上下級嵌套的關系。
表格中的屬性
表格中有很多屬性，正是因為有了這些屬性，才讓表格無比強大。比如在老早的時候，風靡一時的Hao123就是使用表格進行制作的。OK在下節中咱們也會自己制作一個模仿的Hao123第一版，通過table制作。
border
border是邊框的意思，在以后的學習中你肯定會對這個單詞不陌生，因為這個單詞真的是太常用了。border有兩個值分別為0和1.0表示“沒有邊框”，1表示“有邊框”。
cellpadding:
這個表示的是表格的內邊距，也就是表格的邊框到里面的內容的距離。
數值越大，單元格的表框到內容的距離越大。
cellspacing
這是單元格和單元格之間的距離，這個值越大，單元格之間的距離越大。
align：
align表示的是單元格的對齊方式，對里面的內容進行水平的對齊，其值有三個分別為right（右）、center（居中）、left（左）。
colspan、rowspan：
這是兩個屬性，分別表示行的合并和列的合并。其值為數字，表示要合并的單元格：
還有其他幾個屬性例如：valign、bgcolor、width、height等在前課程中也講過了。
每天一個知識點，帶你邁向軟件編程大神，一起努力吧。下節課程，我們一起做一個Hao123的導航頁面。
們在設計網站的時候，有時候為了體現出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。
在CSS中，沒有某一個屬性能夠直接實現傾斜的背景顏色，而是需要通過一些“手段”來實現。最常想到的方案就是在內容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現傾斜的背景顏色。比如像下圖所示的案例：
那么下面就來用一個基本的實例來解釋并實現傾斜背景的效果：
首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現非常簡單，就是利用了 position 這個屬性的 fixed 值來實現的。
我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數值，而且需要若干個HTML標簽的CSS來配合，從而實現傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結合著 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>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar-bg">
<ul class="navbar">
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item sign">
<a href="https://www.baidu.com">Sign</a>
</li>
</ul>
</div>
<div class="box-bg">
<div class="box">
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
</div>
</div>
<div class="content">
<h1>This is content</h1>
</div>
<div class="footer">
<div class="footer-bg">
<ul class="list">
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
</ul>
</div>
</div>
</body>
</html>為了讓導航條和其他元素都能夠與頁面的兩邊留出距離，我在實際內容標簽的外圍又包裹了一層div，主要在這個包裹的div里設定左右內間距，從而實現兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個后綴 "-bg"。
在實際內容的排列時，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。
另外，如果想要實現傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標簽。傾斜這些 div 其實很簡單，只需要設定一個 transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時針旋轉了一個弧度（-9deg）后，它會變成一個平行四邊形，這個平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個 CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個HTML對應的 CSS 代碼部分。
在大家閱讀 CSS 的代碼之前，我給出一個原理圖來解釋一下其中的原理：
當外圍的 div 傾斜了之后，就需要把內容部分的div的上部的內間距增大，以此來遮住平行四邊形的左側露出的白色區域。這是頁面上部區域的原理。
那么頁面底部也同樣需要實現這樣傾斜背景顏色的設計，這樣才能將風格一致，產生美感。原理還是這個原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個屬性，height 和 overflow-y，并且這個 div 不能帶有背景顏色。它們的作用是當它里面的內容超出這個 div 的區域時就不顯示，這樣就會讓上圖中藍色的平行西變形的左下角區域被紅色的框線裁剪掉，從而讓這個div 乖乖的呆在頁面的底部。而這個 div 里面一層的 div 需要讓它傾斜，而且還帶有一個背景顏色。這樣組合出來的效果就是一個看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個四邊形里面是實際的頁面內容。
最終的樣子在這篇 CSS 代碼的最后展示出來了。
例
一個簡單的 HTML 表格，包含兩列兩行：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
瀏覽器支持
所有主流瀏覽器都支持 <tr> 標簽。
標簽定義及使用說明
<tr> 標簽定義 HTML 表格中的行。
一個 <tr> 元素包含一個或多個 <th> 或 <td> 元素。
HTML 4.01 與 HTML5之間的差異
在 HTML 5 中，不支持 <tr> 標簽在 HTML 4.01 中的任何屬性。
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | rightleftcenterjustifychar | HTML5 不支持。定義表格行的內容對齊方式。 |
| bgcolor | rgb(x,x,x)#xxxxxxcolorname | HTML5 不支持。HTML 4.01 已廢棄。 規定表格行的背景顏色。 |
| char | character | HTML5 不支持。規定根據哪個字符來進行文本對齊。 |
| charoff | number | HTML5 不支持。規定第一個對齊字符的偏移量。 |
| valign | topmiddlebottombaseline | HTML5 不支持。規定表格行中內容的垂直對齊方式。 |
全局屬性
<tr> 標簽支持 HTML 的全局屬性。
事件屬性
<tr> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
