markdown语法与emmet语法

markdown

标题：用1-6个#代表1-6号标题,建议最多用三号

 # 一号标题
 ## 二号标题
 ### 三号标题
 #### 四号标题
 ##### 五号标题
 ###### 六号标题

分割线：用三个及以上的’-‘或’*’
```
 ---
 ***
```
粗体和斜体:xxx,xxx

内容前后加一个*代表斜体

内容前后加两个*代表粗体
删除线：~~xxxx~~

在内容前后加上两个~~，给内容加删除线
超链接和图片

超链接:https://www.php.cn/

图片:!+[]+() ,!声明添加图片,[]内添加图片的备注,()添加图片链接地址
有序列表和无序列表

6.1 有序列表：使用 ‘数字+. ‘,点后面有空格
1. item1
2. item2
  1. item2.1
  2. item2.2
3. item3
  
  6.2无序列表:使用’- ‘
- item1
  - item1.1
- item2
表格:用’|’分割,搭配’—-‘使用

格式化文档可以使原表格更美观

id	name	age
1	Wang	23
2	Li	25
3	Zhao	18

代码

8.1 单行代码:在代码前后加 `

echo "Hello world!";

8.2 多行代码
```
 $a = "hello";
 echo $a;
```

emmet语法

作用：提高HTML/CSS书写速度

html文档结构

1.!+Tab

2.html:5

 <!DOCTYPE html>
 <html lang="en">
 <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>Document</title>
 </head>
 <body>
 </body>
 </html>

标签和属性

标签:div/li/h1
属性：id/class

<div id="" class="">xxx</div>

用#代表id,用. 代表class

  div#id    或 #id       → <div id="id"></div>
  div.class 或 .class    → <div class="class"></div>
  div是默认标签可以不写
  {}写内容
  #id{xxx}    →   <div id="id">xxx</div>

层级关系

父子: >

 ul#id>li.class*3
     <ul id="id">
         <li class="class"></li>
         <li class="class"></li>
         <li class="class"></li>
     </ul>
 ul>li>a
     <ul>
         <li>
             <a href=""></a>
         </li>
     </ul>

兄弟: +

 #id{id}+.class{class}
     <div id="id">id</div>
     <div class="class">class</div>

序号:$ 从1开始递增,@指定初始值

 ul>li{itme$}*3
     <ul>
         <li>itme1</li>
         <li>itme2</li>
         <li>itme3</li>
     </ul>
 ul>li{itme$@3}*3
     <ul>
         <li>itme3</li>
         <li>itme4</li>
         <li>itme5</li>
     </ul>

五行八列表格

table>caption{表格}+(thead>tr>th*8{表头})+(tbody>tr*5>td*8{内容})

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        table th,table td {
            border: 1px solid;
            padding: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>表格</caption>
        <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法与emmet语法

2022-08-02 15:05:07