5.語義化標籤

技術標籤：HTML5+CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>語義化標籤</title>
</head>
<body>
    <!--
        在網頁中HTML專門用來負責網頁的結構
            所以在使用HTML標籤時，應該關注的是標籤的語義，而不是他的樣式

            標題標籤：
                h1~h6 一共六級標題
                從h1到h6重要性遞減，h1最重要，h6最不重要
                h1在網頁中的重要性僅次於title標籤，一般情況下一個頁面中只會有一個h1
                一般情況下，標題標籤只是用h1~h3

            在頁面中獨佔一行的元素成為塊元素（block element）

     --> 

    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>

    <!--
        hgroup標籤用來為標題分組，可以將一組相關的標題同時放入到hgroup
    -->
    <hgroup>
        <h1>回鄉偶書（二首）</h1> 

        <h2>其二</h2>
        <h2>賀知章</h2>
    <!--p標籤表示頁面中的一個段落，p也是一個塊元素-->
        <p>少小離家老大回</p>
        <p>鄉音無改鬢毛衰</p>
        <p>兒童相見不相識</p>
        <p>笑問客從何處來</p>
    </hgroup>

    <!--
        em標籤用於表示語音語調的一個加重（傾斜）,也可以用 <i>
        在頁面中不會獨佔一行的元素稱為行內元素(inline element)

    --> 

    <p>今天天氣<i>真</i>不錯</p>

    <!--
        strong標籤用於表示強調重要內容（加粗）,也可以用 <b>
    -->
    <p><strong>今天開始減肥!!!</strong></p>
    <p><b>不吃飽哪裡有力氣減肥</b></p>

    <!--blockquote長引用，獨佔一行，在前面加一段距離-->
    魯迅說：
    <blockquote>
        周樹人便是本人了。
    </blockquote>

    <!-- q是一個短引用，不獨佔一行-->
    子曰：<q>君子好成人之美</q>

    <!--br標籤表示換行-->
    <br>
    <br>
    這裡換了多少行呀？
</body>
</html>

下邊的這些可以先看看，後邊用到的時候再學就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>語義化標籤2</title>
</head>
<body>
    <!--
        佈局標籤（結構化語義標籤）

        header表示網頁的頭部（可以有多個）
        main  表示網頁的主體部分（一個頁面中只能有一個）
        footer表示網頁的底部
        nav   表示網頁中的導航
        aside 表示和主題相關的其他內容（側邊欄）
        article表示一個獨立的文章
        section表示一個獨立的分割槽，上邊的標籤都無法表示時就用section

        div 沒有語義，用來表示一個區塊，目前來講，div是我們主要的佈局元素
        span行內元素，沒有語義，一般用於在網頁中選中文字
    -->
</body>
</html>

5.語義化標籤

（四）語義化標籤

（六）語義化標籤、列表

h5新增語義化標籤

H5新特性之語義化標籤

Html5 語義化標籤

面試之web標準和語義化標籤

2020-12-22H5語義化標籤和BFC

語義化標籤

04.語義化標籤

05.語義化標籤的注意事項

05.語義化標籤的出錯會被修正

html基礎標籤語義化列表連結表單

HTML 元素標籤語義化及使用場景

java應用監測(5)-視覺化監測工具

5-元件化高階

語義化版本

C# 中的 is 真的是越來越強大越來越語義化(推薦)

卷積神經網路5-池化層及全連線

[前端百科]深度理解語義化

5.語義化標籤

相關推薦