讲给Android程序员看的前端教程(05)——HTML5标签(4)
来源:互联网 发布:大众网络投资产品排行 编辑:程序博客网 时间:2024/06/05 02:21
自定义View系列教程00–推翻自己和过往,重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理
探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制
Android多分辨率适配框架(1)— 核心基础
Android多分辨率适配框架(2)— 原理剖析
Android多分辨率适配框架(3)— 使用指南
版权声明
- 本文原创作者:谷哥的小弟
- 作者博客地址:http://blog.csdn.net/lfdfhl
- 本文视频教程:http://www.stay4it.com/my/course/37
课程安排
HTML不是程序设计语言,而是一种标记语言,它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站,就必须对HTML语言有所了解。客观地讲:HTML标签没有多少逻辑性而言,为了大家更好的理解和记忆,我们对这些标签进行分门别类的讲解,主要分为:
HTML常用标签
HTML文本标签
HTML语义标签
HTML结构标签
HTML列表标签
HTML表格标签
HTML表单标签
HTML新增标签和API
嗯哼,来吧,我们继续HTML5标签的学习。咋了?你竟然有点担心学不会!?别逗了,这部分和我们常写的Java比起来简单多了,它的逻辑性也弱得多。所以,大胸弟你大可放心,就像看电影那样:一手拿着爆米花,一手拿着可乐,也完全可以看懂本教程。
之前,我们已经学习了HTML常用标签、HTML文本标签、HTML语义标签;现在我们来继续学习HTML结构标签。
HTML结构标签
我们在HTML页面中常用一些标签将页面划分为不同的区域用以表示页面结构。比如,可使用div标签将整个页面分为header,body,footer三部分。现在我们就来学习这些与页面结构有关的标签。
div标签
div标签在页面中非常常见,也常将其称为标签容器。我们可以将一组功能相关的标签放到同一个div中,也可以对该标签内的元素作统一处理,比如设置对齐方式,背景颜色。请看如下示例:
<strong>学习div标签</strong><div align="center" style="color:#0000FF"> <p>这是div中一个p标签</p> <p>这是div中另外一个p标签</p></div>
但是,请注意:div标签本身没有任何语义,多用作布局以及样式化或脚本的钩子(hook)。正如,官方文档所言:
The div element has no special meaning at all
所以,在页面中大量使用div标签导致页面的语义性下降。因此HTML5中引入了新的结构标签article和section
section标签
先来瞅瞅section标签的文档释义:
The section element represents a generic section of a document or application. A section , in this context, is a thematic grouping of content, typically with a heading
这段话的大概含义是:section不仅仅是一个标签容器,它带有明显的语义。该标签常用于对网站或者应用程序中页面上的内容进行分块。比如,网站的主页可以分成简介、新闻和联系方式等几部分,那么每一部分都可以放到一个section里面;类似地,文章的章节、标签对话框中的标签页、或者论文中有编号的部分也可以放到一个section中。请注意:官方文档建议,在使用section时每个section标签中应带一个标题标签(h1-h6),从而表达更清晰的语义。
article标签
先来瞅瞅article标签的文档释义:
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle,independently distributable or reusable, e.g. in syndication.
这段话的大概含义是:article是一个特殊的section标签,它比section更具有明确的语义。也就是说:无论从结构上还是内容上来说,它代表一个独立的、完整的相关内容块。例如:博客中的一篇文章,论坛中的一个帖子或者一段浏览者的评论等。一般来说,article也有标题部分(通常包含在header内),类似地它还有footer部分。
示例
嗯哼,现在我们来看一个关于section标签和article标签的示例,代码如下:
<article> <header><h2>有心课堂课程介绍</h2></header> <p>我们需要从每天的复制粘贴,盲目的debug中解放出来,找到解决问题的本质。在有心课堂,我们不仅仅是告诉你需求如何实现,还会教你如何分析,如何选择解决方案以及为什么要这样来实现。有心课堂,初衷是为了引导在职开发人员高效开发,养成良好的思维习惯,而不是简单的教你基础API调用。当然优质的教学体系还需要时下热门的市场需求来做辅助。所以我们在此基础上设计来三套阶梯式课程。</p> <section> <h3>Android架构设计方法、技巧与实践</h3> <p>这里是《Android架构设计方法、技巧与实践》的课程简介</p> </section> <section> <h3>三杆火枪干掉自定义View</h3> <p>这里是《三杆火枪干掉自定义View》的课程介绍。目前有1068位同学参加该课程</p> </section> <footer>课程内容版权均归上海有心网络科技有限公司所有</footer> </article>
运行后页面如下图所示:
小结
div、section、article这三个标签的语义是从无到有,逐渐增强的。div无任何语义,仅仅用作样式化或者脚本化的钩子(hook)。鉴于div标签的不足,HTML5中新增的section和article比较明确地定义了文档结构,便于搜索引擎、浏览器等工具解析该页面;推荐开发人员在工作中广泛使用。对于一段主题性的内容,可以采用section;假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,那么就采用article。
- 讲给Android程序员看的前端教程(05)——HTML5标签(4)
- 讲给Android程序员看的前端教程(02)——HTML5标签(1)
- 讲给Android程序员看的前端教程(03)——HTML5标签(2)
- 讲给Android程序员看的前端教程(04)——HTML5标签(3)
- 讲给Android程序员看的前端教程(06)——HTML5标签(5)
- 讲给Android程序员看的前端教程(07)——HTML5标签(6)
- 讲给Android程序员看的前端教程(08)——HTML5标签(7)
- 讲给Android程序员看的前端教程(09)——HTML5标签(8)
- 讲给Android程序员看的前端教程(01)——HTML5入门
- 讲给Android程序员看的前端教程(14)——CSS选择器(4)
- 讲给Android程序员看的前端教程(10)——CSS概述
- 讲给Android程序员看的前端教程(11)——CSS选择器(1)
- 讲给Android程序员看的前端教程(12)——CSS选择器(2)
- 讲给Android程序员看的前端教程(13)——CSS选择器(3)
- 讲给Android程序员看的前端教程(15)——CSS选择器(5)
- 讲给Android程序员看的前端教程(16)——伪类
- 讲给Android程序员看的前端教程(17)——伪元素
- 讲给Android程序员看的前端教程(18)——盒子模型
- Centos7调整自动分区大小
- Python 中的正则表达式
- 完美解决php的notice问题
- 网页静态服务器-2显示需要的页面
- Bootstrap Table 中文文档(最终完整翻译版)
- 讲给Android程序员看的前端教程(05)——HTML5标签(4)
- TCP 三次握手和四次挥手(使用Wireshark进行抓包查看)
- jquery validation 在触发按钮单击事件进行表单校验和验证通过后发起ajax请求的解决方案
- C++风格_自增
- leetCode_234. Palindrome Linked List(判断是否为回文串)
- Qt 5.7.0 (32 bit) 配置 Android 环境
- UVALive 3353 Optimal Bus Route Design
- Android移动开发-调用方向传感器开发简易指南针的实现
- 如何将一个已存在的目录转换为一个 GIT 项目并托管到 GITHUB 仓库