整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5教程从入门到精通,随堂笔记(一)HTML5框架结构

TML5从入门到精通,兄弟连京修随堂笔记(一)HTML的框架结构,每日都有新内容,订阅走一波

一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)。也就是将一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件。

框架页使用了表格的方式组合,可以分为数行与数列。

框架的优点

重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,增加了网页下载速度)。

方便制作导航栏。

框架的缺点

会产生很多页面,不容易管理。

不容易打印。

浏览器的后退按钮无效。

代码复杂,无法被一些搜索引擎索引到。

多数小型的移动设备(PDA 手机)无法完全显示框架。

多框架的页面会增加服务器的http请求。

由于上面诸多缺点,因此不符合标准网页设计的理念.已被标准网页设计抛弃

HTML框架标签

<frameset>标签 -- 代替body标签定义了框架页,并且定义了框架将分为多少行与多少列。常用属性如下:

cols -- 定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%

rows -- 定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%

border -- 定义frame定义的框架页的边框(单位像素),使用css实现

frameborder -- 定义框架页是否边框(此属性应写在frame标签内部,不应在此出现)

framespacing -- 定义框架页之间间隔的距离,使用css实现

<noframes>标签

可为那些不支持框架的浏览器显示文本,和<body>组合使用

<iframe>标签

创建一个包含另外一个文档的内联框架,iframe标签内的内容可以做为浏览器不支持iframe标签时显示 。

frame标签 -- 定义frameset标签中每个框架页的内容

frame标签是单独出现的,<frame />

常用属性:

frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1

1 -- 在每个页面之间都显示边框

0 -- 不显示边框

name -- 在一个框架页链接到另一框架页时使用(另一个框架页可以使用target定义链接页)

noresize -- 定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)

scrolling -- 定义是否有滚动条,取值为(yes|no|auto),缺省值为auto

yes -- 显示滚动条

no -- 不显示滚动条

auto -- 当需要时再显示滚动条

src -- 定义了内容页URL

border – 设置边框粗细

HTML框架示例

<html> <!-- 网页开始标记 -->

<head>

<title>使用框架定义后台管理平台模型</title>

</head> <!-- 设置网页标题 -->

<frameset rows="80,*" frameborder="1" border="5"> <!-- 划分两行 -->

<frame src="top.html" name="top" scrolling="no" noresize/> <!-- 顶部大类窗体 -->

<frameset cols="200, *"> <!-- 划分左右两列 -->

<frame src="menu.html" name="menu" scrolling="no" noresize/>

<!-- 左边菜单窗体 -->

<frame src="main.html" name="main" noresize />

<!-- 右边内容窗体 -->

</frameset> <!-- 内层框架结束 -->

<noframes>

<body><p>您的浏览器不支持框架,请升级浏览器</p></body>

</noframes>

</frameset> <!-- 外层框架结束 -->

</html>

这之前,首先给大家说声抱歉,因为一些私事,所以头条号断更了3天,再次给大家表达歉意。

html5

  1. xhtml文档是html文档向html5过渡的一个版本,html5基本遵循xhtml规范文档要求的。我们先看一下XHTML1.0。

    先指定一下名字空间

实际用处不大,所有的文档名字空间值都是一样(http://www.w3.org/1999/xhtm)

再看一下:

xml声明文档类型

以上文档结构感觉比较复杂,没有html5文档简单,看下图html5文档结构:

html5文档结构

再接下来大家可以看一看,比较详尽的html5文档结构:

html5文档结构 (与下图链接)

html5文档结构 (与上图链接,与下图链接)

以上是完整的html5文档结构

当然,最简单的就是<!DOCTYPE HTML> 声明一下,其他的都可以不要,也是html5文档

最简单一句话就够了,大小写也随意,都可以

跟一般的html文档相比,简短得很多,下图:

html5声明和html声明

以上内容就是html5文档结构,大家可以熟悉看一看,在此再次表达歉意,也违背了这个标题,抱歉!

联网的迅速发展,软件行业成了更多年轻人的就业选择。HTML5简单易学门槛低,是Web时代前端开发超好用的工具。而HTML5开发人员的就业薪资也远远高于其他行业。

资料显示,初级HTML5开发人员的平均薪资在8K-10K左右,拥有一定工作经验的人薪资普遍达到15K-20K。如此广阔的前景当然吸引了无数专业或非专业人士的加入。HTML5用途范围广,下面千锋广州小编就来给大家分享常见的HTML5框架。

1、Siimpler

Siimpler 是个简单的 HTML 开发框架,他可以通过选择你自己喜欢的部分,来帮助你迅速又简单地创建 HTML5 开发结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 Web 项目。

2、Ionic

Ionic 是个神奇的框架和强大前端开源系统,使用先进的Web技术,比如CSS、HTML 和 JS 来创建令人惊叹的手机应用。

3、Foundation

Foundation 是世界上精妙的前端响应框架,同时,它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口,设置了许多关键特性。

4、Enyo

Enyo是一个开源的 Jaa 框架,该框架能够让你创建顶级的 HTML5 应用程序,该应用程序能够运行在各种各样的电子设备上,比如说手机、台式机、笔记本、电视以及Web应用。

5、LimeJS

针对于所有的新的桌面浏览器和触屏设备,LimeJS 对于有用户经验的游戏开发者而言是教好的和较强大的开发框架。

6、Bootstrap

Bootstrap能让所有开发者都能迅速上手、所有设备都可以适配、所有项目都适用。此外,bootstrap的官网也有很多教程提供。

7、juery UI

juery UI 主要分为交互、微件和效果库3个部分,主打代码开源,操作继承了juery 的简单特性,兼容各主流桌面浏览器。前端HTML5是当下很多企业都会用到的软件开发,HTML5是移动互联网前端的主流开发语言,目前还没有任何一种前端开发技术能够取代HTML5。因此,无论是PC端还是APP端的应用,前端样式都离不开HTML5.

从手机与电脑上网的使用率来看,从事HTML5或者Web相关的开发工作,就业前景还是比较可观的。而且,现在的网站开发都往移动设备上转移,所以HTML5或者Web前端是众望所归。

这7个框架,你都会用吗?