前端HTML部分笔记

                HTML文档结构
HTML文档结构包括三部分
<html> 此元素可告知浏览器其自身是一个html文档,所有的标签都写到它的内部
<head> 头部 <head>头部位于<html>和</html>之间
<title> 标题  <title>展示在浏览器标签当中的标题
<meta> 元标签 <meta> 这个标签用来描述html网页文档的属性
<body>


                    HTML 标签
开始标签和结束标签也被称为开放标签和闭合标签
一般成对出现的标签,其内容在两个标签中间,单独呈现的标签,则在标签属性中赋值。
标签的分类


CSS选择器的优先级
1、选择器的针对性越强,它的优先级别就越高

2、选择器的权值
    *:0
    标签:1
    类:10
    属性:10
    伪类/伪元素:10
    id: 100
    important: 1000
3、原则:选择器的权值加到一起,大的有限;如果权值相同,后定义的有限
4、优先级排序
important > 内联 > ID > 类|伪类/伪元素|属性 > * > 继承


标签元素划分:
    1、块元素:特点:自己独占一行:就像一个段落,能够随时设置宽度和高度。
        h1-h6、div、hr、form、p、li、ul
    2、内联(行内)标签:不会自己独占一行,九号线给一个单词,一直往后排。宽度,高度,内边距都不能改变
        a、big、br、em、img、label、span
    3、行内-块标签:多个内联(行内)-块级元素可以在一行,可以设置宽度高度

块元素与内联元素相互转换:
    1、把内联元素转换成块元素

    2、把块元素转换成内联元素
    3、转化为内联块元素


居中:
水平居中:
行内-块级标签: text-align:center
块级标签:margin:0 auto

box-sizing属性


页面布局:
1、定位:
    position 元素来设置元素的定位
        static 默认值,元素没有开启定位
        relative  开启元素的相对定位
        absolute  开启元素的绝对定位
        fixed   开启元素的固定定位

相对定位: 相对于自身做出的位置上的改变  left right  top bottom
1、开启元素的相对定位后,如果不设置偏移量元素不会发生任何变化
2、相对定位元素相对于其自身在文档中的位置来定位  (以自身为参照物)
3、相对定位的元素不会脱离文档流
4、相对定位不会改变元素的性质,块元素还是块元素,内联元素还是内联元素
5、相对定位的元素会提升一个层级

绝对定位:相对于父标签的定位
1、元素设置绝对定位以后,如果不设置偏移量,元素的位置不会发生变化
2、绝对定位的元素是相对于距离他最近的、开启了对位的祖先元素进行定位,如果所有的祖先元素都没开启定位,则相对于浏览器窗口进行定位
3、绝对定位的元素会完全脱离文档流
4、绝对定位会改变元素的性质,内联变块,块的高度和宽度都被内容撑开,并且不独占一行
5、绝对定位会使元素提升一个层级

固定定位:
1、固定定位是一种特殊的绝对定位,他的特点大部分都和绝对定位一样
2、不同的是,固定定位的元素永远都是相对于浏览器窗口进行定位的,并且他不会随滚动条滚动。

层级属性:
1、定位元素 > 浮动元素 > 文档流中的元素
2、当元素开启了定位以后,可以通过z-index来设置元素的层级
3、z-index值越高,元素越优先
4、如果z-index值一样,或者都没有z-index则优先显示下边的元素
5、父元素永远不会盖住子元素

雪碧图:
雪碧图被应用在众多使用了很多小图标的网站上
相当于把每张小图以png格式的文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好


高度塌陷:
产生原因:父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑开父元素的高度,也就会导致父元素的高度坍塌
造成后果:父元素的高度一旦塌陷,所有标准流中元素的位置将会上移,导致整个页面的布局混乱
解决办法:
   1、开启父元素的BFC
    BFC:块级格式化环境,元素的隐含属性,默认是在关闭的状态,可以通过一些特殊的形式来开启BFC
    开启BFC以后的特性:
        父元素的垂直外边距不会与子元素重叠
        开启BFC的元素不会被浮动元素所覆盖
        开启BFC的元素可以包含浮动子元素
    开启BFC的方式:
        设置元素浮动
        设置元素绝对定位
        设置元素的类型为inline-block
        设置overflow为一个非默认值,一般都是使用overflow.hidden来开启BFC ******重要的手段
    2、在塌陷的父元素的最后添加一个空白的div,然后对该div进行清除浮动
        使用这种方式会在页面中添加多余的结构
        清除浮动:有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能
            none:默认值,不清楚浮动
            left:清除左侧浮动元素对当前元素的影响
            right:清除右侧浮动元素对当前元素的影响
            both:清除两侧浮动元素对当前元素的影响
    3、使用after伪类,向父元素后添加一个块元素,并对其清除浮动**********最常用的方式
        该种方式的原理和方法二原理一样,但是不用向页面中添加多余的结构

