冯二爷 2019-11-18
在html5没出来之前,一直用html的div+css进行布局,通篇div+span,确实不优雅。html5新增了很多语义化的标签,帮助我们写出更优雅的html结构。
1.<article>
可以是页面任何独立的内容区域,比如文章/博客/新闻/故事/论坛帖子/评论等等任何独立的内容。
<article> <header> <h1>文章标题</h1> <p>发布时间:<time pubdate='2019-05-06'>2019-05-06</time></p> <p>作者:xxx</p> </header> <p>文章内容.........</p> <p>文章内容.........</p> </article>
2.<section>
定义文档中的节、区段,比如章节、页眉或文章中的其他部分。比如我们对一篇文章进行分章节。
<article> <header> <h1>文章标题</h1> <p>发布时间:<time pubdate='2019-05-06'>2019-05-06</time></p> <p>作者:xxx</p> </header> <section> <h2>章节一的标题</h2> <p>文章内容.........</p> </section> <section> <h2>章节二的标题</h2> <p>文章内容.........</p> </section> </article>
<section>应包含一组内容及其标题。如果内容没有标题,不推荐使用<section>。
3.<nav>
定义页面的导航区域。
<nav> <a href='/a'>页面a</a> <a href='/b'>页面b</a> <a href='/c'>页面c</a> </nav>
4.<aside>
定义页面主区域内容之外的内容(比如侧边栏)
5.<header>
描述文档头部区域,用于定义内容的介绍展示,可以使用多个<header>。
6.<footer>
描述文档底部区域,通常包含文档作者,著作权,使用条款,联系信息等,可以使用多个<footer>
文档的大致结构可以分为
下面是更细致的语义化标签,也是更容易被忽略的标签。
7.<figure>
和<figcaption>
<figure>
定义独立的流内容(图像、图表、照片、代码等等)。<figcaption>
定义<figure>
的标题,通常置于figure元素的第一个或最后一个子元素
<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q