如何查看网页的HTML源代码?这里提供详细步骤
每个主要的互联网浏览器都允许用户查看任何网页的HTML(超文本标记语言)源代码。以下部分包含有关在每个主要浏览器中查看源代码的多种方法的信息。
查看网页的源代码时,服务器处理的信息和代码不会出现。例如,搜索引擎处理服务器上的信息,然后在网页上显示结果。换句话说,你可以查看组成结果页面的代码,但不能查看搜索引擎的源代码。
此规则适用于所有服务器端脚本、SSI(服务器端包含)和编程代码。因此,你无法查看搜索引擎、论坛、投票、聊天等中使用的脚本源代码。此外,从源代码复制信息可能会导致错误,或将你引导回从中复制信息的页面。
要在Google Chrome中查看网页的源代码,请使用以下任一方法。
仅查看源代码
方法一
要仅查看源代码,请按计算机键盘上的键盘快捷键Ctrl+U。
方法二
右键单击网页的空白部分,然后从弹出菜单中选择“查看网页源代码”。
查看包含元素的源代码
1、打开Chrome并导航要查看其源代码的网页。
2、单击浏览器窗口右上角的设置图标。
3、从下拉菜单中,选择更多工具,然后选择开发者工具。
4、单击屏幕底部左上角的“元素”选项卡。
提示:在Chrome中,按F12或Ctrl+Shift+I也会打开交互式开发者工具。该工具提供了与源代码和CSS设置的更多交互,允许用户查看代码中的更改如何立即影响网页。
要在Mozilla Firefox中查看网页的源代码,请使用以下任一方法。
仅查看源代码
方法一
要仅查看源代码,请按计算机键盘上的Ctrl+U。
方法二
右键单击网页的空白部分,然后从弹出菜单中选择“查看网页源代码”。
查看包含元素的源代码
1、打开Firefox并导航到要查看其源代码的网页。
2、单击屏幕右上角的菜单Firefox菜单图标。
3、在下拉菜单中选择“更多工具”,然后从展开的菜单中选择“Web开发者工具”。
4、单击屏幕底部部分左上角的“查看器”选项卡。
提示:在Firefox中,按F12或Ctrl+Shift+I也会打开交互式开发者工具。该工具提供与源代码和CSS设置的交互,允许用户实时查看代码中的更改如何影响网页。
查看网页源代码的一部分
1、突出显示网页中要查看源代码的部分。
2、在高亮显示的部分上单击鼠标右键,然后选择“查看选中部分源代码”。
提示:你可以使用Firebug插件查看和编辑页面的源代码,并通过浏览器实时查看更改。
要在Microsoft Edge中查看网页的源代码,请使用以下任一方法。
仅查看源代码
方法一
要仅查看源代码,请按计算机键盘上的Ctrl+U。
方法二
右键单击网页的空白部分,然后从弹出菜单中选择“查看网页源代码”。
查看包含元素的源代码
1、打开Microsoft Edge并导航到要查看其源代码的网页。
2、单击屏幕右上角的设置图标。
3、将鼠标移到下拉菜单中的“更多工具”上,然后从展开的菜单中选择“开发人员工具”。
4、单击屏幕右侧窗口顶部的“元素”选项卡。
提示:在Microsoft Edge中,按F12或Ctrl+Shift+I也会显示交互式开发人员工具。该工具提供与源代码和CSS设置的交互,允许用户实时查看代码中的更改如何影响网页。
要在Microsoft Internet Explorer中查看网页的源代码,请使用以下任一方法。
仅查看源代码
方法一
要仅查看源代码,请按计算机键盘上的Ctrl+U。
方法二
右键单击网页的空白部分,然后从弹出菜单中选择“查看源”。
查看包含元素的源代码
1、打开Internet Explorer并导航到要查看其源代码的网页。
2、单击右上角的工具Internet explorer工具图标
。
3、从下拉菜单中选择“F12开发人员工具”。
4、单击开发人员工具菜单左上角的“DOM资源管理器”选项卡。
提示:在Internet Explorer中,按F12键将显示DOM工具。该工具提供与源代码和CSS设置的交互,允许用户查看代码中的更改如何立即影响网页。
我对 Twitter 前 10 行源代码的理解
本文最初发布于 CSS-Tricks 博客,由 InfoQ 中文站翻译并分享。
过去几周,我一直在为我的家具租赁公司Pabio招聘一名高级全栈JavaScript 工程师。由于是一个远程团队,面试是在 Zoom 上进行的。根据我的观察,部分开发人员不擅长现场编码或白板面试,即使他们对这项工作很在行。所以取而代之,我们会进行一小时的技术讨论,我会问他们关于 Web Vitals、可访问性、浏览器战争以及其他类似 Web 话题的问题。我很喜欢问的一个问题是:“解释一下 Twitter 源代码的前十几行”。
我认为这是一个很简单的测试,可以借此了解应聘者对前端基础知识的掌握程度。本文列出了这个问题的最佳答案。
我打开 Twitter.com,点击查看源代码并分享我的屏幕,然后要求他们逐行进行解释,他们想说多少就说多少。我放大了文本,使其更加清晰,所以你看不到整行的内容,不过可以大概有个了解,如下所示:
注意,既然我们的技术讨论是一种谈话,所以我并不期望任何人能给出完美答案。只要听到一些正确的关键词,我就知道应聘者了解这个概念,我就会试着把他们引向正确的方向。
每个源代码文档的第一行都非常适合这个面试,因为应聘者对DOCTYPE声明的了解程度与他们的工作年限密切相关。我仍然记得,在 Dreamweaver 时代,XHTML DOCTYPE 行很长,就像 2009 年 Chris 在文章“常见DOCTYPE”中所写的那样。
最佳答案:这是文档类型(doc-type)声明,我们总是把它放在 HTML 文件的第一行。你可能认为这些信息是多余的,因为浏览器已经知道响应的 MIME 类型是text/html;但在Netscape/Internet Explorer时代,浏览器要从多个相互竞争的版本中找出要使用哪个 HTML 标准来渲染页面,这是一项困难的任务。
这一点尤其令人讨厌,因为每个标准都会产生不同的布局,所以采用这个标签是为了让浏览器更容易判断。以前,DOCTYPE标签很长,甚至包括规范链接(有点像现在的 SVG),但幸运的是,<!doctype html>在 HTML5 中得到了标准化,延续了下来。
也可接受:DOCTYPE标签告诉浏览器这是一个 HTML5 页面,应该这样渲染。
这一行代码可以告诉我应聘者是否了解可访问性和本地化的问题。令人惊讶的是,在我的面试中,只有少数人知道dir属性,但这是讨论屏幕阅读器的一个很好的切入点。几乎每个人都能说清楚lang=\”en\”属性,即使他们以前没有用过。
最佳答案:这是 HTML 文档的根元素,其他所有元素都包在这个元素里。它有两个属性:方向和语言。方向属性的值是从左到右,它告诉浏览器代理内容方向;另一个值是从右到左,适用于阿拉伯语等语言,或者是auto,让浏览器自己来决定。
语言属性告诉我们,这个标签里的所有内容都是英文的;你可以把这个值设置为任何语言,甚至可以区分en-us和en-gb。这对屏幕阅读器来说也很有用,可以知道用哪种语言来播音。
最佳答案:源代码中的元标签用来提供关于这个文件的元数据。字符集(char-set)属性告诉浏览器要使用哪种字符编码,而 Twitter 使用的是标准的 UTF-8 编码。UTF-8 很好,因为它有很多字符代码点,所以你可以在源代码中使用各种符号和表情。把这个标签放在代码开头附近,这很重要,这样浏览器就不会在遇到这一行之前解析太多的文本;我觉得可以定个这样的规则,就是把它放在文档的前 1000 个字节里,但我认为最好的做法是把它放在<head>的正上方。
顺便提一下,Twitter 似乎是出于性能方面的考虑(加载的代码较少)省略了<head>标签,但我还是喜欢明确定义,因为它是所有元数据、样式等的大本营。
最佳答案:源代码中的这个元标签是为了在小屏幕上(比如智能手机)可以适当调整网页的大小。如果你还记得最早的 iPhone 主题演讲,史蒂夫·乔布斯在那个 4.5 英寸的小屏幕上展示了整个《纽约时报》的网站;在那时,这是一个了不起的功能,你必须捏住放大才能阅读。
现在,网站的设计是响应式的,width=device-width告诉浏览器使用设备的整个宽度作为视口,所以没有水平滚动条,但你甚至可以使用具体的像素值指定宽度。通常,最佳的做法是将初始缩放比例设置为1,宽度设置为device-width,这让人们仍然可以根据自己的需要进行缩放。
还有些值源代码截图中没有显示出来,但你最好也了解下:Twitter 还应用了user-scalable=0,顾名思义,就是禁用了缩放功能。这对可访问性没什么好处,但使网页感觉更像一个本地应用程序。出于同样的原因,它还设置了maximum-scale=1(你可以使用最小和最大缩放比例,并使用两者之间的值限制缩放能力)。一般来说,设置全宽和初始缩放比例就足够了。
大约 50%的应聘者知道 Open Graph 标签,如果他们这个问题回答得比较好,就表明他们了解 SEO。
最佳答案:这个标签是网站名称 Twitter 的 Open Graph(OG)元标签。Open Graph协议是由 Facebook 制定的,目的是使链接更容易打开,并在一个漂亮的卡片布局中显示预览;开发者可以添加各种著作权详情和封面图片,实现花式分享。而事实上,使用 Puppeteer 之类的东西自动生成 Open Graph 图片,现在也很常见。(CSS-Tricks使用了一个WordPress插件来做到这一点。)
另外提一个比较有趣的点,元标签通常具有name属性,但 OG 使用非标准的property属性。我猜这只是 Facebook 的特色。标题、URL 和描述 Open Graph 标签有点多余,因为我们已经有了这些常规的元标签,人们添加它们只是为了安全。现在的大多数网站都搭配使用 Open Graph 和其他元标签以及页面上的内容来生成丰富多彩的预览。
大多数应聘者都不知道这个,但有经验的开发者可以谈下如何针对苹果设备优化网站,比如apple-touch-icon和 Safari 固定标签 SVG。
最佳答案:你可以将网站固定在 iPhone 主屏幕上,让它感觉像一个原生应用程序。Safari 不支持渐进式 Web 应用,你也无法在 iOS 上使用其他浏览器引擎,所以如果你想要类似于原生的体验,真的没有其他选择,当然,Twitter 是喜欢这种体验的。所以他们添加了这个,告诉 Safari 这个应用的标题是 Twitter。下一行类似,控制应用程序启动后状态栏如何显示。
最佳答案:这是一个符合 Web 标准的、相当于苹果状态栏颜色元标签的标签。它告诉浏览器周边UI使用什么主题色。Chrome on Android 和 Brave on Desktop 在这方面都做得很好。你可以把任何 CSS 颜色放在内容中,甚至可以使用media属性,只为特定的媒体查询显示这种颜色,如支持深色主题。你也可以在 Web 应用清单中定义这个及其他属性。
我面试过的人都不知道这个。我想,只有对标准化阶段发生的所有新鲜事都有深入的了解时,才会知道这个。
最佳答案:起源试验让我们可以在网站上使用实验性的新特性,跟踪用户代理反馈,并报告给 Web 标准社区,而无需用户选择加入一个特性标识。例如,Edge 有一个针对双屏和可折叠设备基元的起源试验,这非常酷,因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。
也可接受:这个我不知道。
几乎没有人知道这一行;只有了解 CSS 的边缘情况和优化时,才能看懂这一行。
最佳答案:想象一下,如果没有一个移动端响应式站点,那么当你在一个小屏幕上打开时,浏览器可能会调大字体,以方便阅读。CSS 的text-size-adjust属性可以用none值禁用,也可以指定一个百分比,允许浏览器调大字体。
在这种情况下,Twitter 设置的最大比例是100%,所以文本不会大于实际尺寸;他们这样做是因为他们的网站已经是响应式的,他们不想冒因浏览器调大字体而破坏布局的风险。它作用于根 HTML 标签,所以它作用于根标签中的所有内容。由于这是一个实验性的 CSS 属性,所以需要供应商前缀。另外,这行 CSS 代码之前少了<style>,但我猜这是在前一行去掉的,所以我们没有看到。
也可接受:我不特别了解这个属性,但-ms和-webkit-是非标准属性的供应商前缀,分别针对基于 Internet Explorer 和 WebKit 的浏览器。在 CSS3 刚推出时,我们需要这些前缀,但当属性从实验变为稳定或被采纳到标准中时,这些前缀就消失了,人们转而采用标准化的属性。
Twitter 源代码中的这一行特别有趣,因为你可以跟进一个问题,即网页重置和规范化之间有什么区别。几乎每个人都有一个版本的正确答案。
最佳答案:不同浏览器有不同的默认样式(用户代理样式表),而你希望通过重置属性来覆盖它们,使得网站在不同的设备上看起来都一样。在这种情况下,Twitter 就告诉浏览器删除body标签的默认边距。这只是为了降低浏览器的不一致性,但我更喜欢将样式规范化,而不是重置它们,也就是说,在不同的浏览器上应用相同的默认值,而不是完全删除它们。人们甚至曾经使用* { margin: 0 },这完全是矫枉过正,对性能并不好,但现在,常见的方式是导入normalize.css或reset.css之类的东西(甚至是更新的东西)并在此基础上进行设计。
我一直很喜欢玩浏览器的检查器工具,看一看网站是如何制作的,我就是因为这个想出了这样的面试方法。尽管我自认为算是语义 HTML 方面的专家,但每次这样做时我都会学到一些新东西。
因为 Twitter 主要是一个客户端 React 应用,所以源代码只有几十行。即使这样还是有很多东西可以学!在 Twitter 的源代码中,还有一些更有趣的行,我留给读者做练习。你能在面试中解释其中的多少个?
…告诉浏览器用户可以将 Twitter 添加为一个搜索引擎。
…有许多有趣的属性可供讨论,尤其是nonce。
…针对国际登录页。
…在不使用键盘导航时移除焦点轮廓(这里的:focus-visible选择器是 CSS 增强插件)。
了解更多软件开发与相关领域知识,点击访问 InfoQ 官网:https://www.infoq.cn/,获取更多精彩内容!
php宝塔搭建部署WordPress网址导航设计师主题风格网站源码
大家好啊,欢迎来到web测评。本期给大家带来一套php开发的WordPress网址导航设计师主题风格网站源码,上次是谁要的系统项目啊,帮你找到了,还说不会搭建,让我帮忙录制一期教程,趁着今天有空,简单的录制测试了一下,部署方式还是很容易的。感兴趣的朋友可以自行下载学习。
- PHP7.4 + nginx + mysql5.7
- cnetos7以上 + 宝塔面板
- 下载源码,宝塔新建一个网站,php版本选择7.4,新建一个空的数据库。
- 删除网站目录下的基础文件,然后将本地下载好的wordpress压缩上传,伪静态选择wordpress或者填写以下伪静态规则,然后访问域名填写对应配置信息即可安装wordpress。
- 将webstackpro目录压缩上传至/wp-content/themes目录下,然后后台启用该主题即可。
- 其他更详细的请查看视频教程。
PS:不会安装宝塔的同学可以翻一下我之前的教程。
WebStack网址导航主题,是一个基于WordPress进行开发的网址导航类主题源码。该导航主题有诸多个版本,分别可适用于wordpress、typecho、hugo…功能将会更加强大,
WebStack网址导航主题整站源码+WAP端修复tab标签ajax加载模式会显示未审核的网址的bug小屏幕热搜采用水平滚动优化子主题支持添加文章分页
获取方式查看视频教程
- 网站中的所有源码资源,均不是该源码资源的价格,本身开源源码是不用付费的。这是赞助录制搭建视频教程、收集整理资源、服务器维护的基础开销费用!
- 不想付费的朋友可以自行去GitHub或者Gitee搜索相关开源项目,了解其开源协议。再根据视频视频教程来搭建即可。
- 本站上传的源码,均为平台购买,作者提供,网友推荐,互联网平台整理而来。
- 上述源码的知识产权及相关权利归作者及制作公司所有。
- 上述源码仅供学习参考及技术交流之用,未经源码的知识产权权利人同意,用户不得进行商业使用。
- 上述源码如需商业使用,请自行联系源码知识产权权利人进行授权,否则,我们将积极配合作品知识产权权利人 一起维权。
- 上述源码如有侵犯您的知识产权,请您立刻联系我们,我们会在24小时内做删除下架处理。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。