简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > markdown使用和emmet语法
Blogger Information
Blog 46
fans 2
comment 0
visits 19132
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
markdown使用和emmet语法
P粉314265155
Original
588 people have browsed it

markdown使用

一、标题用#进行区分，且#在第一行，一般情况三个标题即可。#后面不跟空格

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

二、字体可以加粗、斜体、斜体加粗、删除线

加粗：用两个 *包裹
斜体:用一个*包裹
斜体加粗：用三个*包裹
删除线：用 两个 ~包裹

示例：
我是加粗的文本

我是斜体文本

我是斜体加粗文本

我是删除线文本~

三、引用 在引用文字前加上>

示例：

这是第一个引用

这是第二个引用

这是第三个引用

四、分割线，加上三个-

示例：

11

22

33

五、图片

![显示在图片下的文章，对图片的解释]（图片地址“图片标题”）

示例：
![我是图片下文字]（https://img.php.cn/upload/aroundimg/000/000/001/623c25c006c91144.jpg “我是图片下文字”）
22
我是图片下文字

六、我是超链接

[超链接名称]（超链接地址”超链接title标题”）
我是百度云
我是百度

七、列表

无序列表：
用+ - *任意一种，注意：- + * 跟内容之间都要有一个空格
示例：

  • 我是无序列表
  • 我是无序列表
  • 我是无序列表

有序列表
用数字加点，注意：序号跟内容之间要有空格，上一级和下一级之间敲三个空格即可
示例：

  1. 我是有序列表
  2. 我是有序列
    2.1 我是有序列表

八、表格

用竖线|标识列分隔 用---标识横线分隔
示例：

星期一 星期二 星期三
数学 语文 英语
物理 化学 生物
姓名 技能 排行
刘备 哭 大哥
关羽 打 二哥
张飞 骂 三弟
姓名 技能 排行
刘备 哭 大哥
关羽 打 二哥
张飞 骂 三弟

九、代码块

  1. 我是代码块
  2. 我是代码块

我是单行代码

emmet使用

一、快速生成生成html文档

在vscode 输入！按回车键自动补全html
示例：
<!-- ! -->

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. </html>

二、快速创建一个盒子模型模型/层级关系 ，以>+号讲解

在vscode里面输入 div.box{box}按回车键自动补全
或者用 .box{box}按回车键自动补全

  1.  <!-- div.box{box}      -->
  2. <div class="box">box</div>
  3. <!-- .box.{box} -->
  4. <div class="box">box</div>
  5. <!-- div # 加回车键 -->
  6. <div id="box"></div>
  7. <!-- div.加回车键 -->
  8. <div class=""></div>

二、快速创建列表

父子关系

ul.li>item*4>a{www.baidu.com}

  1. <!--    父子关系
  2.     ul.li>item*4>a.www.baidu.com  
  3. -->
  4. <ul>
  5.     <li class="item"><a href="" class="www baidu com"></a></li>
  6.     <li class="item"><a href="" class="www baidu com"></a></li>
  7.     <li class="item"><a href="" class="www baidu com"></a></li>
  8. </ul>
兄弟关系

.title{站点名称}+url{php中文网} 用+号即可

  1. <!-- 
  2.     .title{站点名称}+url{php中文网} 
  3. -->
  5. <div class="title">
  6. 站点名称
  7. </div>
  8. <div class="title">
  9.     php中文网
  10.     </div>
重复生成 用*号
  1. <!-- 第一步 -->
  2. <!--
  3.     ul>li>a{首页}*4
  4.  -->
  5. <!-- <ul>
  6.     <li><a href="">首页</a></li>
  7.     <li><a href="">首页</a></li>
  8.     <li><a href="">首页</a></li>
  10. </ul> -->
序号

$：数字递增从1开始增加
@：可以指定$索引从任意数字递增
$@-5:表示从几倒数到5
ul#5>li*4>a>{item$}

  1. <ul id="5">
  2.     <li><a href="">item1</a></li>
  3.     <li><a href="">item2</a></li>
  4.     <li><a href="">item3</a></li>
  5.     <li><a href="">item4</a></li>
  6. </ul>

<!-- ul#5>li*3>a{item$@4} --> 

  1. <ul id="5">
  2.     <li><a href="">item4</a></li>
  3.     <li><a href="">item5</a></li>
  4.     <li><a href="">item6</a></li>
  5. </ul>

<!-- ul.hello>li*3>a{item$@-4} --> 

  1. <ul class="hello">
  2.     <li><a href="">item6</a></li>
  3.     <li><a href="">item5</a></li>
  4.     <li><a href="">item4</a></li>
  5. </ul>

三、快速创建表

