Community Learn Tools Library Leisure
search
English
Home > List of blog posts > emmet的语法和实际应用
Blogger Information
Blog 29
fans 1
comment 0
visits 14857
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
emmet的语法和实际应用
风车
Original
315 people have browsed it

emmet的语法和实际应用

接下来是代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>7.02作业</title>
  8. </head>
  9. <body>
  10. <!-- 父子关系 用 >  重复生成用*  顺序用$  顺序起始数 用@ -->
  11. <!-- ul>li*3>a{首页} -->
  12. <ul>
  13.   <li><a href="">首页3</a></li>
  14.   <li><a href="">首页4</a></li>
  15.   <li><a href="">首页5</a></li>
  16. </ul>
  18. <!-- 兄弟关系用  +   -->
  19. <!-- .title{学校名称}+.url{北大附中} -->
  20.   <div class="title">学校名称</div>
  21.   <div class="url">北大附中</div>
  24.   <!-- 创建一个五行八列表格 -->
  25.   <style>
  26.     table{
  27.       border-collapse: collapse;
  28.     }
  29.     table th,table td{
  30. border: 1px solid;
  31. padding: 10px;
  32.     }
  33.   </style>
  34.   <table>
  35.     <caption>第二学期课程表</caption>
  36.     <thead>
  37.       <tr>
  38.         <th>     </th>
  39.         <th>第一节</th>
  40.         <th>第二节</th>
  41.         <th>第三节</th>
  42.         <th>午休</th>
  43.         <th>第一节</th>
  44.         <th>第二节</th>
  45.       </tr>
  47.     </thead>
  49.     <tbody> 
  50.       <tr>
  51.         <th>周一</th>
  52.         <td>语文</td>
  53.         <td>语文</td>
  54.         <td>语文</td>
  55.         <td>午休</td>
  56.         <td>语文</td>
  57.         <td>语文</td>
  59.        </tr>
  60.        <tr>
  61.         <th>周二</th>
  62.         <td>语文</td>
  63.         <td>语文</td>
  64.         <td>语文</td>
  65.         <td>午休</td>
  66.         <td>语文</td>
  67.         <td>语文</td>
  69.        </tr>
  70.        <tr>
  71.         <th>周三</th>
  72.         <td>语文</td>
  73.         <td>语文</td>
  74.         <td>语文</td>
  75.         <td>午休</td>
  76.         <td>语文</td>
  77.         <td>语文</td>
  79.        </tr>
  80.        <tr>
  81.         <th>周四</th>
  82.         <td>语文</td>
  83.         <td>语文</td>
  84.         <td>语文</td>
  85.         <td>午休</td>
  86.         <td>语文</td>
  87.         <td>语文</td>
  89.        </tr>
  90.        <tr>
  91.         <th>周五</th>
  92.         <td>语文</td>
  93.         <td>语文</td>
  94.         <td>语文</td>
  95.         <td>午休</td>
  96.         <td>语文</td>
  97.         <td>语文</td>
  99.        </tr>
  100.     </tbody>
  101. </body>
  102. </html>

在实际应用中父子关系 用 > 兄弟关系用+ 重复生成用* 顺序用$ 顺序起始数用@
下面的代码会生成一个六行七列的课程表 其中的标签应用

<table> 是表格标签

<caption>用于定义表格标题

<td>用于定义表格内容

<th>和td的作用一样 用于定义表格内容 但是th会使内容加粗加黑

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
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