IT兄弟連 HTML5教程 HTML5文字版面和編輯標簽小結及試題

小結

HTML標簽包含結構標簽和基礎標簽，基礎標簽是在頁面制作最常使用的一些標簽?；A標簽包含標題標簽（<h1>~<h6>）、換行標簽（<br>）、段落標簽（<p>）、水平線標簽（<hr>）、格式標簽及文本標簽。表格可以把相互關聯的信息元素集中定位，使瀏覽頁面的人一目了然。表格需要通過表格標記<table>、行標記<tr>、單元格標記<th>或<td>等標記按一定的關系嵌套共同完成。通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。

習題

1．哪一個不是HTML5新增的語義化標記元素（B）

A．section B．head

C．article D．aside

著互聯網技術的發展，網頁內容變得越來越豐富。HTML5 作為標記語言的最新標準，不僅提供了更多的功能，還引入了一系列語義化標簽。這些標簽使得網頁內容的結構更加清晰，有助于搜索引擎優化（SEO），并提高了網站的可訪問性。

語義化標簽的優勢

語義化標簽通過提供更具描述性的元素名稱，使得文檔內容的結構更加明確。這樣做有幾個明顯的優勢：

提高可讀性：代碼的可讀性得到提升，其他開發者（或未來的你）可以快速理解頁面結構。
SEO 優化：搜索引擎能夠更好地解析網頁內容，提高網頁在搜索結果中的排名。
支持無障礙訪問：語義化標簽有助于屏幕閱讀器正確解讀網頁內容，使網站對視障用戶更加友好。

語義化標簽實例

下面，我們將通過幾個例子來展示如何使用HTML5的語義化標簽來構建網頁。

示例1：文章結構

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 語義化標簽示例</title>
</head>
<body>

<article>
    <header>
        <h1>HTML5 的新特性</h1>
        <p>發布日期：2023-12-17</p>
        <p>作者：張三</p>
    </header>
    <section>
        <h2>引入了新的語義化標簽</h2>
        <p>HTML5 定義了一系列新的元素，用于更好地描述文檔的不同部分...</p>
    </section>
    <section>
        <h2>表單控件的增強</h2>
        <p>HTML5 提供了更多的表單控件，如 date、time、email 等...</p>
    </section>
    <footer>
        <p>版權所有 ? 2023 張三</p>
    </footer>
</article>

</body>
</html>

在這個示例中，我們使用了<article>、<header>、<section>和<footer>等標簽來構建一個文章的基本結構，使得文章的主體、標題、各個章節和尾注的語義更加明確。

示例2：導航菜單

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>導航菜單示例</title>
    <style>
        /* 重置ul和li的默認樣式 */
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: #333;
            text-align: center;
        }
        
        nav ul li {
            display: inline-block;
        }
        
        /* 設置鏈接的基本樣式 */
        nav ul li a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        
        /* 鼠標懸停時的樣式 */
        nav ul li a:hover {
            background-color: #555;
        }
    </style>
</head>
<body>

<nav>
    <ul>
        <li><a href="#home">首頁</a></li>
        <li><a href="#news">新聞</a></li>
        <li><a href="#contact">聯系我們</a></li>
        <li><a href="#about">關于我們</a></li>
    </ul>
</nav>

</body>
</html>

使用<nav>標簽定義導航鏈接集合，這有助于搜索引擎和輔助技術確定頁面中的導航部分。

在這個示例中，做了以下幾點樣式設置：

移除了ul和li的默認樣式（比如列表前面的小圓點），并給導航欄設置了一個深色背景。
將li元素設置為inline-block，使其水平排列。
為鏈接（a標簽）設置了基本的樣式，包括背景色、字體顏色、內邊距等，以及鼠標懸停時的背景色變化。

示例3：側邊欄

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>側邊欄示例</title>
    <style>
        /* 設置側邊欄的基本樣式 */
        aside {
            width: 250px; /* 側邊欄寬度 */
            padding: 20px; /* 內邊距 */
            background-color: #f4f4f4; /* 背景色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 陰影效果 */
            position: fixed; /* 固定位置 */
            top: 0; /* 頂部對齊 */
            left: 0; /* 左側對齊 */
            height: 100%; /* 高度100% */
        }

        /* 設置標題的樣式 */
        aside h2 {
            color: #333; /* 字體顏色 */
            margin-bottom: 20px; /* 與下方內容的間距 */
        }

        /* 重置列表的默認樣式，并設置列表項樣式 */
        aside ul {
            list-style: none; /* 移除列表項的默認樣式 */
            padding: 0; /* 移除默認內邊距 */
            margin: 0; /* 移除默認外邊距 */
        }

        aside ul li {
            margin-bottom: 10px; /* 列表項之間的間距 */
        }

        /* 設置鏈接的基本樣式 */
        aside ul li a {
            text-decoration: none; /* 移除下劃線 */
            color: #333; /* 字體顏色 */
            font-weight: bold; /* 字體加粗 */
        }

        /* 鼠標懸停時的樣式 */
        aside ul li a:hover {
            color: #007bff; /* 鼠標懸停時的字體顏色 */
        }
    </style>
</head>
<body>

