讲给Android程序员看的前端教程(02)——HTML5标签(1)
来源:互联网 发布:健身 饮酒 知乎 编辑:程序博客网 时间:2024/06/05 23:09
自定义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
嗯哼,来吧,我们从最常用的标签开始学习。咋了?你竟然有点担心学不会!?别逗了,这部分和我们常写的Java比起来简单多了,它的逻辑性也弱得多。所以,大胸弟你大可放心,就像看电影那样:一手拿着爆米花,一手拿着可乐,也完全可以看懂本教程。
HTML常用标签
我们先来看一些最常用的HTML标签
p标签
p标签在HTML中常用于表示段落,它是英文单词paragraph的缩写。p标签的用法非常简单,只需要在标签中放置一段文本即可。
<p>2017,顶着刘海的iPhoneX带着“史上升级变动最大”的iOS11,依然碎片化严重的Android带着“更快、更强大、更安全” 的8.0来到我们面前,忽思十年初,那个触 屏的、没有物理键盘的智能手机惊艳了我 ,但连个复制粘贴功能都没有的时光。回首一顾,从2007到2017,从诺记的Symbian、摩托罗拉的Linux、苹果的iOS、微软的Windows Phone、三星的 Tizen到Google的Android等,移动操作系统也曾百花齐放,但经过十年厮杀各自蚕食,格局已相当明朗,只剩下了iOS和Android两大巨头</p>
在浏览器中运行之后可以发现:p标签的上下均有大约一行宽度的留白,这和我们平时看见的文章的每个段落是一样的。
h标签
h标签用于表示标题,它是英文单词header的缩写。我想这个单词对于Android程序员来说是再熟悉不过了吧;例如,给ListView,Recyclerview设置header和footer。在HTML中h标签细分为h1~h6,请注意:h后的数字越大,那么标题所对应的字体越小。示例如下:
<h1>这里是h1</h1><h2>这里是h2</h2><h3>这里是h3</h3><h4>这里是h4</h4><h5>这里是h5</h5><h6>这里是h6</h6>
hr标签
hr标签用于表示一条水平横线,它是英文中Horizontal Rule的缩写。它的用法非常简单:
<hr>
在页面中只用写一个hr标签,就可以表示一条水平横线。
br标签
br标签用于表示换行,它在英文所对应的单词是break。它的用法也非常简单:
<br>
nobr标签
会了刚才的br标签,再来看nobr就很简单了;该标签表示不换行。比如,我们想表示一个很长的数学公式,需要将其显示在同一行,从而避免换行后导致可读性变差产生歧义。
<nobr>这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。</nobr>
center标签
center标签表示居中显示,比如我们想将一句话显示在页面的水平方向的中间,可以这么做:
<center>测试center标签</center>
marquee标签
marquee标签用于表示跑马灯效果。做Android开发的童鞋还记得不,在TextView中也有类似的属性:android:ellipsize=”marquee”;它们是非常类似的。
<marquee behavior="scroll" direction="left"> <p>测试marquee标签</p></marquee>
在marquee标签中可以通过behavior和direction属性控制跑马灯的不同效果。
button标签
button标签用于表示按钮,这和我们在Android开发中常用的Button控件是完全一样的。
<button type="button" onclick="onButtonClick()">This is a button</button> <script type="text/javascript"> function onButtonClick(){ alert('You click button'); } </script>
此处,我们给button标签设置一个监听器,当用户点击button后利用JavaScript弹出一个对话框。
a标签
a标签在THML中常用于表示锚点和超链接,它是英文中anchor的缩写;在此,我们主要来瞅瞅利用a标签实现超链接。
<a href="http://blog.csdn.net/lfdfhl" title="谷哥的小弟" target="_blank">请点击此处的超链</a>
在a标签中利用href属性指明超链接的地址,利用title表示当鼠标悬停在超链接时的提示文字,利用target属性表示打开超链接的方式。如果target的取值为_blank表示在新窗口中打开超链接;假若target的取值为_self表示在当前窗口中打开超链接。
img标签
img标签在HTML中常用于表示图像,它是英文中image的缩写。请看如下示例:
<img src="myblog.jpg" title="这是我的博客头像">
源码和页面
在此,附上刚才所讲标签时涉及到的源码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML常用标签</title></head><body> <!-- p标签,用于表示段落 --> <p>2017,顶着刘海的iPhoneX带着“史上升级变动最大”的iOS11,依然碎片化严重的Android带着“更快、更强大、更安全” 的8.0来到我们面前,忽思十年初,那个触 屏的、没有物理键盘的智能手机惊艳了我 ,但连个复制粘贴功能都没有的时光。回首一顾,从2007到2017,从诺记的Symbian、摩托罗拉的Linux、苹果的iOS、微软的Windows Phone、三星的 Tizen到Google的Android等,移动操作系统也曾百花齐放,但经过十年厮杀各自蚕食,格局已相当明朗,只剩下了iOS和Android两大巨头</p> <!-- h1至h6标签,用于表示标题 --> <h1>这里是h1</h1> <h2>这里是h2</h2> <h3>这里是h3</h3> <h4>这里是h4</h4> <h5>这里是h5</h5> <h6>这里是h6</h6> <!-- hr标签用于水平线 --> <hr> <!-- br标签用于换行 --> <br> <!-- nobr标签表示禁止换行 --> <nobr>这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。</nobr> <br> <br> <!-- center标签,表示居中 --> <center>测试center标签</center> <br> <br> <!-- marquee标签,用于显示跑马灯效果 --> <marquee behavior="scroll" direction="left"> <p>测试marquee标签</p> </marquee> <br> <br> <!-- button标签 --> <button type="button" onclick="onButtonClick()">This is a button</button> <script type="text/javascript"> function onButtonClick(){ alert('You click button'); } </script> <br> <br> <br> <!-- span用于组合文档中的行内元素;它常结合CSS为文本中的某些部分进行特殊处理 --> <span style="color:#FA0">大家好</span><span style="color:#F00">我是谷哥的小弟</span> <br> <br> <!-- a标签用于超链接 --> <a href="http://blog.csdn.net/lfdfhl">请点击此处的超链接</a> <br> <a href="http://blog.csdn.net/lfdfhl" target="_blank">请点击此处的超链接</a> <br> <a href="http://blog.csdn.net/lfdfhl" title="谷哥的小弟" target="_blank">请点击此处的超链接</a> <br> <br> <!-- img标签用于显示图像--> <img src="myblog.jpg" title="这是我的博客头像"> <br> <!-- img标签结合a标签实现超链接 --> <a href="http://blog.csdn.net/lfdfhl" title="谷哥的小弟" target="_blank"><img src="myblog.jpg"></a></body></html>
页面在谷歌浏览器的显示效果如下图:
- 讲给Android程序员看的前端教程(02)——HTML5标签(1)
- 讲给Android程序员看的前端教程(03)——HTML5标签(2)
- 讲给Android程序员看的前端教程(04)——HTML5标签(3)
- 讲给Android程序员看的前端教程(05)——HTML5标签(4)
- 讲给Android程序员看的前端教程(06)——HTML5标签(5)
- 讲给Android程序员看的前端教程(07)——HTML5标签(6)
- 讲给Android程序员看的前端教程(08)——HTML5标签(7)
- 讲给Android程序员看的前端教程(09)——HTML5标签(8)
- 讲给Android程序员看的前端教程(01)——HTML5入门
- 讲给Android程序员看的前端教程(11)——CSS选择器(1)
- 讲给Android程序员看的前端教程(10)——CSS概述
- 讲给Android程序员看的前端教程(12)——CSS选择器(2)
- 讲给Android程序员看的前端教程(13)——CSS选择器(3)
- 讲给Android程序员看的前端教程(14)——CSS选择器(4)
- 讲给Android程序员看的前端教程(15)——CSS选择器(5)
- 讲给Android程序员看的前端教程(16)——伪类
- 讲给Android程序员看的前端教程(17)——伪元素
- 讲给Android程序员看的前端教程(18)——盒子模型
- 这九张动态图诠释什么是自然与科技的完美结合
- 行人检测资源【转】
- 安卓四大组件使用过程碰到的问题汇总-不定时更新
- 面向对象与类的+抽象类和接口小结
- Unique Paths
- 讲给Android程序员看的前端教程(02)——HTML5标签(1)
- 排序(大话数据结构阅读笔记)
- Linux单元小结(11)
- windows常用命令
- delphi读取.ini配置文件
- S12G128底层代码分析
- jeecg中上传附件的处理
- ByteArrayinputStream与ByteArrayOutputStream,printStream
- Python按位异或运算符^应用案例一则:查找只出现一次的数字