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

最新推荐文章于 2021-06-03 14:35:49 发布
最新推荐文章于 2021-06-03 14:35:49 发布
阅读量2.3k 收藏 1
点赞数
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jdfkldjlkjdl/article/details/40154989
版权

一、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的基本结构

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

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


2、远程访问

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

五、html中的符号实体


六、图片显示及链接

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


  1. <html>  
  2.     <head>  
  3.         <title>html结构</title>  
  4.     </head>  
  5.     <body>  
  6.         <img src="https://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>  


七、显示表格

  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标签)

  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

  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

  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

  1. <body bgcolor="#F2F2F2">  
  2.     <img src="https://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>  

AndroidDev2022
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP开发实战1200例源码
09-22
实例182 表单文本输入的移动选择 219 实例183 通过下拉列表选择头像 220 3.5 CSS+DIV页面布局 222 实例184 应用CSS+DIV实现无边框窗口 222 实例185 设置表格样式 224 实例186 设置图片的样式 225 实例187 滚动条样式...
前端针对不同技术的常用UI框架和图表
PrimaryColor
07-21 1050
Element一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。基于Vue.js3的企业级UI组件库和前端解决方案，为数万开发者服务。Vant轻量、可靠的移动端Vue组件库。
vue常用开发ui框架（app，后台管理系统,移动端）及插件
逍遥的博客
08-17 2479
一、uni-app (app混合开发) uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架，开发者编写一套代码，可编译到的iOS，安卓，H5，小程序等多个 平台。 官网：uni-app 二、vue-cli3+cordova (app混合开发) 网址：https://www.jianshu.com/p/543a1da430c2 三、element-ui (后台管理系统) 网址：http://element....
移动端html页面显示图表,HTML5移动端数据图表组件调研
weixin_29746595的博客
06-03 1283
1.charts.js技术：基于HTML5 canvas类型：6种图表类型(折线图，条形图，雷达图，饼图，柱状图和极地区域区)量级：独立包，不依赖第三方 JavaScript 库，小于 5KB大小：Chart.min.js-50.201 kb特性：颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫兼容：支持canvas的所有现代浏览器和大部分手机浏览器，自动针对retina屏幕...
android最新图表框架,好用漂亮的Android 表格框架
weixin_39718890的博客
05-25 1360
SmartTableandroid自动生成表格框架功能介绍快速配置自动生成表格；自动计算表格宽高；表格列标题组合；表格固定左序列、顶部序列、第一行、列标题、统计行；自动统计，排序(自定义统计规则)；表格图文、序列号、列标题格式化；表格各组成背景、文字、网格、padding等配置；表格批注；表格内容、列标题点击事件；缩放模式和滚动模式；注解模式；内容多行显示；分页模式；首尾动态添加数据;丰富的格式化...
移动端表格组件
weixin_34248023的博客
11-22 1万+
响应式Table表格插件——Tabella.js 插件 http://sc.chinaz.com/info/151222112540.htm 插件名称：Tabella.js演示地址：http://iliketomatoes.github.io/tabellajs/下载地址：Github下载页 （含使用教程）   ---------------------------------------...
移动端响应式框架
08-26
ipad 移动端 web app htm5 移动端 响应式框架
vue编写的table
12-03
vue开发的前端table示范案例，主要使用了vue.js和Element UI
轻量级web图表js框架
08-19
这是一个简单 面向对象 为设计者和开发者准备的图表绘制工具库 1 基于HTML5 canvas技术 支持所有现代浏览器 并且针对IE7 8提供了降级替代方案 2 不依赖任何外部工具库 轻量级（压缩之后仅有4 5k） 并且提供了加载外部参数的方法 3 帮你用不同的方式让你的数据变得可视化 每种类型的图表都有动画效果 并且看上去非常棒 即便是在retina屏幕上 4 完整的中文API文档 中文 ">这是一个简单 面向对象 为设计者和开发者准备的图表绘制工具库 1 基于HTML5 canvas技术 支持所有现代浏览器 并且针对IE7 8提供了降级替代方案 2 不依赖任何外部工具库 轻量级（压缩之后仅有4 5k） 并且提供了加载外部 [更多]
前端UI框架表格强大
12-16
前端UI框架表格强大JQWIDGETS.主要用于HTML5上的使用哦。jquery2.03以上.
Datatable表格展示前端插件
07-26
主要为数据的表格展示，包括分页功能，数据为空的提示等，搜索等
HTML5移动端数据图表组件调研
热门推荐
水煮鱼的博客
09-07 2万+
charts.js 技术：基于HTML5 canvas 文档：英文（http://www.chartjs.org）、中文（http://www.bootcss.com/p/chart.js） 类型：6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区） 量级：独立包，不依赖第三方 JavaScript 库，小于 5KB 大小：Chart.min.js-50.
好用漂亮的Android 表格框架
weixin_33901926的博客
01-11 3042
Android 表格使用的频率并不高，之前花了心思写了SmartTable表格，觉得android移动端表格就应该是这个样子的，地址github.com/huangyanbin…,一直放在github上无人问津，最近有同学说蛮好用的，为啥没更新下去。便想写这边文章推销推销。也算值了！我按功能点一一介绍下： 附上其他文章： 好用漂亮的Android 表格框架2 好用漂亮的Android 表...
一个移动端炫酷的图表库..zip
09-25
一个移动端炫酷的图表库..zip,一个优雅，互动和灵活的移动图表库。
HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转
最新发布
05-24
Canvas是HTML5新增的一个用于绘制图形的标签，可以通过JavaScript来控制Canvas进行图形的绘制。在进行Canvas绘制时，可以通过调整画布的位置、大小和旋转角度等属性，来控制绘制出来的图形的位置和形态。 下面我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值