search

博客列表 >markdown使用和emmet语法

markdown使用和emmet语法

P粉314265155
P粉314265155原创
2022年07月02日 16:12:59601浏览

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>
上一条：0701 Markdown语法/emmet语法下一条：跟着大牛学PHP--Markdown语法基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多