CSS初印象【二】

上周简单介绍了几种 CSS 里用到的语法，这周与非开始模仿网页，结合 HTML 生成了简单的网页效果。下面将介绍几个简单的 HTML 语句。

---

1／<figure>

<figure class="logo">    <a href="index.html"title="Home"rel="home">        <img src="document/image.jpg" alt="Home"/>    </a></figure>

<figure标签规定独立的流内容（图像、图表、照片、代码等等）。 figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

2/<nav>

<nav id="mainnav" class="clearfix">

<nav>标签定义导航链接的部分。是 HTML5 的新标签。

3/role

role="navigation"

HTML5的标签属性，可以用于标识一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别。 例如div容器制作的导航栏，加上role=”navigation”，就可以让浏览器知晓这是一个导航容器而不是一个普通的容器。向元素添加 role=”navigation”，有助于增加可访问性。

4/<section>

<section id="menu" class="menufirstodd" role="navigation">

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

5/<article>

<article class="views">

<<article>>标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。比如可以设置一个独立的视频。

这里，也向大家介绍一种看似在画板上作画效果的思路。

---

是不是很像用蓝色的笔在黑色的画板上画出线条？其实这里是内置了一张蓝色的图片，如果你将图片替换为白色，就会是白色的笔作画的感觉。与非在实现这个效果的过程中觉得很有趣，以为是将颜色赋予移动路径划过的地方，没想到是利用了一个类似于蒙版的技术。这也提醒我们，不同的元素组合使用也许就会创造出新奇的效果。你有没有什么简单元素创造出的效果想来分享呢？

---

这周的总结就到这里了，虽然介绍的很少，内容也没有深度，但是作为我坚持下去的动力，感谢大家不经意的点开。一周一次的交作业，一定要完成。说了很多次的提升深度，一直在艰难徘徊中，还是那一句没有可信度的话，希望下周能带来一些不一样的东西，我们下周见！