博主信息
博文 9
粉丝 0
评论 0
访问量 8975
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Markdown学习初体验
空心菜博客
原创
661人浏览过

第一次作业-Markdown学习初体验


开发环境

  • 浏览器:Chrome
  • 编辑器:Vscode

安装 Vscode

  • 安装 vscode,并将推荐插件安装与配置好

  • vscode 插件列表


实例演示 emmet 语法

  • 代码语言
  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. /* css 高度w200 */
  10. /* css 背景 bgc */
  11. .box {
  12. width: 200px;
  13. background-color: #fff;
  14. background-color: red;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <!-- *id class语法 -->
  20. <!-- 生成id div# -->
  21. <div id=""></div>
  22. <!-- 生成class div. -->
  23. <div class=""></div>
  24. <!-- #box -->
  25. <div id="box"></div>
  26. <!-- .active -->
  27. <div class="active"></div>
  28. <!-- *文本 -->
  29. <!-- p{hello woeld} -->
  30. <p>hello woeld</p>
  31. <!-- *标签层级 -->
  32. <!-- div>p>a 上下层级-->
  33. <div>
  34. <p><a href=""></a></p>
  35. </div>
  36. <!-- div+p+a 兄弟平级-->
  37. <div></div>
  38. <p></p>
  39. <a href=""></a>
  40. <!-- div>p^a -->
  41. <div>
  42. <p></p>
  43. </div>
  44. <a href=""></a>
  45. <!-- 重复 *n -->
  46. <a href=""></a>
  47. <a href=""></a>
  48. <a href=""></a>
  49. <a href=""></a>
  50. <a href=""></a>
  51. <!-- 重复+内容*n -->
  52. <a href="">link</a>
  53. <a href="">link</a>
  54. <a href="">link</a>
  55. <a href="">link</a>
  56. <a href="">link</a>
  57. <!-- 导航 ul>li*3>a{link} -->
  58. <ul>
  59. <li><a href="">link</a></li>
  60. <li><a href="">link</a></li>
  61. <li><a href="">link</a></li>
  62. </ul>
  63. <!-- 属性 -->
  64. <a herf="https://www.baidu.com">baidu</a>
  65. <!-- #header -->
  66. <div id="header"></div>
  67. <!-- 序号 $ ui>li{ltme$}*5-->
  68. <ul>
  69. <li>itme1</li>
  70. <li>itme2</li>
  71. <li>itme3</li>
  72. <li>itme4</li>
  73. <li>itme5</li>
  74. </ul>
  75. <!-- ul>li*5>a{link$} -->
  76. <ul>
  77. <li><a href="">link1</a></li>
  78. <li><a href="">link2</a></li>
  79. <li><a href="">link3</a></li>
  80. <li><a href="">link4</a></li>
  81. <li><a href="">link5</a></li>
  82. </ul>
  83. <!-- ul>li*5>a{link$$} -->
  84. <ul>
  85. <li><a href="">link01</a></li>
  86. <li><a href="">link02</a></li>
  87. <li><a href="">link03</a></li>
  88. <li><a href="">link04</a></li>
  89. <li><a href="">link05</a></li>
  90. </ul>
  91. <!-- ul>li*5>a{link$@5} -->
  92. <ul>
  93. <li><a href="">link5</a></li>
  94. <li><a href="">link6</a></li>
  95. <li><a href="">link7</a></li>
  96. <li><a href="">link8</a></li>
  97. <li><a href="">link9</a></li>
  98. </ul>
  99. <!-- ul>li*5>a{link$@-5} -->
  100. <ul>
  101. <li><a href="">link9</a></li>
  102. <li><a href="">link8</a></li>
  103. <li><a href="">link7</a></li>
  104. <li><a href="">link6</a></li>
  105. <li><a href="">link5</a></li>
  106. </ul>
  107. </body>
  108. </html>
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学