noscript 标签介绍
noscript 标签介绍
一、总结
一句话总结:
noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。
1、noscript标签使用实例?
html标签直接放在noscript标签之中
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript</p>
</noscript>
2、noscript 标签中的元素中的内容显示出来的 场景?
浏览器不支持js脚本
浏览器支持js脚本,但js脚本被禁用
二、noscript 标签,一个被忽视的重要标签
转自或参考:noscript 标签,一个被忽视的重要标签
https://www.cnblogs.com/iamkun/p/6534447.html
打开 Drupal 的新后台,发现显示大面积空白
。本以为是 CSS 的问题,后来折腾好久才发现是我之前因为某些站的安全问题把浏览器的 Javascript 给禁用了。Javascript 的日益强大使我们的网页丰富多彩,交互越来越强大,功能越来越炫。但是有的网页效果完全依赖 Javascript 来实现,一旦离开了 Javascript 的支持,可能连基本的内容都显示不完全,这时候,我们老当益壮的noscript
标签就该出场了
。
noscript
标签是一个相当古老的标签,其被引入的最初目的是帮助老旧浏览器的平滑升级更替,因为早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。这个标签的用法也非常简单:
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript</p>
</noscript>
不过到了现在,浏览器不支持 Javascript 的事情应该已经不会出现了,但是用户也可能因为各种原因而禁用了 Javascript。如节省流量,延长电池使用时间,或者是不希望自己的隐私被各类统计/追踪脚本泄露
。也有相当一部分用户安装了类似NoScript
的浏览器扩展来禁止浏览器运行 Javascript。
网站虽然不能强制用户启用浏览器的 Javascript,但是可以提示用户的浏览器已经禁用脚本,来达到更好的用户体验。例如 Fackbook 这样的提示:
noscript 标签中的元素中的内容只有在下列情况下才会显示出来:
- 浏览器不支持脚本
- 浏览器支持脚本,但脚本被禁用
符合上述任何一个条件,浏览器都会显示 noscript 中的内容。而在除此之外的其他情况下,浏览器不会呈现 noscript 中的内容。
写在最后
使用 noscript 标签只能给网站用户传达一个信息,即如果不启用 Javascript,网页内容和效果可能不能完全被呈现。但如果有些用户并不懂得如何去开启 Javascript的话,这样的提示信息对他也并没有什么实际的帮助。所以我们还是应该在网站设计之初多多考虑在没有 Javascript(或 HTML5,或其他依赖)的支持的情况下,如何使这样的非常规状况尽可能少的影响到用户的浏览体验。
课程对应视频位置: https://fanrenyi.com/video/3/19
noscript 标签介绍的更多相关文章
- java web学习总结(二十七) -------------------JSP标签介绍
一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...
- html常用标签介绍
常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
- NOSCRIPT标签的用处
NOSCRIPT标签用来定义在脚本未被执行时的替代内容.也可以用在检测浏览器是否支持脚本,若不支持脚本则可以显示NOSCRIPT标签里的innerText. eg:<body> ... . ...
- noscript 标签,一个被忽视的重要标签
打开 Drupal 的新后台,发现显示大面积空白 .本以为是 CSS 的问题,后来折腾好久才发现是我之前因为某些站的安全问题把浏览器的 Javascript 给禁用了.Javascript 的日益强大 ...
- 一、JSP标签介绍,自定义标签
一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...
- 前端入门html(标签介绍)
day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html # web本质 示例 import socket sk = socket.socke ...
- 3-[HTML]-head标签介绍
1.head标签 我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题.编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动 ...
- WEB学习-基础知识:列表、表单、div和span、注释、字符实体、HTML废弃标签介绍
列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...
- template标签介绍和使用
template标签介绍和使用 1.介绍:template标签是html5新出来的标签,具有3个特点,(1)随意性:可以写在页面中的任何地方.(2)不可见性:它里面的元素都是不可见的.(3)页面也不会 ...
随机推荐
- JavaScript 之 事件(详解)
一.注册事件的三种方式 1.直接事件方式 语法格式: 变量名.on事件名 = function() {} 注意:这种方式无法给同一对象的同一事件注册多个事件处理函数 2.addEventListene ...
- git使用.gitignore文件忽略相关文件上传
在使用git时,有些文件是不需要上传到仓库中的,比如idea/eclipse相关的文件,编译后的文件(target目录)等. 可以使用.gitignore文件进行配置.在git本地仓库创建.gitig ...
- c#: WebBrowser控件注入js代码的三种方案
聊做备忘. 假设js代码为: string jsCode = @"function showAlert(s) {{ alert('hello, world! ' + s);}}; showA ...
- Odoo仪表盘详解
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826324.html 一:仪表盘与看板的区别 kanban:kanban是一种视图类型,卡片式视图.可以为 ...
- SaltStack--数据系统
saltstack数据系统 数据系统Grains 1.Grains是SaltStack收集的有关底层管理系统的静态信息.包括操作系统版本.域名.IP地址.内存.内核.CPU.操作系统类型以及许多其他系 ...
- 项目Beta冲刺(团队7/7)
项目Beta冲刺(团队) --7/7 作业要求: 项目Beta冲刺(团队) 1.团队信息 团队名 :男上加男 成员信息 : 队员学号 队员姓名 个人博客地址 备注 221600427 Alicesft ...
- G6 学习资料
G6 学习资料 网址 G6 1.x API 文档 http://antvis.github.io/g6/doc/index.html 官方demo列表 https://github.com/antvi ...
- 题解:UVa1025 A Spy in the Metro
原题链接 pdf 题目大意 给出一张无向图图,求该图的最小瓶颈生成树. 无向图的瓶颈生成树:无向图\(G\)的一颗瓶颈生成树是这样的一颗生成树:它最大的边权值在\(G\)的所有生成树中是最小的.瓶颈生 ...
- accept返回的socket的端口号和连接socket一样的!!! socket绑定信息结构
今天与同学争执一个话题:由于socket的accept函数在有客户端连接的时候产生了新的socket用于服务该客户端,那么,这个新的socket到底有没有占用一个新的端口? 讨论完后,才发现,自己虽然 ...
- Performance --- 前端性能监控
阅读目录 一:什么是Performance? 二:使用 performance.timing 来计算值 三:前端性能如何优化? 四:Performance中方法 五:使用performane编写小工具 ...