微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

首页 > 博客列表 > markdown语法与emmet语法

博主信息

博文 16

粉丝 0

访问量 20688

专题推荐

更多>

一级标题

二级标题

-## 二级标题， ### 三级标题 #### 四级标题

-三个- 出分隔符

列表

无序列表

小米手机
华为手机
OPPO 手机

有序列表

1.litem1
2.litem2
3.litem3

链接

只显示地址:http://www.baidu.com
只显示文本：百度

图片

代码(反引号)

单行代码：const obj={};
多行代码：

javascript(高亮)（简写js含有php可以写php）


const obj={a:1，b:2};
const add= obj=> obj.a+obj.b;
console.log(add(obj));

$email = 'helle.php';

表格

开学第一课	markdown 语法	emmet 语法

| 把字体抱起来 | 有多少列就加-号，如上面有三列就加三个—-
格式就是 | ————— | ——————- | ————— |

引用

大于号出引用

大于号越多引用越多

emmet 语法

!+Tab 快速出文本

<!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>
          div+#+box快速形成文本
  </body>
</html>

div + #+ box (快速形成文本)
<div id="box"></div>
class是一个点.(如下)
div +. + active
<div class="at"></div>
还有快速形成的方法如下
#+box
<div id="box"></div>
(和上面一样只是更简化)
(省略标签就是默认div标签)
(标签不写就是也是div标签)
.+ active
<div class="active"></div>
(总结为 id，class语法)

语法写法
（一次性全写/简写）
p + {hello world}
<p>hello world</p>
快速生成横级结构标签
div>p>a(即可快速生成如下)(div大于p大于a大于号就是代表横级，div下面有p标签p标签下面有a标签就会生成。)(上下级)
<div>
      <p>
        <a href=""></a>
      </p>
    </div>
(有些元素是平级)
(现在三个标签就属于平级)
    <div></div>
    <p></p>
    <a href=""></a>
(如何快速生成)
div+p+a(兄弟平级)
<div></div>
<p></p>
<a href=""></a>
(特殊情况：负级生成)
div>p^a(现在生成的a是div的兄弟元素而且是p的负级元素)(此时的a标签是p标签的平级的负极元素)
    <div>
      <p></p>
    </div>
    <a href=""></a>
(重复操作)
a*5(重复*n)
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
a{link}*5(如上同理)
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
(重复操作此重复功能大多用来写链接)
ul>li*5
<ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
(需要标签可自行添加)
ul>li*5>a{link}
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
(属性操作)
a标签没有自带属性初始标签如下
<a href=""></a>
加入标签后如下
<a href="http://baidu.com">baidu.com</a>
如何快速生成如下
a{baidu.com}
<a href="">baidu.com</a>
生成后没有属性
下面即可一键生成
a[href="http://baidu.com"]{baidu.com}(即可生成)
序号$(需要序号的时候使用)
(下面是有序号与无序号区别)
ul>li{item}*5(这是无序号)
<ul>
     <li>item</li>
     <li>item</li>
     <li>item</li>
     <li>item</li>
     <li>item</li>
   </ul>
ul>li{item$}*5(这是有序号)
   <ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
     <li>item4</li>
     <li>item5</li>
   </ul>
ul>li*5>a{link$}(数字前面需要加多个0的话在符号前多加个$即可)
    <ul>
      <li><a href="">link1</a></li>
      <li><a href="">link2</a></li>
      <li><a href="">link3</a></li>
      <li><a href="">link4</a></li>
      <li><a href="">link5</a></li>
    </ul>
(或从指定数字开始加入$@数字即可，也可以反过来$@-s数字即可。)
ul>li*5>a{link$@5}
ul>li*5>a{link$@-5}