Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Emmet8大基本语法+元素,标签,属性+html基础
Blogger Information
Blog 9
fans 0
comment 0
visits 4800
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Emmet8大基本语法+元素,标签,属性+html基础
兰博
Original
860 people have browsed it

Emmet8大基本语法+元素,标签,属性+html基础

一、Emmet8大基本语法（达到背诵级别）

1. 标签与内容: {text}

  1. <h3>html是结构化标签语言</h3>
  2. <div class="title">默认标签div</div>
  3. <hr />

2. 属性和语法糖: [attr]

  1. <!-- [id=app]{app} -->
  2. <div id="app">app</div>
  3. <!-- [class=title]{title} -->
  4. <div class="title">title</div>
  5. <!-- id,class是高频,通用属性,emmet为它定制了"语法糖" -->
  6. <!-- `id => #, class => .` -->
  7. <!-- #app{app1} -->
  8. <div id="app">app1</div>
  9. <!-- .title{title1} -->
  10. <div class="title">title1</div>
  11. <hr />

3. 重复: *

  1. <!-- .container{box}*3 -->
  2. <div class="container">box</div>
  3. <div class="container">box</div>
  4. <div class="container">box</div>
  5. <hr />

4. 父子: >

  1. <!-- ul>li{item}*3 -->
  2. <ul>
  3.   <li>item</li>
  4.   <li>item</li>
  5.   <li>item</li>
  6. </ul>
  7. <hr />

5. 兄弟: +

  1. <!-- h3{标题}+p{内容} -->
  2. <h3>标题</h3>
  3. <p>内容</p>
  4. <hr />

6. 父级: ^

  1. <!-- .box>span{text}^h3{小标题} -->
  2. <div class="box">
  3.   <span>text</span>
  4. </div>
  5. <h3>小标题</h3>
  6. <hr />

7. 分组: (...)

  1. <!-- nav>h3{导航}+ul>li*3>a{link} -->
  2. <!-- nav>h3{导航}+(ul>li*3>a{link}) -->
  3. <nav>
  4.   <h3>导航</h3>
  5.   <ul>
  6.     <li><a href="">link</a></li>
  7.     <li><a href="">link</a></li>
  8.     <li><a href="">link</a></li>
  9.   </ul>
  10. </nav>
  11. <hr />

8. 序号: $,$@ 重点牢记

  1. <!--默认从1开始基本语法: ul>li{item-$}*3 -->
  2. <ul>
  3.   <li>item-1</li>
  4.   <li>item-2</li>
  5.   <li>item-3</li>
  6. </ul>
  8. <!--自定义起始序号: ul>li{item-$@6}*3 -->
  9. <ul>
  10.   <li>item-6</li>
  11.   <li>item-7</li>
  12.   <li>item-8</li>
  13. </ul>
  15. <!--逆序: ul>li{item-$@-1}*3 -->
  16. <ul>
  17.   <li>item-3</li>
  18.   <li>item-2</li>
  19.   <li>item-1</li>
  20. </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)
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Title</title>
  6.     </head>
  7.     <body>
  8.         // php
  9.         <?php $site = 'php.cn'>
  10.         <h1 class="title">Hello, <?=$site> </h1>
  12.         // css
  13.         <style>
  14.             .title {color: red}
  15.         </style>
  17.         // js
  18.         <script src="my.js"></script>
  19.     </body>
  20. </html>

三 html基础

1. html 文档结构

  1. element = tag + attribute
  2. 元素 = 标签 + 属性
  3. html 文档 = <!DOCTYPE> + <html>
  4. html 根元素 = <head> + <body>

2. html 渲染方式

  1. 自动修复: 校正语法,缺失元素
  2. 显示顺序: 书写顺序一致,左->右,上->下,同步/异步

3. html 页面三宝

  1. element: DOM 元素
  2. css: 层叠样式表
  3. JavaScript: 前端脚本
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的很好，下次可以在https://www.php.cn/member/courses/work.html中提交作业
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post