邓紫棋-后会无期
最近学习HTML,这篇文章记录,用Markdown 和HTML语法,来实现同一种标记。一方面来巩固HTML的语法,一方面来通过对比感受一下Markdown的简洁。 HTML(Hyper Text Markup Language)超文本标记语言,是万维网的基础,静态网页都是用HTML语言写就;Markdown也是一种标记语言,Markdown兼容HTML,但挑选了一些常用的语法比HTML更简单,Markdown只是一种书写语言,最终呈现在网页上的还是转换成HTML格式的。
标题 Headline 一共支持六级标题
html 1 2 3 <h1 > 一级标题 </h1 > <h2 > 二级标题 </h2 > <h3 > 三级标题 </h3 >
一级标题
二级标题
三级标题
markdown
# 一级标题
## 二级标题
### 三级标题
文字格式 斜体 Italic html 1 2 <em > 这是斜体1 </em > <i > 这是斜体2 </i >
这是斜体1 这是斜体2
markdown
这是斜体1 这是斜体2
粗体 Bold html 1 2 <strong > 这是粗体1</strong > <b > 这是粗体2</b >
这是粗体1 这是粗体2
markdown
这是粗体1 这是粗体2
引用 Quote html 1 <q > 李商隐说:<q > 庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q > </q >
李商隐说:庄生晓梦迷蝴蝶。望帝春心托杜鹃。
html 1 <blockquote > 李商隐说:<blockquote > 庄生晓梦迷蝴蝶。望帝春心托杜鹃。</blockquote > </blockquote >
李商隐说:庄生晓梦迷蝴蝶。望帝春心托杜鹃。
markdown 1 2 > 李商隐说: >> 庄生晓梦迷蝴蝶。望帝春心托杜鹃。
李商隐说:
庄生晓梦迷蝴蝶。望帝春心托杜鹃。
删除线 Strikethrough html 1 2 <del > This is strikethrough 1.</del > <s > This is strikethrough 2.</s >
This is strikethrough 1.This is strikethrough 2.
GFM 1 ~~This is strikethrough,only for GFM.~~
This is strikethrough,only for GFM.
下划线 Underline html 1 2 <ins > 我带下划线1.</ins > <u > 我带下划线2.</u >
我带下划线1. 我带下划线2.
上下标 html 1 2 下标:H<sub > 2</sub > O 上标:E=mc<sup > 2</sup >
下标:H2 O 上标:E=mc2
字体 html 1 <font size ="3" color ="red" face ="KaiTi" > hello,个性化的格式。</font >
hello,个性化的格式。
代码 Code 单行代码 html
var i=10;
markdown
var i=10;
多行代码 html 1 2 3 4 5 6 <pre > if (isOK) { return true; } </pre >
if (isOK)
{
return true;
}
```c if (isOK) { return true; } ```
1 2 3 4 if (isOK){ return true ; }
水平横线 html
markdown
我是分割线
列表 List 无序列表 Unordered List ul-li标签 1 2 3 4 5 <ul > <li > Coffee</li > <li > Tea</li > <li > Milk</li > </ul >
markdown
有序列表 Ordered List ol-li标签 1 2 3 4 5 <ol start =2 > <li > Coffee</li > <li > Tea</li > <li > Milk</li > </ol >
Coffee Tea Milk
markdown 1 2 3 2. Coffee3. Tea4. Milk
Coffee
Tea
Milk
链接 Link 文字 html 1 <a href ="https://wuchenxu.com" > chenxu's blog</a >
chenxu’s blog
markdown 1 [chenxu's blog ](wuchenxu.com )
chenxu’s blog
图片 html 1 <img src ="https://github.com/images/modules/contact/heartocat.png" alt ="github" width ="50" height ="50" />
html支持图片高度、宽度等属性的设置,markdown暂不支持此类属性的设置。
markdown 1 

图片嵌入链接 html 1 <a href ="https://wuchenxu.com" > <img src ="https://github.com/images/modules/contact/heartocat.png" width ="50" height ="50" > </a >
markdown 1 [](https://wuchenxu.com )
表格 Table html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <table border ='1' summary ="2015年xx学校xx年级" > <caption > 成绩统计</caption > <tr > <th > 班级</th > <th > 学生数</th > <th > 平均成绩</th > </tr > <tr > <td > 一班</td > <td > 30</td > <td > 89</td > </tr > <tr > <td > 二班</td > <td > 35</td > <td > 85</td > </tr > </table >
成绩统计 班级 学生数 平均成绩 一班 30 89 二班 35 85
html表格支持boder宽度,对齐,单元格填充,单元格间距,背景图片,单元格跨行跨列等属性设置;
原生markdown并不支持表格,在[GFM](https://guides.github.com/features/mastering-markdown/)支持一种简单的表格语法。
[神器-表格生成工具](http://www.tablesgenerator.com/)
GFM 1 2 3 4 | 班级 | 学生数 | 平均成绩 | |--------|:----------------:|----------:| | 一班 | 30 | 89 | | 二班 | 35 | 85 |
班级
学生数
平均成绩
一班
30
89
二班
35
85
Reference:
html
imooc
Learn HTML Free in [2021] – Basic HTML Codes for Beginners