HTML5移动开发之路（11）——链接，图片，表格，框架

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（11）——链接，图片，表格，框架

一、HTML是什么？

HTML(hypertext mark-uplanguage)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字、图像、视频、声音…

HTML只能做静态网页

二、HTML发展历史

html之父-Tim Berners-Lee
蒂姆·伯纳斯－李（Tim Berners-Lee）1955年6月8日出生于英国伦敦

关于详细请看：http://blog.csdn.net/chinayaosir/article/details/2982025

三、W3C介绍

world wide web consortium 中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立，创立者是html之父Tim Berners-Lee。

W3C组织是网络标准制定的一个非盈利组织，像HTML、XHTML、CSS、XML的标准都是由W3C来定制。

一流公司做标准

二流公司做服务

三流公司做产品

四流公司做项目

四、HTML的运行

html的基本结构

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <body>
  6. <!--注释-->
  7. </body>
  8. </html>

1、本地运行（直接用浏览器打开）

2、远程访问

安装例如tomcat服务器后远程访问。

五、html中的符号实体

六、图片显示及链接

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <body>
  6. <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>
  7. </body>
  8. </html>

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <body>
  6. <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>
  7. <a href="http://blog.csdn.net/dawanganban">
  8. <img src="http://avatar.csdn.net/D/F/D/1_lxq_xsyu.jpg" alt="来点我啊" title="点我啊" width="150px"/>
  9. </a>
  10. </body>
  11. </html>

七、显示表格

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <body>
  6. <!--宽度可以用像素，也可以用百分比-->
  7. <table border="1px" width="300px">
  8. <tr align="center" bgcolor="yellow">
  9. <td>1</td><td>2</td>
  10. </tr>
  11. <tr align="center">
  12. <td>3</td><td>4</td>
  13. </tr>
  14. <tr align="center">
  15. <td>5</td><td>6</td>
  16. </tr>
  17. <table>
  18. <!--默认文字靠左-->
  19. </body>
  20. </html>

border：边框的宽度，默认值是0

width=”60%" ：表格的宽度，占父容器的60%

cellpadding="10"  ：表示内容和单元格的距离

cellspacing="10"  ：表示单元格和其他单元格之间的距离

表格的对齐：

align属性：水平对齐

valign属性：垂直对齐

不规则表格：

colspan属性：合并水平单元格

rowspan属性：合并竖直单元格

八、框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档

很难打印整张页面

框架结构标签（<frameset>）
  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

主页面.html (注意使用框架的时候，里面不能用body标签)

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <frameset rows="150,*">
  6. <frame name="frame0" src="title.html" frameborder="0">
  7. <frameset cols="20%,*">
  8. <frame name="frame1" src="a.html"  noresize frameborder="0"/>
  9. <frame name="frame2" src="b.html" frameborder="0"/>
  10. </frameset>
  11. </frameset>
  12. </html>

noresize=“noresize"的作用是不能拉伸每个frame

frameborder="0"将边框宽度设为0

title.html

[html] view plain copy

print?

  1. <body  bgcolor="#FFA54F">
  2. <div id="container">
  3. <div id="header">
  4. <div class="header">
  5. <div id="blog_title">
  6. <h1>
  7. <a href="http://blog.csdn.net/dawanganban">大碗干拌</a></h1>
  8. <h2>兴趣是坚持的理由，网络是最牛的老师，博客是最好的笔记，交流是创新的源头</h2>
  9. <div class="clear">
  10. </div>
  11. </div>
  12. <div class="clear">
  13. </div>
  14. </div>
  15. </div>
  16. </body>

a.html

[html] view plain copy

print?

  1. <body bgcolor="pink">
  2. <!--target表示我们点击后，目标指向谁-->
  3. <a href="b.html" target="frame2">返回主页>></a><br><br/><br/>
  4. <a href="http://blog.csdn.net/column/details/android-growup.html" target="frame2">Android菜鸟的成长笔记</a><br/>
  5. <a href="http://blog.csdn.net/column/details/dawanganban-html5.html" target="frame2">小强的HTML5移动开发之路</a><br/>
  6. <a href="http://blog.csdn.net/column/details/dawanganban-linux-n.html" target="frame2">鸟哥的Linux私房菜笔记</a><br/>
  7. </body>

b.html

[html] view plain copy

print?

  1. <body bgcolor="#F2F2F2">
  2. <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>
  3. <a href="http://blog.csdn.net/dawanganban">
  4. <img src="http://avatar.csdn.net/D/F/D/1_lxq_xsyu.jpg" alt="来点我啊" title="点我啊" width="150px"/>
  5. </a>
  6. </body>

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（11）——链接，图片，表格，框架

一、HTML是什么？

HTML(hypertext mark-uplanguage)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字、图像、视频、声音…

HTML只能做静态网页

二、HTML发展历史

html之父-Tim Berners-Lee
蒂姆·伯纳斯－李（Tim Berners-Lee）1955年6月8日出生于英国伦敦

关于详细请看：http://blog.csdn.net/chinayaosir/article/details/2982025

三、W3C介绍

world wide web consortium 中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立，创立者是html之父Tim Berners-Lee。

W3C组织是网络标准制定的一个非盈利组织，像HTML、XHTML、CSS、XML的标准都是由W3C来定制。

一流公司做标准

二流公司做服务

三流公司做产品

四流公司做项目

四、HTML的运行

html的基本结构

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <body>
  6. <!--注释-->
  7. </body>
  8. </html>

1、本地运行（直接用浏览器打开）

