美文网首页
认识body标签

认识body标签

作者: 淘代码者 | 来源:发表于2018-03-15 15:12 被阅读0次

    文章标题标签<hx>

    标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
    语法:
    <hx>标题文本</hx> (x为1-6)

    屏幕快照 2018-03-12 上午11.00.32.png
    如果需要修改各级标题可以这样做:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>各级标题</title>、
            <style type="text/css">
                h1{
                    font-size: 20px;
                    color: #98DF54;
                    text-align: left;
                }
                h2{
                  font-family: "微软雅黑";
                  font-style: normal;   
                  color: darkgreen;
                }
                h3{
                    color: red;
                }
                h4{
                    color: yellow;
                }
                h5{
                    color: darkcyan;
                }
                
            </style>
        </head>
        <body>
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <h5>五级标题</h5>
            <h6>六级标题</h6>
        </body>
    </html>
    
    屏幕快照 2018-03-12 上午11.05.37.png

    段落<p>

    加入强调语气,使用<strong>和<em>标签

    但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

    语法:

    <em>需要强调的文本</em>

    <strong>需要强调的文本</strong>

    使用<span>标签为文字设置单独样式

    <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>各级标题</title>、
        <style type="text/css">
            span{
                color: red;
            }
        </style>
        </head>
        <body>
        <p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
        <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
        </body>
    </html>
    
    <q>标签,短文本引用
    <blockquote>标签,长文本引用
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>文本引用</title>、
        <style type="text/css">
            span{
                color: red;
            }
        </style>
        </head>
        <body>
            <h2>心似桂花开</h2>
            <p>大家都在忙于自认为最重要的事情,却没能享受到人生的乐趣,反而要吞下苦果?<q>暗淡轻黄体性柔,情疏迹远只香留</q></p>
            <blockquote>暗淡轻黄体性柔,情疏迹远只香留。何须浅碧深红色,自是花中第一流。</blockquote>
            <p>这是李清照《咏桂》中的词句,在李清照看来,桂花暗淡青黄,性情温柔,淡泊自适,远比那些大红大紫争奇斗艳花值得称道。</p>
        </body>
    </html>
    
    使用<br>标签分行显示文本
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>换行</title>、
        <style type="text/css">
            span{
                color: red;
            }
        </style>
        </head>
        <body>
            <h2>《咏桂》</h2>
            <p>暗淡轻黄体性柔,<br/>情疏迹远只香留。<br/>何须浅碧深红色,<br/>自是花中第一流。</p>
        </body>
    </html>
    

    在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />。

    &nbsp;添加空格
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>空格</title>、
        <style type="text/css">
            
        </style>
        </head>
        <body>
            <h2>《咏桂》</h2>
            <p>暗淡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,<br/>情疏迹远只香留。<br/>何须浅碧深红色,<br/>自是花中第一流。</p>
        </body>
    </html>
    
    认识<hr>标签,添加水平横线
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>水平横线</title>、
        <style type="text/css">
            
        </style>
        </head>
        <body>
            <h2>《咏桂》</h2>
            <p>暗淡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,<br/>情疏迹远只香留。<br/><hr/>何须浅碧深红色,<br/>自是花中第一流。</p>
        </body>
    </html>
    
    <address>标签,为网页加入地址信息

    一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。

    语法:

    <address>联系地址信息</address>

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>addre</title>、
        <style type="text/css">
            
        </style>
        </head>
        <body>
            <address>
    Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br/> 
    Visit us at:<br/>
    Example.com<br/>
    Box 564, Disneyland<br/>
    USA
    </address>
        </body>
    </html>
    
    想加入一行代码吗?使用<code>标签

    语法:

    <code>代码语言</code>

    使用<pre>标签为你的网页加入大段代码

    语法:

    <pre>语言代码段</pre>

    <pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

    如下代码:

    <pre>
        var message="欢迎";
        for(var i=1;i<=10;i++)
        {
            alert(message);
        }
    </pre>
    

    相关文章

      网友评论

          本文标题:认识body标签

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