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.图片

下面是显示本地图片

下面是显示网络图片
php中文网

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>&lt这里面输入你想要的页眉即可&gt（&lt是左括号<；&gt是右括号>）</h4>
</header>
<!--边栏-->
<aside>
<h3>&lt这里面输入你的边栏内容即可&gt</h3>
</aside>
<!--主体-->
<main>
<h2>&lt这里面输入你的主体内容即可&gt</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;
}

李伟忠2020-9-28作业:md语法及语义化结构元素