html和css学习总结

Posted 2023-03-26

参考技术A 本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务，总的来说，虽然完成了这一周的学习，但是对于一些知识点掌握的不是很牢固，使用不太熟练，之后还需要多加练习，对于本周的学习我有如下总结：

对于写网页需要的基础知识一定要牢牢掌握，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul 和 li 标签，也就是列表元素；对于一些标签，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法，这个也是非常常用的。对于css的盒子模型，一定要认真地学习，并且能熟练的运用。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、 对齐和分配空白空间。

 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

 弹性容器内包含了一个或多个弹性子元素。

 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

 当为父盒子设为flex布局，子元素的float、clear和vertical—align属性将失效

    flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置好排列方式

  flex布局父项常见的属性：

                1.flex-diretion:设置主轴的方向

                 默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向，水平向下

                    属性值：row 默认值从左到右

                           row-reverse 从右到左

                           column 从上到下

                           column 从下到上

                2.jusity-content:设置主轴上的子元素排列方式

                    属性值： flex-start 默认值从头开始 如果主轴是x轴，则从左到右

                             flex-end  从尾部开始排列

                             center 在主轴居中对齐（如果主轴是x轴则水平居中）

                             space-around平分剩余空间

                             space-between 先两边贴边再平分剩余空间（重要）

                3.flex-wrap:设置子元素是否换行

        属性值： nowrap 默认子元素不换行 如果装不下，会缩小子元素的宽度，一块放到父元素中

                        wrap 换行

                4.align-content:设置侧轴的子元素排列方式（多行 需要换行） 单行无效

                    属性值： flex-start 默认值在侧轴的头部开始排列

                             flex-end  在侧轴的尾部开始排列

                             center 在侧轴中间显示

                             space-around 子轴在侧轴平分剩余空间

                             space-between 轴在侧轴先分布在两头，再平分剩余空间

                             stretch   设置子项元素高度平分父元素高度

                5.align-items:设置侧轴的子元素排列方式（单行）

                    属性值： flex-start 从上到下

                             flex-end  从下到上

                             center    挤在一起（垂直居中）

                             stretch   拉伸（默认值） 使用时子盒子不要给高度

                    例如：子元素居中  默认主轴是x轴

                       主轴居中 jusity-content:center

                       侧轴居中 align-items:center

                6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap

            flex布局子项常见属性

                1.flex定义子项目分配剩余空间，用flex来表示占多少份数

                    flex:<number>; 默认值 0

                2.align-self控制子项自己在侧轴的排列方式

                3.order属性定义子项的排列顺序（前后顺序）

 给父元素添加 display:grid

      display关于网格的取值分为两个，grid(块网格)和 inline-grid (行内网格 行内块)

      grid 容器从上向下排列

      inline-grid 容器从左向右排列

   grid-template-row;规定行属性

    grid-template-column;规定列属性

    1.绝对大小（根据列数或者行数确定值得个数）

       grid-template-row：200px 200px 200px

       grid-template-column：200px 200px 200px

    2.百分比（根据列数或者行数确定值得个数）

       grid-template-row：33.33% 33.33% 33.33%

       grid-template-column：33.33% 33.33% 33.33%

    3.repeat函数

       grid-template-rows: repeat(3,33.3%);

       grid-template-columns: repeat(3,33.3%);

    4.repead auto-fill  自动填充

        grid-template-rows: repeat(auto-fill,33.3%);

        grid-template-columns: repeat(auto-fill,33.3%);

    5.fr 片段  

        grid-template-rows: 100px 1fr 300px;

        grid-template-columns: 100px 1fr 300px

    6.minmax

       grid-template-rows:minmax(100px,200px) 200px 300px

       grid-template-columns:200px 200px 200px

    7.auto

        grid-template-rows: 100px auto 300px;

        grid-template-columns: 100px auto 300px

    列间距

    1.grid-row-gap: 10px;

      grid-column-gap: 10px;

      复合写法

      grid-gap: 10px 10px;

    指定区域

     1.grid-template-areas: 'a b c '

                                         'd e f'

                                        'g h i';

        区域合并时  需要让合并的区域名字相同

        grid-template-areas: 'a a c '

                                         'd e f'

                                         'g h i';

        .box div:nth-child(1)

            grid-area: a;

       

