溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何在HTML5中使用語義化元素

發(fā)布時間：2021-05-08 17:26:47 來源：億速云 閱讀：147 作者：Leah 欄目：web開發(fā)

這篇文章給大家介紹如何在HTML5中使用語義化元素，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

HTML5語義元素

語義學是研究語言中單詞和短語的含義。語義元素=具有意義的元素。 語義元素清楚地描述了它對瀏覽器和開發(fā)人員的意義。 非語義元素的示例：<div>和<span>- 對其內(nèi)容一無所知。 語義元素的示例：<form>，<table>和<article>- 清楚地定義其內(nèi)容。 所有現(xiàn)代瀏覽器都支持HTML5語義元素。

HTML5新語義元素

許多網(wǎng)站都包含HTML代碼，例如：<div id ="nav"> <div class ="header"> <div id ="footer"> 以指示導航，頁眉和頁腳。 HTML5提供了新的語義元素來定義網(wǎng)頁的不同部分：

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML5 <section>元素

<section>元素定義了一個文檔中的一個部分。 根據(jù)W3C的HTML5文檔：“一個部分是內(nèi)容的主題分組，通常帶有標題?！?主頁通?？梢苑譃閹讉€部分，用于介紹，內(nèi)容和聯(lián)系信息。

<!DOCTYPE html>
     <html>
     <body>
     <section>
       <h2>Java</h2>
       <p>Java是一種廣泛使用的計算機編程語言，擁有跨平臺、面向?qū)ο?、泛型編程的特性，廣泛應用于企業(yè)級Web應用開發(fā)和移動應用開發(fā)。</p>
     </section>
     <section>
       <h2>PHP</h2>
       <p>PHP（全稱：PHP：Hypertext Preprocessor，即“PHP：超文本預處理器”）是一種開源的通用計算機腳本語言，尤其適用于網(wǎng)絡開發(fā)并可嵌入HTML中使用。</p>
     </section>
     </body>
     </html>

HTML5 <article>元素

<article>元素指定獨立的包含內(nèi)容。 一篇文章本身應該有意義，應該可以從網(wǎng)站的其他部分獨立閱讀。 <article>可以使用元素的示例：

<!DOCTYPE html>
       <html>
       <body>
       <article>
         <h2>Java</h2>
         <p>Java是一種廣泛使用的計算機編程語言，擁有跨平臺、面向?qū)ο蟆⒎盒途幊痰奶匦?，廣泛應用于企業(yè)級Web應用開發(fā)和移動應用開發(fā)。</p>
       </article>
       </body>
       </html>

HTML5 <header>元素

<header>元素指定為一個文件或部分標題。 <header>元素應該用作介紹性內(nèi)容的容器。 您可以在一個<header>中包含多個元素。 以下示例定義文章的標題：

<!DOCTYPE html>
       <html>
       <body>
       <article>
         <header>
           <h2>Java</h2>
           <p>Java是什么:</p>
         </header>
         <p>Java是一種廣泛使用的計算機編程語言，擁有跨平臺、面向?qū)ο蟆⒎盒途幊痰奶匦?，廣泛應用于企業(yè)級Web應用開發(fā)和移動應用開發(fā)。</p>
       </article>
       </body>
       </html>

HTML5 <footer>元素

<footer>元素指定為一個文件或部分頁腳。 <footer>元件應包含有關(guān)它的包含單元信息。 頁腳通常包含文檔的作者，版權(quán)信息，使用條款的鏈接，聯(lián)系信息等。 您可在一個<footer>中有多個元素。

<!DOCTYPE html>
       <html>
       <body>
       <footer>
         <p>版權(quán)所有</p>
         <p>聯(lián)系信息: <a href="mailto:someone@example.com">
         someone@example.com</a>.</p>
       </footer>
       </body>
       </html>

HTML5 <nav>元素

<nav>元素定義了一組導航鏈接。

<!DOCTYPE html>
       <html>
       <body>
       <nav>
         <a href="#">Java</a> |
         <a href="#">CSS</a> |
         <a href="#">HTML</a> |
         <a href="#">jQuery</a>
       </nav>
       </body>
       </html>

HTML5 <aside>元素

<aside>元件從它被放置在（如側(cè)欄）的內(nèi)容定義了一些內(nèi)容。 <aside>內(nèi)容應是周圍的內(nèi)容。

<!DOCTYPE html>
       <html>
       <body>
       <p>Java是一種廣泛使用的計算機編程語言，擁有跨平臺、面向?qū)ο?、泛型編程的特性，廣泛應用于企業(yè)級Web應用開發(fā)和移動應用開發(fā)。</p>
       <aside>
         <h5>PHP</h5>
         <p>PHP是世界上最好的語言。</p>
       </aside>
       </body>
       </html>

關(guān)于如何在HTML5中使用語義化元素就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手