• web前端学习(3):认识HTML基本标签


    本章主旨:

      介绍常用的文本相关标签,如<h>,<p>,<a>;简介常见的HTML标签属性,如title属性,href属性,id/class属性等;重点掌握<a>标签。

      在第二章中我们已经了解到网页可以划分为<html>部,<head>部,<body>部这三个部分,网页文档内容将写入其中的<body>部;同时,我们开始接触到了标签,也对标记语言的“标记”二字有了些许体会。学习HTML的过程,大体上来说,就是学会使用标签的过程。在实际生活中,网页最重要的目的,是展示内容,一个网页中,可能会有众多字号大小不同的标题、一个个段落,也会有常见的超链接用以“跳转页面”(比如网站的导航栏),甚至也会有图片、表格、列表等等内容。而要实现这些,少不了标签的参与。而在本章中,我主要介绍的是些简单的、与文本相关的标签,以及常见的HTML标签属性。

    一、网页内容的结构必须由标签说明

      网页文档内容将写入其中的<body>部,那么让我们模仿“报纸”,试着在<body>中写出一份有标题段落的文本并用浏览器打开它(注意:在html中,我们用<!--注释内容-->来进行注释,注释主要是为了让自己更好的控制网页的结构,浏览器在显示网页时会把注释的内容忽略掉)。

    <html>
    <
    head> </head> <body> <!--以下是标题--> 时习 <!--以下是两段段落--> 学而时习之,不亦说乎。学而时习之,不亦说乎。学而时习之,不亦说乎。



    学而时习之,不亦说乎。学而时习之,不亦说乎。学而时习之,不亦说乎。

    </body> </html>

     

      从上图中我们可以看到,浏览器做了它的首要工作——显示文本,但是与此同时,我们设置的标题并没有标题的“特点”,设置的段落也完全忽视了两段式的格式,换句话说,浏览器完全忽略了HTML中的换行和空格。有可能你会想了,怎么样让浏览器明白哪里是标题,哪里是段落,哪里有空格,哪里要换行呢?是不是也可以做个标记让浏览器知道呢?是的,请记住——网页内容的结构必须由标签说明。如果想要实现我们想要的效果,我们就要用相应的标签去修饰文本。

    二、最常用的文本修饰标签

      试着为标题文本添上<h1>标签,为段落文本添上<p>标签吧!(注意:h即heading;p即paragraph;)

    <head>
    </head>
    
    <body>
        <!--以下是标题-->
        <h1>时习</h1>
       
        <!--以下是两段段落-->
       <p>学而时习之,不亦说乎。学而时习之,不亦说乎。学而时习之,不亦说乎。</p>
      
       <p>学而时习之,不亦说乎。学而时习之,不亦说乎。学而时习之,不亦说乎。</p>
        
    
    </body>
    
    </html>

      

      嗯,我们成功得到了一个显眼的标题和两个段落。仔细观察上图所截的网页页面,标记了<h1>,<p>标签的文本都在结束后自动换行了。不过<h1>中的'h'表示heading,那个'1'又表示什么呢?其实<h1>表示的是1级heading,也即1级标题。显然,有1级标题,就肯定有其他级别的标题。其实HTML中共有六级标题,从<h1>到<h6>依次递减,在同一个浏览器中,它们默认保持级数越大、字号越小的规则。我们可以尝试一下看看不同级别标题的差别。

    <head>
    </head>
    
    <body>
        <!--以下是一级标题-->
        <h1>时习之</h1>
        
        <!--以下是二级标题-->
        <h2>时习之</h2>
        
         <!--以下是三级标题-->
        <h3>时习之</h3>
        
         <!--以下是四级标题-->
        <h4>时习之</h4>
        
         <!--以下是五级标题-->
        <h5>时习之</h5>
        
         <!--以下是六级标题-->
        <h6>时习之</h6>
      
    </body>
    
    </html>

      

    三、超文本的主角——超链接

      你是否想过,为什么当我们点击博客园上方的导航栏上的文字后,我们就能到达另一个页面呢?实现从一个网页跳到另一个网页(关于超链接连接到本文档内部的情况我们暂且不论),我们必须要经过一个连接了着陆点的“锚”,而这个“锚”上就有着“链接”,当我们点击它时,我们就可以顺着“锚”上的“链接”前往目标页面,这个“锚”,就是<a>标签,'a'就意味着anchor。由<a>修饰的文本代表着此文本是个超链接,它将连接到指定地址,对于我们来说,就是另一网页的所在地址。下面假设我们要建立一个链接到百度的超链接,首先可以肯定的是我们需要一个锚<a>,其次,我们需要知道百度的地址,但是找到地址后我们该如何把地址记录下来呢?这里就要引入<a>标签的href属性了(注意:如果<a>指向互联网上的网页,href尽量给出"http://",如果不给出有可能出现无法连接至网页的情况)。

    <head>
    </head>
    
    <body>
        <!--这是一个超链接-->
        <a href="http://www.baidu.com">点我链接到百度</a>
    </body>
    
    </html>

     

      当我们点击这段文本,浏览器就会顺着“锚”上的“链接”带我们到达指定页面:

     

    四、简介HTML的标签属性

      标签一般成对出现,分为开始标签和结束标签,如<h1>、</h1>;  

      HTML标签都具有属性,如id,class,title,alt等。但是并不是所有的标签都需要设置属性,只有像<a>的href这样缺少就会出问题的属性才必须要设置,因为如若不设置,就找不到目标网页的位置,这个超链接自然会失效。通常属性在开始标签设置,同时属性与标签、属性与属性之间要用空格隔开。属性会有一个属性值,通常形式为:属性=“属性值 ”。有的属性的属性值不止一个,则需用分号隔开,形式为:属性=“属性值1;属性值2;属性值3;”。让我们为上述的超链接增添新的title属性,看看会有什么新的变化。

    <head>
    </head>
    
    <body>
        <!--这是一个超链接-->
        <a href="http://www.baidu.com" title="baidu">点我链接到百度</a>
    </body>
    
    </html>

     

      在我们进一步给<a>添加了title属性后,鼠标移到超链接文本上时会出现title的属性值内容,这有助于让用户得到更多你想传达的消息。

      在本章,我们主要学习了与文本有关的一些简单标签,同时也学习了一些标签属性,主要的重点在于超链接的设置。今天的例子虽然有了基本的文本与结构,但是却没有图片。在接下来的章节里,我将会进行介绍。文章排版一直在变,一是自己也在找自己的风格,二是发到首页的文章因为格式之类的问题被移出了首页,所以在慢慢改,请见谅。

      

      

  • 相关阅读:
    jqueryUI弹出框问题
    spring data jpa分页
    解决eclipse编辑js和html卡的问题
    web.xml添加编码过滤器
    Apache SolrCloud安装
    搭建zookeeper集群
    html页面读取PDF小案例
    .NET 使用Process调用7_zip解压文件
    .NET 中三种正确的单例写法
    Git 笔记
  • 原文地址:https://www.cnblogs.com/shixizhi/p/8379821.html
Copyright © 2020-2023  润新知