本文将深入讲解HTML标签的结构、CSS样式应用和JavaScript的核心作用，带你理解行内与块级标签的区别，以及如何通过display属性调整元素类型。同时涵盖浮动和清除浮动的技巧，以及背景颜色设置的方法。
标签
块级标签
- 独占一行（上下排列）
- 支持宽高设置（不设置宽高的情况下，高度由内容撑开，宽度撑满父容器）
- 常用块级标签：段落标签<p> 、标题标签<h1>~ <h6> 、<div>、 <ul>、<li>、<ol> 【ul（ol）只能嵌套li标签，li能嵌套任何标签】
行内标签
- 排成一行
- 不支持设置宽高，宽高由内容撑开
- 不支持上下margin,不正常显示padding
- 常用的行内标签：超链接<a>、<span>、<strong>、<em>、<body> 【超链接a的href属性中可以写目标页面的地址、服务器的地址或本地文件的相对路径（../返回上一级目录）。href 属性为空会刷新页面，###无效果，#有返回顶部的作用】
行内块标签
- 既可以设置宽高 、又排在一行
- 常用的行内块标签：<img> 、<input>、<td> img的属性①src属性是图片的路径，可以是服务器地址，也可以是相对路径 ②alt属性：图片加载失败显示的内容 ③title属性：鼠标悬停后显示的内容 ④width/height属性，宽高只需要修改一个，另一个会等比例变化 ⑤border
标签之间属性转化
- 转为块属性：display: block;
- 转为行内块属性： display: inline-block;
- 转为行属性： display: inline;
- 隐藏：display: none;
选择器
- 标签选择器：选中页面中所有此类标签。权重1。
- id选择器：id名是惟一的，一个标签只能有一个id,不同标签id也不可以相同。权重100。
- class选择器：不同标签可以使用相同的class名，一个标签可以有多个class名。权重10。
浮动
- float：left / right;
- 让块元素排成一行的时候使用浮动（给要排成一行的元素都设置浮动）
- 碰到父元素边缘会停下来
- 浮动会让行内元素支持设置宽高
清除浮动
当父元素不设置高度，高度由子元素撑开的时候，一旦子元素浮动，就会脱离父元素，父元素就会失去高度，进而影响后面的元素布局。解决方案：
- 额外标签法：在浮动元素末尾添加一个空的块级标签。例如<div style=" clear:both"></div>
- 给父元素设置overflow属性，其属性值可以设置为hidden、auto、scroll。
- 父级添加after伪元素
设置背景颜色
- 16进制：background-color: #f86b36;
- 英文单词：background-color: pink;
- rgb值：background-color: rgba(0, 0, 0, 0.3);【每个值都在0-255之间，分别代表红、绿、蓝、透明度，透明度取值0-1】
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
