HTML5复习

1. 语义化

书写HTML时，选择合理的标签去解释这一块内容，便于阅读代码和解析

 优点：1. 便于阅读，方便后续维护

                            2. 便于浏览器解析 --- SEO（搜索引擎）的优化

                            3.  便于读屏器（屏幕阅读器）的解析

2.html标签的lang属性

        1. 便于浏览器解析----渲染引擎

        2. SEO优化

        3. 浏览器对该网页解析的时候给标签的默认设置 会根据lang属性进行一些改动

 字符集：UTF-8,gbk,gb2312

3. 下载

使用a标签的download属性，不能用于file（文件传输）协议，需要用http（全栈）协议

<a href=" " download >下载</a>

4. 空链接

<a href=" " >空链接 刷新页面 回到顶部</a>

<a href="#" >空链接 回到顶部</a>

<a href="JavaScript:;" >空链接 行内js</a>

5. img

<img src="" alt="">

src：图片资源的地址

alt：图片加载失败时显示的文本

width：图片宽度

height：图片高度

图片的宽高只用设置其中一个参数，另一个参数会按照图片原本宽高比，进行等比缩放

6. CSS

6.1 引入方式

<!-- 外部 -->
<div style="color: blue;">行内样式</div>
<!-- 内联样式，再head标签中写style标签，样式写在style标签中 -->
    <style>
        div {
            color: red;
        }
        span {
            color: blue;
        }
    </style>
<!-- 外部 通过link来链接 或者 @import引入 -->
<!-- rel: 外部引入的文件和当前文件的关系 ，stylesheet： 样式表 -->
<link rel="stylesheet" href="">

优先级：行内 > 内部 = 外部 （内部和外部按后来者居上原则来设置样式）

推荐书写形式：外部 > 内部 > 行内  （优雅可读耦合性）

6.2 单位

em：相对于自己的font-size的值的大小，自己没有：先继承父级元素 最后为浏览器默认值

rem：移动端html，相对于html的font-size的值的大小

px：相对于电脑屏幕

6.3 文本属性 均可继承

text-indent：文本缩进，针对块级元素

letter-spacing：汉字之间的距离

word-spacing：英文字母间的距离

7. 选择器

7.1 链接伪类选择器

a:link  未点击过的链接

a:visited   点击过的链接

a:hover  鼠标悬浮在链接上时

a:active   鼠标抓住链接上时

7.2 结构伪类选择器

伪元素选择器 '::'

清除浮动：

div::after{
        display:'block',
        content:"",
        clear:both;
}

CSS优先级：

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

行内元素和行内块级元素居中：text-align:center;  //继承性

8. 弹性盒模型：

定位：display: flex;

概念： 容器：父元素 display: flex;

        容器属性： 1.flex-direction: 切换主轴方向

                            1）row：默认值，水平方向 ​

                            2）column: y轴方向 ​

                            3）row-reverse: 水平方向反向 ​

                            4) column-reverse： y轴反向 ​

                          2.flex-wrap：超出是否换行 ​

                             1) nowrap: 不换行，默认值 ​

                             2）wrap: 换行 ​

                          3.justify-content: 主轴方向的对齐方式 ​

                            1）flex-start: 默认值 ​

                            2) flex-end: 主轴方向结束方向排列 ​

                            3）center: 主轴反向居中排列 ​

                            4）space-between: 两端对齐，剩余空间平均分配 ​

                            5）space-around: 剩余空间平均的分配给每个盒子两端 ​

                            6）space-evenly：均分 ​

                           4.align-items： 交叉轴单根轴线的对齐方式 ​

                            1) flex-start：默认值 ​

                            2）flex-end: 交叉轴结束方向排列 ​

                            3）center: 居中 ​

                         5.align-content: 交叉轴多根轴线对齐方式,取值和justify-content一样 ​

项目：子元素 ​

项目属性：子元素

1. flex-grow ： 放大系数 默认0: 不放大 1：分配剩余空间

2. flex-shrink：缩小系数 默认1

3. align-self：项目对齐方式

        1) flex-start：默认值

        2）flex-end: 交叉轴结束方向排列

        3）center: 居中

主轴：默认水平方向为主轴方向

交叉轴：默认垂直方向为交叉轴方向，和主轴垂直的方向

特点：让子元素在主轴方向一行展示，子元素显示模式为inline-block

块级元素没有设置宽高的情况下，宽度默认为父元素的100%

没有设置盒子高度时，盒子高度由内容撑开

子盒子在父盒子中水平居中：margin:0 auto;

隐藏元素的方法

1. display:none;

2. visibility:hidden;

3. opacity:0;   //透明度

4. rgba:0   //透明度

5. transform:scale(0);   //缩放

dispaly:none和visibility:hidden的区别去联系

联系：会将后代隐藏

区别：隐藏后不占据原来的位置                        隐藏后依然占据原来的位置

           没有继承性                                              有继承性

           后代不能通过dispaly:block显示              后代可以通过visibility:visible显示