放松读物,再看css禅意花园-总结HTML-总结

  块级标签

  特点:独占一行,对高度、宽度、行高以及顶和底边距都可设置的属性值生效;

     如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;

  块级标签有:div p ul ol li dl dt dd h1~h6 form

  div标签:划分块的主要使用标签;p标签:段落标签,段落文字使用;h1~h6:6级标题,字体的大小依次变小;

  ul标签:无序列表的主标签,后面的标号是圆点;ol标签:有序列表的主标签,后面一般跟有序的1,2,3,4……;

  li标签:列表中的主要使用标签;dl标签:自定义标签的主标签;dt标签:自定义标签的表头;dd标签:自定义标签的表头解释信息;

  行内标签

  特点:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行高以及顶和底边距,完全靠内容撑开宽高;

  行内标签有:span a em strong b i u label br input不确定

   a标签:主要用来链接一个其他的网页;span标签:主要用来对行内的文字进行一些样式以及其他的操作;

   em标签:一般用来对文字进行强调,使用斜体体现出来;

   strong标签:一般用来对文字进行强调,使用加粗体字体体系出来;

   还有一种,行内块元素

   特点:结合的行内和块级的优点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;

   行内块标签有:img input textarea

   img标签:图片引用标签,其中src属性中写入图片的地址;

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

   各种标签之间的转换

   1 块级标签转换为行内标签:display:inline;

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

   3 转换为行内块标签:display:inline-block;

   再总结各种标签之间的区别

   块标签:独自占领一行、可以进行宽高的数值的设定;

   行标签:在一行内显示、不可以进行宽高的数值的设定;

   行内块标签:能和其他元素在一行,能设置宽高;

   嵌套规则

   块标签可以套行标签,行标签不可以套块标签

   以上摘录自https://www.cnblogs.com/guapitomjoy/p/11668540.html

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

   在工作时候都遇到对input设置width是有效果,在上面的文字中,认为input标签是行内标签。

   对行内标签有特点描述是,不能直接设置width,是无效的。

   在网上查看资料,有认为说的大概正确的。

   有这样的文字,认为input和img是效果是块元素,是行内块标签

   摘自https://www.cnblogs.com/annie211/p/5933522.html

   还有个问答,http://www.imooc.com/qadetail/211324

===========================================================================================================================

  https://segmentfault.com/a/1190000015202771

  (这是解决vertical-align时候,查找到html元素划分的资料)

原文地址:https://www.cnblogs.com/158-186/p/12922304.html