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

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

李伟忠
李伟忠原创
2020年09月29日 06:52:45654浏览

markdown语法

一级标题


一个文档只有一个大标题

二级标题

三级标题

段落
段落1
段落2

2. 列表

有序列表:

  1. 第一个
  2. 第二个
  3. 第三个
    无序列表:
  • 前端(减号,空格)
  • 后端
  • php
    • 嵌套1(前面两空格,减号,空格)
    • 嵌套2

3.引用

引用块, 引用通过使用 > 符号来进行引用
其实我是一个不爱说话的人
都是被逼的,生活所迫

4.代码块

单行代码: 使用‘英文状态下的~键位来实现’
<?php include "header.php" ?>
多行代码: 三个~来实现
PS:在使用多行代码块指令符的时候还要指明代码语言的种类,多行代码使用

  1. <!DOCTYPE html>
  2. <html>
  3. <head> </head>
  4. <body></body>
  5. </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语法规范不一致,不同工具预览效果不一致
允许功能扩展,例如: 分式,流程图

语义化结构元素

序号 标签 名称 描述

  1. <h1>-<h6> 标题 通常用来划分或标注内容中的文本段落
  2. <header> 页眉 一般是由导航, logo 等元素组成
  3. <footer> 页脚 一般是由友情链接,联系方式,备案号,版权等信息组成
  4. nav 导航 导航通常是由一个或多个链接标签<a>标签组成
  5. <main> 主体 展示页面主体内容,建议一个页面,只出现一次
  6. <article> 文档 本义是文档, 实际上可以充当其它内容的容器
  7. <aside> 边栏 与主体无关的信息(广告位, 相关推荐, 阅读排行等)
  8. <section> 区块 文档或主体中的通用小组件
  9. <div> 容器 本身无任何语义,通过它的属性来描述用途
  1. <!DOCTYPE>
  2. <html lang="en">
  3. <head>
  4. <meat chatset="UTF-8" />
  5. <meat name="viewport" content="width=device-width,inttial-scale=1.0 />
  6. <!--标题内容-->
  7. <title>第一次作业</title>
  8. </head>
  9. <body>
  10. <!--页眉-->
  11. <header>
  12. <h4>&lt这里面输入你想要的页眉即可&gt(&lt是左括号<;&gt是右括号>)</h4>
  13. </header>
  14. <!--边栏-->
  15. <aside>
  16. <h3>&lt这里面输入你的边栏内容即可&gt</h3>
  17. </aside>
  18. <!--主体-->
  19. <main>
  20. <h2>&lt这里面输入你的主体内容即可&gt</h2>
  21. </main>
  22. <!--区块-->
  23. <div>
  24. <section>
  25. <h2>区块1</h2>
  26. </section>
  27. <section>
  28. <h2>区块2</h2>
  29. </section>
  30. </div>
  31. <!--页脚-->
  32. <footer>
  33. <h2>这里面输入你的页脚内容即可,一般是友情链接或ICP备案号等</h2>
  34. </footer>
  35. </body>
  36. </html>

加载外部css文件实现的效果:

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. body {
  7. width: 100vw;
  8. height: 100vh;
  9. display: grid;
  10. grid-template-rows: 60px 1fr 60px;
  11. gap: 10px;
  12. }
  13. header,
  14. footer {
  15. height: 80px;
  16. background-color: lightgreen;
  17. text-align: center;
  18. }
  19. .container {
  20. display: grid;
  21. grid-template-columns: 200px 1fr;
  22. gap: 10px;
  23. padding: 10px;
  24. background-color: lightskyblue;
  25. }
  26. .container > aside {
  27. background-color: lightcyan;
  28. text-align: center;
  29. }
  30. .container > main {
  31. display: grid;
  32. grid-template-rows: 1fr 200px;
  33. background-color: wheat;
  34. text-align: center;
  35. padding: 10px;
  36. }
  37. .container > main > div {
  38. display: grid;
  39. grid-template-columns: 1fr 1fr;
  40. gap: 10px;
  41. }
  42. main div section {
  43. background-color: violet;
  44. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议