码迷，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.         <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.       
  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.                 <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.       
  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.                 <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>  

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

标签：

原文地址：http://www.cnblogs.com/itxdl/p/5972541.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！