首页 > 博客列表 > markdown语法以及html语义化结构元素的种类与用途

博主信息

博文 6

粉丝 1

访问量 9711

专题推荐

更多>

markdown的语法及演示

1、markdown与heml的区别

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

2、markdown的常用语法与演示

1、标题的写法

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

2、列表的写法

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

上午8：30上班
中午11：40下班
11：40-13：50午休
下午13：50上班
傍晚18：00下班

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

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

3、代码块

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

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

4、链接

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

学习使我快乐 https://www.php.cn

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>`	容器	本身无任何语义,通过它的属性来描述用途

实际运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>第一次作业</title>
</head>
<body>
        <!-- 页眉 -->
        <header>
          <h1>&lt;在这里输入想输入的页眉即可&gt;</h1>
        </header>
        <div class="container">
          <!-- 边栏 -->
          <aside>
            <h1>&lt;在这里输入侧边栏&gt;</h1>
          </aside>
          <!-- 主体区 -->
          <main>
            <h1>&lt;在这里输入主体内容&gt;</h1>
          <div>
            <section>
              <h1>&lt;主体内容1&gt;</h1>
            </section>
            <section>
              <h1>&lt;主体内容2&gt;</h1>
            </section>
          </div>
        </div>
      </main>
        <!-- 页脚 -->
        <footer>
          <h1>&lt;在这里输入页脚内容，例如友情链接，技术支持等&gt;</h1>
        </footer>
</body>
</html>

预览效果:

效果预览
图上所实现的效果样式是同通加载外部css文件实现的效果，奉送上css的代码可供参考：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  gap: 10px;
}
header,
footer {
  height: 80px;
  background-color: lightgreen;
  text-align: center;
}
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px;
  padding: 10px;
  background-color: lightskyblue;
}
.container > aside {
  background-color: lightcyan;
  text-align: center;
}
.container > main {
  display: grid;
  grid-template-rows: 1fr 200px;
  background-color: wheat;
  text-align: center;
  padding: 10px;
}
.container > main > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
main div section {
  background-color: violet;
}

批改老师：

天蓬老师

批改状态：合格

老师批语：非常认真

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法以及html语义化结构元素的种类与用途

2020-09-29 14:16:35