HTML入门学习（常用标签）

今天我们一起探究HTML中的一些常用标签

首先，我们需要了解一下标签的分类，主要有如下两种分类方式：

    1、按形式分：

    双标签：开始标签和结束标签， 例如：html、body、title

    单标签(自结束标签)：开始标签和结束标签就它自己， 例如:meta

        <meta> 或 <meta />

    2、按特点分

    块标签，行内标签，行内块标签

不同的标签拥有不同的功能，以下列举一些简单的标签及其应用

       1：标题标签：h1~h6
        注意语义：用标题标签包裹的内容就是标题

        标题标签也会帮助seo进行推广，h1~h6，语义是逐步降低的

         h1的语义最重，所以一般情况下一个页面就用一个h1（常用h1~h3）

        默认样式：字体会加粗，从h1~h6字体大小逐步变小，会独占一行

示例：

效果图如下：

2：段落标签：p

      段落标签用于表示内容中的一个自然段

       语义：用段落标签进行包括，其内容就表示是一个段落

       默认样式: 会独占一行，段落与段落之间有较大的间距

3：标题分组标签 ：hgroup

     可以将一组相关的标题同时放到hgroup

     示例：

4：强调标签：

html中有两个强调标签，它们的区别是什么？

     样式上：em强调，字体会变斜体

            strong强调，字体会加粗

     语义上：em是语音语调的强调

           strong是具体内容的强调

   在实际的开发过程中，一般不做区分，两个强调标签都可以使用

示例：

效果图如下：

5：居中效果：center

示例：

效果图如下：

6：短应用：q

默认样式：会在文本外面加双引号，不会独占一行

7:强制换行标签： br

8：分割线  单标签 ：hr

9: 删除标签：del

使用del标签来表示一个删除的内容

 在文本中间会有一个删除线它也不会独占一行

10：div标签
用来布局的，没有语义，会独占一行

11：span标签
没有任何语义，一般就用来包裹文字

不会独占一行

12：结构标签
html5的新标签

布局标签（结构化标签） 都是块标签

        header ——网页的头部

        main ——网页的主体部分（一般就一个）

        footer ——网页的底部

        mav ——网页的导航

        aside ——和主体相关的内容，侧边栏

        article ——文章之类的

        section ——独立的区块，上面的标签都不合适，就用这个

这里分享一个面试题：

问：请你简单说一说元素的分类

答：元素（标签）的分类

            1、形式分：

               双标签：h1-h6,p,strong,em,hgroup,del,div,span

               单表签：br,hr,meta

            2、特点分：

               块标签:一般都是用来布局的

                    （1）、会独占一行

                    （2）、可以设置宽高

                    （3）、如果不设置宽高，块元素的宽度是父元素的100%，块元素的高度被内容撑开

                    h1-h6,p,hgroup,center,div

               行内标签：一般用来包裹文字

                    （1）、不可以设置宽高，被内容撑开

                     (2)、不会独占一行

                    strong,em,span,del

               行内块标签:

                    （1）、兼具块标签和行内标签的特点，可以设置宽高，不会独占一行

                    （2）、元素与元素之间会有3像素的空白间距，称三像素问题

                    img,input,button

                注意：

                    1、块标签里面什么都能放

                          块标签里面可以放块标签，行内标签，行内块标签

                    2、行内标签里面一般只放文字，不能放块标签

                    3、有一个特殊的块标签 p标签

                        它里面只能放文字或者图片，不能放块元素

                    4、有一个特殊的行内标签 a标签

                        它里面什么都能放，除了它自己