整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實(shí)用視頻。
主要內(nèi)容：這是HTML課程的第六課，在這節(jié)課程中主要講解一下HTML中body的屬性，以及表格元素。希望大家根據(jù)這個(gè)教程可以學(xué)習(xí)一下。
上節(jié)回顧
在上節(jié)中主要講解了超鏈接和圖片的知識(shí)點(diǎn)。上節(jié)請(qǐng)戳->網(wǎng)頁(yè)前端開(kāi)發(fā)基礎(chǔ)教程05-網(wǎng)頁(yè)中插入圖片和超鏈接，界面更絢麗
當(dāng)然講解的并不是很全面，只是把常用的HTML屬性進(jìn)行講解了出來(lái)，在后期會(huì)進(jìn)行做項(xiàng)目，到時(shí)候，直接回顧一下，馬上就能搞懂了。這次直接講解一下HTML中的body屬性以及表格元素。
PS：其實(shí)HTML這個(gè)東西很簡(jiǎn)單，只需要根據(jù)對(duì)應(yīng)的元素，學(xué)會(huì)標(biāo)簽指的是什么就可以了，就和諜戰(zhàn)片中中的密碼本一樣，按照密碼本書(shū)寫(xiě)對(duì)應(yīng)的格式，寫(xiě)上去就能直接顯示了。只是學(xué)會(huì)這種標(biāo)簽的樣式而已。自己學(xué)習(xí)HTML也是可以的。最重要的還是進(jìn)行實(shí)踐。
body的屬性
body是整個(gè)頁(yè)面的主體元素，我們把內(nèi)容寫(xiě)入到body元素中，那應(yīng)該如何設(shè)置主體的背景顏色、背景圖片呢？
下面就一一來(lái)講解一下。使用Sublime創(chuàng)建一個(gè)HTML文件。
設(shè)置背景顏色，屬性為bgcolor，值為RGB顏色或者顏色的英文單詞。
2.背景圖片設(shè)置，背景圖片照樣可以用路徑的方式寫(xiě)入到HTML文件中。屬性為background例如：
當(dāng)然body的屬性值，比較少，而且?guī)缀醪惶?，在以后的時(shí)候要使用CSS代替這些東西。
表格
表格在網(wǎng)頁(yè)中還是很常用的，比如在按照每行數(shù)據(jù)進(jìn)行展示的時(shí)候，就需要用到表格啦。所以就需要學(xué)習(xí)一下表格應(yīng)該如何寫(xiě)。
OK，我們先建立一個(gè)最簡(jiǎn)單的學(xué)生信息表：
其中table（表格）、tr（一行）、（一個(gè)單元格）。這三個(gè)時(shí)表格最基本的元素。并依次有個(gè)上下級(jí)嵌套的關(guān)系。
表格中的屬性
表格中有很多屬性，正是因?yàn)橛辛诉@些屬性，才讓表格無(wú)比強(qiáng)大。比如在老早的時(shí)候，風(fēng)靡一時(shí)的Hao123就是使用表格進(jìn)行制作的。OK在下節(jié)中咱們也會(huì)自己制作一個(gè)模仿的Hao123第一版，通過(guò)table制作。
border
border是邊框的意思，在以后的學(xué)習(xí)中你肯定會(huì)對(duì)這個(gè)單詞不陌生，因?yàn)檫@個(gè)單詞真的是太常用了。border有兩個(gè)值分別為0和1.0表示“沒(méi)有邊框”，1表示“有邊框”。
cellpadding:
這個(gè)表示的是表格的內(nèi)邊距，也就是表格的邊框到里面的內(nèi)容的距離。
數(shù)值越大，單元格的表框到內(nèi)容的距離越大。
cellspacing
這是單元格和單元格之間的距離，這個(gè)值越大，單元格之間的距離越大。
align：
align表示的是單元格的對(duì)齊方式，對(duì)里面的內(nèi)容進(jìn)行水平的對(duì)齊，其值有三個(gè)分別為right（右）、center（居中）、left（左）。
colspan、rowspan：
這是兩個(gè)屬性，分別表示行的合并和列的合并。其值為數(shù)字，表示要合并的單元格：
還有其他幾個(gè)屬性例如：valign、bgcolor、width、height等在前課程中也講過(guò)了。
每天一個(gè)知識(shí)點(diǎn)，帶你邁向軟件編程大神，一起努力吧。下節(jié)課程，我們一起做一個(gè)Hao123的導(dǎo)航頁(yè)面。
網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)中，了解HTML的每個(gè)組成部分是至關(guān)重要的。其中，<body>標(biāo)簽承載著網(wǎng)頁(yè)的所有可見(jiàn)內(nèi)容，它是構(gòu)建高效、互動(dòng)和吸引人的網(wǎng)站的基礎(chǔ)。本文將深入探討<body>標(biāo)簽的功能、重要性以及如何最大化其潛力以提升網(wǎng)頁(yè)的整體表現(xiàn)和用戶體驗(yàn)。
在HTML（超文本標(biāo)記語(yǔ)言）中，<body>標(biāo)簽定義了網(wǎng)頁(yè)的主體部分，這部分是所有可視化內(nèi)容的容器，包括文本、圖片、視頻、游戲界面等。位于<html>標(biāo)簽內(nèi)部，緊隨<head>標(biāo)簽之后，<body>標(biāo)簽是實(shí)現(xiàn)頁(yè)面功能和設(shè)計(jì)的舞臺(tái)。
讓我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)看看如何在實(shí)踐中應(yīng)用這些技巧。假設(shè)我們需要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的個(gè)人博客頁(yè)面，我們會(huì)這樣構(gòu)建<body>：
<body>
<header>
<h1>歡迎來(lái)到我的博客</h1>
<nav>
<ul>
<li><a href="#posts">文章</a></li>
<li><a href="#about">關(guān)于我</a></li>
</ul>
</nav>
</header>
<main id="posts">
<article>
<h2>HTML基礎(chǔ)</h2>
<p>HTML是構(gòu)建網(wǎng)頁(yè)的基礎(chǔ)...</p>
</article>
<!-- 更多文章 -->
</main>
<footer>
<p>版權(quán)所有 ? 2024</p>
</footer>
</body>
在這個(gè)例子中，我們使用了語(yǔ)義化標(biāo)簽來(lái)定義網(wǎng)頁(yè)的頭部、主要內(nèi)容區(qū)域和尾部。這不僅使網(wǎng)頁(yè)結(jié)構(gòu)清晰，而且有助于SEO和屏幕閱讀器的使用。
置頁(yè)面背景
<body bgcolor=""> 設(shè)置背景顏色,使用名字或rgb的十六進(jìn)制值;
設(shè)置正文的顏色
<body text=""> 設(shè)置文本顏色.使用名字或rgb的十六進(jìn)制值;
設(shè)置背景圖片
<body background="bgimage.jpg">
設(shè)置背景音樂(lè)
<body bgsound="">
<body bgproperties="fixed"> 固定背景圖片(IE適用);
<body link=""> 設(shè)置鏈接顏色，使用名,字或rgb的十六進(jìn)制值;
<body vlink=""> 設(shè)置已使用的鏈接的顏色，使用名字或rgb的十六進(jìn)制值;
<body alink=""> 設(shè)置正在被擊中的鏈接的顏色，使用名字或rgb的十六進(jìn)制值;
設(shè)置頁(yè)面邊距(單位像素)
topmargin leftmargin rightmargin bottommargin
topmargin 設(shè)置到頂端的距離
leftmargin 設(shè)置到左邊的距離
rightmargin 設(shè)置到右邊的距離
bottommargin 設(shè)置到底部的距離
實(shí)例：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
