博主信息

博文 1

粉丝 0

访问量 1347

专题推荐

1. 什么是markdown？

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

2. markdown语法

2.1 标题

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

实例：

标题1

标题2

……

标题6

2.2 代码块

语法：
    单行代码： ` 代码 `
    多行代码：
        ```html
            代码
        ```
        （这个字符在esc下边 ）

示例：

单行代码：

<p>单行代码</p>

多行代码：

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <h1>hello!</h1>
        </body>
    </html>

2.3 表格

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

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

而结果如下：

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

2.4 分割线

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

2.5 段落

直接书写

2.6 引用

语法： >

如：

这是引用！

2.7 链接 + 图片

链接：

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

效果：

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

图片：

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

效果：

2.8 列表

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

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

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

如：

无序列表：

    - 列表1
        * 二级列表1
        * 二级列表2
    - 列表2
    - 列表3
    ....

效果：

列表1
- 二级列表1
列表2
- 二级列表2
列表3

有序列表：

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

效果：

列表1
列表2
列表3

总结：

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

3. 语序化结构元素

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

1. 常用标签

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

2. 布局效果

layout

代码实现


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>使用语义化结构元素布局</title>
</head>
<body>
    <!-- 页眉 -->
   <header>
         <h2>&lt;header&gt;</h2>
   </header>
   <!-- 中间部分内容 -->
    <div>
        <!-- 边栏内容 -->
        <aside>
            <h2>&lt;aside&gt;</h2>
        </aside>
        <!-- 主题内容 -->
        <mian>
            <h2>&lt;main&gt;</h2>
            <div>
                <h3>&lt;section&gt;</h3>
            </div>
            <div>
                <h3>&lt;section&gt;</h3>
            </div>
        </mian>
    </div>
    <!-- 页脚 -->
   <footer>
        <h2>&lt;footer&gt;</h2>
    </footer>
</body>
</html>

代码效果

语义化结构元素布局

批改老师：

天蓬老师

批改状态：合格

老师批语：敢盗我的图?

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法总结及语序化结构元素布局使用

2020-10-01 00:01:12