htmlarticle-70
刘耀文的大沙雕
钟意阿满
html5常用标记及用法？
一、Article元素
从名字上，它已经很好的诠释了自己，但是我们仍要看看官方文档上是如何描述它的：
“在文档，页面，应用或是站点上的一个独立部分，并且大体上，是可独立分配，或是重复使用的，例如在发布时。这个可以是论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其他独立项目的内容。”
从上描述中，我们可以总结出<article>元素专用于结构化文章，特别是我们要发布的，例如博客，页面内容或是论坛帖子。
以下例子给出了如何使用<article>构建一个博客文章。
<article class="post"> 。
<header> 。
<h1>This is Blog Post Title</h1> 。
<div class="post-meta"> 。
<ul> 。
<li class="author">Author Name</li> 。
<li class="categories">Save in Categories</li> 。
</ul> 。
</div> 。
</header> 。
<div class="post-content"> 。
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. 。
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat 。
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies 。
halvah gummies danish biscuit applicake gingerbread jelly-o pastry. 。
</div> 。
</article>。
此外，<article>元素还可与section元素结合，需要的时候，可以使用<section>元素将文章分为几个段落，如下例所示。
<article class="post"> 。
<header> 。
<h1>This is Blog Post Title</h1> 。
<div class="post-meta"> 。
<ul> 。
<li class="author">Author Name</li> 。
<li class="categories">Save in Categories</li> 。
</ul> 。
</div> 。
</header> 。
<div class="post-content"> 。
<section> 。
<h2>This is the Sub-Heading</h2> 。
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. 。
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake 。
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah 。
gummies danish biscuit applicake gingerbread jelly-o pastry. 。
</section> 。
<section> 。
<h3>This is another Sub-Heading</h3> 。
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops 。
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate 。
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon. 。
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry. 。
</section> 。
</div> 。
</article>。
二、Section元素
这是一个最容易产生歧义的元素。它与<div>元素有什么区别？我们一直在用<div>来划分段落，所以除了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档，对<section>元素做了以下描述：
“<section>元素表示了一篇文档或应用中，通用段落 – WHATWG”
从描述中我们可以看出<section>元素的作用就是分段，或多或少类似于<div>。但是它仍有一个特例。在文档中，加入了一段特别声明：
“当一个元素仅用于风格样式或是为了脚本的方便，我们鼓励作者使用<div>。<section>元素适用于，当元素的内容需要明确的列出时。- WHATWG”
基于这一点，我们可以总结以下两点：
尽管section元素在技术上是可以设计样式的，但是当有复杂的样式或脚本时，我们仍建议使用div元素。
类似于<li>元素，section元素是用来列举内容的。
因此在现实例子中，使用<section>元素的原因是结构化的列出博客的内容，代码如下：
div class="blog"> 。
<section class="post"> 。
<h2 class="post-title">Blog Post Title</h2> 。
<p class="post-excerpt">Ice cream tart powder jelly-o. 。
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> 。
</section> 。
<section class="post"> 。
<h2 class="post-title">Blog Post Title</h2> 。
<p class="post-excerpt">Ice cream tart powder jelly-o. 。
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> 。
</section> 。
<section class="post"> 。
<h2 class="post-title">Blog Post Title</h2> 。
<p class="post-excerpt">Ice cream tart powder jelly-o. 。
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> 。
</section> </div>。
这只是个例子，<section>元素也可以用作其他用途。
抱起亚轩找小葵
html5中article与section的区别，另外aside又该怎么理解？谢谢！
HTML5 新增结构元素分为主体结构元素和非主体结构元素。
1.主体结构元素包括 article、section、nav、aside、time。
2.非主体结构元素包括 header、hgroup、footer、address。
一、主体结构元素
article
article 标签，从语义化上看为文档、页面，其用法如下：
通常是一篇文章、一个页面、一个独立完整的内容模块。
一般会带个标题，并放在 header 标签中。
article 元素可以互相嵌套。
使用频率极高，强调独立性，多注意下与 header 标签的使用。
代码如下:
<article>。
<header>
<h1>是我标签</h1>。
</header>。
<p>我是段落</p>。
<article>。
<div>我的内容</div>。
</article>。
</article>。
section
section 标签，从语义化上看为部分，其用法如下：
用于页面内容的独立分块，往往是文章的一段。
通常由内容和标题组成，没有标题的内容不推荐使用 section。
使用频率低，强调分段分块。
注：《HTML5与CSS3权威指南》这本书中说明：一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器。
代码如下:
<section>。
<h1>水果</h1> 。
<article> 。
<h2>苹果</h2>。
<div>苹果是撒？</div> 。
</article> 。
<article> 。
<h2>桔子</h2>。
<div>桔子是撒？</div> 。
</article> 。
</section>。
<!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 -->。
<article>。
<h1>中国人物</h1>。
<p>三国、两晋、南北朝</p>。
<section>。
<h2>三国</h3>。
<p>猛将猛将猛将猛将</p>。
</section>。
<section>。
<h2>两晋</h3>。
<p>猛将猛将猛将猛将</p>。
</section>。
</article>。
nav
nav 标签，从语义化上看为导航，其用法如下：
通常作为页面导航的链接组
侧边栏导航
使用频率高。
代码如下:
<nav>
<ul>
<li><a href="">菜单1</a></li>。
<li><a href="">菜单2</a></li>。
<li><a href="">菜单3</a></li>。
</ul>
</nav>
aside
aside 标签，从语义化上看为在旁边、侧边，其用法如下：
在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。
在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。
代码如下:
<!-- 在article标签外使用时 -->。
<article>。
<h1>马云是谁</h1>。
<p>马云，男，1964年10月15日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人..........</p>。
<aside>
<h1>参考资料</h1>。
<p>百度网、维基百科...</p>。
</aside>
</article></p> <p><!-- 在article标签内使用时 -->。
<aside>
<nav>
<ul>
<li><a href="">老赵的博客</a></li>。
<li><a href="">鬼哥的博客</a></li>。
<li><a href="">彪叔的博客</a></li>。
</ul>
</nav>
</aside>
time
time 标签，从语义化上看为时间，其用法如下：
代表 24 小时中的某个时刻或某个日期。
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。
代码如下:
<time datetime="2013-3-6">2014年3月6日</time>。
<!-- datetime属性中日期与时间之间要用“T” 文字分隔，“T”表示时间 -->。
<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>。
<!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 -->。
<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>。
二、非主体结构元素
header
header 标签，从语义化上看为文档的页眉，其用法如下：
一种具有引导和导航作用的结构元素。
通常放置在整个页面或者页面内的一个内容区块的标题。
一个网页内并没有限制 header 标签的个数。
使用频率极高，比较容易理解。
代码如下:
<header>
<h1>我是大头</h1>。
</header>。
<article>。
<header>
<h1>我是脖子</h1>。
</header>。
<p>我是身体</p>。
</article>。
hgroup
hgroup 标签，从语义化上看为标题组，其用法如下：
作为 header 标签的子元素。
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup。
通常会将 h1~h6 元素进行分组。
使用频率高。
代码如下:
<article>。
<header>
<hgrounp>。
<h1>我是刘备</h1>。
<h2>我是关羽</h2>。
<h3>我是张飞</h3>。
</hgrounp>。
</header>。
<p>吕布惊呆了</p>。
</article>。
footer
footer 标签，从语义化上看为文档的脚注，其用法如下：
一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等。
使用频率高，比较容易理解。
代码如下:
<article>。
<p>吕布惊呆了</p>。
<footer>
<ul>
<li>关于三国</li>。
<li>地图信息</li>。
<li>游戏攻略</li>。
</ul>
</footer>。
</article>。
address
address 标签，从语义化上看为地址，其用法如下：
用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等。
使用频率低。
代码如下:
<address>。
<a href="">作者：张三丰</a>。
<a href="">地址：武当山</a>。
<a href="">联系方式：1247</a>。
</address>。
大圣杰锅是
在html里如何给article添加style
html5的新增的标签都是带有语义的，不光要从字面来说，还要从举例中来说。
article 是独立的一块内容，比如一篇新闻，一篇文章，包含文章主旨，还可以包含辅助内容。
section 类似div，不过比div更有意义，他是对内容进行分块。
aside 字面就是侧边栏，跟内容相关的一些引用、内容。
这些元素表现形式都是行内，使用的时候要显示声明为block。
小韩在追星
谁能帮忙写一下把/article-*.html 用户进入后跳转成 /read-htm-tid-*.html形式的apache代码
你说的是article标签么，还是什么啊，加style，你得先看看css的用法，
小韩在追星
html5怎么设置网页过渡效果
RewriteRule ^/article-(.+)\.html$ /read-htm-tid-$1.htm [R]。
如果 /article-*.html中的*可以为空值的话改成：
RewriteRule ^/article-(.*)\.html$ /read-htm-tid-$1.htm [R]。