Emmet8大基本语法+元素,标签,属性+html基础
一、Emmet8大基本语法（达到背诵级别）
1. 标签与内容: {text}
<h3>html是结构化标签语言</h3><div class="title">默认标签div</div><hr />
2. 属性和语法糖: [attr]
<!-- [id=app]{app} --><div id="app">app</div><!-- [class=title]{title} --><div class="title">title</div><!-- id,class是高频,通用属性,emmet为它定制了"语法糖" --><!-- `id => #, class => .` --><!-- #app{app1} --><div id="app">app1</div><!-- .title{title1} --><div class="title">title1</div><hr />
3. 重复: *
<!-- .container{box}*3 --><div class="container">box</div><div class="container">box</div><div class="container">box</div><hr />
4. 父子: >
<!-- ul>li{item}*3 --><ul> <li>item</li> <li>item</li> <li>item</li></ul><hr />
5. 兄弟: +
<!-- h3{标题}+p{内容} --><h3>标题</h3><p>内容</p><hr />
6. 父级: ^
<!-- .box>span{text}^h3{小标题} --><div class="box"> <span>text</span></div><h3>小标题</h3><hr />
7. 分组: (...)
<!-- nav>h3{导航}+ul>li*3>a{link} --><!-- nav>h3{导航}+(ul>li*3>a{link}) --><nav> <h3>导航</h3> <ul> <li><a href="">link</a></li> <li><a href="">link</a></li> <li><a href="">link</a></li> </ul></nav><hr />
8. 序号: $,$@ 重点牢记
<!--默认从1开始基本语法: ul>li{item-$}*3 --><ul> <li>item-1</li> <li>item-2</li> <li>item-3</li></ul><!--自定义起始序号: ul>li{item-$@6}*3 --><ul> <li>item-6</li> <li>item-7</li> <li>item-8</li></ul><!--逆序: ul>li{item-$@-1}*3 --><ul> <li>item-3</li> <li>item-2</li> <li>item-1</li></ul>
二、元素,标签,属性
1. 标签
| 序号 |
类型 |
样式 |
案例 |
| 1 |
预定义 |
浏览器预置,可重定义 |
<div><h1><p> |
| 2 |
自定义 |
用户自定义 |
<lecture><email> |
2. 属性
| 序号 |
类型 |
名称与值 |
案例 |
| 1 |
预定义 |
浏览器预置 |
<div class="box"> |
| 2 |
自定义 |
用户自定义 |
<div data-user="admin"> |
元素三大通用属性: id, class, style
3. 元素
4. 文档
- 文档中的任何内容,必须用
标签引入,css,js,php - 呈现出
树状层级结构: DOM模型 (Document Object Model)
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> // php <?php $site = 'php.cn'> <h1 class="title">Hello, <?=$site> </h1> // css <style> .title {color: red} </style> // js <script src="my.js"></script> </body></html>
三 html基础
1. html 文档结构
- element = tag + attribute
- 元素 = 标签 + 属性
- html 文档 =
<!DOCTYPE> + <html> - html 根元素 =
<head> + <body>
2. html 渲染方式
- 自动修复: 校正语法,缺失元素
- 显示顺序: 书写顺序一致,左->右,上->下,同步/异步
3. html 页面三宝
- element: DOM 元素
- css: 层叠样式表
- JavaScript: 前端脚本
