码迷,mamicode.com
首页 > 移动开发 > 详细

HTML5移动开发之路(11)——链接,图片,表格,框架

时间:2016-10-18 11:28:59      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:

本文为 兄弟连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.         <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.       
  13. </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.                 <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. <href="b.html" target="frame2">返回主页>></a><br><br/><br/>  
  4. <href="http://blog.csdn.net/column/details/android-growup.html" target="frame2">Android菜鸟的成长笔记</a><br/>  
  5. <href="http://blog.csdn.net/column/details/dawanganban-html5.html" target="frame2">小强的HTML5移动开发之路</a><br/>  
  6. <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.     <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.         <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.       
  13. </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.                 <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. <href="b.html" target="frame2">返回主页>></a><br><br/><br/>  
  4. <href="http://blog.csdn.net/column/details/android-growup.html" target="frame2">Android菜鸟的成长笔记</a><br/>  
  5. <href="http://blog.csdn.net/column/details/dawanganban-html5.html" target="frame2">小强的HTML5移动开发之路</a><br/>  
  6. <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.     <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>  

HTML5移动开发之路(11)——链接,图片,表格,框架

标签:

原文地址:http://www.cnblogs.com/itxdl/p/5972541.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!