【HTML5与CSS3基础】开发者工具之Console

现在的浏览器往往都会有一个开发者工具用于帮助开发者构建更高效的网站。

开发者工具有一个Console窗口(控制台窗口)用于输出一些调试信息,有了这个工具就总算是可以告别使用alert来调试JavaScript了。而且Console的功能远远不只是输出一下现在运行到哪了这样的简单的信息,它还可以识别不同种类的信息并且提供对应代码的超链接。

开发者工具是通过把一个名为console的对象加载到全局名称空间中,使用这个对象就可以将应用程序内部的工作信息输出到Console控制台。下面是7个console对象的方法,方法功能在注释里介绍:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=gbk" http-equiv="content-type">
    <title>console.log</title>
  </head>
  <body>
    <script>
      console.log("test-log");        //向控制台输出一条信息
      console.debug("test-debug");    //输出信息,并会有一个超链接链接到代码
      console.info("test-info");      //输出一个信息的图标和信息
      console.warn("test-warn");      //输出一个警告的图标和警告信息
      console.error("test-error");    //输出一个错误的图标和错误信息
      console.assert(3<2);            //断言错误会在控制台显示,正确则不会显示
      //console.clear();              //清除控制台信息
    </script>
  </body>
</html>
时间: 2024-11-05 14:39:46

【HTML5与CSS3基础】开发者工具之Console的相关文章

《html5与css3基础教程》(第8版)个人笔记

<html5与css3基础教程(第8版)个人笔记 四至六章 small 行内 短语版权符号:&copy 可任意嵌套,html和html5表示含义不一样 strong 重要 em 强调 html5中 b i figure:图figcaption可以用来添加署名? blockquote中的cite:提供引述文本的位置 很多开发人员避免使用q,而是手动添加引号或字符实体datetime可以用于在web应用之间同步日期和时间 YYYY-M-DDThh:mm:ss或hh:mm.sssUTC全球标准时间

《HTML5和CSS3基础教程》-笔记1

笔记(第一.二章整合) 1,HTML思想: 编写HTML是为网页内容打上能够描述它们的标签.并且,HTML元素描述的是:内容是什么,而非看起来是什么样. 即: a,HTML:用标签去说明网页内容的含义. b,语义化HTML:用最恰当的HTML元素去说明网页内容的含义. c,结构和表现完全分离.网页内容是什么,由HTML说明.网页内容什么样,由CSS说明. 另:为什么语义化很重要? 无障碍访问:搜索引擎优化(网页在搜索引擎的排名会靠前):更容易维护代码和添加样式. 2,网页构造块: 网页可保存为纯

htML+CSS3-》第3阶段:HTML5之CSS3基础与加强 中

HTML+CSS3->第3阶段:HTML5之CSS3基础与加强中 60前端开发基础视频-复合选择器之子元素选择器 子元素选择器,是让css选择器智能选择子辈的元素. 例如:h1>strong{color:red;} 解读为:选择器h1>strong可以解释为"选择作为h1元素子元素的所有strong元素". 61前端开发基础视频-属性选择器 属性选择器 <!DOCTYPE html> <html lang="zh"> <

电子书 html5与css3基础教程第8版.pdf

内容简介 <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面.全新第8版不仅介绍了文本.图像.链接.列表.表格.表单等网页元素,还介绍了如何为网页设计布局.添加动态效果等,另外还涉及调试和发布. <HTML5与CSS3基础教程(第8版)>提供了一个强大的配套网站,上面列出了书中的完整代码示例以及更多优秀实例及进阶参考资料,以

《HTML5与CSS3基础教程》学习笔记 ——补充

在HTML5中,空元素结尾处的空格和斜杠是可选的,但是在XHTML中,必须有斜杠,所以最好每次都把斜杠写上去. disabled和required可以要属性值,也可以不要属性值 1)        有属性值:disabled=” disabled”  required=” required” 2)        无属性值:disabled.required,但是审查元素时是:disabled=””  required=”” 文件命名: 1)        文件名全部使用小写,这样方便访问者访问

Chrome64基础 开发者工具 查看a标签处于:hover时的css代码

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.             browser:Chrome                            os:win7 困境 给最苦 想通过 开发者工具 来调节网页中,鼠标放在超链接上时,超链接的颜色.可问题是,鼠标放上,对应的css代码出现,刚把鼠标移开,css代码就消失了... 解决办法 调出 开发者工具 右键... 完成 原

HTML5和CSS3基础教程(第8版)-读书笔记(2)

第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block). 选择器决定哪些元素受到影响:声明块由一个或多个属性 - 值对(每个属性 -值对构成一条声明,declaration)组成,它们指定应该做什么. 声明块内的每条声明都是一个由冒号隔开.以分号结尾的属性- 值对. 声明的顺序并不重要,除非对相同的属性定义了两次. 在样式规则中可以添加额外的空格.制表

HTML5与CSS3基础(三)

11 用CSS进行布局 11.1 开始布局的注意事项 1 还是要强调的是内容与显示分离 2布局方法: 固定布局:整个页面和每一栏的内容都有基于像素的宽度. 就是说宽度都是固定好了的,不会因为你改变设备就随着你的设备的宽去进行改变. 响应式布局(流式页面):它使用的是百分数定义宽度,允许页面随着环境的改变来发生相应的改变. 就是现在最流行的响应式布局:bootstrap框架 3浏览器的注意事项: 浏览器之间存在在一些差异性,所以在网站建立好之后需要在不同的网站上进行测试 11.2构建页面 构造页面

【02】HTML5与CSS3基础教程(第8版)(全)

共392页. (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完. [美]elizabeth castro bruce hyslop 著 望以文 译 2014年5月 出版. 亚马逊: https://www.amazon.cn/HTML5%E4%B8%8ECSS3%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B-%E7%BE%8E-Elizabeth-Castro/dp/B015316ZWC/ref=sr_1_1?ie=UTF8&qid=14639