第一节 了解标签

1.1

1.1

html标签介绍

• 1.标题标签

  标题标签的特点：
  h1 -> h6 字越来越小 ，
  字体有加粗的效果； 一级标题有且只有一个； 跟seo搜索引擎有关联的；
  

• 2.段落

  p标签定义段落标签；
  span标签：区分样式标签；
  区别：
  `<p>相当于段落标签，<br/>`是换行标签。段落与段落之间一般会有一个行高的空白距离。而换行则不会使得行与行之间有一段空白的距离。这是二者在页面效果上的区别。  
  span—— 是用来来组合行内元素，以便通过样式来格式化它们。**它所占的大小长度由它的内容来决定，而且不能设置宽高以及边距。**主要作用就是对行内的元素进行分组或标识.
  如:`<p><span class="aa">Harry Knowles</span></p>`  

  div和span的联系:
  1. div是块级元素， 实际上就是一个区域， 主要用于容纳其他标签。 默认的display属性是block
  2. span是行内元素， 主要用于容纳文字。 默认的display属性是inline.
  所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。

• 3.列表标签

  br标签为换行标签
  hr标签为横线 
  有序列表与无序列表都是固定搭配的 
  无序列表：ul li ；其中ul是作为父级 ， li是作为子级
  无序列表：ol li；ol是作为父级 ， li是作为子级
  自定义列表
  `<dl>
        <dd> 自定义列表内容 </dd>
        <dt> 自定义标签 </dt>
    </dl>`

• 4.修饰标签

  i标签是倾斜的效果； 
  em标签也是倾斜的效果； -
  em标签是跟seo搜索引擎有关的，有强调作用
  b、strong标签都有加粗的效果
  strong标签是跟seo搜索引擎有关的，有强调作用

  sup是上标;sub是下标

  

• 5.图片标签 img

  图片中的四要素:
  src:引入图片的路径
  width:宽度；属性值可以不带px单位
  height:高度；规定高度
  alt：当图片不出来的时候，进行标记；

• 6.超链接标签 a

  <a href='https://www.baidu.com/'> 电影 </a>
  a标签加上href的时候，可以跳转;默认是在当前页面进行跳转；
  target:
  _self  是在当前页面打开；
  _blank  在新页面中打开；
  #跳转到当前页面,相当于刷新页面
  禁止跳转；javascript:;  <a href='javascript:;'> 小电影6 </a>  

  a标签可以作为锚点，目标值需要用href=’#名字’;接收的时候，a标签对应的来接收，用name属性来对应；

  <a href="#p45">我是第1个</a>
  <a href="#p45" name='p45'>我是第45个</a>

• 7.div
  border:边框线；

  div{
            width:100px;
            height:100px;
            background-color: aqua;
            /*border: 5px solid black; border:边框：大小 ，风格 ，颜色  */
            margin-bottom: 5px;
        }
        div#div1{
            border:5px dotted black;
            /* dotted 点状 */
        }
        div#div2{
            border:5px dashed pink;
            /* dotted 点状 */
        }
        div#div3{
            border:5px double black;
            /* dotted 点状 */
        }
        /* 单独控制某个方向【上、右、下、左】的边框； */
        div#div4{
            /* border:5px double black; */
            /* dotted 点状 */
            border-top:5px solid black;  /* 上边框线 */
            border-right:10px solid pink;   /* 右边框线 */
            border-bottom: 15px solid blue;   /* 下边框线 */
            border-left:20px solid red;   /* 左边框线 */
        }
        div#div5{
            border:5px double black;
            /* bordre-style:改变边框的风格 */
            border-top-style: dotted;
            border-right-style: dashed;
            border-bottom-style: double;
            border-left-style:groove;
  
            /* dotted 点状 */
        }
        div#div6{
            border:5px double black;
            /* bordre-style:改变边框的风格 */
            border-top-color: pink;
            border-right-color: blueviolet;
            border-bottom-color: red;
            border-left-color:yellow;
            /* dotted 点状 */
        }

  margin：元素与元素之间[边框线以外]的距离叫外边距

  #cainiao{
            width:100px;
            height: 100px;
            background-color:#90f;
            border:5px solid #000;
            /*margin:50px;  只写一个值的情况，控制的是四个方向的值； */
            margin-top:50px; /* 上外边距 */
            margin-right:50px;  /* 右外边距 */
           /* margin-bottom: 50px;   下外边距 */
            margin-left: 50px;  /* 左外边距 */
        }

  外边距合并：
  1.垂直方向的合并；解决方法：避免两个元素都同时加上外边距，只单独给中一方去加外边距就行；出现外边距合并的情况，显示最大值；
  2.父子级垂直方向的外边距合并:
  a.给父级加边框线解决外边距合并【边框线不可以为0】
  b.给父级加内边距【padding】来撑开与子级的距离；

  #div1{
            width:200px;
            height:200px;
            background-color:#f90;
            /* margin-top:50px; */
            /* border:1px solid transparent; */
            padding:50px;
        }
        #div2{
            width:100px;
            height:100px;
            background-color: violet;
            /* margin-top:50px; */
        }

  padding:内边距；边框线与内容之间的距离； 内边距是属于盒子内部的样式；

盒子模型与边距

盒子模型-包含padding,border,margin;content【宽度*高度】
盒子总宽度： width + 左padding + 右padding + 左border + 右border;
盒子总高度同理宽度：
盒子总高度：height + 上下padding + 上下border;

实战 实现倒三角

 <style>

        div{
            width:100px;
            height:100px;
            border:5px solid red;
            /* background-color:#f90; */
            margin-bottom: 10px;
        }
        body{
            background-color:#000;
        }
        #div2{
            width:0;
            height:0;
            border:50px solid red;
        }

        #div3{
            width:0;
            height:0;
            border:50px solid red;
            border-top:50px solid pink;
            border-right:50px solid #000;
            border-bottom:50px solid #ff0;
            border-left:50px solid #0ff;
        }
        #div4{
            width:100%;
            height:100%;
            border:50px solid red;
            border-top:50px solid pink;
            border-right:50px solid #000;
            border-bottom:50px solid #ff0;
            border-left:50px solid #0ff;
        }
        #div5{
            width:0%;
            height:0%;
            border:50px solid red;
            /* border-top:50px solid pink; */
            /* border-top:none; */
            border-top:0px solid pink;
            /* 把左边的与右边的给透明化 */
            border-right:50px solid rgba(36, 33, 33,0);
            border-bottom:50px solid #ff0;
            border-left:50px solid transparent; /* transparent : 透明 */
        }

    </style>

补充 标签的特征

标签的特征：
            display: block;
                块级元素/标签/样式
                    1.独占一行【霸道】
                    2.支持宽度，高度；
                    3.支持margin,padding等CSS样式
                    4.宽度为100%；
            display: inline
                行内元素/标签/样式
                    1.横行排列；
                    2.【由内容撑开宽高度】不支持宽度，高度；
                    3.不支持margin;
                    4.支持padding,垂直方向的padding会出现问题【把其它元素遮盖】
                    5.行内元素与行内元素之间存在空隙【会解析一个空格字符】
            display:inline-block;
                行内块元素；
                    1.横行排列；
                    2.支持宽度，高度；
                    3.支持margin , padding 等CSS样式；

        样式分类：
            行内元素：
                span , a , i , em , sub , sup ;
            块级元素：
                div , p , h1 - h6 ;