美文网首页
html+css初识(第二节)

html+css初识(第二节)

作者: freeflys | 来源:发表于2018-05-22 08:19 被阅读0次

    本小节主要用来了解各种HTML标签,知道各种标签的含义。
    下面通过一小段代码来了解各种标签的含义:

    <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
      <title>了不起的盖茨比</title>
      <style>
       span{
              color:blue;
        }
      </style>
      </head>
      <body>
        <h1>了不起的盖茨比</h1>
        <p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>  
        <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
        <p>暗淡轻黄体性柔,<br/>情疏迹远只香留。<br/>何须浅碧深红色,<br/>自是花中第一流。</p>  <!-- <br>换行标签-->
        <p>&nbsp;&nbsp;&nbsp;&nbsp;哈哈哈哈哈哈哈哈</p>   <!-- &nbsp;  空格表示方法-->
      </body>
    </html>
    

    运用效果:


    example1.png

    ①<body>标签,网页上显示的内容都要放在此标签内。
    ②<p>段落标签,上文中用了两次段落标签,可以看到此文被分成了两段,段前段后留有空白。
    ③<hx>标题标签,x为1-6,分为6级,<h1>是最高级,字号最大,常用来显示网页的标题,<h6>字号最小,上文中的标题就用到了<h1>标题标签。
    ④<strong>、<em>强调标签,目的都是为了突出显示,但区别是<strong>标签是粗体显示,<em>标签斜体显示,效果见上文运行效果。
    ⑤<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。上文将美国梦三个字添加<span>标签,设置了颜色为蓝色。
    ⑥<q>、<blockquote>标签,文本引用标签,两者区别在于前者是短文本引用,后者是长文本引用,当引用诗人的一句诗,或者名言警句时可以使用<q>标签,如果想引用一收拾可以使用<blockquote>标签,而且两个标签引用是不需要添加引号,自动添加。
    ⑦换行标签分行显示文本,使用换行标签是因为在HTML中是忽略空格跟回车的,你输入再多的空格也显示不出来,所以想要换行就要使用换行标签,同样空格表示方式在上文中均有使用,详情见注释。
    ⑧<address>标签,用来给网页加入地址信息,例:<address>文档编写:北京市西城区德外大街10号</address> 标签内的内容在网页上斜体显示,可更改。
    ⑨<code>标签,在展示时,如果需要引用一行代码,可以使用此标签。但如果想在文段中插入多行代码时,就需要用<pre>标签了。例:

    <pre>  <!--多行引用-->
    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
    </pre>
    <code>代码语言</code> <!--单行引用-->
    

    这样一些HTML最基本的标签我们就了解认识了,后面我们将接触更深入的标签。

    相关文章

      网友评论

          本文标题:html+css初识(第二节)

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