高度塌陷完善
1、字标签浮动,父元素高度崩塌
2、子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素,
    使用空的table标签可以隔离父元素的外边距,组织外边距的重叠
       这种方式会增加页面的结构  不好用

3、经过修改后的clearfix是一个多功能的,既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix::before,
.clearfix::after{
    content:'';
    display:table;
    clear:both;
}

序号选择器:
1、不区分类型的
:first-child 选中同级别中第一个标签
:last-child 选中同级别中最后一个标签
:nth-last-child(n) 选中同级别中倒数第n个标签
:nth-child(n) 选中同级别中第n个标签
:only-child 选中同级别中唯一子元素标签

2、区分类型的
:first-of-type 选中同级别中同类型第一个标签
:last-of-type 选中同级别中同类型最后一个标签
:nth-of-type(n) 选中同级别中同类型第n个标签
:nth-last-of-type(n) 选中同级别中同类型倒数第n个标签
:only-of-type 选中同级别中唯一同类型子元素标签

3、奇偶选择
:nth-child(odd) 选中级别中所有奇数
:nth-child(even) 选中同级别中所有的偶数
:nth-child(xn+y) x,y是用户自定义的n为计数器,从0开始递增选择,到元素的总个数停止



表单:
    1、fieldset 在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中
    2、legend  在fieldset可以使用legend子标签,来指定组名



rem
    1、rem可以在用户浏览网页时,根据屏幕的尺寸,来向用户展示更适合用户的布局、文字、图片、按钮
    2、rem(font size of the root element) 是指相对于根元素的字体大小的单位
    3、一旦根节点html定义的font-size 变化,那么整个网页中运用到rem的也会随之变化
rem的使用:
    1、浏览器的默认字体高都是16px,所有未经调整的浏览器都复合:
        1rem=16px, 那么12px=0.75rem 10px=0.625rem
    2、重新计算哪些被放大的字体rem数值,避免字体大小的重复声明
    3、目前PC端开始普遍使用rem,移动端基本完全使用




字体图标:
    1、基本概念:可以像使用字体一样使用图标
    2、优点:
        1、轻量性:
            一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小,
            一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像,可以减少HTTP请求
            还可以配合HTML5离线存储做性能优化
        2、灵活性:
            图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色,Hover状态
            透明度,阴影和翻转等效果,可以在任何背景下显示,使用位图的话,必须得为每个不同大小和不同效果
            的图像输出一个不同文件
        3、兼容性:
            网页字体支持所有现代浏览器,包括IE低版本
    3、缺点:
        1、图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用
        2、使用版权上有限制,有好多字体是收费的,当然也有很多免费开源的精美字体图标供下载使用
        3、创作自己的字体突变很费时间,重构人员后期维护的成本偏高

    4、使用

伸缩布局:
    1、Flex布局:
        display:inline-flex 将对象作为弹性伸缩盒展示,用于行内元素
        display:flex 将对象作为弹性伸缩盒展示,用于块级元素
    2、常用属性:
        flex-direction
            用于指定flex主轴的方向,继而决定flex子项在Flex容器中的位置
            取值:
                row:默认值,便是水平方向从左到右系列,此时水平方向轴线为主轴
                row-server:与row相反
                column:表示垂直方向从上到下排列,此时垂直方向轴线为主轴
                column-reverse:与column相反。
        justify-content
        align-items
        flex-wrap
        align-content
        align-self

猜你喜欢

转载自blog.csdn.net/GT_Stone/article/details/87992606
0条评论
添加一条新回复