简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > List of blog posts > markdown语法以及html语义化结构元素的种类与用途
Blogger Information
Blog 6
fans 1
comment 0
visits 7221
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语法以及html语义化结构元素的种类与用途
努力爬坑的小白程序猿
Original
882 people have browsed it

markdown的语法及演示

1、markdown与heml的区别

markdown与html有所不同，markdown是超轻量级的标记语言而html为超文本标记语言， markdown的有点在于语法简单，易上手，允许功能扩展,例如分式,流程图等，一般用于编写电子书、程序员编写技术文档等，而html作为超文本标记语言，主要用于页面结构的布局

2、markdown的常用语法与演示

1、标题的写法

markdown中，标题用“#”号来表示,一个“#”号为一级标题，类似与heml当中的<h1></h1>标签，两个“#”号为二级标题，类似与heml当中的<h2></h2>标签，以此类推。需要注意的是，一个markdown文件中，只可出现一个一级标题。

2、列表的写法

列表分为两种，一种是有序列表一种是无序列表:
有序列表的写法为“序号.空格”演示：

  1. 上午8：30上班
  2. 中午11：40下班
  3. 11：40-13：50午休
  4. 下午13：50上班
  5. 傍晚18：00下班

无序列的写法为“-号加一个空格来实现”，如果有多个层级可切换下一行在此缩进一定的字符即可达成缩进（这里推荐使用TAB键进行缩进），演示：

  • 前端
    • html
    • css
    • js
  • 后端
    • phh
    • java
    • python

3、代码块

代码块的用途是在编写文档时，经常会需要在markdown中附上代码，如果不使用代码块的话，写入的代码则不会以正确的代码形式出现，所以在markdown中写入代码一定要使用代码块，代码块的写法分为两种情况，单行代码和多行代码，单行代码需要使用“英文状态下的~键位来实现”以下是单行代码块的演示：
<a href="//m.sbmmt.com">php中文网</a>
在写多行代码的时候和单行代码有所不同，在使用多行代码块指令符的时候还要指明代码语言的种类，多行代码“使用三个英文下的~键来实现”,例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head></head>
  4. <body></body>
  5. </html>

4、链接

在这里有三种情况，一种是只显示链接文本，一种是全显示，还有一种是只显示链接，只显示链接文本的语法为[文本]+(链接)，演示：
学习使我快乐
只显示链接的语法为 文本+<链接>，演示：
学习使我快乐//m.sbmmt.com
全显示的语法为[文本]+(跳转链接)+<想让别人看到的链接>，演示：

学习使我快乐//m.sbmmt.com

5、表格

在markdown中制作表格，需要使用-符号和|符号进行手绘出来，写法为
演示：

姓名 年龄 班级 爱好
李红 7岁 一班 唱歌

要注意的是，表格无法设置大小, 列宽,以及行与列的合并，如果需要个性化需求, 可直接使用<table>标签

6、图片导入

在markdown导入图片时，需要使用！+[图片名称]+（图片地址），如果有特殊需要鼠标放在图片上显示文字的话可以使用！+[图片名称]+（图片地址 “提示文字”）来实现，演示：
演示图片

6、加粗和斜体

在markdown中文字加粗用**号来实现，斜体则用*来实现，演示：

加粗

斜体

引用

引用通过使用>符号来进行引用，演示：

学习使我快乐

3、HTML语义化结构元素的种类与用途

1、语义化结构

序号 标签 名称 描述
1 <h1>-<h6> 标题 通常用来划分或标注内容中的文本段落
2 <header> 页眉 一般是由导航, logo 等元素组成
3 <footer> 页脚 一般是由友情链接,联系方式,备案号,版权等信息组成
4 <nav> 导航 导航通常是由一个或多个链接标签<a>标签组成
5 <main> 主体 展示页面主体内容,建议一个页面,只出现一次
6 <article> 文档 本义是文档, 实际上可以充当其它内容的容器
7 <aside> 边栏 与主体无关的信息(广告位, 相关推荐, 阅读排行等)
8 <section> 区块 文档或主体中的通用小组件
9 <div> 容器 本身无任何语义,通过它的属性来描述用途

实际运用

  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.     <link rel="stylesheet" href="css/index.css">
  7.     <title>第一次作业</title>
  8. </head>
  9. <body>
  10.         <!-- 页眉 -->
  11.         <header>
  12.           <h1>&lt;在这里输入想输入的页眉即可&gt;</h1>
  13.         </header>
  15.         <div class="container">
  16.           <!-- 边栏 -->
  17.           <aside>
  18.             <h1>&lt;在这里输入侧边栏&gt;</h1>
  19.           </aside>
  20.           <!-- 主体区 -->
  21.           <main>
  22.             <h1>&lt;在这里输入主体内容&gt;</h1>
  24.           <div>
  25.             <section>
  26.               <h1>&lt;主体内容1&gt;</h1>
  27.             </section>
  28.             <section>
  29.               <h1>&lt;主体内容2&gt;</h1>
  30.             </section>
  31.           </div>
  32.         </div>
  33.       </main>
  34.         <!-- 页脚 -->
  35.         <footer>
  36.           <h1>&lt;在这里输入页脚内容，例如友情链接，技术支持等&gt;</h1>
  37.         </footer>
  38. </body>
  39. </html>

预览效果:

效果预览
图上所实现的效果样式是同通加载外部css文件实现的效果，奉送上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: 80px;
  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. }
  34. .container > main {
  35.   display: grid;
  36.   grid-template-rows: 1fr 200px;
  38.   background-color: wheat;
  39.   text-align: center;
  40.   padding: 10px;
  41. }
  42. .container > main > div {
  43.   display: grid;
  44.   grid-template-columns: 1fr 1fr;
  45.   gap: 10px;
  46. }
  47. main div section {
  48.   background-color: violet;
  49. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：非常认真
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
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • Back top