实用小知识

刺骨的言语ヽ痛彻心扉 2022-06-03 02:23 184阅读 0赞

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

html 代码

1 
        
         
       
        
       
        
        
         < base   target = "_blank"   />

<a>链接激活邮箱属性：href="mailto: \_\_ "  
● 将邮箱地址填写到href="mailto: \_\_ "里面可以直接激活发邮件页面，如本地有Foxmail等邮箱客户端，可以直接打开相关软件。

html 代码 效果预览

1 
        
         
       
        
       
        
        
         < a   href = "mailto:wdjpunch@163.com" > wdjpunch@163.com </ a >

<a> 标签target属性规定在何处打开链接文档  
● target属性常用的两种属性值：

html 代码效果预览

1 2 3 4 
        
         
       
        
       
        
        
          < a   href = "http://www.qdfuns.com/notes/47654/8b3676ba3ff1dd87882b304177b9db55.html"   target = "_blank" > 常用的鼠标滑过效果 </ a >  < a   href = "http://www.qdfuns.com/notes/47654/8b3676ba3ff1dd87882b304177b9db55.html"   target = "_self" > 常用的鼠标滑过效果 </ a >

设置/获取网站title部分的icon图标  
● <link rel="shortcut icon" type="image/x-icon" href="ico图片位置" />度娘做栗子

html 代码

1 2 3 4 5 6 7 
        
         
       
        
       
        
        
          < link   rel = "shortcut icon"   type = "image/x-icon"   href = "https://www.baidu.com/favicon.ico"   />

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

html 代码效果预览

1 2 3 
        
         
       
        
       
        
        
         < a   href = "https://www.baidu.com/favicon.ico" > 百度图标 </ a > < br   /> < a   href = "http://www.163.com/favicon.ico" > 网易图标 </ a >

浏览器地址栏运行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 代码 效果预览

1 2 3 4 5 6 7 8 9 
        
         
       
        
       
        
        
         <! DOCTYPE   html > < html >      < body >          文字           < style   style = "display:block"   contentEditable >               body  {   color:  blue  }          </ style >      </ body > </ html >

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

html 代码效果预览

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 
        
         
       
        
       
        
        
         < html >      < head >           < title > </ title >           < style >               div  {                   box-shadow:  0  0  0  6 px  rgba( 0,  0,  0,  0.2),  0  0  0  12 px  rgba( 0,  0,  0,  0.2),  0  0  0  18 px  rgba( 0,  0,  0,  0.2),  0  0  0  24 px  rgba( 0,  0,  0,  0.2);                   height:  200 px;                   margin:  50 px  auto;                   width:  400 px               }          </ style >      </ head >      < body >           < div > </ div >            </ body > </ html >

[-]: http://cdn.attach.qdfuns.com/notes/pics/201711/20/112209lxxy8yfbxzn66xhf.png
[img]: http://cdn.attach.qdfuns.com/notes/pics/201711/20/113016nv699xg9ugmwmcfx.png