markdown使用

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

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

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

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

示例:
我是加粗的文本

我是斜体文本

我是斜体加粗文本

我是删除线文本~

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

示例:

这是第一个引用

这是第二个引用

这是第三个引用

四、分割线,加上三个-

示例:


11


https://www.php.cn/blog/detail/22


33





五、图片

![显示在图片下的文章,对图片的解释](图片地址“图片标题”)

示例:
![我是图片下文字](https://img.php.cn/upload/aroundimg/000/000/001/623c25c006c91144.jpg “我是图片下文字”)
https://www.php.cn/blog/detail/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>
  10. </body>
  11. </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. -->
  4. <div class="title">
  5. 站点名称
  6. </div>
  7. <div class="title">
  8. php中文网
  9. </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>
  9. </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>
  60. <!-- <tbale>
  61. <captiion>课程表</captiion>
  62. <thead>
  63. <tr>
  64. <th>星期1</th>
  65. <th>星期2</th>
  66. <th>星期3</th>
  67. </tr>
  68. </thead>
  69. <tdbody>
  70. <tr>
  71. <td>周一</td>
  72. <td>周一</td>
  73. <td>周一</td>
  74. <td>周一</td>
  75. <td>周一</td>
  76. <td>周一</td>
  77. <td>周一</td>
  78. <td>周一</td>
  79. </tr>
  80. <tr>
  81. <td>周一</td>
  82. <td>周一</td>
  83. <td>周一</td>
  84. <td>周一</td>
  85. <td>周一</td>
  86. <td>周一</td>
  87. <td>周一</td>
  88. <td>周一</td>
  89. </tr>
  90. <tr>
  91. <td>周一</td>
  92. <td>周一</td>
  93. <td>周一</td>
  94. <td>周一</td>
  95. <td>周一</td>
  96. <td>周一</td>
  97. <td>周一</td>
  98. <td>周一</td>
  99. </tr>
  100. </tdbody>
  101. </tbale> -->
  102. <!-- <table>
  103. <caption>值日表</caption>
  104. <thead>
  105. <tr>
  106. <th>星期1</th>
  107. <th>星期2</th>
  108. <th>星期3</th>
  109. </tr>
  110. </thead>
  111. <tbody>
  112. <tr>
  113. <td> 周一</td>
  114. </tr>
  115. <td>
  116. <td> 周一</td>
  117. </td>
  118. <tr>
  119. <td> 周一</td>
  120. </tr>
  121. <tr>
  122. <td> 周一</td>
  123. </tr> -->
  124. </tbody>
  125. </table>
  126. </body>
  127. </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>
  16. </body>
  17. </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>
  8. <!-- 因为html是结构化文本,从上往下解析,所以引入的web元素必须使用标签包装
  9. html是结构化文本,从上往下解析,
  10. -->
  11. <!-- js使用<script></script> -->
  12. <script>
  13. //js将当前页面解析中断了
  14. alert('hello')
  15. </script>
  16. </head>
  17. <body>
  18. <!-- 1、html :代码 模板/结构
  19. 2、css样式:html 元素的样式与布局
  20. 3、js脚本:JavaScript。控制页面元素交互 -->
  21. <!-- css 的style的标签,对位置不敏感 -->
  22. <!-- js的<script标签 对涉及到 html-dom元素操作,对位置敏感 -->
  23. <!--
  24. html:结构 ,使用<template
  25. css:样式 style
  26. js:交互 script 会中断当前html页面的解析
  27. .vue
  28. -->
  29. <!-- 原生代码,浏览器为h1标签添加默认样式 -->
  30. <h1>第20期同学们大家好</h1>
  31. <!-- 1个em 16像素 -->
  32. <style>
  33. /* 当前页面元素要应用到的自定义样式 */
  34. h1{
  35. /* 自定义样式 */
  36. /* 此处只是声明。并不是操作 */
  37. color:blueviolet
  38. /* color: rgb(0,255,25); */
  39. }
  40. /* 当前页面中,已经有两个组成部分,html+css */
  41. </style>
  42. <script>
  43. //js脚本
  44. //将body 的背景颜色修改
  45. // <!-- <html></html>文档是由从上往下解析的 ,不认识body -->
  46. document.body.style.backgroundColor = 'yellow'
  47. // 将js代码放到body结束标签前面,才能保证获取到指定的demo的元素
  48. document.querySelector('h1').style.color = 'red'
  49. // 不管写到哪儿,总是解析到body前面,约定大于规则
  50. </script>
  51. </body>
  52. </html>

更多相关文章

  1. Android标题栏ToolBar详解
  2. markdown语法
  3. markdown和emmet
  4. [Android菜鸟笔记]xml实现编辑框/按钮的椭圆样(shape标签)+应用
  5. Android(安卓)应用程序窗体显示状态操作(requestWindowFeature()
  6. Android中实现全屏、无标题栏的两种办法(另附Android系统自带样式
  7. Android(安卓)Dialog定义没有标题的注意事项
  8. **android studio 编写淘宝界面## 标题**
  9. Android(安卓)全屏无标题详解

随机推荐

  1. C#中关于AutoMapper应用的实例
  2. 使用Asp.net实现信息管理系统的数据统计
  3. .net MVC中forms验证的使用实例详解
  4. 比较.NET中接口与类
  5. Asp.net实现文件下载功能
  6. Entity Framework自定义分页效果的实现教
  7. 解决Asp.net的MVC中Razor常见问题方法
  8. 在Linux下搭建.net core开发环境教程
  9. 有关asp.net如何实现多个文件同时下载问
  10. 讨论在VS2015下使用EF框架的使用方法