前端冷知识-用到的时候就忘

原创 TwoDogCode 随笔 html/css 1852阅读 2017-11-20 12:24:38 举报

HTML <base> 标签

● <base> 标签为页面上的所有链接规定默认地址或默认目标,通常放在head标签里面。
html 代码

<a>链接激活邮箱属性:href="mailto: __ "

● 将邮箱地址填写到href="mailto: __ "里面可以直接激活发邮件页面,如本地有Foxmail等邮箱客户端,可以直接打开相关软件。
html 代码

<a> 标签target属性规定在何处打开链接文档

● target属性常用的两种属性值:
html 代码

设置/获取网站title部分的icon图标

● <link rel="shortcut icon" type="image/x-icon" href="ico图片位置" />度娘做栗子
html 代码

● 访问、查看网站图标https://www.baidu.com/favicon.ico
html 代码

浏览器地址栏运行HTML代码

● 只是感觉很新鲜,事实没什么卵用
比如在地址栏输入以下代码然后回车运行,会出现指定的页面内容
data:text/html,<h1>Hello, world!</h1>
如下图:

前端冷知识-用到的时候就忘

把浏览器当编辑器

● 只是感觉很新鲜,然而也没什么卵用。
还是浏览器地址栏上做文章,将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器,与Windows自带的notepad一样。
data:text/html,<html contenteditable>
如下图:

img

实时编辑CSS

● 通过设置style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。感觉很6的样子!
html 代码

多重边框

● 利用重复指定box-shadow来达到多个边框的效果
html 代码

评论 ( 8 )
最新评论
红达 6F 2018-06-28 16:49:37 8F

Mail + to =mailto 这样好记

18537072217 6F 2018-03-27 14:32:51 7F

666

YolandaThePuppy 2018-03-27 14:24:02 6F

base标签看起来很好用的样子,href="mailto:"总是记不住是mailto。

lilichun1994 4F 2017-11-25 09:00:44 5F

six six six

TwoDogCode 3F 2017-11-21 09:56:14 4F

蒙特梭利:“我听过了,我就忘了;我看见了,我就记得了;我做过了,我就理解了”。咱们这一行重在理解。

lucialiu 2017-11-20 23:49:48 3F

刚好我今天看书有看到这个知识点

ls1210485244 2017-11-20 19:00:50 2F

多重边框蛮好看

zjk001 2017-11-20 17:38:21 1F

有意思 有的还真没见过哈哈