HTML基础——标签

上一篇文章介绍了一些html的基础知识，这一篇开始正式介绍html里面的一些标签结构了。

    首先，我们来说一下标签的分类，html的标签主要分为两类：

        1.行级/内联元素（display: inline）：这一类元素的特点是不可改变宽高；不沾满整行，元素所占的空间完全由自身内容控制。eg：a em br select span strong

        2.块级元素 display: block：这一类元素的特点是可改变宽高；沾满整行，无论自身内容多还是少。eg：div form h1-h6 p ul li table

    在大家清楚标签的分类后，我们先来说几个其中基础的标签。 

        1.p标签

            <p></p>是段落标签，在其中写的内容会当做一个段落来处理，结束后会进行换行处理并且段落上下都会有一定的间隔距离。

        2.h1~h6

              <h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>为标题标签。他的作用是着重显示文字，一般用在标题上，会将里面的文字加粗放大并且独占一行。其中h4的默认大小是正常的文字大小，不过是加粗的。

        3.strong标签

            <strong></strong>标签的作用是将里面的文字加粗处理。标题标签h4的效果也可以使用strong标签包裹正常字体实现。

        4.em标签

            <em></em>的作用是将里面的文字变成斜体。

        5.del标签

            <del></del>是删除标签，它会在文字的中间画一条横线，一般在打折的时候使用。

    这几个很基础很简单的标签，作用也是显而易见，还有另外一种结构化标签，它们没有特殊的效果，一般是用来当做容器来盛放其他的标签。

    他的另外一个作用就是用来为里面的子元素设置样式：一般的元素如果有些属性没有设置样式的话，它会自动继承父级元素的相应属性的样式。（比如，我们现在有三段文字被三个p标签包裹着，我们想给他们所有都加上文字颜色，分开给三个标签都加上属性比较麻烦，我们可以把三个p标签放入一个结构化标签中，直接将样式写在父集标签上。这样里面的三个p标签文字都会被改变）

    在明白结构化标签的含义后，我们来说两个最常用的结构化标签。

        1.div

            <div></div>标签可以说是我们在前端开发中用的最多的标签了。

            要注意的是：当我们在div标签中写了一串中文字符时，文字在边界处会自动换行，也就是说我们div当中的内容默认在div区域内显示。但当我们写了一串英文字符在div标签中时，我们会发现这一串英文字符在div的边界处并没有换行，而是一直显示下去。

            这是因为，当我们输入中文时，计算机会将每一个中文字符识别为一个单独的单词，所以每一个中文汉字都是可以分隔开的。但当我们输入英文字符时，如果不用空格隔开，计算机会默认我们输入的是一个单词，不给予分隔。所以我们在写入英文单词时，要手动输入空格来使计算机识别如何分隔单词。

        2.span

            <span></span>标签里面多数情况下盛放文字或者小icon之类的小物件。

    最后，我们来说一些比较重要的标签。

        1.ul li

            <ul><li></li></ul>这是一组标签，它们二者都是成对出现的，每一个标签单独出现都是没有意义的。

这一组标签叫做无序列表。ul是外面的列表框，li是里面的子项，并且每一个li子项的前面都会带有• 符号。

            无序列表一般用来当做导航栏之类里面的结构样式都一样的部分，横排导航栏我们只需要将竖排的列表通过浮动等方式排列在一排当中，像淘宝什么的网页的导航栏就都是用ul、li来写的。    

            ul中有一个type属性，这个属性的值设置的是每一个子项前面显示的符号的形式，默认的值是disc圆点，当值是square前面显示的就是小方块，值是circle 的时候前面显示的就是空心圆圈。但我们一般使用时都希望子项前面没有符号，因此我们在使用ul、li标签的时候，都会先把ul的默认样式list-style改成none.

        2.a

            <a></a>标签是一个非常重要的标签，它有一个必须写的属性叫做href（hyperText reference ）超文本链接，里面写的是地址。

        a标签用做锚点，作用主要有一下几点：

            1.锚点即定点跳转我们指定的id的元素位置。eg：添加id值 <a href=”#clickme”>点击我跳转</a> 这样就会跳转到id为clickme的元素的位置。

            2.超链接。我们在href中写一个本地的或者网上的链接，eg：www.baidu.com ，这样我们点击的时候就会跳转到这个网页上去了。

            3.协议限定符。在href中我们可以写javascript代码，比如href=”javascript:while(1){alert(‘你点我干什么！’)}”，当我们写上这行代码的时候，我们点击这个a标签之后浏览器就会一直弹出对话框。

       4.打电话，发邮件。当我们在href中用特定的方式填写，就能通过点击打电话或发邮件。<a eg：href="tel:13855459854">打电话<a>，<a eg：href="mailto:13855459854@qq.com">发邮件<a>

        3.img

            <img></img>标签是图片标签，它有一个必备的属性叫做src –->source，这个src属性的值就是我们图片的地址。地址可填写如下三种：   

                1.网上的链接

                2.本地的绝对路径

                3.本地的相对路径

            此外，img标签还有以下两个属性：

                1.alt属性。这个属性是设置图片占位符的，也就是说当图片因为网速或者链接错误等原因加载不出来的时候，就会显示alt里面所设置的值；当图片正常显示时，这个内容不会被显示。

              2.title属性。这个属性是设置图片提示符的，当我们鼠标移入图片时，在鼠标旁边会出现一个黄色的小方块来显示这个title属性中的值。

        4.form表单

            <form></form>表单元素，这个元素可以让我们实现前端和后台的数据交互。交互中发送的内容数据都是由两部分组成的：数据名+数据内容。

               form元素中有两个重要的属性：

                    1.action属性 填写服务器地址，这个属性中的值对应着我们要把数据传递到的那个服务器。

                   2.method属性 填写传输方法(我们是通过什么方式来传输数据)，一般填写的都是POST/GET这两种中的一个。

        form表单的应用需要依赖于它里面的子标签。

        1.<input>  input标签这个标签是一个单标签，不需要闭合。而 input标签中的type属性可以用来选择不同的类型。                      

                · <input type="text">          // 输入框，我们可以在里面输入文字信息。

                · <input type="password">        //密码框，我们可以在里面输入文字信息。

                · <input type="submit">        //提交按钮，我们点击这个提交按钮之后就会把整个表单的数据发送到后台服务器。

                · <input type="radio">        //单选框

                · <input type="checkbox">        //多选框

        我们刚才提到了发送数据一定要有数据名和数据内容，数据内容说的就是我们给input标签设置的value属性的值，而数据名我们在input标签里面写入name属性的值。

             2.<select></select>  下拉列表标签，使用时需要与其子标签<option></option>一同使用。

                如：<select>

                            <option>山东</option>

                            <option>黑龙江</option>

                            <option>北京</option>

                        </select>

                                    

                要注意的是：下拉列表的name属性是写在<select>标签上的，里面option中间填写的内容就是默认的数据值，但是如果我们给每一个option都加一个value属性的话，那么option中间添加的文字则不作为传递的数据的值，value的值作为传递的数据值。

以上就是我所总结的比较常用的重要的标签，希望对大家有帮助哟~