学习html总结（二）
本帖最后由 王海宇53638332 于 2021-8-3 16:41 编辑容器标签：
div：它没有任何显性作用，仅作为一个容器，用来包裹其他标签，用来区分网页的结构，最重要的作用就是网页区域的划分，以及内容排版。
默认大小：width:100%跟网页保持一致，height：随内容变化
可以容纳一切标签
div默认独占一行，无论它的宽度是否被修改
span(文本容器)：
它无法设置大小，没有宽度，大小随内容变化
通常容纳文字内容
它无法用来做页面布局排版
基本标签（后续会补充）：
H1~H6:标题标签，独占一行，随数字的增大，字体逐渐减小
P：段落标签，独占一行，段落跟段落之间，上下有间距
i:斜体字
hr：分割线
b：字体加粗
br：强制换行
ul（无序列表）：type=disc 实心圆，type=square 实心正方形， type=circle 空心圆
ol（有序列表）： type=a 小写字母排序 type=A 大写字母排序 type=i 小写罗马数字排序 type=1 阿拉伯数字排序
img：单标签，src属性：存放图片路径，alt属性：当图片未显示或者无法显示时，替换文字
a标签：
href属性：链接地址（可以是网页，可以是资源文件，也可以是程序接口，只要能够访问的）
target属性：用来指定点击之后，打开网页是当前跳转，还是打开新页面
<a target="_self">xxx</a> 在当前页面跳转
<a target=" _blank">xxx</a>创建新的页面跳转
src和href的区别：
src引用的资源通常是不可或缺的，例如img当中的src，如果引用失败会导致页面不完整
href表达的是一种关联性，例如超链接关联的页面，理论上来说，即使href地址错误，并不影响当前页面的完整性。
css层叠样式（用来修饰网页的各种元素的样式）：
三种写法：
行内样式（内联样式）：
直接在标签上添加，style属性，将样式内容直接写在style属性中
内部样式：
在页面上编写style标签，将所有样式编写再style标签中。不同的样式如何针对不通风的标签生效？靠选择器来选取不同元素
外部样式：
将style标签中的样式内容，写在单独的文件中，该文件的后缀名，叫.css，html网页需要引入该css文件
<link rel="stylesheet",type="text/css",href="xxx.css">
选择器（用来选取对应的元素，添加样式）：
ID选择器：#box{。。。}，通过#号+ID号选择元素
类（别）选择器：。.ist{。。。}，通过.加上类别名称
标签选择器：直接写标签名称或者自定义标签式也可以生效
属性选择器：input，p完全等价于p#abc
通用选择器：*{....}
组合选择器：input,#box,.abc{.......}//div#box.abc{当多个选择器中间没有空格的时候，选择器之间不再有层次级关系，表示同一元素}
层次选择器：.box >p (>号表示选取下级的子元素 ) .box p (表示选取所有后代元素)
伪选择器：xxx:hover(....)---当鼠标滑过的时候生效
xxx:nth-child(n)-----选择xxx元素的第n个
xxx:nth-child( even )----选择xxx元素的偶数
xxx:nth-child( odd )------选择xxx元素的奇数
xxx:checked-------选择被选中的元素（并不是所有元素都有选中状态）
如何判断选择器的优先级：选择器范围越小，优先级越高，选择越精准，优先级越高。
css属性：
背景属性：background-color:背景色
文本属性：
color：字体颜色
font-size：字体大小
text-decoration:文本修饰：none/underline/overline/line-through
text-indent：首行缩进
font-family：字体种类
font-weight：字体粗细
排列方式：
text-align（文本的水平对齐方式）：left/center/right
line-height(行高):文字总是会垂直于这一行的中间，当行高和父容器的高度一致时，文字就会在容器中垂直居中。
大小：width/height(宽/高)
列表样式清除：list-style:none
背景图：（背景图与背景色可以并存，如果图片没有占用整个容器，则依然可以看见背景色）
background-image: url('图片路径')-------背景图默认是被元素的大小限制的超出的部分不可见
background-size:300px 500px(背景图的宽度300px，高度500px)------背景图依然在默认情况下可以保持宽高比，设定大小时，可以只设定宽或高
background-position:left bottom;(将背景图位置改在左下角)
background-position:200px 100px(背景图位置，横坐标200px，纵坐标100px)-------需要各位注意的是，在浏览器的坐标中原点始终在左上角，并且，y轴向下为正
background-repeat：no-repeat;(禁止背景图平铺（重复）)
background:linear-gradient(线性渐变)(to left,#ccc,#fff)
渐变方向，开始颜色，结束颜色
浮动：
float:left/right：左浮动右浮动
浮动元素脱离文档流，不占据页面空间，因此，他会与其他元素重叠，但是不会遮掩文字内容（文字环绕效果）
子元素浮动会导致父元素高度塌陷-----给父元素增加固定高度------给父元素增加overflow：auto；
当一个宽度100%的容器浮动时，宽度会自动改为随内容变化，简单说，就是没有了宽度，需要靠内容撑开
所有浮动元素水平横向排列
如何清除浮动元素影响（平级相邻元素）：如果哪个元素不想受到前面浮动元素的影响，在该元素身上增加 clear:both;
元素类型：
块元素（h1/h2/div/p）：可以设置宽高大小，独占一行
行内元素（span/a/b/i）:设置高度无效，水平排列，排在一行，当放不下时候换行，只有水平边距生效的
行内块元素（img/input/表单元素）：可以设置宽高大小，水平排列，排在一行，当放不下了会换行
如何进行类型转换：
dispaly属性：
block（块）/ inline(行内)/inline-block(行内块)
盒模型：
margin(外边框)：两个元素上下边距会重叠在一起，当大小不一样得时候，以大的为准，左右不重叠
margin：10px------表示边框四周有10像素的距离
margin：10px 15px------表示上下边距10像素，左右边距15像素
margin：auto；--------自动调整边距，会使得这个元素在水平方向上居中
padding（内边距）：padding：20px；----表示向元素填充20px的距离，内容与边框之间会产生空袭，同时元素会被撑大，也就是所，会改变元素的大小
border（边框）：border：2px solid black；--边框宽度2px，实线，黑色
边框类型：solid(实线)/dashed(虚线)/dotted(点线)
overflow属性：
scroll(出现滑动条)-----未超出时，滚动条不显示，但是滚动框出现
hidden(超出部分隐藏)
auto(自动处理)：为超出时，滚动框不出现，超出时，滚动框出现
overflow-x------设置水平方向
overflow-y-------设置竖直方向
精灵图（背景图）----------整合小的图片为一张大图，然后通过调整背景图片位置，来显示其中部分内容，图片整合的作用时为了减少网络请求，提高网页加载效率
学习html总结（一）
羡慕你们这些会排版，会写出来的。我会用，但是让我写出来总感觉不知道从哪开始 不错，省得自己总结了{:301_988:} 谢谢大佬总结 值得借鉴 感谢总结 flex我记得比flot要好用一点 不错。学习了，谢谢 感谢总结!
页:
[1]
2