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

更新日期: 2018-05-26阅读量: 2467标签: 前端

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


浏览器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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

前端和后端的区别_为什么很多人选择前端?

什么是前端什么是后端,前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不同的,下面简单说一下:前端更容易入门,每天调整界面的展示,通过代码 完成优美的界面和酷炫的交互。后端入门稍困难,每天关注的是业务逻辑的处理,数据的增删改查,性能的优化

如何识别牛逼的前端工程师

有软件工程方面的研究说,对于开发者个体而言,最优秀的开发者的生产效率约为平均值的2倍,而优秀的开发者会吸引其它优秀的人,或者激励与帮助团队中的其它成员,最终使团队之间的生产效率差异达到10倍之多。

一份超全的 web 前端技术进阶指南

优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力。前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识

学习web前端,迷茫怎么办?

从业这么多年,时不时就有前端同行咨询我关于职业发展的事情,其中比较常见的一个就是对前端的迷茫。具体表现为,团队没什么前端,就自己一个人,感觉上面的人也不太重视前端,然后自己平时的工作也驾轻就熟

如何从零基础成为优秀的Web前端开发人员?

你想成为一名Web开发人员,有一个问题,在技术行业还没有经验。你可能上了很多课程并且也写了很多个人项目,但是简历上经验一栏却始终和你没有什么关系。转型到一个新的领域并不是那么容易,你想知道你是否已经准备好了

前端初学者们4点建议,面试时应该关注哪些

现在的前端技术的发展日新月异,各种新技术层出不穷。前后端分离的开发模式也让前端开发者的地位日益提升,待遇日渐水涨船高,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图

前后端分离的优缺点

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

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

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

web前端如何自学?少走弯路

我做web前端开发将近6年的时间了,现在月薪可以接近30000已经算知足了,但是距离我年薪百万的目标还有很长的路要走,而以后靠的不能仅仅是技术,更是一些管理和带人方面的知识和头脑

为什么Web前端开发技术如此受欢迎?

随着互联网的发展,Web前端的应用范围更加广泛,除了网页,Web前端更广泛应用于各类APP中,到我们生活的方方面面。Web前端开发好吗?为什么Web前端开发技术会如此受欢迎?

点击更多...

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