美文网首页
HTML常用标签,从Markdown的角度出发

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

作者: 求墨者 | 来源:发表于2019-02-14 15:46 被阅读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>
    

    相关文章

      网友评论

          本文标题:HTML常用标签,从Markdown的角度出发

          本文链接:https://www.haomeiwen.com/subject/eubeeqtx.html