以上两种网页布局方式是我制作网页时比较常用的，也是学习前端必须掌握的。

除了以上这些，还有很多是我们需要掌握的，加油吧继续学习！！！！！！下周分享js学习总结

HTML5+CSS3-全面详解（学习总结---从入门到深化）

目录

​​CSS简介​​

​​ CSS概念​​

​​为什么需要CSS​​

​​CSS和HTML之间的关系​​

​​ 语法​​

​​学习效果反馈​​

​​ CSS的引入方式​​

​​ 内联样式（行内样式）​​

​​内部样式​​

​​外部样式（推荐）​​

​​导入式（了解）​​

​​@import和link的区别​​

​​ 学习效果反馈​​

​​ CSS样式表特征​​

​​ 继承性​​

​​ 层叠性​​

​​ 优先级​​

​​ CSS注释​​

​​学习效果反馈 ​​

​​ 基础选择器一​​

​​ 全局选择器​​

​​元素选择器​​

​​学习效果反馈​​

​​ 基础选择器二​​

​​编辑ID选择器​​

​​ 合并选择器​​

​​选择器的优先级​​

​​学习效果反馈 ​​

​​ DIV+CSS布局​​

​​ 布局时常用的属性​​

​​ 布局-上中下结构​​

​​学习效果反馈​​

​​布局实操一 ​​

​​布局实操二​​

---

CSS简介

 CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表
CSS文件后缀名为 .css
CSS用于HTML文档中元素样式的定义

为什么需要CSS

使用css的目的就是让网页具有美观一致的页面

CSS和HTML之间的关系

 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

 选择器通常是您需要改变样式的 HTML 元素 每条声明由一个属性和一个值组成属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

<style>
    h1
        color: blue;
        font-size: 12px;
   
</style>

学习效果反馈

1.下列关于CSS基础语法描述错误的是：属性与属性值之间用分号隔开

 CSS的引入方式

 内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。 Style 属性可以包含任何 CSS 属性

<p style="background: orange; font-size: 24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使
用 <style> 标签在文档头部定义内部样式表

 

<head>
    <style>
       h1 
           background: red;
       
    </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使
用外部样式表的情况下，你可以通过改变一个文件来改变整个站点
的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

<link rel="stylesheet" type="text/css" href="xxx.css">

导入式（了解）

此种方式使用率比较低,因为会影响加载速度

<style type="text/css">
   @import url("css文件路径");
</style>

@import和link的区别

 学习效果反馈

1.外部CSS样式的引入方式，以下正确的是：

<link rel="stylesheet" type="text/css" href="xxx.css">

 CSS样式表特征

 继承性

指被包含在内部的标签可以拥有外部标签的样式，比如：text-、 font-、line-height，但有些属性不能继承，比如：border、 padding、margin

 层叠性

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最 后一次设置的属性值。例如对一个站点中的多个页面使用了同一套 CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针 对这些样式单独定义一个样式表应用到页面中。这些后来定义的样 式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设 置的样式效果

 优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式 行内样式>内部样式（外部样式）

 CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它
CSS注释以 /* 开始, 以 */ 结束,

/* 这是注释 */

学习效果反馈 

1.以下哪个不是CSS样式表特征：CSS注释

 基础选择器一

 全局选择器

可以与任何元素匹配，优先级最低，不推荐使用

*
     margin: 0;
     padding: 0;
 

元素选择器

HTML文档中的元素， p、b、div、a、img、body 等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述
“共性”，无法描述某一个元素的“个性”

p
    font-size:14px;

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变
为红色字体，那么我可以用 <span> 标签把“前端”这两个字围起来，然
后给 <span> 标签加一个标签选择器

<p>学完了<span>前端</span>，继续学Java</p>
span
    color: red;

 类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass
    width:800px;

