美文网首页
HTML中的div、h1~h6、p

HTML中的div、h1~h6、p

作者: 莫晓白 | 来源:发表于2017-07-03 22:19 被阅读0次

    在HTML文档中,我们将给用户显示内容全部放到body中,换句话说,就是凡是在body中所写的内容都是要显示给用户的。HTML是标签组成的文档,现在我们写一些比较常用的标签。

    div标签是HTML中所使用频率最高的标签,div可以简单的理解为一个盒子,每一个,div就是一个盒子,我们把想要显示的内容放到盒子里,同时,我们也可以给我们的div设定一下宽、高、颜色等一些属性值。
    现在我们写一个,宽度:200px,高度:100px,背景颜色为:灰色的div,并且在div中我们写入一些文字。

    上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>从0开始的HTML</title>
    </head>
    <body>
        <div style="width: 200px;height: 100px;background-color: darkgrey;text-align: center;line-height: 100px"> 从0开始的HTML </div>
    </body>
    </html>
    
    image.png

    现在,我们在浏览器中,就可以看见到一个色块,色块里有我们之前所写的文字。这个色块就是我们div,里面有我们所写的文字。

    接下来,我们有一组特殊的标签,专门用于标题的,从h1 - h6

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width: 200px;height: 100px;background-color: darkgrey;text-align: center;line-height: 100px"> 从0开始的HTML </div>
        <h1>这是H1</h1>
        <h2>这是H2</h2>
        <h3>这是H3</h3>
        <h4>这是H4</h4>
        <h5>这是H5</h5>
        <h6>这是H6</h6>
    </body>
    </html>
    
    image.png

    h1 - h6文字由大到小依次递减,和div中的文字相比,有明显的加粗效果,这就是这组标签的特性。h4 - h6其实我们很少能用到,h1 - h3用的机会还是表较多的。这组标签实际上,对SEO帮助很大,如果我们不考虑SEO的情况下,h1 - h6可以随便用,关于SEO我们以后再说,这里不做过多讨论。

    大段的文字我们使用p标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
        <p>好多文字好多文字好多文字好多文字好多文字好多文字好多文字好多文字好多文字好多文字好多文字好多文字好多文字好多文字好多文字</p>
    </body>
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:HTML中的div、h1~h6、p

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