如何快捷的修改html,问如何通过F12键来快捷的修改网页
满意答案
冰凌梦雨
2017.04.16
采纳率:33% 等级:5
已帮助:1655人
F12 开发人员工具是一套按需采用的工具,内建于 Windows Internet Explorer 9 的每次安装之中。网站开发人员可以随时在任何网页上使用 F12 工具,从而快速调试 JavaScript、HTML 和级联样式表 (CSS),还可以跟踪并查明网页或网络的性能问题。
F12的存在要求程序开发人员重要的数据不能写在HTML页面中,要写在一般处理程序或者后台中,不然很容易被用户知道比如密码之类的。对WEP开发人员有利的地方就是可以参照别人网站的布局样式等来构思自己的网站。因为F12可以看到网站的布局、样式、js等代码哦!
使用“HTML”选项卡
“HTML”选项卡视图在由内存中的 Windows Internet Explorer 9
呈现的树视图中显示你的网页的动态标记。它反映打开 F12 时的 DOM,如果有任何更改,则需要刷新。
你可以使用鼠标或键盘直接在树视图中导航,以及查看特性和更改值。
若要跳转到网页上的特定元素,请按 Ctrl+B,或单击“单击选择元素” 按钮。在网页上,当你将鼠标悬停在元素上方时将突出显示相应的元素。单击某个元素时,将在 HTML 视图中突出显示 DOM 树中对应的节点。
在“HTML”选项卡中选择一个元素时,可使用“视图”>“源”菜单在你的视图中筛选出按照元素关联的 CSS 样式或仅按照元素本身选择的元素。
“带有样式的元素源”按钮仅在新窗口中显示选定元素的 HTML 源及其内容,以及适用于它的 CSS。这有助于只关注选定元素的源文件。必须首先使用“HTML”选项卡视图选择 DOM 树的主体内的某个 HTML 元素,然后才可以运行此命令。若要选择某个元素,可单击“单击选择元素”按钮,或在 DOM 树中单击某个元素。
当你使用“单击选择元素”时,首先刷新视图是个不错的主意。
若要展开或折叠某个元素的属性,请单击用加号 (+ ) 或减号 (-) 标记的框。HTML 和 CSS 视图中的所有元素都是可编辑的,并且编辑操作会立即生效。通过单击元素名称旁边的复选框,可以打开或关闭样式规则和特性。
查看动态 HTML 代码
大多数网站使用动态代码。客户端脚本通常用于生成用户可以看到的呈现的 HTML。静态 HTML
代码的数量通常很少,仅用于在页面上启动操作。由于 F12 工具将显示呈现在浏览器中的 HTML 和 CSS 代码,而不是显示严格的 HTML
源,因此查找错误更容易一些。
“HTML”选项卡显示 DOM 的当前状态,而不会自动跟踪更改。如果你更改了某个值或特性,但它没有立即显示,请在“HTML”选项卡中按 F5 刷新视图。
更改值和添加特性
F12 工具允许你更改几乎任何特性或属性的值。从“HTML”选项卡内,从 DOM 树中选择一个元素或使用“单击选择元素”按钮选择一个元素。在属性视图(右窗格)中,单击一个值以突出显示并更改它。
例如,在 Internet Explorer 9 中打开如何使用 CSS3 添加圆角中的 CSS 示例页面并且按 F12 可打开该工具。单击“单击选择元素”按钮 ,然后单击栗色的 Now in stock at Fourth Coffee 标题。 在属性窗格中,单击 "h2" 选择器下的颜色特性。 键入一个新的颜色名称或值,如 blue,然后按 Enter。标题的颜色将立即更改。
要添加特性,请右键单击“HTML”或“CSS”选项卡的左窗格中的元素,然后单击上下文菜单中的“添加属性”。你需要知道该特性的格式(如 "background-color:")和正确值。
若要删除某个特性(你添加的特性或现有特性),请在右窗格视图中单击该特性,然后按 Delete 键。对于原始页中的特性,可通过刷新网页恢复它们。添加的特性需要重新应用。
如果你只希望在某个会话期间临时关闭某个特性,则在“HTML”或“CSS”选项卡的右窗格中清除该特性旁边的复选框。
“HTML”选项卡视图和工具
在左窗格树视图中选择一个元素时,你可以在右侧查看和更改所选元素及其子元素的样式、框模型布局和特性。 你所做的更改不是永久的,当你刷新或打开另一个页面时这些更改会丢失。但是,你可以通过单击“保存”按钮来保存你的 HTML 代码。
当你查看应用于“样式”和“跟踪样式”选项卡中所选元素的多个 CSS 规则时,将根据 CSS
规范,基于这些规则的专一性来显示它们。列表页首的规则将第一个应用到所选元素,而底部的规则是当前定义所选元素的样式属性的规则。这些规则的值是可编辑
的,方法为:单击某个值,键入新值,然后按
"Enter"。更改会立即在网页上显示。这两个属性类型中的信息是相同的。但在“跟踪样式”属性类型中,相同的信息按照属性(在其下面显示规则)分组。
这些属性按字母顺序列出,并基于专一性再次对规则排序。
样式 显示你在树视图中选择的元素的规则和样式。它按规则进行组织,并包含继承的特性和重写的特性。
跟踪样式 显示与样式相同的信息,但是按属性而不是规则分组。
布局 显示所选元素的框模型。通过单击图表中的相应值,可更改“布局”视图中的任意值。“布局”选项卡对可缩放矢量图形 (SVG) 元素禁用。
特性 显示选定元素的特性,如 ID。可以添加或删除特性
右键单击“HTML”选项卡上的菜单
如前面所述,可在“HTML”选项卡的左窗格中右键单击一个元素。下面是你可以在“HTML”选项卡中使用的选项。
菜单项
作用
添加特性 向标记或元素中添加新的特性。
复制 将标记和特性复制到剪贴板中。
复制 InnerHTML 将元素的 InnerHTML 内容(子文本、元素和特性)复制到剪贴板。
复制 OuterHTML 将元素的 OuterHTML 内容(子文本、元素和特性)复制到剪贴板。
如果在“HTML”选项卡中单击某个元素的子节点,如 "h2" 标记的文本元素,则可能无法获得所有选项。如果你未看到所需的选项,则转到父元素并重试。
检查 CSS 规则
“CSS”选项卡显示你的样式表之间的相互影响。此选项卡对于使用多个样式表的网站很有用。若要在样式表之间切换,可使用样式表选择器。当你选择某
个样式表时,左窗格中将显示规则及其相关样式属性。默认情况下,此按钮显示在网页中引用的第一个样式表。如果有多个样式表正在网页上使用,则单击下拉列表
以选择其他样式表。
“CSS”选项卡上的快捷菜单选项
当你右键单击“CSS”选项卡时,快捷菜单将会提供比“HTML”选项卡更多的选项。启用的选项是上下文相关的,并取决于你在“CSS”选项卡中单击的位置。
菜单项
作用
右键单击的位置
添加特性 向标记或元素中添加新的特性。 在规则或特性(任何元素)上。
添加规则 添加选择器、声明或样式。 在白色区域中,而不是在现有元素上。
后加规则 在当前规则之后添加选择器或规则。 在任何元素上。
前加规则 在当前规则之前添加选择器或规则。 在任何元素上。
删除特性。 删除选定的特性。 在任何特性上。
删除规则 删除选定的规则和所有相关的特性。 在任何规则或选择器上。
在“CSS”选项卡中更改数字 CSS 值
CSS 属性的值可以像 F12 工具中的几乎任何其他属性一样进行更改。通过单击属性值并键入新值,可以更改 CSS 属性。在“CSS”选项卡中,还可使用向上键和向下键增加或减小数值。
搜索和保存更改
像 F12 工具中的其余选项卡一样,你可以使用“搜索”框在“HTML”和“CSS”选项卡中搜索特定标记、属性、特性或值。单击“搜索”按钮时,将突出显示搜索关键字的所有实例,并且窗格会滚动到显示第一个匹配项。
如果存在多个匹配项,则可使用“下一个”和“上一个”按钮向前和向后滚动。
你所做的更改(例如,调整框模型或添加特性)不是永久的。当你在浏览器中重新加载页面或导航到其他网页时,你所做的任何更改都会丢失。若要保存对 HTML/CSS 文件的本地副本的更改,请单击左窗格上的“保存”按钮。
21分享举报
如何快捷的修改html,问如何通过F12键来快捷的修改网页相关推荐
- f12键修改网页html,问如何通过F12键来快捷的修改网页
其它网友回答: 您好,感谢您选择惠普产品.一.有些型号的笔记本的BIOS中有action key mode功能,可以对F快捷键进行设置.如果您使用的是"家用笔记本",请您开机后不停 ...
- 手机如何一键修改运营商的名称跟标识的快捷方法
这里给大家演示一下琢石模拟器一键修改手机运营商名称跟标识的快捷办法. 如果您的手机没安装琢石模拟器,请到官网 ZS8K.COM下载并根据官网教程自行进行安装跟激活. 1.我们先看在没有使用琢石模拟器之 ...
- python 修改文件名_【学习分享】利用python批量修改文件名
1 前言 分享一个利用python批量修改文件名的方法,我们以前分享过用DOS命令来批量修改文件名,但是如果要修改多个文件夹内的文件名,用DOS命令就不好处理了,我们就来分享一下如何用python处理 ...
- 关于我之前写的修改Windows系统Dos下显示的用户名之再修改测试
最近看到蛮多网友反映,自己修改Dos下用户名后出现了很多的问题--今天抽了时间,再次修改测试... ================= 提前说明:我自己修改了很多次没发现任何问题,<为避免修改可 ...
- jquery.js把我的时间修改了为什么?_电气老手在PLC程序调试修改时的几个必备小窍门,看你知道几个?...
我们工程师在设计程序,调试程序,修改程序的时候,为了方便以后对程序的理解,最好是对程序进行注释,能够对程序进行注释也是比较好的一个习惯.为什么这么说呢?因为我们人的脑容量是有限的,或多或少都是会容易忘 ...
- 如何修改wincc服务器画面,关于OS站的wincc画面修改的问题-工业支持中心-西门子中国...
要看OS的模式和修改方法,具体如下: 1.如果修改在ES上,那么需要下载,无论是C/S模式,还是单站模式. 2.如果是单站模式,且仅为1台OS,修改在OS上,那么无需下载. 2.1如果仅仅是修改未改变 ...
- ubuntu修改登陆用户名称_Ubuntu-修改计算机名(hostname)和修改用户名
ubuntu在安装的时候会让你输入一个主机名,如果安装之后觉得不好,又想改,怎么办?方法很简单,打开"终端",输入:gedit /etc/hostname ,然后在弹出的窗口中直接 ...
- linu修改open files无效_Proe/Creo工程图塑胶件剖面线修改问题解答篇
关于使用Proe/Creo工程图出图还是转入AutoCAD中进行编辑以及尺寸标注.注解等这也是一个老生常谈的问题,其优劣也不做过多阐述,只是最近有很多网友问到了关于工程图的一些问题,这篇文章就挑其中一 ...
- c语言天选之点,【WOTC】天选者之战修改XCOM能力点数方法 意志力恢复加速 更新一个战斗中不掉意志力修改 再更新一个战斗视角缩放增大并固定修改...
查看: 36591|回复: 60 [攻略] [WOTC]天选者之战修改XCOM能力点数方法 意志力恢复加速 更新一个战斗中不掉意志力修改 再更新一个战斗视角缩放增大并固定修改 游戏狂人, 积分 184 ...
最新文章
- MVC+Ninject+三层架构+代码生成 -- 总结(一、數據庫)
- Windbg中使用查找内存并设置访问断点
- 常考数据结构与算法:判断一个链表是否为回文结构
- 2.4.1 算术逻辑单元ALU与加法器(串行加法器、并行加法器、全加器)
- POJ - 1226 Substrings(后缀数组+二分)
- 初中数学知识点总结_初中数学知识点总结大全_经典版_
- Linux查看文件内容命令:cat, tail, head, more, less
- erp沙盘采购总监的心得_沙盘部 | 会计协会新宠
- MySQL(用户管理,常用sql语句,数据库备份恢复,MySQL调优,恢复误操作数据)...
- 滨江学院 刘生 计算机网络考点知识点整理
- ES6 迭代器与生成器(非常详细、容易理解)
- 网站开发中很实用的 HTML5 jQuery 插件
- ASP.NET Web API 2基于令牌的身份验证
- lcd显示c语言程序,1602液晶简单显示程序
- Go编程语言能干什么
- 中国石油大学《测井解释与生产测井》第二阶段在线作业
- 极智开发 | UmiJS 快速上手
- 《站在两个世界的边缘》 程浩,一个认真生活过的人
- 重建同义词+oracle,oracle 创建同义词
- 论文翻译——Skin Lesion Synthesis with Generative Adversarial Networks
热门文章
- 通过过滤器Filter来完成url访问权限限制
- 软考高级系统架构设计师系列论文七:论基于构件的软件开发
- 我当测试总监的那几年 | 程序员有话说
- date类、calendar类与dateformat类
- 西门子冗余服务器 系统拷贝,西门子(SIEMENS)冗余系统指南.pdf
- 《有一种失败叫瞎忙》读书笔记
- 【修复H5农场复利】黄金家园农场理财游戏源码Thinkphp开发 带商城仓库商店模块
- npm安装electron报RequestError: socket hang up错误解决方法
- Win系统下如何安装Maven教程
- STM32的四种开发方式