Day8 HTML 其他常用标签

语意标签 (Semantic)

语意标签是HTML5新增的标签，让网页结构更清楚，搜寻引擎可以更容易了解网页。
语意标签的用途与div和span类似，目的都是将内容划分区域，只是div、span是没有语意的。
而这里的语意意思是，如果同样是划区一个区块，却只知道div是一个区块，这个区块在做什麽可能还需要细看才知道，但header划分出来的区块，是可以一眼就知道这是页首。

语意标签学起来其实很简单，知道标签的英文名什麽意思，并在相对应位置放上语意标签，就可让开发者及搜寻引擎更块理解网页架构。

页首标签 (header)

header标签如果是在body内，它可以表示网页的页首，但如果位於article或section内，则可以表示文章或区块内的首要区块。

导览列 (nav)

只要是在网站内的导航区块，都适合使用nav标签，像是主选单、页尾选单等。

主要区块 (main)

用来放置页面中主要资讯的区块，展现页面内容的独特性。每个页面只能有一个main标签，且理想状态下，不能被放在nav、article、aside、footer和header内。

区块或文章区块 (article)(section)

过去建立区块通常会使用div，HTML5语意化标签出现後，可以使用section搭配标题来呈现内容，而section内一些无明显含义的区块或为了排版目的的区块则使用div来包，这时可视作无意义的容器。article标签近似section标签，但article主要用於包覆文章。要注意的是，article可以有很多个section，也可以是section有很多article，取决於内容。

侧栏 (aside)

侧拦语意是跟主要区块内容无关的区块，也就是额外资讯，像是侧边栏、广告、其他连结、推荐文章等，但不一定是侧边位置才能使用。

页尾 (footer)

表示页尾或表尾部分，使用方式同header。

其他语义化标签

time

表示日期时间

mark

如黄色萤光笔的方式画出重点，强调一小块内容

details

描述文章的细节

figure、figcaption

figure用於图像，figcaption用於图像标题

hgroup

当内容有主标题及次标题等多个标题的状况下使用。

cite

引用其他文献或作品(例如书籍、歌曲、电影、绘画、雕塑等）的标题

标签属性介绍

属性Attributes是HTML标签可以添加的额外资讯，让标签可以依照网页开发者的需求，增加某些功能。
在前几天介绍img和a标签时有提到src、href、alt属性，有些属性只适用於特定的标签，例如src就适用於img标签，href适用a标签。当然也有属性是任何一种标签都可以附加的，例如style属性，用来添加CSS。

属性必须於开头标签输入，如果是只有单一标签，就将属性填入该标签即可。举例来说，表示段落文字的p标签，需要开头标签结尾标签，属性你就必须填在开头标签中。下方原始码你可以看到，style属性是填在开头标签内。

<h1><p style="color:#CB8A90;">范例</p></h1>

属性用法：

属性名称="属性的值"

以style属性来举例，color代表文字的颜色，冒号後填入颜色(可以是色码、颜色、RGB)，如此一来就可以添加文字的颜色。但如是遇到img这类的属於空元素的标签，不需要结尾标签，直接将属性填入img标签中即可。

<img src="图片位置或档名" alt="图片无法显示时的替代文字">

以上是我今天介绍的常用HTML标签与属性的概念介绍，HTML是由许多不同功能的标签所组成，标签中可添加属性，为每个标签增添额外资讯。属性通常会放在开头标签中。