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><在这里输入想输入的页眉即可></h1></header><div class="container"><!-- 边栏 --><aside><h1><在这里输入侧边栏></h1></aside><!-- 主体区 --><main><h1><在这里输入主体内容></h1><div><section><h1><主体内容1></h1></section><section><h1><主体内容2></h1></section></div></div></main><!-- 页脚 --><footer><h1><在这里输入页脚内容，例如友情链接，技术支持等></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;}
