前端HTML部分笔记_不会被劫持的浏览器-CSDN博客

本文链接：https://blog.csdn.net/GT_Stone/article/details/87992606
                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