<aside>
    <h2>相關文章</h2>
    <ul>
        <li><a href="#">HTML5 基礎</a></li>
        <li><a href="#">CSS3 新特性</a></li>
        <li><a href="#">JavaScript 高級程序設計</a></li>
    </ul>
</aside>

</body>
</html>

<aside>標簽通常用于包含頁面主內容之外的內容，如側邊欄，它可以包含相關鏈接、廣告、站點地圖等。

示例4：頁腳信息

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>頁腳信息示例</title>
</head>
<body>

<footer>
    <p>聯系方式：example@example.com</p>
    <p>地址：中國某地某街道123號</p>
    <p>版權所有 ? 2023 HTML5前端工程師</p>
</footer>

</body>
</html>

<footer>標簽定義了文檔或節的頁腳，通常包含作者信息、版權信息、聯系信息等。

示例5：主要內容區域

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主要內容區域示例</title>
</head>
<body>

<main>
    <article>
        <h1>HTML5 語義化標簽</h1>
        <p>HTML5 提供了許多新的元素，用于更清晰地描述你的內容...</p>
    </article>
    <article>
        <h1>HTML5 表單特性</h1>
        <p>HTML5 為表單輸入提供了多種新的類型，如 color、date 等...</p>
    </article>
</main>

</body>
</html>

<main>標簽用于指定文檔的主要內容，它應該是文檔中最重要的內容區域，通常不包括那些在整個站點中重復出現的內容（如導航鏈接）。

通過上述示例，我們可以看到HTML5語義化標簽如何使網頁結構更加清晰，并為搜索引擎優化和可訪問性提供了支持。隨著技術的發展，我們有責任編寫更高質量的代碼，不僅為了自己，也為了創建一個更好的網絡環境。

、常用的標簽

<h1>~<h6> 表示是一個標題

<p> 段落標簽

<hr/> 水平線標簽

<br/> 換行標簽

<sub> 下標

<sup> 上標

<pre> 原樣標簽：原樣標簽會保留空格和換行符。

<ol> <li> 有序的列表標簽、

<ul> <li> 無序的列表標簽。

項目列表標簽(dl dt dd)

行內標簽(span)

塊標簽<div> div標簽的內容會獨立占一行。

二、實體標簽

空格  

小于號 <

大于號 >

-----------------------------

人民幣 &yen；

版權 ©

商標 ®

三、媒體標簽

<embed></embed>

hidden ：設置隱藏插件是否隱藏。

src ：用于指定音樂的路徑

<marquee> 飄動標簽direction : 指定飄動的方向

scrollamount : 指定飄動的速度。

loop :指定飄動的次數

四、超鏈接標簽

<a> 超鏈接標簽

a標簽常用的屬性：

href : 用于指定鏈接的資源

target: 設置打開新資源的目標。

_Blank 在獨立的窗口上打開新資源

_self 在當前窗口打開新資源

file: file協議（文件協議）這種協議主要是用于搜索本地機器的資源文件的。

格式：

file:///f:/美女/1.jpg

郵件的協議： mailTo迅雷的協議： thunder

超鏈接標簽的作用：

1. 可以用于鏈接資源。

2. 錨點點位.

1. 首先編寫一個錨點錨點的格式： <a name="錨點名字"> 數據</a>

2. 使用a標簽的herf屬性連接到錨點出。 href=”#錨點的名字“

五、圖片標簽

img標簽常用的屬性:

width：設置圖片寬度

height 設置圖片高度

alt: 如果圖片資源無法找到，那么就顯示對應的文字對圖片進行說明。

六、表格標簽

表格使用到的標簽：

<table> 表格

<tr> 行

<td> 單元格

<th> 表頭默認的樣式是居中，加粗。

<caption> 表格的標題

表格常用的屬性：

border 設置表格的邊框

width : 設置表格的寬度

height: 設置表格的高度的。

colspan: 設置單元格占據指定的列數。

rowspan : 設置單元格占據指定的行數。

<thead> 標簽用于組合 HTML 表格的表頭內容。

<thead> 元素應該與 <tbody> 和 <tfoot> 元素結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）。

通過使用這些元素，使瀏覽器有能力支持獨立于表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

<thead> 標簽必須被用在以下情境中：作為 <table> 元素的子元素，出現在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

七、表單標簽

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<!-- 表單標簽： 表單標簽的作用是用于提交數據給服務器的表單標簽的根標簽是<form>標簽常用的屬性action: 該屬性是用于指定提交數據的地址。method： 指定表單的提交方式。get : 默認使用的提交方式。 提交的數據會顯示在地址欄上。post ： 提交的數據不會顯示在地址欄上。注意： 表單項的數據如果需要提交到服務器上面，那么表單項必須要有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/>
<!-- 復選框 同一組的復選框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/>
個人簡介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按鈕 -->
<input type="submit" value="注冊"/>
<!-- 重置按鈕 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>

更多精彩內容在微信公眾平臺：網頁設計自學平臺

干貨！免費領取Adobe高級講師前端教程

點我領取

在線咨詢

上一篇：使用AJAX實現的PHP RSS閱讀器示例
下一篇：Steam手機網頁登錄不上去？這可怎么辦？我有辦法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

IT兄弟連 HTML5教程 HTML5文字版面和編輯標簽 小結及試題