html5与css3学习实践--基础的内容划分标签
从位置上划分出网页的区域以后,就需要用到网页的内容标签了,比如<article>、<aside>、<nav>、<p>、<h1>等。网页中,这些内容标签和位置标签交错在一起,比如像下面这样:
- <body>
- <header>
- <h1>Body Title</h1>
- <nav>
- 导航栏
- </nav>
- </header>
- <section id="left">
- <header>
- 区域头
- </header>
- <article>
- <header>
- 文章头
- </header>
- <p>段落一</p>
- <p>段落二</p>
- <aside>
- 侧边栏
- </aside>
- <footer>
- 文章尾
- </footer>
- </article>
- <footer>
- 区域尾
- </footer>
- </section>
- <section id="right">
- <header>
- 区域头
- </header>
- <nav>
- 右侧导航栏
- </nav>
- </section>
- <footer>
- <p>Copy Right.</p>
- </footer>
- </body>
其中,
<article>:代表一篇独立的正文内容,一般还会按照位置标签划分出头、尾、区域等;
<aside>:指与段落内容、正文内容相关的侧边栏,一般在<article>中使用;
<nav>:指导航内容;
<p>:指独立的段落,一般在<article>中使用;
<h1>:指标题,一般在<header>中使用。
这些内容标签中,可以加入位置标签来进行区域划分。
还有很多其他的表示内容类型的标签,后面的学习实践中再描述。
html5与css3学习实践--基础的内容划分标签的更多相关文章
- html5和css3学习笔记
HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...
- 开辟html5和css3学习随笔(2015-3-2)
1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- html5和css3学习历程
1.video,audio视频和音频的应用 <!doctype html><html> <head></head> <body> < ...
- ReactiveCocoa基础知识内容
本文记录一些关于学习ReactiveCocoa基础知识内容,对于ReactiveCocoa相关的概念如果不了解可以网上搜索:RACSignal有很多方法可以来订阅不同的事件类型,ReactiveCoc ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- HTML5移动开发学习笔记之CSS3基础学习
CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
随机推荐
- CentOS 7 安装开发者环境
在vagrant box中安装了基本的centos7的box,但是,该环境没有安装编译软件,所以要求自行安装. 1.查看群组安装的源包数量: yum group list ,搜索Development ...
- IOS UIView自动调整尺寸
自动尺寸调整行为 当您改变视图的边框矩形时,其内嵌子视图的位置和尺寸往往也需要改变,以适应原始视图的新尺寸.如果视图的autoresizesSubviews属性声明被设置为YES,则其子视图会根据au ...
- Debugging Java Native Memory Leaks
GZIP造成JAVA Native Memory泄漏案例 https://www.elastic.co/blog/tracking-down-native-memory-leaks-in-elasti ...
- VLAN,GRE,VXLAN
https://www.cnblogs.com/charles1ee/p/6629009.html VLAN介绍 局域网LAN(多个机器连接一个Hub或者Switch),是一个广播域 VLAN:一台S ...
- [CoreOS 转载] CoreOS实践指南(三):系统服务管家Systemd
转载:http://www.csdn.net/article/2015-01-08/2823477 摘要:CoreOS是采用了高度精简的系统内核及外围定制的操作系统.ThoughtWorks的软件工程 ...
- [Windows Azure] Create a Virtual Network for Site-to-Site Cross-Premises Connectivity
Create a Virtual Network for Site-to-Site Cross-Premises Connectivity This tutorial walks you throug ...
- 李洪强iOS开发之静态库的打包一
李洪强iOS开发之静态库的打包一 //静态库一般做一下几种事情 //1 工具类 算法逻辑 新建工具类LHQTools 定义类方法 + (NSInteger)sumWithNum1: (NSIntege ...
- Android 编程下背景图片适配工具类
package cn.sunzn.util; import android.content.Context; import android.graphics.Bitmap; import androi ...
- DIOCP开源项目-DIOCP3的重生和稳定版本发布
DIOCP3的重生 从开始写DIOCP到现在已经有一年多的时间了,最近两个月以来一直有个想法做个 30 * 24 稳定的企业服务端架构,让程序员专注于逻辑实现就好.虽然DIOCP到现在通讯层已经很稳定 ...
- 深入HBase架构解析(一)[转]
前记 公司内部使用的是MapR版本的Hadoop生态系统,因而从MapR的官网看到了这篇文文章:An In-Depth Look at the HBase Architecture,原本想翻译全文,然 ...