HTML5学习（三）：布局标签、列表、超链接和id

1、布局标签

• header表示网页的头部（页眉）
• main表示网页的主体部分（一个页面中只会有一个main）
• footer表示网页的底部（页脚）
• nav表示网页中的导航
• aside和主体相关的其他内容（侧边栏）
• article表示一个独立的文章
• section表示一个独立的区块，上边的标签都不能表示时使用section
  
• div 块元素，没有任何的语义，就用来表示一个区块。目前来讲，div还是主要的布局元素
• span 行内元素，没有任何的语义，一般用于在网页中选中文字

2、列表

在html中可以创建列表，html列表一共有三种：

• 有序列表
• 无序列表
• 定义列表

有序列表
使用ol标签来创建有序列表，使用li表示列表项

<ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
</ol>

无序列表
使用ul标签来创建无序列表，使用li表示列表项

<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese
                <ul>
                    <li>Sweet blue cheese</li>
                    <li>Sour blue cheese</li>
                </ul>
            </li>
            <li>Feta</li>
        </ul>
    </li>
</ul>

定义列表
使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

3、超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址
超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

<a href="https://www.baidu.com">超链接</a>

内部地址
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或../开头

• ./ 表示当前文件所在目录，可以省略不写
• ../表示当前文件所在目录的上一级目录

新建页面
打开超链接时，使用target属性，来指定超链接打开的位置。可选值：

• _self在当前页面中打开超链接，默认值
• _blank在新建页面中打开超链接

锚点跳转

• 可以使用javascript:void(0);来作为href的属性，此时点击这个超链接什么也不会发生
• 可以将#作为超链接的路径的占位符使用，此时点击这个超链接会跳转到当前页面的顶部的位置
• 可以跳转到页面的指定位置（锚点），只需将href属性设置#目标元素的id属性值（唯一不重复）

4、id

• id 属性规定 HTML 元素的唯一的 id。
• id 在 HTML 文档中必须是唯一的。
• id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

语法：

<element id="value">