Community Learn Tools Library Leisure
search
English
Home > List of blog posts > markdown语法总结及语序化结构元素布局使用
Blogger Information
Blog 1
fans 0
comment 0
visits 991
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
markdown语法总结及语序化结构元素布局使用
灰烬
Original
991 people have browsed it

1. 什么是markdown？

  1.  markdown是一个轻量级标记语言，易写易懂，可更好的书写文档。

2. markdown语法

2.1 标题

  1. 语法：  #
  2. 有6阶标题，一个 # 号代表一阶

实例：

标题1

标题2

……

标题6

2.2 代码块

  1. 语法：
  2.     单行代码： ` 代码 `
  3.     多行代码：
  4.         ```html
  5.             代码
  6.         ```
  7.         （这个字符在esc下边 ）

示例：

单行代码：

<p>单行代码</p>

多行代码：
  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.         <head>
  4.             <meta charset="UTF-8">
  5.             <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.             <title>Document</title>
  7.         </head>
  9.         <body>
  10.             <h1>hello!</h1>
  11.         </body>
  12.     </html>

2.3 表格

表格是用 | 和 — 画出来的，如：

  1. |表头|表头|表头|
  2. |---|---|---|       (这里的 - 是画出表格的关键，最少三个 -  才能出现表格的线，超过无所谓)
  3. |内容|内容|内容|
  4. |内容|内容|内容|

而结果如下：

表头 表头 表头
内容 内容 内容
内容 内容 内容

2.4 分割线

  1. 直接用 --- 即可，三个或以上

2.5 段落

直接书写

2.6 引用

  1. 语法： >

如：

这是引用！

2.7 链接 + 图片

链接：

  1. 语法: [网站名](链接)<可用于显示网址  可选>
  3. 如：[php中文网](https://php.cn/)<https://php.cn/>

效果：

php中文网https://php.cn/

图片：

  1.  语法: ![图片载入失败时显示的文字](链接  "鼠标放上去是显示的文字")
  3.  如： ![这是图片](sssss.com "图片")

效果：
蒂法

2.8 列表

  1. 有无序列表（无排名）和有序列表（有排名）
  3. 无序列表语法： - 无序列表

（ 无序列表可用 - * + 来表示，有分级的话，符号则不能和上一级相同）

  1. 有序列表语法： 1. 有序列表

如：

无序列表：
  1.     - 列表1
  2.         * 二级列表1
  3.         * 二级列表2
  4.     - 列表2
  5.     - 列表3
  6.     ....

效果：

  • 列表1
    • 二级列表1
  • 列表2
    • 二级列表2
  • 列表3
有序列表：
  1. 1. 列表1
  2. 2. 列表2
  3. 3. 列表3

效果：

  1. 列表1
  2. 列表2
  3. 列表3

总结：

  • markdown 语法规范并不统一,不同的工具预览效果并不一致
  • markdown 允许功能扩展,例如分式,流程图等

3. 语序化结构元素

通过语义化结构元素能更好规律的对网页进行布局，并且能够减少标签的使用

1. 常用标签

标签 名称 描述
<h1>-<h6> 标题 通常用来划分或标注内容中的文本段落
<header> 页眉 一般是由导航, logo 等元素组成
<footer> 页脚 通常用于备案，友情链接等页脚信息展示
<nav> 导航 通常是一个或多个<a>标签组成的导航
<main> 主体 中间部分主要内容，建议一个页面只出现一个
<article> 文档 本义是文档, 实际上可以充当其它内容的容器
<aside> 边栏 与主体无关的信息(广告位, 相关推荐, 阅读排行等)
<section> 区块 文档或主体中的通用小组件
<div> 容器 本身无任何语义,通过它的属性来描述用途

2. 布局效果

layout

代码实现

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <title>使用语义化结构元素布局</title>
  8. </head>
  9. <body>
  10.     <!-- 页眉 -->
  11.    <header>
  12.          <h2>&lt;header&gt;</h2>
  13.    </header>
  15.    <!-- 中间部分内容 -->
  16.     <div>
  17.         <!-- 边栏内容 -->
  18.         <aside>
  19.             <h2>&lt;aside&gt;</h2>
  20.         </aside>
  22.         <!-- 主题内容 -->
  23.         <mian>
  24.             <h2>&lt;main&gt;</h2>
  25.             <div>
  26.                 <h3>&lt;section&gt;</h3>
  27.             </div>
  29.             <div>
  30.                 <h3>&lt;section&gt;</h3>
  31.             </div>
  32.         </mian>
  33.     </div>
  35.     <!-- 页脚 -->
  36.    <footer>
  37.         <h2>&lt;footer&gt;</h2>
  38.     </footer>
  40. </body>
  41. </html>

代码效果

语义化结构元素布局

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：敢盗我的图?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post