demo42-标签总结
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; } /* a标签,span标签,label标签设置宽和高之后没效果.所以不可以设置宽和高, 如果想要设置,那么必须转换成行内块标签显示才行 display:inline-block 行标签就三个:a标签,span标签,label标签是常用的. img是行内块标签 * */ a{ width: 100px; height: 100px; background: yellow; } img{ width: 100px; height: 100px; } </style> </head> <!-- 标签总结 --> <body> <h1>标签总结:所有的标签,一共就三种</h1> <h3>第一种:块级标签,代表是:h1-h6,div,p,ul,li,ol</h3> <h3>块级标签特点:1.所有标签独占一行2.可以设置宽和高</h3> <div>查看源码的时候独占一行</div> hjkjhj <h3>第二种:行内标签,代表是:a,span,label</h3> <h3>行内标签特点:1.所有标签都是并排显示 ,即同一行显示 2.不可以设置宽和高</h3> <a href="#">黑马程序员</a> bbbbb <h3>第三种:行内块标签,代表是:img</h3> <h3>行内块标签特点:1.所有标签都是并排显示 (同一行显示的意思)2.可以设置宽和高(意思就是吸收了其他两个的优点)</h3> <img src="../day01/img/banner.jpg"/> ccccccc </body> </html>
演示效果:
本文作者:砚台是黑的
本文链接:https://www.cnblogs.com/huaibin/p/12588535.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步