Emmet常用语法、元素四类属性、布局标签实例演示
一、Emmet常用语法
1. .和#的用法
.后面跟的内容是class属性的值.nyl按tab键 直接生成<div class="nyl"></div>#后面跟的内容是id属性的值#nyl按TAB键 直接生成<div id="nyl"></div>默认
.#前面不跟标签名 默认生成div标签p.nyl若前面写上标签名可直接生成p标签的HTML代码
-<p class="nyl"></p>p#nyl若前面写上标签名可直接生成a标签的HTML代码
-<a href="" id="nyl"></a>
2.给标签内添加内容
p.nyl{这是一段文本}可生成如下代码：<p class="nyl">这是一段文本</p>a.nyl{PHP中文网}可生成如下代码：<a href="" class="nyl">php中文网</a>
3.层级关系
1.>的使用方法
div>p>a>ul按tab键可直接生成：<div><p><ul></ul></p></div>
左边每个标签依次是右边标签的父标签
2.+的使用方法
div+p+ul按tab键可直接生成：<div></div><p></p><ul></ul>
每个标签都是同一级标签，或者说是兄弟标签
3.向上一级添加标签
div>p^a可以生成一个div标签包含p标签的同时，还生成一个和div同级的a标签<div><p></p></div><a href=""></a>
4.*重复标签
ul>li*3可生成如下代码：<ul><li></li><li></li><li></li></ul>
p*10000调皮一下….^_^<p></p><p></p><p></p><p></p>
此处省略9996个……
5.分组
.nyl>p{学生名单}+(ul>li*3>p{tom})+p{合计3人}生成如下：
<div class="nyl"><p>学生名单</p><ul><li><p>tom</p></li><li><p>tom</p></li><li><p>tom</p></li></ul><p>合计3人</p></div>
添加括号分组后，更加明确标签分级
6.tag属性
img[src="https://img.php.cn/upload/course/000/000/015/61a0a9014ed91862.jpg"]效果如下下：
7.序号
1. 正序，从1开始
ul.nyl>li.dxh*5>a{php$}生成代码如下：<ul class="nyl"><li class="dxh"><a href="">php1</a></li><li class="dxh"><a href="">php2</a></li><li class="dxh"><a href="">php3</a></li><li class="dxh"><a href="">php4</a></li><li class="dxh"><a href="">php5</a></li></ul>
2. 正序，从指定数字开始排序
ul.nyl>li.dxh*5>a{php$@100}生成代码如下：<ul class="nyl"><li class="dxh"><a href="">php100</a></li><li class="dxh"><a href="">php101</a></li><li class="dxh"><a href="">php102</a></li><li class="dxh"><a href="">php103</a></li><li class="dxh"><a href="">php104</a></li></ul>
3.指定最后一行数字从头开始倒序
ul.nyl>li.dxh*5>a{php$@-20}指定最后一行为20，则从第一行开始倒序。<ul class="nyl"><li class="dxh"><a href="">php24</a></li><li class="dxh"><a href="">php23</a></li><li class="dxh"><a href="">php22</a></li><li class="dxh"><a href="">php21</a></li><li class="dxh"><a href="">php20</a></li></ul>
8.生成表格
-table>(tr>td{111}*10) 一行10列，每格内容111
<table><tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr></table>
table>(tr>td{111}*10)*3三行10列，每格内容111<table><tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr><tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr><tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr></table>
二、元素的四类属性
1.通用属性
class、id、style2.预置属性
href=""、 src=""、 rel=""
- 3.事件属性
onclick="alert('提交成功')" - 4.自定义属性
data-**为通配符 可以自己随机命名data-tel、data-add、data-QQ
三、常用的布局标签
- 1.经典的布局标签
<div id="header">header</div><div id="main">main</div><div id="footer">footer</div>
尽量不要用id
<div class="header">header</div><div class="main">main</div><div class="footer">footer</div>
尽量只用class,实现样式复用
- 2.语义化的布局标签
<header>header</header><main>main</main><footer>footer</footer><article></article><nav></nav><aside></aside>
div+class与 html5语义化标签的优缺点
语义化标签的优点
- HTML结构清晰
- 代码可度性好
- 无障碍阅读
- 搜索引擎可根据标签的语言确定上下文和权重问题
- 移动设备能更完美的展示页面
- 便于团队维护开发
语义化标签相比div+css的缺点
·1. 目前项目90%以上是基于移动端, 不依赖或不在乎搜索引擎/seo
·2. 语义化的标签数量是有限的,不如class的自定义字符串再精准