markdown语法
一级标题
一个文档只有一个大标题
二级标题
三级标题
段落
段落1
段落2
2. 列表
有序列表:
- 第一个
- 第二个
- 第三个
无序列表:
- 前端(减号,空格)
- 后端
- php
- 嵌套1(前面两空格,减号,空格)
- 嵌套2
3.引用
引用块, 引用通过使用 > 符号来进行引用
其实我是一个不爱说话的人
都是被逼的,生活所迫
4.代码块
单行代码: 使用‘英文状态下的~键位来实现’<?php include "header.php" ?>
多行代码: 三个~来实现
PS:在使用多行代码块指令符的时候还要指明代码语言的种类,多行代码使用
<!DOCTYPE html>
<html>
<head> </head>
<body></body>
</html>
5.链接
只显示链接文本:
php中文网
全显示:
php中文网https://www.php.cn
只显示链接:
php中文网https://www.php.cn
6.图片
下面是显示本地图片
下面是显示网络图片
7.表格
学号 | 姓名 | 班级 | 性别 |
---|---|---|---|
1 | 李伟忠 | 2班 | 男 |
2 | 李三 | 2班 | 男 |
3 | 张四 | 1班 | 男 |
8.字体
正常
加粗
斜体
删除线
9.总结
markdown语法规范不一致,不同工具预览效果不一致
允许功能扩展,例如: 分式,流程图
语义化结构元素
序号 标签 名称 描述
- <h1>-<h6> 标题 通常用来划分或标注内容中的文本段落
- <header> 页眉 一般是由导航, logo 等元素组成
- <footer> 页脚 一般是由友情链接,联系方式,备案号,版权等信息组成
- nav 导航 导航通常是由一个或多个链接标签<a>标签组成
- <main> 主体 展示页面主体内容,建议一个页面,只出现一次
- <article> 文档 本义是文档, 实际上可以充当其它内容的容器
- <aside> 边栏 与主体无关的信息(广告位, 相关推荐, 阅读排行等)
- <section> 区块 文档或主体中的通用小组件
- <div> 容器 本身无任何语义,通过它的属性来描述用途
<!DOCTYPE>
<html lang="en">
<head>
<meat chatset="UTF-8" />
<meat name="viewport" content="width=device-width,inttial-scale=1.0 />
<!--标题内容-->
<title>第一次作业</title>
</head>
<body>
<!--页眉-->
<header>
<h4><这里面输入你想要的页眉即可>(<是左括号<;>是右括号>)</h4>
</header>
<!--边栏-->
<aside>
<h3><这里面输入你的边栏内容即可></h3>
</aside>
<!--主体-->
<main>
<h2><这里面输入你的主体内容即可></h2>
</main>
<!--区块-->
<div>
<section>
<h2>区块1</h2>
</section>
<section>
<h2>区块2</h2>
</section>
</div>
<!--页脚-->
<footer>
<h2>这里面输入你的页脚内容即可,一般是友情链接或ICP备案号等</h2>
</footer>
</body>
</html>
加载外部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;
}