html5--2.3新的布局元素(2)-article
html5--2.3新的布局元素(2)-article
学习要点
- 了解article元素的语义和用法
- 完成一个简单的实例
- article元素(标签)
- 用于定义一个独立的内容区块,比如一篇文章,一篇博客,一个帖子,论坛的一段用户评论,一篇新闻消息等.
- article元素内可以嵌套其他元素,它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性,一般对于独立完整的内容才使用article元素,如果只是一段内容的话应该使用section元素。
- section元素(标签)
- 用来定义文章中的章节
- 用来定义文章中特定区块,可视为一个区域分组元素。
- section元素可以定义文档的主体内容,其内部可以包含article元素等内容。
- article元素和section元素的区别
- article元素更强调内容的独立性
- section元素更强调内容的关联性
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<article style="background: #DDFFAA">
<header>
<h3>文章标题</h3>
<h5>作者:***</h5>
</header>
<p>我是正文<br>**************88888</p>
<article style="background: #987898">
<header><h4>网友A的评论</h4></header>
<p>评论内容..............</p>
<footer><h6>发布评论时间:2017/11/28</h6></footer>
</article>
<article style="background: #89FF65">
<header><h4>网友B的评论</h4></header>
<p>评论内容..............</p>
<footer><h6>发布评论时间:2017/11/28</h6></footer>
</article>
<footer>
<p>尾部:阅读:300:评论:80</p>
</footer>
</article>
</body>
</html>
html5--2.3新的布局元素(2)-article的更多相关文章
- html5--2.9新的布局元素(6)-figure/figcaption
html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...
- html5--2.9新的布局元素(5)-hgroup/address
html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...
- html5--2.7新的布局元素(4)-time
html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...
- html5--2.1新的布局元素概述
html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...
- html5--2.6新的布局元素(5)-nav
html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...
- html5--2.5新的布局元素(4)-aside/nav
html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...
- html5--2.4新的布局元素(3)-section
html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...
- html5--2.1新的布局元素(1)-header/footer
html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- IOS Audio开发集合
打算每天抽出一点时间学习音频方面的知识,在此做下汇总: 1. 多媒体层预览 根据结构,明确学习内容.
- iOS SDK具体解释之UIDevice(系统版本号,设备型号...)
原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 blog.csdn.net/column/details/huangwenchen ...
- SQLServer待优化语句查询
SELECT top 100 (total_elapsed_time / execution_count)/1000 N'平均时间ms' ,total_elapsed_time/1000 N'总花费时 ...
- gitbook 的资源同步到 github中(方便维护和备份)
进入SETTINGS -> Github -> Select a Repository. 到这一步为止,我们可以先去我们的github,创建一个仓库先,推荐同名.然后回来gitbook中, ...
- php计算两个经纬度地点之间的距离(转)
php计算两个指定的经纬度地点之间的距离,这个在做计算给定某个地点的经纬度,计算其附近的商业区,以及给定地点与附近各商业区之间的距离的时候,还是用的到的.下面是具体的函数代码以及用法示例. 关于如何获 ...
- Makefile调用shell应该注意的地方
转载:http://blog.csdn.net/ninlei0115/article/details/9732191 1.在Makefile中只能在target中调用Shell脚本,其他地方是不能输出 ...
- CentOS搭建git服务器实测
Git 可以使用四种主要的协议来传输数据:本地传输,SSH 协议,Git 协议和 HTTP 协议 1,安装: CentOS/Fedora: yum install git Ubuntu/Debian: ...
- MariaDB mysql 比较区别 选择
MariaDB数据库管理系统是MySQL的一个分支 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源的潜在风险,因此社区采用分支的方式来避开这个风险. MariaDB的目的是 ...
- 【Android】百度地图自定义弹出窗口
我们使用百度地图的时候,点击地图上的Marker,会弹出一个该地点详细信息的窗口,如下左图所示,有时候,我们希望自己定义这个弹出窗口的内容,或者,干脆用自己的数据来构造这样的弹出窗口,但是,在百度地图 ...
- 多线程快速解压FastZipArchive介绍
本文转载至 http://blog.csdn.net/xunyn/article/details/12975937 多线程解压iosfast 在iOS项目中用到解压缩,用的是ZipArchive ...