【web前端开发】浏览器原生API,DOM,Javascript,HTML5,CSS 代码运行实例参考 推荐 原创 shayi1983end 2014-08-20 17:43:48 ©著作权 文章标签 dom firebug 文章分类 HTML5 移动开发 ©著作权归作者所有:来自51CTO博客作者shayi1983end的原创作品,请联系作者获取转载授权,否则将追究法律责任 前言本篇博文的目的是搜集并汇总一些讲述 web 前端开发技术的书籍中的实例代码,并验证记录其在不同 web 浏览器中的运行结果,以供日后编程参考。为避免版权问题,所有涉及到的代码片段,都会给出相应的出处和至少在3个浏览器(这里指的是:Microsoft Internet Explorer,Mozilla Firefox,Google Chrome )中的运行结果。对于比较难以理解的代码片段,会加入自己的思考和总结。另外给出相关作者的联系 e-mail,可以向作者提问,讨论。 《准备工具》gedit 文本编辑器 用于 linux 环境下的 HTML 文档编写。firefox 浏览器 用于运行 HTML 文档并查看输出结果。firefox 浏览器的 firebug 插件用于查看 HTML 文档的 DOM 树及其节点,调试 Javascript 代码(后面详述),输出CSS样式等等。IE 浏览器 用于运行 HTML 文档并查看输出结果。chrome 浏览器 用于运行 HTML 文档并查看输出结果。下面是测试环境使用的 firefox,firebug 版本,以及官方下载地址:注意,对于部分涉及 HTML5 新特性的代码,建议更新到与下面一致或者更高的版本,才能正确运行或显示预期的输出结果。对于 IE 以及 chrome 浏览器,要查看 Javascript 的运行结果,可以将代码作为 document.write() 的参数调用,这将在浏览器内部窗口为用户显示结果。document.write()也可以用于同步创建,添加节点到 DOM 树中。需要注意的是,write()方法会在浏览器加载页面时执行,它会阻塞(中断)对 HTML 文档的解析,优先将传递给它的参数或表达式运行结果输出到页面上,然后再接续解析 HTML 文档。对于 firefox 浏览器,在该 html 文档上右击,打开方式选择以 firefox 打开;前面如果已经正确安装 firebug 插件,并且重启 firefox,那么在打开该文档的时刻也会启动 firebug ,建议将其调整在独立的窗口中运行 firebug ,避免在 firefox 主界面下方显示,不便于阅读和调试代码。在 firebug 的“控制台”选项卡中的底部,键入 console.log() ,将要测试运行的代码块作为它的参数调用,回车运行,即可在上面窗口得到输出结果,包括出错提示信息,如下图所示:这是一种快速实时调试 Javascript 代码的方法,并且经测试无误后可以立即集成,部署到你的产品现有代码中,建议熟练掌握。注意,在 firebug 的控制台选项卡底部的命令行编辑器中,使用doucument.write()来输出的运行结果,不会显示在控制台上,相反,它会输出到HTML 页面上。只有使用 firebug 内部支持的 console.log,才能直接在控制台上输出: 由此可知,console.log()与doument.write()在输出的位置上不同,而作用是一样的:例如后者可用以 "string",的双引号字符串形式作为其参数输出,前者同样可以,只不过是输出到控制台窗口罢了。还有就是,在 firebug 命令行编辑器中可以直接输入并运行 Javascript,运行结果就会反映到 HTML 页面上。不需要像传统的浏览器测试法那样,还要加上 <script> 标签,如下所示: *****这里使用最广泛的 gedit 文本编辑器来编写 HTML 文档,下面给出一个最典型的HTML 文档代码框架,后续的编码工作都是建立在此基础之上;使用 HTML5 特性的框架版本会另外给出。注意,对于 HTML / DOM 节点,元素,标签等内容,使用 <!-- --> 符号对来进行注释;对于 Javascript 脚本,使用类似编译型高级语言中的 /* */ , // 符号对来进行注释。*****单击 firebug 主界面的 consloe(控制台) 标签页,在下拉的菜单中,可以选取用于进行显示警告,错误,以及信息的类型。例如显示和 Javascript 语法相关的错误,警告,信息,以及显示和 HTML 语法相关的错误,警告,信息。当加载一个存在上述语法错误的页面,文档时,就会在 consloe 中显示这些信息,开发人员利用这里给出的提示,就能快速定位并修改已存在的错误。注意,一般来讲,应该确认控制台下面的“保持”子标签处于非按下状态,这样,每次加载一个页面时,上次已有的提示信息都将被更新,而不是“增加”在上次提示信息的下面。这对重复修改,调试一个页面相当有效:已纠正的语法错误不会输出从而影响到程序员阅读提示信息,如下所示:*****在Linux平台下,一般我们可以用 firefox 打开本地的任何 html 测试文档,然后启动 firebug 来调试,方法是在浏览器地址栏以 file:/// 协议开头,后接文档所在的绝对路径。在浏览器地址栏右侧,单击灰色状态的昆虫图标,即可在当前文档启动 firebug,如下所示:如果是在 windows 平台下,可以使用 google Chrome 浏览器加载本地的 html 测试页面,但是在启动 Firebug Lite for Google Chrome (用于 chrome 的 firebug ,称为 firebug Lite,一般情况下, firebug 仅支持 firefox 浏览器,要在其它类型的浏览器中使用 firebug 插件,则需要下载相应版本的 firebug Lite) 的时候,firebug Lite 会给出一个错误信息提示框,大意是说,因为 chrome 自身的某些 bug(这些 bug不能通过更新,升级 chrome 到最新版本来解决),以及 chrome 的 Javascript 安全策略,限制了firebug Lite 进行 XHR 调用,因此不能以 file:/// 协议来打开本地 html 文档。但是 firebug Lite 也给出了相应的解决方案,最简单的做法就是在本地运行一个 web server,例如 apache,然后用 chrome 浏览器来访问这个被 apache “托管”的 html 页面,就可以启动 firebug Lite 进行调试了,如下所示,注意这里的托管含义和常用的不同,仅是比喻:如果各位的开发测试环境是 windows / chrome 的组合 ,启动浏览器,将地址栏指向:http://www.apache.org/dist/httpd/binaries/win32/即可下载并安装 apache 的二进制可执行文件,如下所示:下面用 firebug 对一个简单的 HTML 源代码文件来进行分析与调试,该源文件虽然简单,但是其中包含内置的 Javascript ,以及 CSS 样式表,还有开发中最常用到的 HTML 标签(对应的DOM 节点),因此可以充分发挥firebug 强大的分析与调试能力,该文档的原始出处为:https://www.youtube.com/watch?v=VHOg_Ks-a5E<!DOCTYPE html><html lang="en"> <head> <title>HTML firebug test</title> <script type="text/Javascript"> function displayhello() { // you can use mutiple write() ststments to output a single line of XHTML text document.write("Hellow Javascript --> this is was printed from function displayhello()<br / ><br />"); var thisname = "" thisname = prompt("please input your name:", "shayi"); document.writeln(thisname + " ,<br />this was also printed from function displayhello(),<br />"); } </script> <style type="text/css"> body { background-color: #AFEFEF; /* use a light grey background */ color: #117755; /* dark blue test */ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 110%; } h1 { background-color: #CECECE /* use dark gray */ ;color: #000099 ;border-top: 10px solid #FACABD /* thin blue broder on top */ ;border-bottom: 5px solid #000099 /* thin blue broder on bottom */ ;padding: 10px ; } </style> </head> <body> <h1>Using Firebug to debugging Javascript and coding errors</h1> <p>shayi2007<br /> <script type="text/Javascript"> document.write("this was printed from the html <body> element" + "<br / ><br />"); displayhello(); /*console.log("shayi")*/ </script> </body></html>为了方便测试,源码部分有几处略做更动,但并不影响分析与调试工作。通过阅读源码,可以了解到,在该 HTML 文档的头部,也就是以 <head> 标签定义的部分,将该页面的标题以<title> 标签进行定义,然后通过 <script> 标签引入 Javascript,在其中自定义一个叫做 displayhello() 的函数,该函数首先打印一串文字,然后调用浏览器实现的 Javascript 内置函数 API,也就是 prompt(),用以弹出一个提示用户输入信息的对话框,并且将获取的字符串保存在一个变量中,最后向页面上输出这个变量的内容,以及后面自定义的字符串。接着,定义一个内置的 CSS 样式表,主要是用于设定 HTML 文档体,也就是以 <body> 标签起始的部分,它的背景颜色,字体颜色,字体类型,大小等。对于 <body> 标签内部的 <h1> 标签,也就是文档体的主要段落标题部分,使用独立的 CSS 样式定义,注意,它会覆盖对 <body> 部分的样式定义。在文档体中,以 <h1> 标签来突出显示主题名称,这个主题名称将套用前面在文档头中为 <h1> 定义的样式。可以看到,在文档体中也可以引入 Javascript,向页面输出信息,并且调用在文档头部分定义的函数。下面,我们刻意在该文档源码的 CSS 部分以及 Javascript 部分制造编程的语法错误,借此来测试 firebug 的错误分析与处理能力:对于 linux / firefox 开发环境,我们只需以 firefox 打开存储在本地的 HTML 文档,然后启动 firebug 即可:参考上面的 HTML 源码,假设我们在第30行的 background-color 属性后面,遗漏了冒号(:) ,然后让浏览器重新加载页面, 此时 firebug 捕捉到的 CSS 语法错误,如下所示:注意,参考上面源码的第31~34行,可以发现,我故意将分号(;)写在了每个 CSS 属性的前面。常规的做法,应该是在上一条 CSS 属性的结尾部分以分号结束,但这里为何要写在下一条 CSS 属性的前面?其实,这种写法才符合浏览器解析 CSS 样式的标准逻辑与流程(至少 firefox 是如此),我们可以通过刻意遗漏一个其中的分号来验证,例如,我们将源码中第31行最前面的分号丢失,然后用 firefox 重新加载 HTML 文档,查看 firebug 捕捉到的错误提示信息,如下:上面的例子也说明,有时通过人为制造错误,并且观察 firebug 的输出,可以学习到浏览器进行语法,词法,语义,以及对其它相关资源进行解析的逻辑。从某种意义上而言,这对于前端程序员编写高效率且安全的代码,还是有帮助的。*****参考上面的源码,假设在第15行中,丢失了变量 thisname 与其后面字符串之间的连接运算符(+ 号),这会导致 Javascript 语法错误。并且,由于该错误是出现在函数 displayhello() 的定义中,只要这个函数其中任何部分出现语法错误, firebug 都会将该函数视为“未定义”,导致后面调用该函数时无法执行,程序流程会中断在该函数调用点。下面的截图验证了这部分内容: 赞 收藏 评论 分享 举报 上一篇:【安全运维】linux系统加固(第二部分),经测试可行 下一篇:RedHat / Centos Linux 系统运维与管理实践技巧荟萃,持续更新 提问和评论都可以,用心的回复会被更多人看到 评论 发布评论 全部评论 () 最热 最新 相关文章 java代码实现清空浏览器缓存 实际上,Java代码并不能直接清空浏览器的缓存,因为浏览器的缓存是由浏览器本身管理的,并且受到浏览器安全策略的限制。Javascript可以在用户同意的情况下清除浏览器的某些本地存储数据,如Cookies、LocalStorage、SessionStorage等,但它不能直接访问或清除浏览器缓存文件。 浏览器缓存通常位于操作系统层面,Javascript无法直接访问这些缓存文件,因为操作 缓存 浏览器缓存 清除缓存 前端三剑客-HTML,CSS,JS(侧重HTML,CSS) 一、什么是HTML、CSS1.HTMLHTML(HyperText Markup Language):超文本标记语言超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。标记语言:由标签构成的语言HTML标签都是预定好的。HTML代码直接在浏览器中运行,HTML标签由浏览器解析HTML负责网页的基本结构(页面元素和内容),网页的骨架2.CSSCSS(Casca 选择器 html HTML 前端歌谣-第陆拾陆课-html+css+js实现计算器效果 前言我是歌谣 微信公众号关注前端小歌谣一起学习前端知识 今天继续给大家讲解计算器的讲解index.css/* Basic reset */* { margin: 0; padding: 0; box-sizing: border-box; /* Better text styling */ font: bold 14px Arial, sans-serif;} /* Fina html sed css CSS浏览器前缀,HTML5新增标签 1.浏览器样式前缀为了让CSS3样式兼容,需要加上例如:-ms-兼容IE浏览器-moz兼容Firefox-webkit-兼容chrome和safaridiv{-ms-transform:rotate(30deg);...........}2.自动添加浏览器前缀目前的状态是,有些CSS3属性需要加前缀,有些不需要加,有些只需加部分,可以用插件,安装autoprefixer3.HTML5新增标签(1) CSS3 HTML5 新增 实践html5实例–简单图片浏览器 实践html5实例–简单图片浏览器 浏览器 的 阅读全文 HTML5 浏览器支持 现代的浏览器都支持 HTML5。 此外,所有浏览器,包括旧的 ide 数据 html5 HTML5浏览器通知 ## HTML5浏览器通知随着互联网的发展,网页应用越来越普及。为了提升用户体验,HTML5引入了浏览器通知功能,使得网页应用可以像手机应用一样发送通知消息,无需用户打开网页即可获取重要信息。本文将介绍HTML5浏览器通知的基本概念,并提供代码示例帮助读者快速上手。### 什么是HTML5浏览器通知?HTML5浏览器通知是一种在用户当前浏览器窗口外显示的消息通知。通过使用Notific HTML5 Javascript 代码示例 html5 浏览器 html5浏览器兼容 浏览器的HTML5兼容性不统一5.浏览器的HTML5兼容性不统一若玩家采用较新颖的浏览器(注:例如Chrome或Firefox),它们就能够顺利体验你的HTML5游戏。但那些依然采用Internet Explorer 6或旧版Safari、Opera的玩家呢?若用户没有更新他们的浏览器,他们就无法访问所有HTML5内容。有时,这些浏览器的兼容性问题会消除平台的最大优点:无处不在。若用户依然采用陈旧 html5 浏览器 html5的兼容性怎么样 HTML5 Chrome 开发者 html5浏览器插件 Javascript浏览器插件 学习目录前言展示一、找到书签并打开书签二、代码格式三、代码展示1. 不使用匿名函数2. 使用匿名函数四、用书签运行js的优点和缺点五、小试牛刀(爬虫爬取网页数据) 前言本文用chrome浏览器展示,所以先展示如何打开标签页,然后再展示代码小格式,最后成功跑起来 同理其他浏览器都可以展示一、找到书签并打开书签二、代码格式1.要以Javascript:开头,后面再写代码。 2.建议使用匿名函数自调用 html5浏览器插件 Javascript 爬虫 前端 开发语言 html5 浏览器 浏览器支持html5 6月27日消息,腾讯举办的手机QQ浏览器HTML5创新大赛沙龙分享会第二场在北京举行,HTML5开发者、技术专家等众多行业人士将齐聚一堂共同探讨HTML5技术发展趋势以及WebApp未来发展之路。而且腾讯还在会上发布了《手机QQ浏览器与WebApp开发者共赢白皮书》(以下简称《WebApp白皮书》),展示了手机QQ浏览器在推动HTML5技术成熟,支持HTML5开发者方面所做的努力,同时表达了与开发 开发者 HTML5 开放平台 html5浏览器存储数据 前端浏览器存储 在前端中存储数据大致有三种模式: 1:cookie:但是cookie的空间只有4k,所以很少使用;2:sessionStorage: 是在本地存储数据,其空间有最多可以达到5M,但是生命周期是浏览器,如果浏览器没有关闭,哪怕是新开标签,数据还存在,只有浏览器关闭后数据才会删除。3:localStorage:也是在本地存储,和sessonStorage类似,存储空间也大致相同,但是也有区 html5浏览器存储数据 js 数据 存储数据 生命周期 html5 支持css3 html5浏览器 HTML5介绍HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然在技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性网站开发技术人员是必须要有所了解的。兼容支持Html5的浏览器包括Firefox(火狐 html5 支持css3 表单 字段 控件 浏览器html5协议 html 浏览器 一、网页和浏览器1、认识网页网页主要由文字,图像和超链接等元素构成。当然,除了这些元素,网页还可以包含音频,视频等。网页是程序员写的代码经过浏览器的渲染,呈现在用户眼前的界面。网页三剑客:HTML:超文本标记语言【结构】CSS:层叠样式表【样式】Javascript:js【交互】2、浏览器常用浏览器浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safar 浏览器html5协议 html HTML css 浏览器模式html5 浏览器 html 关于html中的“浏览器”HTML是W3C组织定义的语言标准:HTML是用于描述网页结构的语言。 文件的扩展 是.htm 或 .html结尾 而浏览器是负责运行你所写的html和css。浏览器的组成浏览器的组成分为外壳(shell)与内核(core)浏览器内核是浏览器的核心,是浏览器最重要的部分。也称“渲染引擎”,用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格 浏览器模式html5 内核 Chrome 浏览器内核 html html5前端开发css3 html+css+Javascript前端开发 近些时日一直忙于项目,程序安排比较紧张,没有总结,今日完成了一个阶段,继续总结。因为现在基本实现了js,css以及html的完全分离,html搭建结构,css渲染页面,js实现动态效果。同时为了个人开发方便,在本项目中对某些函数进行抽象,建立本项目的基于jquery的js文件,从而大大节省了工作量,实现基础文件修改,本网站所有调用函数的页面全部更改。到了此阶段,前端开发对于我来说,相比以往有了事半 html5前端开发css3 css html 复用 html5前端开发环境简介 html5+css3 web前端开发 文章目录HTML认知网页的基本组成和本质HTML初始概念HTML标签学习HTML基础列表表格表单语义化标签字符实体CSS基础基础认知选择器文字字体Emmet语法CSS进阶复合选择器后代选择器子代选择器并集选择器交集选择器伪类选择器背景的相关属性元素的显示模式CSS特性 HTML认知网页的基本组成和本质网页是由文字,图片,音频,视频,超链接组成的,是网站中的一页。后缀文件是.html或者.htm网 html5前端开发环境简介 前端 html5 css3 选择器 ie浏览器 兼容 html5 前端ie浏览器兼容 做前端,总会涉及到浏览器兼容的问题,之所以存在浏览器兼容的问题,是因为各个浏览器的内核不同,相对应的同一套代码,不同的浏览器解析后,所呈现的页面效果也会存在一定的差异。一 浏览器内核差异 我们先来了解一下各个浏览器的内核(渲染引擎): Trident(IE内核): IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0)、 ie浏览器 兼容 html5 ide css 解决方案 html5最高的浏览器 html5哪些浏览器支持 目前支持CSS3和HTML5的浏览器变得越来越多,甚至包括最新版的IE。但是需要指出的是,即使同一个浏览器的同一个版本,在Mac和Windows两个平台,它们对CSS3和HTML5的支持也并不一致。在此,借助小编的平台跟大家分享一份Chrome、Safari、Firefox、Opera、IE等5大浏览器,在Mac和Windows两个平台,对CSS3和HTML5各种功能的详细支持情况清单。1、CSS html5最高的浏览器 mac装html5 HTML5 Chrome 表单 html5浏览器 html5浏览器兼容性问题 为什么会有兼容问题?由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。以下为主流浏览器的内核:我们诚然应该追求最新的浏览器使用最新的技术,但是渐进增强,向后兼容的思想一定要有:1.HTML兼容性: HTML相关问题比较容易处理,无非是高版本 html5浏览器 Javascript 人工智能 ViewUI 解决方案 css html5 浏览器宽高 html宽度设置 做网页的时候,经常会碰到表格宽度对不齐的问题。详细地看了html中表格标签table的高度和宽度设置的细节,现总结如下: 1、table中的width和height设置及其作用:table中设置的height其实是设置个最小值,也就是当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,当表格中 css html5 浏览器宽高 css 最小值 html