emmet的语法和实际应用

接下来是代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>7.02作业</title>
</head>
<body>
<!-- 父子关系 用 >  重复生成用*  顺序用$  顺序起始数 用@ -->
<!-- ul>li*3>a{首页} -->
<ul>
  <li><a href="">首页3</a></li>
  <li><a href="">首页4</a></li>
  <li><a href="">首页5</a></li>
</ul>
<!-- 兄弟关系用  +   -->
<!-- .title{学校名称}+.url{北大附中} -->
  <div class="title">学校名称</div>
  <div class="url">北大附中</div>
  <!-- 创建一个五行八列表格 -->
  <style>
    table{
      border-collapse: collapse;
    }
    table th,table td{
border: 1px solid;
padding: 10px;
    }
  </style>
  <table>
    <caption>第二学期课程表</caption>
    <thead>
      <tr>
        <th>     </th>
        <th>第一节</th>
        <th>第二节</th>
        <th>第三节</th>
        <th>午休</th>
        <th>第一节</th>
        <th>第二节</th>
      </tr>
    </thead>
    <tbody> 
      <tr>
        <th>周一</th>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>午休</td>
        <td>语文</td>
        <td>语文</td>
       </tr>
       <tr>
        <th>周二</th>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>午休</td>
        <td>语文</td>
        <td>语文</td>
       </tr>
       <tr>
        <th>周三</th>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>午休</td>
        <td>语文</td>
        <td>语文</td>
       </tr>
       <tr>
        <th>周四</th>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>午休</td>
        <td>语文</td>
        <td>语文</td>
       </tr>
       <tr>
        <th>周五</th>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>午休</td>
        <td>语文</td>
        <td>语文</td>
       </tr>
    </tbody>
</body>
</html>

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

<table> 是表格标签

<caption>用于定义表格标题

<td>用于定义表格内容

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

emmet的语法和实际应用

emmet的语法和实际应用

接下来是代码

相关文章