标签+元素

1.标题标签

段落标签<h1> 一级标题 <h1><h2> 二级标题 <h2><h3> 三级标题 <h3><h4> 四级标题 <h4><h5> 五级标题 <h5><h6> 六级标题 <h6>

2.段落标签

<p> 我是一个段落标签 </p> //不换行

3.容器标签

<div> 这是头部 </div> <span> 今日价格 </span>

4.图片标签

<img src="https://www.cnblogs.com/zhanghai1/p/%E5%9B%BE%E5%83%8FURL" title="" alt=""/>

5.超链接

<a href="https://www.cnblogs.com/zhanghai1/p/%E8%B7%B3%E8%BD%AC%E5%9C%B0%E5%9D%80">链接</a>

6.列表标签

<ul> <li>我是第一条信息</li> <li>我是第二条信息</li> <li>我是第三条信息</li> <li>我是第四条信息</li> <li>我是第五条信息</li></ul>

7.媒体标签

1.audio音频播放 <audio autoplay="autoplay" controls="controls" loop="loop"> <source src="https://www.cnblogs.com/zhanghai1/p/source/horse.mp3" /></audio> 2.video视频播放 <video autoplay="autoplay" controls="controls" loop="loop"> <source src="https://www.cnblogs.com/zhanghai1/p/source/movie.ogv" /></video> 3.注意：

autoplay是控制自动播放

controls是控制是否显示播放控件

loop是控制视频或者音频播放到最后一帧的时候是否从头开始播放

8.块元素+特点

h1-h6 div p ul li

特点：

1.总是从新行开始 2.高度    
    
   ，行高    
    
   、外边距以及内边距都可以控制  
    
    
。

3.宽度黑认是容器的100%

4.可以容纳内联元素和其他块元素

     


     


   。

9.行内元素+特点

span   


     


     

、a



 




 




、img    

   

  、strong    

     

     
、i




  




  




、u  


  


 、s     
     
     、

特点：

和相邻行内元素在一行上 




 




 

。 高




   




   




、宽无效   


     


     

，但水平方向的padding和margin可以设置



 




 




，垂直方向的无效  

   

   

。默认宽度就是它本身内容的宽度

     

     

  。 行内元素只能容纳文本或则其他行内元素  




  




  
。（ a特殊)

只有左右边距

1.对齐vertical-align (图片旁边的文字)

vertical-align:bottom;(底线对齐)

vertical-align:base;(基线对齐)

vertical-align:middle;(中线对齐)

vertical-align:top;(顶线对齐)

10.行内块元素

img
 



 



、 input               、 td

1.和相邻行内元素（行内块〉在一行上,但是之间会有空白缝隙  


  


  


。

2.默认宽度就是它本身内容的宽度
     
     
 。 3.高度   

   

  ，行高 




    




    



、外边距以及内边距都可以控制
   




   




   。

11.快元素与行内元素标签转换

display: inline; /*块级元素转换为行内元素 */

display: block; /行内标签转换为块级标签/

12.行内元素转换为行内块元素

display: inline-block;