• HTML和CSS学习总结

    目录

    一、HTML

            （一）html基础入门：html基础入门

            （二）href和src、div和span的区别

            （三）超链接的四种使用方式：超链接的四种使用方式

    二、CSS

            （一）css的引入：CSS初学之引入css的三种方式（一）

            （二）选择器的使用：css初学之css基础用法及选择器（二）

            （三）伪元素选择器

           (四）动态伪类

    （六）css三大特性

    （七）盒模型

    （八）一些常用的css属性和布局小技巧

    （九）元素的转换

     （十）定位

    （十一）静态轮播

    ​​（十二）表格

    （十四）弹性盒子

    （十五）过渡

    （十六）动画属性

    一、HTML

            （一）html基础入门：html基础入门

            （二）href和src、div和span的区别

    href属性：
    1、通过该属性去关联另一份外部资源文件

    2、如果被关联的资源文件，在页面渲染时需要用到该资源中的内容时，它会下载该资源

    3、如果需要下载资源文件内容时，并行下载的方式，不会阻塞页面的渲染

    src属性：
    1、通过该属性去访问到对应的外部资源并替换掉该标签的内容

    2、src属性肯定是会下载该路径的资源

    3、src的下载不是并行下载，在页面渲染时如果遇到src那么会将该资源全部下载完毕并且解析后才会继续渲染页面后面的内容，src会阻塞页面的渲染

    div标签是块级元素：
    1、具备块级元素的特征

    2、典型的块级元素、可以嵌套任何元素

    3、div没有任何的语义

    4、通常作为页面布局的容器使用

    span标签是行内元素：
    1、具备行内元素的特征

    2、典型的行内元素，通常用于存放文本和其他的行内元素

    3、span没有任何的语义

    4、作为行内容器使用

            （三）超链接的四种使用方式：超链接的四种使用方式

    二、CSS

            （一）css的引入：CSS初学之引入css的三种方式（一）

            （二）选择器的使用：css初学之css基础用法及选择器（二）

            （三）伪元素选择器

    一、简介

    伪元素选择器：表示页面中一些特殊的元素，这些元素并不是常规的标签元素 或者 元素中特别的位置等

    伪元素通常由 ::开头

    ::first-letter 表示第一个字母

    ::first-line 表示第一行的文字

    ::selection 表示被选中的内容信息

    ::before 元素最开始的位置

    ::after 元素结束的位置

    注意：以上两个伪元素，单独使用没有任何意义

    必须配合content属性使用

    二、实例

    代码：

           (四）动态伪类

    简介

    伪类：是不存在的类别，在css中可以将伪类分为两个方向

    -结构伪类（html元素结构有关）

    -动态伪类（用户交互有关）

    一、结构伪类（不常用）

    略

    二、动态伪类（常用）

    -link 表示未被访问过的超链接（只能用于a标签）

    -visited 表示已经被访问过的超链接（只能用于a标签）

    -active 表示被用户点击的元素（任何元素）

    -hover 鼠标移入到某个元素 （任何元素）

    （五）单位

    一、长度单位

    长度单位

    -px

    -px是网页中构建使用最频繁的单位，也是一个绝对单位

    -屏幕实际是一个一个的像素点组成的

    -不同屏幕的像素大小是不一样的

    -同样的200px在不同设备下显示效果可能有微小的差异

    -em

    -em是相对单位，相对于其父元素，在font-size中设置的字体大小为基准

    -如果父元素中的font-size值为16px，那么1em = 16px

    -rem

    -rem是相对单位，相对于根元素font-size中设置的字体大小为基准

    -根元素 font-=16px 1rex = 16px

    -vh和vw

    -vh和vw都是相对单位，相对于视口大小，屏幕设备可视区域

    -比如：视口宽度高度为1024*700 那么1vw表示视口宽度的1%：10.24 1vh=7

    二、比例单位

    比例单位

    百分比单位%可以用于多种情况，不限于只是指定长度

    三、颜色单位

    颜色单位

    1.颜色名，单词

    在css通过颜色的单词来设置颜色

    比如：red、blue、pink

    2.RGB格式

    RGM通过三种颜色的不同浓度来调配不同的颜色

    rgb（255,,255,255） 范围值：0~255

    3.RGBA格式

    在RGB的基础上增加了一个透明值，A代表透明值 范围值（0-1）0完全透明，1完全不透明

    4.#十六进制(1-f)

    #aabbcc

    （六）css三大特性

    css具有三大特性：

    1、层叠性

    2、优先级（权重）

    3、继承性

    一、层叠性

    层叠性：当有多个相同的选择器或者同类型的选择器选中同一个颜色，并且为改元素设置同一个样式属性，但是属性的值不一样时

    1.解决样式冲突

    2.会优先使用靠近元素（后面一个）的选择器设置的样式

    注意：当选择器权重（优先级）不同时，无法通过层叠性解决样式冲突

    二、优先级（权重）

    优先级（权重）排序：

    -* 通配符选择器 没有权重，权重最低

    -元素选择器 0，0,0,1

    -类/伪类 0，0,1,0

    -id选择器 0,1,0,0

    -行内样式（style） 1,0,0,0

    -！important 无限大 谨慎使用

    注意：选择器最终的优先级是变化，可以进行叠加的，但是只能在最高位的值，不能突破等级

    三、继承性

    继承性：css规定一些通用的样式属性，不需要频繁的去写，通过继承性实现即可

    注意：不是所有的css属性都能够被后代元素继承

    可以被继承的css属性：字体相关、字体颜色、列表相关的、文本相关

    font-xxx text-xxx color list-xxx

    （七）盒模型

    一、盒模型介绍

    盒模型：

    -页面中所有的元素本质都是一个矩形盒子

    -页面的本质就是一个一个的矩形盒子组成的

    -写网页的布局就是把这些盒子摆放到正确的位置

    盒模型分为标准盒模型（w3c）和ID盒模型（怪异模型）

    不管是哪一个盒模型，都是由四部分组成

    盒模型= 内容区 + 边框 + 内边距 + 外边距

    二、盒模型的使用

    标准盒模型：

    内容区：

    由width和hight设置

    边框（border）：

    border属性可以设置盒子的边框

    设定边框需要指定3部分：边框的大小、边框的样式、边框的颜色

    border-width 边框的大小

    border-style 边框的样式

    border-color 边框的颜色

    border 简写属性： 设置三个值边框的大小、边框的样式、边框的颜色

    border：边框大小 边框样式 边框颜色

    举例： border：1px solid black

    内边距（padding）：

    padding属性设置盒子的内边距，内容区到边框之间的距离

    内边距也会影响盒子可见框的大小

    -每一个盒子具备四个方向的内边距

    padding-top

    padding-left

    padding-right

    padding-bottom

    简写属性padding 同时指定四个方向的padding

    -4个值 上 右 下 左（顺时针）

    -3个值 上 左右 下

    -2个值 上下 左右

    -一个值 上下左右

    外边距（margin）：

    margin属性设置盒子与盒子之间的间隙，不属于盒子内部，它不会影响盒子可见框的大小，只会影响盒子占据位置

    margin同padding用法一致

    margin-top

    margin-left

    margin-right

    margin-bottom

    简写属性padding 同时指定四个方向的padding

    -4个值 上 右 下 左

    -3个值 上 左右 下

    -2个值 上下 左右

    -一个值 上下左右

    注意： margin可以为负值

    margin：0 auto

    -在父元素中水平居中

    总结：块元素的盒子 四个方向设置外边距都有效，行内元素的盒子只有水平方向有效

    怪异盒模型：

    怪异盒模型在设置好大小（width、height）后就固定了，再去设置边框和内边距的话内容区就会减小，比如：先设置一个200x200的盒子，如果设置内边距为10，边框为1的话，那么内容区就会缩减为200-（10+1）x2=178.

    （八）一些常用的css属性和布局小技巧

    1.设置元素的不透明度

    opacity：0； //（值为0-1）

    2.设置元素的阴影

    box-shadow；0 0 50px red

    （四个参数分别为x轴、y轴、虚化面积、颜色）

    3.元素轮廓

    outline：1px solid pink

    （三个参数分别为轮廓的大小、轮廓的样式、轮廓的颜色）

    4.去掉列表前面的符号

    list-style：none；

    5.去掉超链接的下划线

    text -docoration：none；

    6.将一个块元素放到父元素的水平居中

    margin：0 auto；

    7.将一个行内元素水平居中

    text-align：center；

    8.如何将行内元素在父元素中水平垂直居中

    line-herght：100px 值与父元素同高；

    （九）元素的转换

    css可以通过display属性，进行元素特性的转换

    display

    值：

    -block 将元素转换为块元素

    -inline将元素转换为行内元素

    -inline-block 将元素转换为行内块元素

    visibility：hidden隐藏元素

    visibility：visible显示元素

    可以配合伪类：hover选择器来进行元素的隐藏和显示

    display：none和visibility：hidden不同：

    -display：none是直接让元素消失，不会占据文档流中的位置

    -visibility：hidden只是让元素隐藏，但本身还是在文档流中

    代码：

    1.  .div1 {
    2.  
    3. height: 200px;
    4.  
    5. width: 200px;
    6.  
    7. background-color: aqua;
    8.  
    9. visibility: hidden;
    10.  
    11. }
    12.  
    13. span:hover+.div1 {
    14.  
    15. display: block;
    16.  
    17. visibility: visible;
    18.  
    19. }

    效果：

     （十）定位

    一、简介

    定位（position）

    -定位是一种更高级的布局手段

    -通过定位可以将元素摆放到页面的任意位置

    -通过css的属性position为元素设置定位

    二、可选值

    -可选值：

    -status 默认值，元素是没有开启定位的静止的

    -relative 为元素开启相对定位

    -absolute 为元素开启绝对定位

    -fixed 为元素开启固定定位

    -sticky 为元素开启粘滞定位

    三、相对定位和绝对定位

    -相对定位：元素相对于自己本身的位置！最开始占据文档流的位置来进行定位

    -绝对定位：元素相对于其最近的开启了定位的包含块元素为基准进行定位

    -偏移量：

    -通过css提供的方位属性，对开启定位的元素设置，偏移量

    -top left botton right

    -注意：一般主需要设置两个方位即可对元素进行定位

    -relativ（相对定位）

    -当元素的position属性值设置为relative则为元素开启了相对定位

    -相对定位的元素具备以下特点：

    1、元素开启相对定位后，不设置偏移量，元素是不会发生任何的位置变化

    2、相对定位是参照元素自身在文档流中的位置进行定位的

    3、相对定位会提升元素的层级关系

    4、相对定位的元素不会脱离文档流，元素的特性不会改变，块还是块，行内还是行内

    -absolute（绝对定位）

    -当元素的position属性值设置为absolute；则为元素开启了绝对定位

    -绝对定位的特点：

    1、开启绝对定位后，如果不设置偏移量，元素的位置不会发生改变

    2、开启绝对定位后，元素会脱离文档流，不再占据页面实际位置，会影响其他正常元素的布局

    3、绝对定位会改变元素的性质，不再区分行、块、行内块的概念

    4、绝对定位会提高元素的层级

    5、绝对定位的元素是相对于最近的开启了定位的包含块来进行定位的

    -包含块：正常情况下，包含块指的就是该元素的父元素（祖先元素）

    （十一）静态轮播

    一、：target介绍

    ：target指向的是被锚点跳转的元素

    二、图片轮播

    首先让需要轮播的图片处于同一个位置，利用浮动属性和绝对定位让轮播的图片处于同一个位置。设置对应数量的链接标签。

    如图示：

    再配合a链接通过：target属性实施锚点跳转

    源码如下：

    1. <html lang="en">
    2.  
    3. <head>
    4.  
    5.     <meta charset="UTF-8">
    6.  
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.  
    9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    10.  
    11. ​    <title>Documenttitle>
    12.  
    13. ​    <link rel="stylesheet" href="reset.css">
    14.  
    15.     <style>
    16.  
    17. ​        .img-box {
    18.  
    19. ​            width: 590px;
    20.  
    21. ​            height: 470px;
    22.  
    23. ​            margin: 0 auto;
    24.  
    25. ​            position: relative;
    26.  
    27. ​            
    28.  
    29. ​        }
    30.  
    31. ​        .img-box>li {
    32.  
    33. ​            width: 590px;
    34.  
    35. ​            height: 470px;
    36.  
    37. ​            position: absolute;
    38.  
    39. ​        }
    40.  
    41. ​        .img-box img  {
    42.  
    43. ​            width: 590px;
    44.  
    45. ​            height: 470px;
    46.  
    47. ​        }
    48.  
    49. ​        .a-box {
    50.  
    51. ​            position: absolute;
    52.  
    53. ​            bottom: 20px;
    54.  
    55. ​            left: 30px;
    56.  
    57. ​            z-index: 100;
    58.  
    59. ​        }
    60.  
    61. ​        .a-box>li {
    62.  
    63. ​            float: left;
    64.  
    65. ​        }
    66.  
    67. ​        .a-box a {
    68.  
    69. ​            display: block;
    70.  
    71. ​            width: 10px;
    72.  
    73. ​            height: 10px;
    74.  
    75. ​            background-color: red;
    76.  
    77. ​            border-radius: 50%;
    78.  
    79. ​            margin-right: 5px;
    80.  
    81. ​        }
    82.  
    83. ​        .a-box a:hover {
    84.  
    85. ​            background-color: white;
    86.  
    87. ​            outline: 2px solid black;
    88.  
    89. ​        }
    90.  
    91. ​        :target {
    92.  
    93. ​            z-index: 10;
    94.  
    95. ​        }
    96.  
    97. ​       
    98.  
    99. ​    style>
    100.  
    101. head>
    102.  
    103. <body>
    104.  
    105. ​    <ul class="img-box">
    106.  
    107. ​        <li id="img1">
    108.  
    109.             <a href="">
    110.  
    111.                 <img src="img/l1.jpg.webp" alt="">
    112.  
    113. ​            a>
    114.  
    115. ​        li>
    116.  
    117. ​        <li id="img2">
    118.  
    119.             <a href="">
    120.  
    121.                 <img src="img/l2.jpg" alt="">
    122.  
    123. ​            a>
    124.  
    125. ​        li>
    126.  
    127. ​        <li id="img3">
    128.  
    129.             <a href="">
    130.  
    131.                 <img src="img/l3.jpg.webp" alt="">
    132.  
    133. ​            a>
    134.  
    135. ​        li>
    136.  
    137. ​        <li id="img4">
    138.  
    139.             <a href="">
    140.  
    141.                 <img src="img/l4.jpg" alt="">
    142.  
    143. ​            a>
    144.  
    145. ​        li>
    146.  
    147. ​        <li>
    148.  
    149.             <a href="">
    150.  
    151.                 <img src="img/l5.jpg" alt="">
    152.  
    153. ​            a>
    154.  
    155. ​        li>
    156.  
    157. ​        <li>
    158.  
    159.             <a href="">
    160.  
    161.                 <img src="img/l6.jpg" alt="">
    162.  
    163. ​            a>
    164.  
    165. ​        li>
    166.  
    167. ​        <li>
    168.  
    169.             <a href="">
    170.  
    171.                 <img src="img/l7.jpg.webp" alt="">
    172.  
    173. ​            a>
    174.  
    175. ​        li>
    176.  
    177. ​        <li>
    178.  
    179.             <a href="">
    180.  
    181.                 <img src="img/l8.jpg" alt="">
    182.  
    183. ​            a>
    184.  
    185. ​        li>
    186.  
    187. ​       <ul class="a-box">
    188.  
    189. ​            <li>
    190.  
    191.                 <a href="#img1">a>
    192.  
    193. ​            li>
    194.  
    195. ​            <li>
    196.  
    197.                 <a href="#img2">a>
    198.  
    199. ​            li>
    200.  
    201. ​            <li>
    202.  
    203.                 <a href="#img3">a>
    204.  
    205. ​            li>
    206.  
    207. ​            <li>
    208.  
    209.                 <a href="#img4">a>
    210.  
    211. ​            li>
    212.  
    213. ​            <li>
    214.  
    215.                 <a href="#img5">a>
    216.  
    217. ​            li>
    218.  
    219. ​            <li>
    220.  
    221.                 <a href="#img6">a>
    222.  
    223. ​            li>
    224.  
    225. ​            <li>
    226.  
    227.                 <a href="#img7">a>
    228.  
    229. ​            li>
    230.  
    231. ​            <li>
    232.  
    233.                 <a href="">a>
    234.  
    235. ​            li>
    236.  
    237. ​       ul>
    238.  
    239. ​    ul>
    240.  
    241. body>
    242.  
    243. html>

    ​​（十二）表格

    一、表格结构

    标准的一个表格分成三部分：

    头部 thead

    主体 tbody

    底部 tfoot

    二、表格相关属性

    th 表示头部的单元格

    tr 表示行

    td 表示正常的单元格

    ​           

    表格标签​

    如何合并单元格：

    rowspan 纵向单元格的合并

    colspan 横向单元格的合并

    表格相关的样式属性：

    border-spacing 指定表格边框之间的距离

    border-collaps 设置边框是否合并

    注意：tr标签不是table的子元素，即便tbody省略的情况下！

    浏览器会自动加上tbody标签，并且把tr放到里面

    （十三）表单

            

    一、表单简介

    form 表单：

    - 用于提交数据的容器

    - 现实生活中，个人信息登记表、调查问卷等

    - html中也可以收集用户的数据（信息） 通过form表单标签

    二、form标签相关属性

    form标签的属性：

    - action 填写数据最终提交到服务器地址

    - methed 方法 ，提交 get post

    表单相关的控件：

    - label 绑定控件，指导用户

    - input 决定输入控件的类型

    type属性：

    - radio 单选框控件

    - checkbox 复选框控件

    - text 文本信息

    - password 密码框

    - button 按钮框

    - number 数值

    - select 下拉列表控件

    - option 下拉列表项

    - textarea 富文本框（多行文本）

    - button

    如何将表单中的数据收集起来，提交给服务器

    - 利用表单控件的两个属性 name value 产生一个键值对 key：value

    （十四）弹性盒子

    一、弹性盒子简介

    flex(弹性盒，伸缩盒)

    - 是css中又一种高级的布局手段，主要就是用来替代浮动布局

    - flex布局通常是用于移动端，自适应布局

    - 通过display：flex； 就可以设置该元素为弹性盒，

    - 注意：一旦为元素设置了flex ， 该元素的clear float 失效

    - 一旦开启了弹性布局，该弹性盒会自动产生两个方向轴

    - 主轴

    - 侧轴

    • 弹性容器：开启了flex属性的元素称作为弹性容器

    二、弹性容器的css属性

    1、flex-direction 指定容器中元素的排列方式（更改主轴）

    - row 默认值 弹性元素在容器中从左往右水平排列 - 主轴

    - column 弹性元素在容器从上往下垂直排列 - zhu'zhou

    2、flex-wrap 设置弹性元素是否在容器中自动换行

    - nowrap 默认值 ，不会换行

    - wrap 沿着侧轴换行

    3、 flex-flow 是flex-direction和 flex-wrap的简写形式

    4、 justify-content 设置弹性元素在主轴上的排列方式

    - flex-start 沿着主轴排列 （默认值）

    - flex-end 沿着主轴反方向排列

    - center 主轴水平居中排列

    - space-around 分配空白区域

    - space-between 分配空白区域

    - space-evenly 分配空白区域

    5、 align-items 元素在侧轴上的对齐方式，排列方式

    - stretch 默认值

    - flex-start 沿着侧轴起点排列

    - flex-end 沿着侧轴终点排列

    - center 在侧轴上居中对齐

    - baseline 基线对齐

    6、 align-content 分配侧轴元素之间的空白（注意该属性一定是 flex-wrap: wrap; ）

    - flex-start

    - flex-end

    - center

    - space-between

    - space-around

    三、弹性项目（弹性盒子下的子元素）

    - 1、order 定义项目的排列顺序 ，值越小 越靠前，默认值都是0

    - 2、flex 指定盒子的伸缩

    - 3、align-self 用来覆盖当前元素上的align-items ，指定单个元素在侧轴上对齐的方式

    注意：弹性元素，既可以作为弹性元素，也可以变成弹性容器

    （十五）过渡

    一、过渡简介

    过渡（transition）

    - 通过过渡可以指定一个属性发生变化时的切换方式

    - 过渡属性可以创建一些比较好的效果，让用户体验更好（整体不会太生硬）

    二、过渡相关属性

    1、 transition-property ： 指定要执行过渡的属性 属性1，属性2

    - 该属性可以同时指定多个需要执行过渡的属性 多个属性之间逗号分隔

    - 通过 all 关键字 指定所有能够产生过渡的属性

    2、 transition-duration : 指定过渡持续的时间， 默认值是0 瞬间发生

    3、 transition-timing-function ： 指定过渡效果的时许函数，运动轨迹

    可选值：

    - ease 默认值 慢速开始，先加速，再减速

    - linear 匀速运动

    - ease-in 加速运动

    - ease-out 减速运动

    - ease-in-out 先加速后减速

    4、 transition-delay ： 过渡开始的延迟时间，等待一段时间开始过渡效果

    5、 transition简写属性

    - 注意：采用简写属性时，一定要将过渡时间写在延迟时间的前面！

    （十六）动画属性

    一、动画简介

    动画属性：animation

    - 动画属性和过渡属性的区别

    - 相同点：都是产生一段动画效果

    - 不同点：

    1、过渡属性只会发生在某个属性值产生了变化后，才会进行

    2、动画效果不需要某个属性值发生了变化，可以直接进行

    关键帧：指定动画元素在某些关键帧时的状态，样式

    二、如何设置动画

    1、必须设置一个关键帧，关键帧设置了动画执行的每一个步骤，每一个画面

    @keyframes 动画名{

    from {

    css样式属性

    }

    to {

    css样式属性

    }

    注意：除了使用from 和 to 还可以将整个动画流程看成是100%进度 ，通过在进度条上设置相应的属性来达到想要的效果

    }

    2、使用动画

    指定要使用动画的盒子

    属性为animation

    基础用法为animation：8s donghua infinite（表示动画无限次数播放）

    三、相关属性

    1. animation-name: test;
    2.  
    3. /* 设置动画播放的时间 */
    4.  
    5. animation-duration: 2s;
    6.  
    7. /* 设置动画的延迟时间 */
    8.  
    9. /* animation-delay: 5s; */
    10.  
    11. /* 设置动画播放次数 可以是 任意数值 或者 infinite 重复无限次*/
    12.  
    13. /* animation-iteration-count: infinite; */
    14.  
    15. /* 设置动画播放时元素的时许函数（运动函数） 和过渡属性基本一致*/
    16.  
    17. animation-timing-function: ease-in;
    18.  
    19. /* 设置动画的运行方向 */
    20.  
    21. animation-direction: alternate;
    22.  
    23. /* 默认值 normal，从from 到 to */
    24.  
    25. /* reverse 从 to 到 from */
    26.  
    27. /* 设置动画的暂停和播放 */
    28.  
    29. animation-play-state: running;
    30.  
    31. /* 设置动画的填充模式 */
    32.  
    33. animation-fill-mode: none;
    34.  
    35. /* none 默认值，动画执行完毕后元素回到原来的位置，元素本身的状态 */
    36.  
    37. /* forwards 动画执行完毕后停止在结束的状态 */
    38.  
    39. /* backwards 动画延迟一开始就处于开始状态 */
    40.  
    41. /* 简写属性 */
    42.  
    43. animation: name duration timing-function delay iteration-count direction fill-mode;

  • 相关阅读:
    JAVA计算机毕业设计自由教学平台Mybatis+源码+数据库+lw文档+系统+调试部署
    GD32学习1——环境搭建keil5
    猿创征文｜UDP/TCP网络编程
    Step 1 搭建一个简单的渲染框架
    NLP预训练模型-GPT-3
    【强化学习】day1 强化学习基础、马尔可夫决策过程、表格型方法
    js 制作qq、微信 的表情
    【CVPR 2021】Cylinder3D：用于LiDAR点云分割的圆柱体非对称3D卷积网络
    LeetCode_贪心算法_中等_846.一手顺子
    【023】Springboot+vue+mysql员工考勤管理系统（多角色登录、请假、打卡）(含源码、数据库、运行教程)
  • 原文地址：https://blog.csdn.net/weixin_45654230/article/details/125994803