html 代码片段札记

1. 自定义苹果图标
   在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180px × 180px。

2. 定义浏览器点击行为

   <a href="tel:020-10086">打电话给:020-10086</a>
   <a href="sms:10086">发短信给: 10086</a>
   <a href="mailto:[email protected]">发送邮件: [email protected]</a>

3. 定义上传文件类型和格式

   <input type=file accept="image/*">

   上面的文件上传框中，accept 可以限制上传文件的类型，参数为 image/* 是所有图片类型，点击会弹出图库，也可以指定图片格式，参数设置成 image/png 则可以限制图片类型为png；参数如果为 video/* 则是选择视频的意思；accept 还可以设置多个文件格式，语法为 accept="image/gif, image/jpeg"

4. 使用box-shadow改变(挡住)表单自动填充后的黄色

   input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
       box-shadow:inset 0 0 0 1000px #fff;
   }

5. 用CSS实现省略号文字截断

   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

6. 使用border绘制小三角

   原理是：上下和左右的边框对接其实是个斜角，利用这个特性，使其中一边的边框透明，另外一边写成想要的颜色并隐藏对边，就可以变成小箭头形状。

   border-width: 10px 10px 10px 0; //左箭头
   border-color: transparent #fff;
   border-style: solid;
   width: 0;

   Tootip写法:

   <!--html-->
   <div class="box">嗨！点击菜单就可以关注兮兮公众号了哟~</div>

   /*--css--*/
   .box{
       position: relative;
       padding: 0 20px;
       width: 380px;
       height: 80px;
       border-radius: 8px;
       background: #efefef;
       font-size: 18px;
       line-height: 80px;
   }
   .box:after{
       position: absolute;
       top: 50%;
       left: -15px;
       z-index: 1;
       display: block;
       margin-top: -15px;
       width: 0;
       border-color: transparent #efefef;
       border-style: solid;
       border-width: 15px 15px 15px 0;
       content: "";
   }