2、远程访问

安装例如tomcat服务器后远程访问。

五、html中的符号实体

六、图片显示及链接

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <body>
  6. <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>
  7. </body>
  8. </html>

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <body>
  6. <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>
  7. <a href="http://blog.csdn.net/dawanganban">
  8. <img src="http://avatar.csdn.net/D/F/D/1_lxq_xsyu.jpg" alt="来点我啊" title="点我啊" width="150px"/>
  9. </a>
  10. </body>
  11. </html>

七、显示表格

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <body>
  6. <!--宽度可以用像素，也可以用百分比-->
  7. <table border="1px" width="300px">
  8. <tr align="center" bgcolor="yellow">
  9. <td>1</td><td>2</td>
  10. </tr>
  11. <tr align="center">
  12. <td>3</td><td>4</td>
  13. </tr>
  14. <tr align="center">
  15. <td>5</td><td>6</td>
  16. </tr>
  17. <table>
  18. <!--默认文字靠左-->
  19. </body>
  20. </html>

border：边框的宽度，默认值是0

width=”60%" ：表格的宽度，占父容器的60%

cellpadding="10"  ：表示内容和单元格的距离

cellspacing="10"  ：表示单元格和其他单元格之间的距离

表格的对齐：

align属性：水平对齐

valign属性：垂直对齐

不规则表格：

colspan属性：合并水平单元格

rowspan属性：合并竖直单元格

八、框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档

很难打印整张页面

框架结构标签（<frameset>）
  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

主页面.html (注意使用框架的时候，里面不能用body标签)

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>html结构</title>
  4. </head>
  5. <frameset rows="150,*">
  6. <frame name="frame0" src="title.html" frameborder="0">
  7. <frameset cols="20%,*">
  8. <frame name="frame1" src="a.html"  noresize frameborder="0"/>
  9. <frame name="frame2" src="b.html" frameborder="0"/>
  10. </frameset>
  11. </frameset>
  12. </html>

noresize=“noresize"的作用是不能拉伸每个frame

frameborder="0"将边框宽度设为0

title.html

[html] view plain copy

print?

  1. <body  bgcolor="#FFA54F">
  2. <div id="container">
  3. <div id="header">
  4. <div class="header">
  5. <div id="blog_title">
  6. <h1>
  7. <a href="http://blog.csdn.net/dawanganban">大碗干拌</a></h1>
  8. <h2>兴趣是坚持的理由，网络是最牛的老师，博客是最好的笔记，交流是创新的源头</h2>
  9. <div class="clear">
  10. </div>
  11. </div>
  12. <div class="clear">
  13. </div>
  14. </div>
  15. </div>
  16. </body>

a.html

[html] view plain copy

print?

  1. <body bgcolor="pink">
  2. <!--target表示我们点击后，目标指向谁-->
  3. <a href="b.html" target="frame2">返回主页>></a><br><br/><br/>
  4. <a href="http://blog.csdn.net/column/details/android-growup.html" target="frame2">Android菜鸟的成长笔记</a><br/>
  5. <a href="http://blog.csdn.net/column/details/dawanganban-html5.html" target="frame2">小强的HTML5移动开发之路</a><br/>
  6. <a href="http://blog.csdn.net/column/details/dawanganban-linux-n.html" target="frame2">鸟哥的Linux私房菜笔记</a><br/>
  7. </body>

b.html

[html] view plain copy

print?

  1. <body bgcolor="#F2F2F2">
  2. <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>
  3. <a href="http://blog.csdn.net/dawanganban">
  4. <img src="http://avatar.csdn.net/D/F/D/1_lxq_xsyu.jpg" alt="来点我啊" title="点我啊" width="150px"/>
  5. </a>
  6. </body>
时间： 2024-12-24 11:01:03

HTML5移动开发之路（11）——链接，图片，表格，框架的相关文章

HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(42)--HTML4与HTML5文档结构比较 一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head> </head> <body> <h1>第一章 小强的HTML5移动开发之路</h1> <h2>1.1 HTM

HTML5移动开发之路（26）—— JavaScript回顾1

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(26)-- JavaScript回顾1 很久没有怎么用过JavaScript了,感觉有点生疏,最近在看关于HTML5移动开发方面的资料,有一种直觉告诉我,JavaScript昨天.今天很重要,明天会更重要.现在好多基于JavaScript的框架给我们的开发带来了很大便利,但是要更好的使用这些工具,我们就必须对JavaScript有一个更高的认识,翻开以前的笔记,开始复习吧. 一.JavaScript的作用

HTML5移动开发之路（7）——坦克大战游戏1

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(7)--坦克大战游戏1 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片,在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏,下面我们开始吧 一.用Canvas画出我们的坦克 我们设计的坦克结构如下图所示,如果有的朋友有更好的设计,希望分享和交流一下. 如上图所示,我们的坦克基本上是由三个矩形和一个圆形一个线段组成,每个部件的尺寸进行了标记,单位为px,下面我们用上一篇中

HTML5移动开发之路（28）—— JavaScript回顾3

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(28)-- JavaScript回顾3 一.基本数据类型 number:数字类型 string:字符串 (注意s小写:string是基本类型) boolean:布尔类型   //前三个都有对应的包装类 null:空类型 undefined:未定义类型 测试一: [html] view plain copy print? <html> <!--基本类型测试--> <head> <

小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互 当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（53）——jQueryMobile页面间参数传递

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递 在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的

HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(51)--jquerymobile中改善页面访问速度 在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mob

HTML5移动开发之路（44）——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=