HTML5学习笔记

语义化标签

<!-- 块元素，占用一行 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <p>p标签表示一个段落，同样属于块元素</p>
    <!-- hgroup标签 用来将相关的标题分组 -->
    <hgroup>
        <h1>主标题</h1>
        <h2>次标题</h2>
    </hgroup>
    <!-- 行内元素、内联元素 -->
    <!-- em标签 表示语义语气语调加重 -->
    <p>今天天气<em>真</em>不错！</p>
    <!-- strong标签 表示强调、重要 -->
    <p>你今天必须<strong>完成作业</strong>！</p>
    <!-- blockquote 表示一个长引用，自带缩进 块元素 -->
    鲁迅说：
    <blockquote>吸烟有害健康，我怎么就不知道呢！</blockquote>
    <!-- q 表示一个短引用 行内元素 -->
    <p>孔子曰：<q>来而不往非礼也</q></p>
    <!-- br 用于换行 -->
    <br>

布局标签（结构化语义标签）

    <!-- header 头部 -->
    <header>
        <!-- nav 导航 -->
        <nav></nav>
    </header>
    <!-- main 网页的主体内容 -->
    <main></main>
    <!-- footer 底部 -->
    <footer></footer>
    <!-- aside 和主体相关的其他内容 -->
    <aside></aside>
    <!-- article 表示一个独立的文章 -->
    <article></article>
    <!-- section 表示一个独立的区块，上面标签都不能表示时使用 -->
    <section></section>

    <!-- div 没有语义 用来表示一个区块，目前主要的布局元素 -->
    <div></div>
    <!-- span 行内元素 没用语义 目前主要的行内结构元素 -->
    <span></span>

列表标签

    <!-- 无序列表 主要用来表现导航菜单 -->
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
    <!-- 定义列表 dt定义内容 dd阐述内容 -->
    <dl>
        <dt>结构</dt>
        <dd>结构用来规定网页中哪里是标题，哪里是段落</dd>
    </dl>
    <!-- 列表嵌套 -->
    <ul>
        <li>aa
            <ul>
                <li>aa-1</li>
                <li>aa-2
                    <ul>
                        <li>aa-2-1</li>
                        <li>aa-2-2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

超链接

    <!-- _blank 在新页面中打开链接 -->
    <a href="http://baidu.com" target="_blank" rel="noopener noreferrer">百度</a>
    <!-- 
        ./ 当前目录 默认值，可省略
        ../ 上一级目录
     -->
    <a href="./h1.html">当前目录</a>
    <a href="../h5/h2.html">上一级目录</a>
    <!-- 设置标签id 实现当前页面指定位置跳转 -->
    <a id="bot" href="#">回到顶部</a>
    <a href="#bot">当前页面跳转到指定位置</a>
    <!-- javascript:; 作为占位符 不起任何作用 -->
    <a href="javascript:;">占位符</a>