学习html总结（二）

王海宇53638332

容器标签：
        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[type="xxx"]，p[id=abc]完全等价于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总结（一）

nuoyan

羡慕你们这些会排版，会写出来的。我会用，但是让我写出来总感觉不知道从哪开始

易之翼

不错，省得自己总结了

rebornsunset

谢谢大佬总结

1yi0n

值得借鉴

pywy

感谢总结

追星剑vs

flex我记得比flot要好用一点

lengkeyu

不错。学习了，谢谢

zhhmok

感谢总结!