整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
小結(jié)
HTML標(biāo)簽包含結(jié)構(gòu)標(biāo)簽和基礎(chǔ)標(biāo)簽，基礎(chǔ)標(biāo)簽是在頁(yè)面制作最常使用的一些標(biāo)簽。基礎(chǔ)標(biāo)簽包含標(biāo)題標(biāo)簽（<h1>~<h6>）、換行標(biāo)簽（<br>）、段落標(biāo)簽（<p>）、水平線標(biāo)簽（<hr>）、格式標(biāo)簽及文本標(biāo)簽。表格可以把相互關(guān)聯(lián)的信息元素集中定位，使瀏覽頁(yè)面的人一目了然。表格需要通過表格標(biāo)記<table>、行標(biāo)記<tr>、單元格標(biāo)記<th>或<td>等標(biāo)記按一定的關(guān)系嵌套共同完成。通過使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁(yè)面。每份HTML文檔稱為一個(gè)框架，并且每個(gè)框架都獨(dú)立于其他的框架。
習(xí)題
1．哪一個(gè)不是HTML5新增的語(yǔ)義化標(biāo)記元素（B）
A．section B．head
C．a(chǎn)rticle D．a(chǎn)side
著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)頁(yè)內(nèi)容變得越來越豐富。HTML5 作為標(biāo)記語(yǔ)言的最新標(biāo)準(zhǔn)，不僅提供了更多的功能，還引入了一系列語(yǔ)義化標(biāo)簽。這些標(biāo)簽使得網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)更加清晰，有助于搜索引擎優(yōu)化（SEO），并提高了網(wǎng)站的可訪問性。
語(yǔ)義化標(biāo)簽通過提供更具描述性的元素名稱，使得文檔內(nèi)容的結(jié)構(gòu)更加明確。這樣做有幾個(gè)明顯的優(yōu)勢(shì)：
下面，我們將通過幾個(gè)例子來展示如何使用HTML5的語(yǔ)義化標(biāo)簽來構(gòu)建網(wǎng)頁(yè)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 語(yǔ)義化標(biāo)簽示例</title>
</head>
<body>
<article>
<header>
<h1>HTML5 的新特性</h1>
<p>發(fā)布日期：2023-12-17</p>
<p>作者：張三</p>
</header>
<section>
<h2>引入了新的語(yǔ)義化標(biāo)簽</h2>
<p>HTML5 定義了一系列新的元素，用于更好地描述文檔的不同部分...</p>
</section>
<section>
<h2>表單控件的增強(qiáng)</h2>
<p>HTML5 提供了更多的表單控件，如 date、time、email 等...</p>
</section>
<footer>
<p>版權(quán)所有 ? 2023 張三</p>
</footer>
</article>
</body>
</html>
在這個(gè)示例中，我們使用了<article>、<header>、<section>和<footer>等標(biāo)簽來構(gòu)建一個(gè)文章的基本結(jié)構(gòu)，使得文章的主體、標(biāo)題、各個(gè)章節(jié)和尾注的語(yǔ)義更加明確。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>導(dǎo)航菜單示例</title>
<style>
/* 重置ul和li的默認(rèn)樣式 */
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
text-align: center;
}
nav ul li {
display: inline-block;
}
/* 設(shè)置鏈接的基本樣式 */
nav ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: white;
font-weight: bold;
}
/* 鼠標(biāo)懸停時(shí)的樣式 */
nav ul li a:hover {
background-color: #555;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">首頁(yè)</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯(lián)系我們</a></li>
<li><a href="#about">關(guān)于我們</a></li>
</ul>
</nav>
</body>
</html>
使用<nav>標(biāo)簽定義導(dǎo)航鏈接集合，這有助于搜索引擎和輔助技術(shù)確定頁(yè)面中的導(dǎo)航部分。
在這個(gè)示例中，做了以下幾點(diǎn)樣式設(shè)置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>側(cè)邊欄示例</title>
<style>
/* 設(shè)置側(cè)邊欄的基本樣式 */
aside {
width: 250px; /* 側(cè)邊欄寬度 */
padding: 20px; /* 內(nèi)邊距 */
background-color: #f4f4f4; /* 背景色 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 陰影效果 */
position: fixed; /* 固定位置 */
top: 0; /* 頂部對(duì)齊 */
left: 0; /* 左側(cè)對(duì)齊 */
height: 100%; /* 高度100% */
}
/* 設(shè)置標(biāo)題的樣式 */
aside h2 {
color: #333; /* 字體顏色 */
margin-bottom: 20px; /* 與下方內(nèi)容的間距 */
}
/* 重置列表的默認(rèn)樣式，并設(shè)置列表項(xiàng)樣式 */
aside ul {
list-style: none; /* 移除列表項(xiàng)的默認(rèn)樣式 */
padding: 0; /* 移除默認(rèn)內(nèi)邊距 */
margin: 0; /* 移除默認(rèn)外邊距 */
}
aside ul li {
margin-bottom: 10px; /* 列表項(xiàng)之間的間距 */
}
/* 設(shè)置鏈接的基本樣式 */
aside ul li a {
text-decoration: none; /* 移除下劃線 */
color: #333; /* 字體顏色 */
font-weight: bold; /* 字體加粗 */
}
/* 鼠標(biāo)懸停時(shí)的樣式 */
aside ul li a:hover {
color: #007bff; /* 鼠標(biāo)懸停時(shí)的字體顏色 */
}
</style>
</head>
<body>
<aside>
<h2>相關(guān)文章</h2>
<ul>
<li><a href="#">HTML5 基礎(chǔ)</a></li>
<li><a href="#">CSS3 新特性</a></li>
<li><a href="#">JavaScript 高級(jí)程序設(shè)計(jì)</a></li>
</ul>
</aside>
</body>
</html>
<aside>標(biāo)簽通常用于包含頁(yè)面主內(nèi)容之外的內(nèi)容，如側(cè)邊欄，它可以包含相關(guān)鏈接、廣告、站點(diǎn)地圖等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>頁(yè)腳信息示例</title>
</head>
<body>
<footer>
<p>聯(lián)系方式：example@example.com</p>
<p>地址：中國(guó)某地某街道123號(hào)</p>
<p>版權(quán)所有 ? 2023 HTML5前端工程師</p>
</footer>
</body>
</html>
<footer>標(biāo)簽定義了文檔或節(jié)的頁(yè)腳，通常包含作者信息、版權(quán)信息、聯(lián)系信息等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主要內(nèi)容區(qū)域示例</title>
</head>
<body>
<main>
<article>
<h1>HTML5 語(yǔ)義化標(biāo)簽</h1>
<p>HTML5 提供了許多新的元素，用于更清晰地描述你的內(nèi)容...</p>
</article>
<article>
<h1>HTML5 表單特性</h1>
<p>HTML5 為表單輸入提供了多種新的類型，如 color、date 等...</p>
</article>
</main>
</body>
</html>
<main>標(biāo)簽用于指定文檔的主要內(nèi)容，它應(yīng)該是文檔中最重要的內(nèi)容區(qū)域，通常不包括那些在整個(gè)站點(diǎn)中重復(fù)出現(xiàn)的內(nèi)容（如導(dǎo)航鏈接）。
通過上述示例，我們可以看到HTML5語(yǔ)義化標(biāo)簽如何使網(wǎng)頁(yè)結(jié)構(gòu)更加清晰，并為搜索引擎優(yōu)化和可訪問性提供了支持。隨著技術(shù)的發(fā)展，我們有責(zé)任編寫更高質(zhì)量的代碼，不僅為了自己，也為了創(chuàng)建一個(gè)更好的網(wǎng)絡(luò)環(huán)境。
、常用的標(biāo)簽
<h1>~<h6> 表示是一個(gè)標(biāo)題
<p> 段落標(biāo)簽
<hr/> 水平線標(biāo)簽
<br/> 換行標(biāo)簽
<sub> 下標(biāo)
<sup> 上標(biāo)
<pre> 原樣標(biāo)簽： 原樣標(biāo)簽會(huì)保留空格和換行符。
<ol> <li> 有序的列表標(biāo)簽、
<ul> <li> 無序的列表標(biāo)簽。
項(xiàng)目列表標(biāo)簽(dl dt dd)
行內(nèi)標(biāo)簽(span)
塊標(biāo)簽<div> div標(biāo)簽的內(nèi)容會(huì)獨(dú)立占一行。
二、實(shí)體標(biāo)簽
空格
小于號(hào) <
大于號(hào) >
-----------------------------
人民幣 ¥；
版權(quán) ©
商標(biāo) ®
三、媒體標(biāo)簽
<embed></embed>
hidden ： 設(shè)置隱藏插件是否隱藏。
src ：用于指定音樂的路徑
<embed src="1.mp3" ></embed>
<marquee> 飄動(dòng)標(biāo)簽direction : 指定飄動(dòng)的方向
scrollamount : 指定飄動(dòng)的速度。
loop :指定飄動(dòng)的次數(shù)
四、超鏈接標(biāo)簽
<a> 超鏈接標(biāo)簽
a標(biāo)簽常用的屬性：
href : 用于指定鏈接的資源
target: 設(shè)置打開新資源的目標(biāo)。
_Blank 在獨(dú)立的窗口上打開新資源
_self 在當(dāng)前窗口打開新資源
file: file協(xié)議（文件協(xié)議）這種協(xié)議主要是用于搜索本地機(jī)器的資源文件的。
格式：
file:///f:/美女/1.jpg
郵件 的協(xié)議： mailTo迅雷的協(xié)議： thunder
超鏈接標(biāo)簽的作用：
1. 可以用于鏈接資源。
2. 錨點(diǎn)點(diǎn)位.
1. 首先編寫一個(gè)錨點(diǎn) 錨點(diǎn)的格式： <a name="錨點(diǎn)名字"> 數(shù)據(jù)</a>
2. 使用a標(biāo)簽 的herf屬性連接到錨點(diǎn)出。 href=”#錨點(diǎn)的名字“
五、圖片標(biāo)簽
img標(biāo)簽常用的屬性:
width： 設(shè)置圖片寬度
height 設(shè)置圖片高度
alt: 如果圖片資源無法找到，那么就顯示對(duì)應(yīng)的文字對(duì)圖片進(jìn)行說明。
六、表格標(biāo)簽
表格使用到的標(biāo)簽：
<table> 表格
<tr> 行
<td> 單元格
<th> 表頭 默認(rèn)的樣式是居中，加粗。
<caption> 表格的標(biāo)題
表格常用的屬性：
border 設(shè)置表格的邊框
width : 設(shè)置表格的寬度
height: 設(shè)置表格的高度的。
colspan: 設(shè)置單元格占據(jù)指定的列數(shù)。
rowspan : 設(shè)置單元格占據(jù)指定的行數(shù)。
<thead> 標(biāo)簽用于組合 HTML 表格的表頭內(nèi)容。
<thead> 元素應(yīng)該與 <tbody> 和 <tfoot> 元素結(jié)合起來使用，用來規(guī)定表格的各個(gè)部分（表頭、主體、頁(yè)腳）。
通過使用這些元素，使瀏覽器有能力支持獨(dú)立于表格表頭和表格頁(yè)腳的表格主體滾動(dòng)。當(dāng)包含多個(gè)頁(yè)面的長(zhǎng)的表格被打印時(shí)，表格的表頭和頁(yè)腳可被打印在包含表格數(shù)據(jù)的每張頁(yè)面上。
<thead> 標(biāo)簽必須被用在以下情境中：作為 <table> 元素的子元素，出現(xiàn)在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。
七、表單標(biāo)簽
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<!-- 表單標(biāo)簽： 表單標(biāo)簽的作用是用于提交數(shù)據(jù)給服務(wù)器的表單標(biāo)簽的根標(biāo)簽是<form>標(biāo)簽常用的屬性action: 該屬性是用于指定提交數(shù)據(jù)的地址。method： 指定表單的提交方式。get : 默認(rèn)使用的提交方式。 提交的數(shù)據(jù)會(huì)顯示在地址欄上。post ： 提交的數(shù)據(jù)不會(huì)顯示在地址欄上。注意： 表單項(xiàng)的數(shù)據(jù)如果需要提交到服務(wù)器上面，那么表單項(xiàng)必須要有name的屬性值 -->
</head>
<body>
<form action="http://www.baidu.com" method="post"> <!-- 文本輸入框 單 行- -> 用戶名：<input name="userName" type="text"/><br/>
<!-- 密碼框 -->
密碼：<input name="password" type="password"/><br/>
<!-- 單選框 -->
性別： 男<input checked="true" value="man" name="sex" type="radio"/>
女<input name="sex" value="woman" type="radio"/><br/>
< !-- 下拉框 -->
來自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">廣州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 復(fù)選框 同一組的復(fù)選框name的屬性值要一致 -->
興趣愛好：java <input value="java" name="hobit" checked="checked" type ="checkbox" />
javascript <input type="checkbox" value="javascript" name="hobit" />
android <input value="android" name="hobit" type="checkbox" /><br/> <!-- 文件上傳框-->
大頭照：<input name="image" type="file" /><br/>
個(gè)人簡(jiǎn)介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按鈕 -->
<input type="submit" value="注冊(cè)"/>
<!-- 重置按鈕 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>
更多精彩內(nèi)容在微信公眾平臺(tái)：網(wǎng)頁(yè)設(shè)計(jì)自學(xué)平臺(tái)
干貨！免費(fèi)領(lǐng)取Adobe高級(jí)講師前端教程
點(diǎn)我領(lǐng)取
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