<h3 class="classone classtwo">我是一个h3啊</h3>
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3> // 错误

学习效果反馈

1.下列代码哪个是类选择器使用方式：.titlecolor:red;

 基础选择器二

ID选择器

针对某一个特定的标签来使用，只能使用一次。 css 中的 ID选择器 以 # 来定义

<h2 id="mytitle">你好</h2>
#mytitle
   border:3px dashed green;

 合并选择器

语法： 选择器1,选择器2,... 

作用：提取共同的样式，减少重复代码

.header, .footer
    height:300px;

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

学习效果反馈 

1.下列选择器优先级排序正确的是：行内样式 > ID选择器 > 类选择器 > 元素选择器

 DIV+CSS布局

 优点

 布局时常用的属性

 布局-上中下结构

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

<style>
.header 
    height: 100px;
    background-color: #fcc;

.content 
    height: 400px;
    background-color: #ff9;

.footer 
    height: 100px;
    background-color: #ccf;

</style>

布局-上中下-左右

<div class="container">
    <div class="header"></div>
    <div class="nav"></div>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>

<style>
.header 
    width: 100%;
    height: 100px;
    background-color: red;

.nav 
    width: 100%;
    height: 50px;
    background-color: pink;

.content 
    width:100%;
    height: 300px;
    background-color: yellow;

.footer 
    width: 100%;
    height: 150px;
    background-color: deepskyblue;

.left 
    width: 33.33%;
    height: 300px;
    background-color: palegoldenrod;
    float: left;

.center 
    width: 33.33%;
    height: 300px;
    background-color: palegreen;
    float: left;

.right 
    width: 33.33%;
    height: 300px;
    background-color: palevioletred;
    float: left;

</style>

学习效果反馈

1.以下哪个不是 DIV+CSS 布局的优点：对搜索引擎不友好

布局实操一 

<div class="box">
    <div class="left">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
    <div class="right"></div>
</div>

<style>
    .box
        width: 500px;
        height: 500px;
   
    .left
        float: left;
        width: 250px;
        height: 500px;
   
 .right
        float: right;
        width: 250px;
        height: 500px;
        background-color: burlywood;
   
    .top
        width: 250px;
        height: 250px;
        background-color: pink;
   
    .bottom
        width: 250px;
        height: 250px;
        background-color: turquoise;
   
</style>

<div class="box">
    <div class="left"></div>
    <div class="right">
        <div class="top"></div>
        <div class="bottom">
            <div class="b-left"></div>
            <div class="b-right"></div>
        </div>
    </div>
</div>

<style>
    .box
        width: 600px;
        height: 600px;
   
    .left
        float: left;
        width: 200px;
        height: 600px;
        background-color: pink;
   
    .right
        float: right;
        width: 400px;
        height: 600px;
   
    .top
        width: 400px;
        height: 300px;
        background-color: springgreen;
   
    .b-left
        float: left;
        width: 200px;
        height: 300px;
        background-color: slateblue;
   
    .b-right
        float: right;
        width: 200px;
        height: 300px;
        background-color: tan;
   
</style>

布局实操二

 

<div class="phone">
    <div class="left">
        <img src="./images/1.webp" >
    </div>
    <div class="right">
        <div class="item">
            <img src="./images/2.webp" >
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" >
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" >
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" >
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" >
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" >
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" >
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
        <div class="item">
            <img src="./images/2.webp" >
            <h3>黑鲨4S</h3>
            <p>磁动力升降肩键</p>
        </div>
    </div>
</div>

<style>
    body
        background-color: #f1f1f1;
   
    .phone
        width: 1300px;
        height: 680px;
        margin: 0 auto;
   
    .left
        float: left;
        width: 234px;
        height: 680px;
        margin-top: 10px;
   
    .right
        float: right;
        width: 1050px;            
   
    .item
        width: 250px;
        height: 300px;
        float: left;
        margin-left: 10px;
        background-color: #fff;
        margin-top: 10px;
        text-align: center;
   
</style>