Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > markdown基本语法和语义化标签
Blogger Information
Blog 13
fans 0
comment 7
visits 17436
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基本语法和语义化标签
ccc9112020
Original
981 people have browsed it

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>
  30.   </body>
  31. </html>

链接css\demo1.css

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

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

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

结语：

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：样式无效, 先忽略, 这不重要, 不影响现在学习, 等学到css再说
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
1 comments
ccc2020 2020-09-29 15:51:45
引用的代码是>,没有写出来
1 floor
Author's latest blog post