前端笔记——html（1）

来源：互联网发布：sha1 js 时间编辑：程序博客网时间：2024/06/05 18:57

HTML5的新结构标签

在讲html5这些新标签之前，我们先看一个普通的页面的布局方式：

Alt text

以上是很常见的div+css布局模式，通过class来区分不同的结构，包括头部、导航、文章内容、右边栏，还有底部模块。

而HTML5新标签带来的新的布局则是下面这种情况：

Alt text

代码如下：

<!DOCTYPE html><html>    <head>        <title>my page</title>    </head>    <body>        <header>header</header>        <nav>nav</nav>        <article>            <section>section</section>        </article>        <aside>aside</aside>        <footer>footer</footer>    </body></html>

拥有具体含义的标签，使得代码有很直观的感受，搜索器也能很容易地抓取合适的信息。

下面介绍HTML5中相关的结构标签

`<section>`

定义文档中的节。它用来表现普通的文档内容或应用区块，但section元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。

<section>    <h1>section是什么？</h1>    <h2>一个新章节</h2>    <article>        <h2>关于section</h2>        <p>section的介绍</p>        ...    </article></section>

`<article>`

特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块。当我们描述一件具体的事物的时候，通常鼓励使用article来代替section。

article会有标题部分（通常包含在header内），也可以包含footer。

article可以嵌套，内层的article对外层的article标签有隶属关系。

<article>    <header>        <hgroup>            <h1>这是一篇介绍HTML 5结构标签的文章</h1>            <h2>HTML 5的革新</h2>        </hgroup>        <time datetime="2011-03-20">2011.03.20</time>    </header>    <p>文章内容详情</p></article>

2.1.3 `<nav>`

可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分，使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。

<nav>    <ul>        <li>厚德IT</li>        <li>FlyDragon</li>        <li>J飞龙天惊</li>    </ul></nav>

`<aside>`

aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。

<aside>    <h1>作者简介</h1>    <p>厚德IT</p></aside>

`<header>`

header标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

通常header标签至少包含一个标题标记（h1-h6），还可以包括hgroup标签，还可以包括表格内容、标识、搜索表单、nav导航等。

<header>    <hgroup>        <h1>网站标题</h1>        <h1>网站副标题</h1>    </hgroup></header>

`<footer>`

footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。

它和header标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚了。

<footer>    页脚信息</footer>

`<hgroup>`

hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

<hgroup>    <h1>这是一篇介绍HTML 5结构标签的文章</h1>    <h2>HTML 5的革新</h2></hgroup>

`<figure>`

用于对元素进行组合。多用于图片与图片描述组合。

<figure>    <img src="img.gif" alt="figure标签"  title="figure标签" />    <figcaption>这儿是图片的描述信息</figcaption></figure>

HTML <label> 标签

实例

带有两个输入字段和相关标记的简单 HTML 表单：

<form>  <label for="male">Male</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">Female</label>  <input type="radio" name="sex" id="female" /></form>

定义和用法

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

结果：

点击任意单选框前的文字也能点中单选框

阅读全文

1 0

前端笔记——html（1）

HTML5的新结构标签

<section>

<article>

2.1.3 <nav>

<aside>

<header>

<footer>

<hgroup>

<figure>