[Day21] Emmet 学习笔记 - Tag篇

昨天仅仅是基本的一些功能，就感觉到脑袋很卡，需要大量练习才能让脑袋生出网站结构的速度加快，以下分享几个可以练习切版的网站。

1. Practices Website Templates
2. templatemo

Emmet常用缩写 - HTML类

1. Tag产出完整标签

   a 
   // 按Tab产出
   <a href=""></a>
   
   br
   // 按Tab产出
   <br />
   ...
   // 用法相同，不依依列举
   

2. Tag加上：(冒号)衔接常用属性

   • a系列

     a:___
     // 按Tab产出
     <a href="___"></a>
     //底线可填入link(网址), mail(信箱)
     

   • link系列

     link:___
     // 按Tab产出
     <link rel="______" href="___" />
     

     底线可填入：

     代码（缩写）	说明
     css	样式表
     print	印刷样式(media="print")
     favicon	网页标题缩图
     touch	手机版的快捷图示
     import(im)	引入其他档案

   • input系列

     input:___
     // 按Tab产出
     <input type="___" name="" id="" />
     

     底线可填入：

     代码（缩写）	说明
     hidden(h)	隐藏栏位
     text(t)	文字栏位
     search	搜寻
     email	信箱
     url	网址
     password(p)	密码
     datetime	日期时间
     datetime-local	用户的本地日期时间
     month	月
     week	周
     time	时间
     tel	电话
     number	数字
     color	颜色
     checkbox(c)	复选
     radio(r)	单选
     range	数值范围
     file(f)	上传档案
     submit(s)	表单提交
     image(i)	图片按钮
     button(b)	按钮
     reset	重置表单

     • input的许多属性需看浏览器的支援度

3. Tag名称缩写

   inp
   // 按Tab产出
   <input type="text" name="" id="">
   btn
   // 按Tab产出
   <button></button>