HTML常用标签,从Markdown的角度出发

2019-02-14  本文已影响4人  求墨者

前言

学习HTML前,可先学一下Markdown,简单来说,Markdown是一种轻量级标记语言。
对比两种标记语言的异同,从而得到同一种效果。

常用标签

  1. 标题
  2. 分割线
  3. 换行
  4. 段落
  5. 超链接
  6. 图片
  7. 表格
  8. 无序列表
  9. 有序列表
  10. 其它

1.标题

Markdown的标题写法

# 1号标题
## 2号标题
### 3号标题
#### 4号标题
##### 5号标题
###### 6号标题

HTML的标题写法

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

2. 分割线

Markdown的分割线写法

---

HTML的分割线写法

<hr>

3. 换行

Markdown的换行写法(直接按一下回车就行了)


HTML的换行写法

<br>

4. 段落

Markdown的段落写法(按照平时那样书写就行了)

这是一个段落哦
这是另一个段落

HTML的段落写法

<p>这是一个段落哦</p>
<p>这是另一个段落</p>

5. 超链接

Markdown的超链接写法

[点我在新窗口中打开-github](https://github.com/)

HTML的超链接写法

<a href="https://github.com/" target="_blank">点我在新窗口中打开-github</a>

6. 图片

Markdown的图片写法

![image](https://help.github.com/assets/images/site/invertocat.png)

HTML的图片写法

<img src="https://help.github.com/assets/images/site/invertocat.png">

7. 表格

Markdown的表格写法,Markdown不支持合并单元格

header 1 | header 2
---|---
row 1 col 1 | row 1 col 2
row 2 col 1 | row 2 col 2

HTML的表格写法

<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td colspan="2">合并单元格</td>
    </tr>
</table>

8.无序列表

Markdown的无序列表写法

- Perl
- PHP
- Python
- Ruby

HTML的无序列表写法

<ul>
    <li>Perl/</li>
    <li>PHP</li>
    <li>Python</li>
    <li>Ruby</li>
</ul>

9.有序列表

Markdown的有序列表写法

- Linux
- Apache
- Mysql
- PHP

HTML的有序列表写法

<ol>
    <li>Linux</li>
    <li>Apache</li>
    <li>Mysql</li>
    <li>PHP</li>
</ol>

10.其它

两个无意义的标签

<div>你好</div>
<span>Hello</span>
上一篇 下一篇

猜你喜欢

热点阅读