[ Html ] - 20140609-题目1

[ Html ] - 20140609-题目1

什么是html标签的语义化？以下各组标签有什么区别？
1. strong,b
2. em,i
3. ul li, ol li,dl dt dd, datalist, nav
4. div, p
5. article, section, aside
6. blockquote, cite, q
7. canvas, object, embed 
8. figure, h1...h6
9. header,main,footer,div
10. mark,output,time,span

PS:
1. 回复时注意加上下面这句话，才会有语法高亮或格式缩进。
```html
// you code
```
2. 也可以粘贴jsfiddle地址，比如：
http://jsfiddle.net/jikeytang/Rmt8M/
评论支持markdown语法。
[http://jsfiddle.net/jikeytang/Rmt8M/](http://jsfiddle.net/jikeytang/Rmt8M/)

<!--1. b strong-->
<b>This is a text</b>  <!--定义粗体文本-->
<strong>This is a text</strong> <!--定义强调文本-->

<!--2. em li-->
<em>This is a text</em> <!--定义强调文本 -->
<i>This is a text</i> <!--定义斜体字-->

<!--3. ul li, ol li,dl dt dd, datalist, nav -->

<!-- 定义无序列表 -->
<ul>
    <li>Java</li>
    <li>JavaScript</li>
    <li>Ruby</li>
</ul>

<!-- 定义有序列表 -->
<ol start="50" type="1">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
<!-- 定义定义列表 -->
<dl>
    <dt>苹果</dt>
    <dd>不是一种水果</dd>
    <dt>苹果</dt>
    <dd>不是一种水果</dd>
</dl>

<!--HTML5新标签-->
<!--
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，
来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
-->
<input list="browsers">

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<!--HTML5新标签 定义导航链接-->
<nav>
    <a href="/html5/index.asp">Home</a>
    <a href="/html5/tag_meter.asp">Previous</a>
    <a href="/html5/tag_noscript.asp">Next</a>
</nav>

<!--4. div, p-->
<div>This is a block</div> <!--定义一个块-->
<p>This is a p</p> <!--定义一个段落 ：注意不要在p中定义块元素-->

<!--5. article, section, aside-->
<!--HTML5新标签 定义文章-->
<article></article>
<!--HTML5新标签 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<section></section>
<!--HTML5新标签 定义其所处内容之外的内容 -->
<aside></aside>

<!-- 6. blockquote, cite, q -->
<!--标记长的引用-->
<blockquote>This is a Text</blockquote>
<!--cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题-->
<cite></cite>
<!--标记短的引用-->
<q></q>

<!-- 7. canvas, object, embed -->
<!--定义画布(图形的容器)-->
<canvas></canvas>
<!--定义一个嵌入对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。-->
<object></object>
<!--HTML新标签 与<object> 功能相同：定义嵌入的内容，比如插件 -->
<embed></embed>
<!-- 8. figure, h1...h6 -->
<!--用作文档中插图的图像：-->
<figure></figure>
<!--定义标题-->
<h1>This is a Text</h1>

<!-- 9. header,main,footer,div -->
<!--header main and footer是HTML5新标签 定义页面布局-->
<header>This is a header</header>
<main>This is a main</main>
<footer>This is a footer</footer>
<!-- 10. mark,output,time,span -->
<!--突出显示部分-->
<p>Do not forget to buy <mark>milk</mark> today.</p>
<!--执行计算然后在 <output> 元素中显示结果：-->

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>
<!--定义时间和日期-->
<p>
    我们在每天早上 <time>9:00</time> 开始营业。
</p>

<p>
    我在 <time datetime="2010-02-14">情人节</time> 有个约会。
</p>

strong

该标签着重强调它所包含的内容，具有明显的意义象征

b

该标签仅仅作为表现性的加粗标签，不带有任何形式的语义，方便在丢失样式的情况下可以方便看出主次内容