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 标签介绍的更多相关文章

  1. java web学习总结(二十七) -------------------JSP标签介绍

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. NOSCRIPT标签的用处

    NOSCRIPT标签用来定义在脚本未被执行时的替代内容.也可以用在检测浏览器是否支持脚本,若不支持脚本则可以显示NOSCRIPT标签里的innerText. eg:<body> ... . ...

  4. noscript 标签,一个被忽视的重要标签

    打开 Drupal 的新后台,发现显示大面积空白 .本以为是 CSS 的问题,后来折腾好久才发现是我之前因为某些站的安全问题把浏览器的 Javascript 给禁用了.Javascript 的日益强大 ...

  5. 一、JSP标签介绍,自定义标签

    一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...

  6. 前端入门html(标签介绍)

    day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html # web本质 示例 import socket sk = socket.socke ...

  7. 3-[HTML]-head标签介绍

    1.head标签 我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题.编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动 ...

  8. WEB学习-基础知识:列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

    列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...

  9. template标签介绍和使用

    template标签介绍和使用 1.介绍:template标签是html5新出来的标签,具有3个特点,(1)随意性:可以写在页面中的任何地方.(2)不可见性:它里面的元素都是不可见的.(3)页面也不会 ...

随机推荐

  1. windows 下安装 node 以及安装 git 指令使用

    一.先百度搜索 node 找 Download | Node.js 二.下载 Node 根据你自己的操作系统下载 三.安装 node (注意:如果安装失败,使用管理员身份打开安装) 四.安装成功之后 ...

  2. APS应用案例|纽威阀门实现高效排产

    企业背景: 苏州纽威阀门股份有限公司(下文简称:纽威阀门)成立于1997年,总部设在江苏苏州.自成立以来一直致力于工业阀门的研发与制造,以为客户提供全套工业阀门解决方案为目标.纽威阀门通过企业的努力发 ...

  3. Java 获取网络重定向URL(302重定向)

    方法1: import java.net.HttpURLConnection; import java.net.URL; import org.junit.Assert; import org.jun ...

  4. Ansible-ansible命令

    Ansible是用于执行"远程操作"的简单工具.该命令允许针对一组主机定义并运行单个任务剧本. 常用选项 说明 --ask-vault-pass 请求保险库密码 --become- ...

  5. NumPy简单入门教程

    # NumPy简单入门教程 NumPy是Python中的一个运算速度非常快的一个数学库,它非常重视数组.它允许你在Python中进行向量和矩阵计算,并且由于许多底层函数实际上是用C编写的,因此你可以体 ...

  6. 删除或关闭Word中的超链接

    最近使用的word老是会把一些文字内容或者标题转换成乱七八糟的格式,看的莫名其妙的,找了好久也不知道什么问题,后来一查才知道是因为这些文字包含超链接,word自动转换了...你说是不是莫名其妙. 要关 ...

  7. EF_DbHelper

    最近在学校使用EF用到项目中,希望能够提高开发效率,所以从网上找点相关的代码,找到代码原型地址: https://github.com/kungge/EF_DbHelper 自己根据需要进行改造: 版 ...

  8. jenkins邮件配置以及邮件添加附件详解

    1.在系统管理-系统设置  中找到邮件配置模块 填写情况如下图 第一步,填写系统管理员邮箱 第二步,填写邮箱配置 第三步,然后在项目中添加邮箱配置 项目中邮件设置中关于附件添加 因为我的项目目录中分3 ...

  9. linux修改镜像

    修改为163yum源-mirrors.163.com 1.首先备份系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.repo [root@localhost ~]# m ...

  10. luoguP4721 【模板】分治 FFT

    P4721 [模板]分治 FFT 链接 luogu 题目描述 给定长度为 \(n-1\) 的数组 \(g[1],g[2],..,g[n-1]\),求 \(f[0],f[1],..,f[n-1]\),其 ...