关闭

web前端的一些不为人知的冷知识点_html篇整理

时间: 2018-05-26阅读: 1812标签: 前端

这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。


浏览器URL地址栏运行html代码

在非IE内核的浏览器地址栏可以直接运行html代码! 代码如下:

data:text/html,<h1>Hello, world!</h1>

输入后,直接在页面中显示hello,world的了。打开开发者工具可以看出在body中有了便签<h1>Hello, world!</h1>


浏览器URL地址栏运行js代码

在浏览器的url地址栏上可以直接运行js的代码,你知道吗?只需要通过JavaScript:开头后跟要执行的语句,代码如下:

JavaScript:alert('hello,world');

需要注意的是:

1:如果是直接通过复制粘贴(copy paste)代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行
2:Firefox中虽然不会自动去掉,Firefox不支持在地址栏运行JS代码 


如何浏览器当编辑器

在浏览器地址中输入下代码,运行后浏览器变成了一个原始而简单的编辑器,与Windows自带的notepad一样。

data:text/html, <html contenteditable>

HTML5中新加的contenteditable属性,当元素指定了该属性后,元素的内容成为可编辑状态。推而广之,将以下代码放到console执行后,整个页面将变得可编辑:

document.body.contentEditable='true';


利用a标签自动解析URL

JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性

var a = document.createElement('a');
a.href = 'http://www.abc.com/about';
console.log(a.host);//输出www.abc.com

稍微扩展一下,就得到了一个更加健壮的解析URL各部分的通用方法了

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}


页面拥有ID的元素会创建全局变量

不是要document.getElementById()。直接通过ID就可以获取到

<div id="sample"></div>
<script type="text/javascript">
        console.log(sample);//<div id="sample"></div>
</script>


加载CDN文件时,可以省掉HTTP标识

现在很流行的CDN即从专门的服务器加载一些通用的JS和css文件,出于安全考虑有的CDN服务器使用HTTPS方式连接,而有的是传统的HTTP,其实我们在使用时可以忽略掉这个,将它从URL中省去。 

<script src="//domain.com/path/to/script.js"></script>

 

利用script标签保存任意信息

将script标签设置为type='text'然后可以在里面保存任意信息,之后可以在JavaScript代码中很方便地获取。

<script type="text" id="template">
	<h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML


原文地址:http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/826

关闭

web前端开发自学路线是怎样的?

学习前端的几个个阶段:一阶段:html标签、html5新增标签、css样式、css3样式、媒体查询等;二阶段:JavaScript、jQuery、ajax、面向对象、http传输协议等;三阶段:canvas、js高级应用、JS-SDK、H5新增技术;四阶段:node.js、vue.js

前后端分离的优缺点

前后端分离已经成为互联网项目开发的业界标准使用方式,通过 nginx + Tomcat 的方式(也可以中间加一个 nodejs) 有效的进行解耦,并且前后端分离会为以后的大型分布式架构,弹性计算架构,微服务架构

JavaScript大师必须掌握的12个知识点

既然你对这篇文章感兴趣,我想你应该是一位前端开发,也许你有一份不错的工作、自主创业甚至是一位自由从业者。不知你的前端技术如何,也许你是一位新手,亦或是一位资深开发。 如果你想让自己成为一个 JavaScript 大师,在此我列出 12 条必备知识

Web前端需要会哪些?

Web前端开发行业学习门槛也较低,很多转行的小白通过扎实的学习成为了大咖,技术过硬的前端工程师也通过夯实基础,找到了更好的工作,更有从后端转入前端的工程师,因为掌握后端技术而更加有优势,在前端开发行业取得很大成功。

中台微服务了,那前端呢?

文章中详细描述了基于 DDD 设计思想的中台微服务设计方法以及分布式架构实施过程中的关注点等内容。中台建设完成后,通过微服务实现了后端应用的解耦,提高了中台应用的弹性伸缩能力

前端如何高效的与后端协作开发

前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由度,以此便可做前端工程化、组件化、单页面应用等。不管工具多么厉害,很多时候都免不了要当面沟通,友好、心平气和的沟通也是很重要的哩!

学习web前端?如何找工作?

解释一下web前端工作是做啥的,Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发

前后端分离后,后端应该知道的一些基本前端知识

作为前端小白,经常遇到同样小白的后端,常常不得不三番五次科普一些前端的基础知识,特此做些总结,前后端分离后,后端需要知道的基本前端知识:什么是ajax?跨域、OPTIONS请求、重定向等

一位工作10年的前端总结的10个忠告

最近在知乎看到这样一个问题:作为IT行业的过来人,你有什么话想对后辈说的?笔者作为一位工作10年的老前端,忍不住也答了一波,为前端的朋友们总结了10条“走心”建议,都是那些年我踩过的坑,希望能帮你少走一些弯路。

什么是前端? web1.0、web2.0时代的网页制作,前端开发都有哪些内容等

前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!