Day9 Html常用标签_4

今天要介绍的东西是"标签属性"。

标签属性(Attributes)是让标签有更多变化、增加其他功能。最常用到的就是添加CSS，这时候我们就会用到style属性，接下来我们将介绍怎麽使用。

例如我们有个h1的标题，我想要让它是黄色的。

<h1 style="color: yellow;">标题</h1>

我们就可以在h1的後面空一格，加上style属性，调整你想要的颜色，当然还可以增加许多属性，边框、字体颜色，置中，这些等之後的CSS介绍我们在更深入的讨论!

常用语意标签

首先我们要知道语意标签是什麽呢?让我们先看看这张图

这是一个网页基本组成的区块，有最上方的页首、依次是导览列、内容的区块、侧边栏位、及最底下的页尾。

而其实如果你了解了我们前面所教学的div跟span区块的定义，就会对语意标签上手的十分快速，因为他们区别不大，只是善用这些语意标签可以让人更快速、更直白的了解到这个区块是属於网页的哪个部分!

语意标签:

<header>：网页的最上方，通常会是标题，网站LOGO。
<nav>：网页的选单、导览列。
<main>：网页的中间部分、主要内容。
<aside>：网页的侧边栏、辅助内容。
<article>：一篇文章内容。
<section>：常见三栏或是四拦的自订区块，可以透过自行排版设定。
<footer>：网页的页尾，会有版权提醒、联络方式等等。
<mark>：强调特定区块内容。
<time>：日期时间。

让我们来看看他们的区别:

这是没有语意标签的部分

<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="article"></div>
    <div class="section"></div>
    <div class="aside"></div>
</div>
<div class="footer">
    &copy; making by jason
</div>

有语意标签的部分

<header></header>
<nav></nav>
<main>
    <article></article>
    <section></section>
    <aside></aside>
</main>
<footer>
    &copy; making by jason
</footer>