博客列表 >markdown基本语法和语义化标签

markdown基本语法和语义化标签

ccc9112020
ccc9112020原创
2020年09月29日 11:27:07899浏览

1. markdown语法

  1. 标题

    • 一级标题 #
    • 二级标题 ##
    • 三级标题 ###
    • 四级标题 ####
    • 五级标题 #####
    • 六级标题 ######
  2. 段落
    行未加两个空格,或者行与行之间空一格。
    我怎么记得原来的预习课程说法是换行加空格?
    就是说单纯换行无效。

  3. 文本样式
    *或者是**围在两边,分别表示斜体和加粗。下划线_也可以实现相同的效果。但是下划线需要空格,这里不详细说。
    譬如斜体还有粗体

  4. 分隔条
    ___,三个下划线或者是更多可以显示分隔条。

  5. 列表

    1. 有序列表
      用1. ,2. … 来表示。
    2. 无序列表
      用-开头就可以表示无序列表。
    3. 列表支持嵌套。
  6. 引用

    “书山有路勤为径,学海无涯苦作舟”

    “世上无难事,只怕有心人”

    <<JavaScript高级课程>>

  7. 代码
    • 单行代码
      单行代码很简单,在前后各一个反引号中间写代码就可以。譬如: echo "helloworld";
    • 多行代码
      三个反引号包裹代码
      1. console.log('1');
      2. console.log('2');
  8. 链接

    • 无提示
      代码 [php中文网](https://www.php.cn/)
      效果 php中文网
    • 带提示
      代码 [php中文网](https://www.php.cn/ "PHP中文网,带你走进PHP世界")
      效果 php中文网
  9. 图片
    和链接十分类似,不过前面要加一个!表示。
    ![独孤九剑PHP视频课程](https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg '东方不败表示膜拜')
    独孤九剑PHP视频课程

  10. 表格
    表格很简单。多做几次就完全掌握了。注意第二栏每一个两边冒号可以文字居中或者是左右对齐。

    1. |序号|名称|描述|
    2. |-|-|:-:|
    3. |1|vscode|微软出品免费编辑器|
    4. |2|phpstorm|inteliJ的收费产品|
    5. |3|sublime Text|经典前端神器|
序号 名称 描述
1 vscode 微软出品免费编辑器
2 phpstorm inteliJ的收费产品
3 sublime Text 经典前端神器

2. 语义化标签

  • html常用元素
序号 元素类型 描述 举例
1 结构元素 布局 <header><main><nav><footer>
2 文本元素 内容 <p><addr><strong>
3 链接元素 页面跳转 <a href="http://www.baidu.com">百度</a>;
4 列表元素 关联数据 <ul>+<li>,<ol>+<li>
5 表格元素 数据格式化 <table><tbody><tr><td>
6 表单元素 前后端交互 <form>+<label>+<input>
7 其他元素 不常用 <iframe><video>
  • html5语义化结构元素常用标签
序号 标签 名称 描述
1 <h1>-<h6> 标题 通常用来划分或者标注内容中的文本段落
2 <header> 页眉 一般是由导航,logo等元素组成
3 <footer> 页脚 一般是由友情链接,联系方式,备案号,版权等信息组成
4 <nav> 导航 导航通常是由一个或者是多个链接标签<a>组成
5 <main> 主体 展示页面主体内容,只出现一次
6 <article> 文档 本义是文档,实际上可以充当其他内容的容器
7 <aside> 边栏 与主体无关的信息(广告位,相关推荐,阅读排行等)
8 <section> 区块 文档或主体中的通用小组件
9 <div> 容器 本身无意义,通过他的属性来描述
  • 实例和效果演示
    demo1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>html5布局效果演示</title>
  7. <link rel="stylesheet" href="css/demo1.css" />
  8. </head>
  9. <body>
  10. <!-- 页眉 -->
  11. <header>
  12. <h1>&lt;header&gt;</h1>
  13. </header>
  14. <div class="container">
  15. <aside>&lt;aside&gt;</aside>
  16. <!-- 主体 -->
  17. <main>
  18. &lt;main&gt;
  19. <div>
  20. <section>&lt;section&gt;</section>
  21. <section>&lt;section&gt;</section>
  22. </div>
  23. </main>
  24. </div>
  25. <!-- 页脚 -->
  26. <footer>
  27. <h1>&lt;footer&gt;</h1>
  28. </footer>
  29. </body>
  30. </html>

链接css\demo1.css

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. body {
  7. width: 100vw;
  8. height: 100vh;
  9. display: grid;
  10. grid-template-rows: 60px 1fr 60px;
  11. gap: 10px;
  12. }
  13. header,
  14. footer {
  15. height: 300px;
  16. background-color: lightgreen;
  17. text-align: center;
  18. }
  19. .container {
  20. display: grid;
  21. grid-template-columns: 200px 1fr;
  22. gap: 10px;
  23. padding: 10px;
  24. background-color: lightskyblue;
  25. }
  26. .container > aside {
  27. background-color: lightcyan;
  28. text-align: center;
  29. }
  30. .container > main {
  31. display: grid;
  32. grid-template-rows: 1fr 200px;
  33. background-color: wheat;
  34. text-align: center;
  35. padding: 10px;
  36. }
  37. .container > main > div {
  38. display: grid;
  39. grid-template-columns: 1fr 1fr;
  40. gap: 10px;
  41. }
  42. main div section {
  43. background-color: violet;
  44. }

效果图:
语义化标签效果演示

  • emmet小知识点
    以下代码可以快速生成列表和表格,详细视频可以学习 php中文网
  1. ul.list>li.item*10>a{导航$}
  2. table>tr*10>td{小明$}*8

结语:

第一天作业,做的好慢。这些都是基础。
以后需要加快速度才可以。
还有不同的工具的markdown解释不一样,导致vscode和作业提交的效果不一样。
另外,这编辑区每一次代码后的文字颜色居然跟着改变,不知道什么原因?
还有,语义化标签实例,我的header设置高度居然不会改变,而footer却会,不知道什么原因?

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
ccc20202020-09-29 15:51:451楼
引用的代码是>,没有写出来