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

站长手记 作者: 2024-08-28 05:00:01
web前端HTML篇冷知识点——这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。

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

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

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

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

如何浏览器当编辑器

data:text/html, <html contenteditable>
document.body.contentEditable='true';

利用a标签自动解析URL

var a = document.createElement('a');
a.href = 'http://www.abc.com/about';
console.log(a.host);//输出www.abc.com
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的元素会创建全局变量

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

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

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

利用script标签保存任意信息

<script type="text" id="template">
	<h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_69941.html
web前端 html篇整理