表由table组成，里面包含thead标签和tbody标签组成。其中thead里面由tr\th组成，tbody里面有tr/td组成
caption:标识表格的标题
th：表头的单元格，表格中的文字以粗体显示。表格中可以不用此标签，th必须放在tr标签内
tr:表示行。一组行标签里面可以放td/th标签
td:表示列，td标签放在tr标签里面。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.       <style>
  9.           table {
  10.               border-collapse: collapse;
  11.           }
  12.           table td,
  13.           table th {
  14.               border: 1px solid blue;
  15.           }
  16.       </style>
  17.   </head>
  18.   <body>
  19.       <!-- 快速生成一个表格 -->
  20.       <!-- table>caption{课程表}+(thead>tr>th{星期$}*7)+(tbody>tr*6>td{html}*8) 我写下你看看
  21. 老师：<!-- table>caption{学生信息表}+(thead>tr>th{title}*8)+(tbody>tr*5>td{item}*8) -->
  22.     <table>
  23.   -->
  24.        <table>
  25.         <cation>值日表</cation>
  26.         <thead>
  27.             <tr>
  28.                 <th>星期1</th>
  29.                 <th>星期2</th>
  30.                 <th>星期3</th>
  31.                 <th>星期4</th>
  32.                 <th>星期5</th>
  33.             </tr>
  34.         </thead>
  35.         <tbody>
  36.             <tr>
  37.                 <td>周1</td>
  38.                 <td>周1</td>
  39.                 <td>周1</td>
  40.             </tr>
  41.             <tr>
  42.                 <td>周1</td>
  43.                 <td>周1</td>
  44.                 <td>周1</td>
  45.             </tr>
  46.             <tr>
  47.                 <td>周1</td>
  48.                 <td>周1</td>
  49.                 <td>周1</td>
  50.             </tr>
  51.             <tr>
  52.                 <td>周1</td>
  53.                 <td>周2</td>
  54.                 <td>周3</td>
  55.                 <td>周5</td>
  56.                 <td>周6</td>
  57.             </tr>
  58.         </tbody>
  59.       </table>
  63.       <!-- <tbale>
  64.         <captiion>课程表</captiion>
  65.         <thead>
  66.             <tr>
  67.                 <th>星期1</th>
  68.                 <th>星期2</th>
  69.                 <th>星期3</th>
  70.             </tr>
  71.         </thead>
  72.         <tdbody>
  73.             <tr>
  74.                 <td>周一</td>
  75.                 <td>周一</td>
  76.                 <td>周一</td>
  77.                 <td>周一</td>
  78.                 <td>周一</td>
  79.                 <td>周一</td>
  80.                 <td>周一</td>
  81.                 <td>周一</td>
  82.             </tr>
  83.             <tr>
  84.                 <td>周一</td>
  85.                 <td>周一</td>
  86.                 <td>周一</td>
  87.                 <td>周一</td>
  88.                 <td>周一</td>
  89.                 <td>周一</td>
  90.                 <td>周一</td>
  91.                 <td>周一</td>
  92.             </tr>
  93.             <tr>
  94.                 <td>周一</td>
  95.                 <td>周一</td>
  96.                 <td>周一</td>
  97.                 <td>周一</td>
  98.                 <td>周一</td>
  99.                 <td>周一</td>
  100.                 <td>周一</td>
  101.                 <td>周一</td>
  102.             </tr>
  103.         </tdbody>
  104.       </tbale> -->
  111.       <!-- <table>
  112.         <caption>值日表</caption>
  113.         <thead>
  114.             <tr>
  115.                 <th>星期1</th>
  116.                 <th>星期2</th>
  117.                 <th>星期3</th>
  118.             </tr>
  119.         </thead>
  120.         <tbody>
  121.             <tr>  
  122.             <td> 周一</td>   
  123.             </tr>
  124.           <td>
  125.              <td> 周一</td>  
  126.             </td>  
  127.             <tr>
  128.                 <td> 周一</td>  
  129.             </tr>
  130.             <tr>
  131.                 <td> 周一</td>  
  132.             </tr> -->
  133.         </tbody>
  134.       </table>
  135.   </body>
  136. </html>

html使用

一、快速生成生成html文档

  1. <!-- 文档类型声明 -->
  2. <!DOCTYPE html>
  3. <!-- html标签，根标签，根元素 -->
  4. <html lang="zh-cn">
  5. <!-- html 只有两个元素 head body -->
  6.   <head>
  7.    <!-- 头元素，浏览器，搜索引擎，用户不在意，看不到 -->
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>Document</title>
  12. </head>
  13. <!-- 用户在页面中看到的内容 -->
  14. <body>
  15.     <h2>晚上好</h2>
  17. </body>
  18. </html
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>一个html文档有哪三部分组成</title>
  9. <!-- 因为html是结构化文本，从上往下解析，所以引入的web元素必须使用标签包装 
  10. html是结构化文本，从上往下解析，
  12. -->
  13. <!-- js使用<script></script> -->
  14. <script>
  15.     //js将当前页面解析中断了
  16.      alert('hello')
  17. </script>
  20. </head>
  21. <body>
  25.     <!-- 1、html :代码 模板/结构
  26.     2、css样式：html 元素的样式与布局
  27.     3、js脚本：JavaScript。控制页面元素交互 -->
  29.     <!-- css   的style的标签，对位置不敏感 -->
  30.     <!-- js的<script标签 对涉及到 html-dom元素操作，对位置敏感 -->
  32. <!-- 
  33. html:结构 ，使用<template
  34. css:样式    style
  35. js：交互  script  会中断当前html页面的解析
  36. .vue
  38. -->
  43.     <!-- 原生代码，浏览器为h1标签添加默认样式 -->
  44.     <h1>第20期同学们大家好</h1>
  45. <!-- 1个em 16像素 -->
  47. <style>
  48.     /* 当前页面元素要应用到的自定义样式 */
  49. h1{
  50.     /* 自定义样式 */
  51.     /* 此处只是声明。并不是操作 */
  52.     color:blueviolet
  53.     /* color: rgb（0,255,25）; */
  54. }
  56. /* 当前页面中，已经有两个组成部分，html+css */
  58. </style>
  61. <script>
  62.     //js脚本
  63.     //将body 的背景颜色修改
  64.     // <!-- <html></html>文档是由从上往下解析的 ，不认识body -->
  65.     document.body.style.backgroundColor =   'yellow'
  66.     // 将js代码放到body结束标签前面，才能保证获取到指定的demo的元素
  67.     document.querySelector('h1').style.color  =  'red'
  68.     // 不管写到哪儿，总是解析到body前面，约定大于规则
  69.     </script>
  70. </body>
  71. </html>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！