1. 程式人生 > 實用技巧 >html標籤知識(無表單、表格)

html標籤知識(無表單、表格)

<meta> : 定義在head中
<hgroup></hgroup> : 標題分組標籤
<br>: 換行標籤
!&nbsp; : 空行
<p></p>: 段落標籤
<blockquote></blockquote>: 表示長引用
<q></q>: 短引用
<h1></h1>: 標題標籤
標籤手冊:https://www.runoob.com/tags/tag-a.html

塊元素: 對頁面進行佈局
行內元素:用來設定文字
關係:塊元素可以有行內元素

語義化標籤:

    <header>頭部標籤</header>
    <main>主體標籤</main>
    <footer>底部標籤</footer>

    <nav>導航標籤</nav>
    <aside>側邊欄標籤</aside>
    <article>文章標籤</article>
    <section>獨立的區塊</section>

    <!-- 主流使用 -->
    <div>主要的佈局元素</div>
    <span>行內元素,用於網頁中的文字</span>

列表:

    <!-- 有序列表 -->
    <ol>
        <li>列表項1</li>
    </ol>

    <!-- 無序列表: 用的多 -->
    <ul>
        <li>列表項1</li>
    </ul>

    <!-- 定義列表 -->
    <dl>
        <dt>定義列表項1</dt>
        <dd>對定義列表項1的描述</dd>
    </dl>

超連結:

    <!-- 跳轉到指定位置,href使用它的標籤或者類 -->
    <a href="#bottom">這是一個沒有感情的</a>
    <!-- a 是行內元素,裡面除了a標籤,其他標籤都能放 -->
    <a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">點選跳轉,會開啟新視窗</a>
    <a href="day01.html">本視窗重新整理去其他頁面</a>

    <!-- id屬性:唯一不重複 -->
    <!-- 點選將跳轉到網頁頂部 -->
    <a id="bottom" href="#">回到頂部</a>
    <!-- 點選這個連結不會做什麼事情,用來站位 -->
    <a href="javascript:;">無所事事</a>

圖片:

    <img src="rng.png" alt="對於這圖片的描述">
    <br>
    <img src="rng.png" alt="對於這圖片的描述">
    <img width="200" src="rng.png" alt="對於這圖片的描述">

內聯框架

    <iframe src="https://www.baidu.com/" frameborder="0">baiduyiha</iframe>

音視訊播放

    <!-- 音訊,controls 使用者可控制播放, autoplay(不相容) 自動播放 -->
    <audio controls>
        對不起,瀏覽器不支援,請升級
        <source src="檔案1">
        <source src="檔案2.mp3" type="audio/mp3">
    </audio>

    <!-- 視訊 -->
    <video controls>
        <source src="視訊檔案1.mp4" type="video/mp4">
    </video>

有些html標籤這裡沒有的可以訪問菜鳥教程html標籤手冊去查詢。