Home > List of blog posts > markdown语法与emmet语法

Blogger Information

Blog 19

fans 0

comment 0

visits 8369

Special Recommendation

More>

Related recommendations

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>

Correcting teacher：

PHPz

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

markdown语法与emmet语法

2022-08-02 15:05:07