放松读物,再看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元素划分的资料)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步