HTML和CSS(部分)知识点总结

Posted Buu6

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML和CSS(部分)知识点总结相关的知识，希望对你有一定的参考价值。

html和CSS(部分)知识点总结

html的基本标签

1.标签标题

n表示不同大小的字体,n取值1-6

2.

水平线标签

创建一个水平分割线,用于定义内容主题的变化

​ 👉size属性:水平线的高度,单位像素(px)

​ 👉 noshade属性:没有阴影,取值:noshade,表示显示纯色

3. 字体标签

<font size="2" color="red" face = "微软雅黑">字体的内容</font>

​ size:设置字体大小,取值1-7 浏览器默认3

​ color: 设置字体的颜色

​ face: 设置文字的字体

4.格式化标签

粗体 斜体

5.


段落标签内 插入单个换行

6.标签图片

属性名称含义作用
src图片的路径地址必写属性,否则看不到图片
width宽度
height高度如果只设置其中一项,那么图片会等比例缩放
title提示文本鼠标悬停在图片上方会出现的文字信息
alt替换文本图片加载失败时候才会出现的文字信息
border边框只能定义边框的粗细

7.

  • 标签

  • 是标签内的每一列

  • 无序列表

      名称含义
      type=“circle”空心圆
      type=“disc”默认值,实心圆
      type=“square”实心黑色正方形
      注意:写在ul身上时所有li改变,写在li身上是单个改变

      有序列表

        type可以为1,a,A,i,I默认值阿拉伯数字,英文字母,大写英文字母,小写的罗马数字,大写的罗马数字

        9.超链接标签

        名称作用取值
        href规定链接的目标url比写属性
        target规定在何处打开目标url.尽在href属性存在时使用_blank新窗口打开
        _self默认打开方式
        framename框架的名称
        name规定锚点的名称自定义

        空连接

        <a href="javascript:;">空链接<a/>
<a href="javascript:void(0);">空链接</a>

        锚点链接

        <a href="#锚点名">点击跳转</a>
<a name="锚点名">目标区域</a>

        10.表格标签

        table是父标签,相当于整个表格的容器

        名稱作用
        border表格边框的宽度
        cellpadding单元格边沿与其内容之间的空白
        cellspaceing单元格之间的空白
        bgcolor表格的背景颜色
        height表格的高度
        width表格的宽度
        用于定义行 用于定义表格的单元格(一个列)

        td标签的属性

        名称作用
        colspan单元格可横跨的列数(横向合并单元格)
        rowspan单元格可横框的行数(纵向合并单元格)
        align单元格内容的水平对齐方式 取值:left right 居中
        标签用来定义表头,单元格的内容默认居中加粗

        表单相关标签

        1、 < form>表单标签
        表单标签的主要功能:把表单中的数据提交给远端的服务器。
        From就像一个快递盒子,把需要发送给服务器的数据装到这个盒子里,点击提交按钮,然后浏览器就将数据发送给服务器
        表单标签在浏览器上没有任何显示,但是所有需要提交到服务器的数据都需要存放在表单标签中。

        action属性:请求路径,确定表单提交到服务器的地址(路径)
        method属性:请求方式。常用的取值:GET、POST
        2、 输入域标签
        标签用于获得用户输入信息,type属性值不同,搜集方式不同

        type属性

        text: 文本框,单行的输入字段,默认宽度20个字符
        password: 密码框,密码字段。
        radio: 单选框,表示一组互斥选项按钮中的一个。
        submit: 提交按钮。将表单数据发送到服务器。一般不写name属性,否则将”提交”两个字到服务器。
        checkbox 复选框
        file: 文件上传组件
        hidden: 隐藏字段
        reset: 重置按钮
        image : 图形提交按钮
        button: 普通按钮,常用于与javaScript结合使用
        name: 元素(数据)名称,如果需要表单数据提交到服务器,必须提供name属性值,服务器通过属性值获得提交的数据

        value属性: 设置input标签的默认值。注意:submit和reset为按钮显示数据
        size属性: input的宽度大小
        checked属性: 单选框或复选框被选中
        readonly: 是否只读 数据会被提交
        disabled: 是否可用 数据不会被提交
        maxlength: 允许输入的最大长度

        下拉列表。可用单选和多选。需要字标签 制定列表项
        name属性: 发送给服务器的名称
        multiple属性: 不写默认单选,取值为”mutiple” 表示多选
        size属性: 多选时,课件选项的数目

        子标签:下拉列表中的一个选项(一个条目) selected: 勾选当前列表项 value: 发送给服务器的选项值 一般option需要给value这个属性,如果不给,默认把option的文本内容发送给服务器

        文本域标签
        cols属性:文本域的列数
        rows属性:文本域的行数

        盒子模型

        基本介绍

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <style>
        .box1{
            /*
            内容区(content).元素中的所有的子元素和文本内容都在内容区中排列
                内容区的大小由width和height两个属性来设置
                width 设置内容区的宽度
                height 设置内容区的高度

             */
            width: 200px;
            height: 200px;
            background-color: skyblue;

            /*
                边框(border),边框属于盒子边缘,
                要设置边框,至少需要设置三个样式
                   边框的大小会影响到整个盒子的大小w
                    边框的宽度 border-width
                    边框的颜色 border-color
                    边框的样式 border-style
             */
            border-width:10px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>
<body>
    <!--
    盒模型,盒子模型,框模型(box model)
        - CSS将页面中的所有元素都设置为了一个矩形的盒子
        - 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
        - 每一个盒子都由以下几个部分组成:
            内容区(content)
            内边距(padding)
            边框(border)
            外边距(margin)
    -->

    <div class="box1"></div>

</body>
</html>

        边框

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background: #bfa;

            /*
                边框
                    边框的宽度 border-width
                    边框的颜色 border-color
                    边框的样式 border-style
            */
            /*
                border-width:10px;
                    默认值:一般都是3个像素
                    可以用来指定四个方向的边框的宽度
                        值的情况
                            四个值:上 右 下 左
                            三个值:上 左右 下
                            两个值: 上下 左右

                 除了border-width还有一组 border-xxx-width
                    xxx可以是 top right bottom left


            */
            /*border-width: 10px 20px 30px 40px;*/
            /*
            border-color用来指定边框的颜色,同样可以分别指定四边的边框
                规则和border-width一样

            border-color可以省略,如果省略则自动使用color的颜色值

            */
            /*border-color: orange red pink yellow;*/
            /*border-style 指定边框的样式
                solid 表示实线
                dotted 点状虚线
                dashed 虚线
                double 双线
              borders-style默认是none 表示没有边框

                */
            /*border-style: solid;*/

            /*
                border简写属性,通过该属性可以同时设置边框的所有的相关样式,并且没有顺序要求
           */
            border:10px orchid solid;



        }
    </style>
</head>
<body>
    <div class = "box1"></div>
</body>
</html>

        外边距

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            border: 10px red solid;

            /*
                外边距(margin)
                    - 外边距不会影响盒子可见框的大小
                    - 但是外边距会影响盒子的大小
                    - 一共有四个方向的外边距
                        margin-top
                             - 上外边距 设置一个正值,元素会向下移动
                        margin-right
                             - 默认情况下设置margin-right不会产生 任何效果
                        margin-bottom
                             - 下外边距 设置一个正值,其下边的元素会向下移动
                        margin-left
                             - 左外边距 设置一个正值,元素会向右移动

                     - margin也可以 设置负值,如果是负值则元素会向相反方向移动,

                    - 元素在页面中时按照自左向右的顺序排列的,
                       所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                       而设置下和右外边距会移动其他元素

                   - margin的简写属性
                        margin可以同时设置四个方向的外边距,用法和padding一样
                   - margin 会影响到盒子实际占用空间


            */
            margin-top: 100px;
            margin-left: 100px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>
</html>

        内边距

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            border: 10px orange solid;

            /*
                内边距(padding)
                    - 内容区和边框之间的距离是内边距
                    - 一共有四个方向的内边距
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left
                     - 内边距的设置会影响到盒子的大小
                     - 背景颜色会延伸到内边距上
                 一个盒子的可见框的大小,由内容去 内边距和边框共同决定
                    所以在计算盒子大小时,需要将这三个区域加到一起计算

                    padding 内边距的简写属性,可以同时指定四个方向的内边距,规则和
                        border-width一样
            */
            padding:10px 20px 30px 40px;
        }
    </style>
</head>

<body>
    <div class="box1"> </div>
</body>
</html>

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer{
            width:800px;
            height: 200px;
            border: solid red 10px;
        }
        .inner{
            /*width: auto; width的值默认就是auto*/
            width: auto;
            height: 200px;
            background-color: #bbffaa;
            margin-right: 200px;
            /*
                元素水平方向的布局:
                    元素在其父元素中,水平方向的位置由以下几个属性共同决定
                        margin-left
                        border-left
                        padding-left
                        width
                        padding-right
                        border-right
                        margin-right
                    一个元素在其父元素中,水平布局必须满足以下等式
                        margin-left + border-right + padding-left + width + padding-right+ border-right + margin-right = 其父类元素内容区的宽度(必须满足)

                        0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
                            - 以上等式必须满足,如果相加结果使等式不成立,则称为过渡约束,则等式会自动调整
                                - 调整的情况
                                    - 如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right值以使等式满足

                      - 如果将一个宽度和一个外边距设置为auto 则宽度会调整到最大,设置为auto的外边距会自动为0
                      - 如果讲三个值都设置为auto,则外边距都是0,宽度最大
                      - 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值
                            所以我们经常利用这个特点来使一个元素在其父类元素中水平居中
                            实例:
                                width:xxxpx;
                                margin:0 auto;
            */
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">


        </div>
    </div>
</body>
</html>

        水平布局

        选择器

        群组选择器
        作用:
        选择器生命是以（，）隔开的选择器列表

        语法：
        选择器1，选择器2，选择器3，…{}

        ex（例子）：

        span，.important,#main,div.redColor{
        color:red;
        font-size:12px;
        }
        页面中的所有的span，以及class为important的元素，
        id为main的元素以及class为redColor的div元素，
        它们的样式为 color：red,font-size:12px;

        命令显示图：

        1622383917095

        网页示例图：

        1622383939842
        后代选择器

        后代：
        只要具备层级关系的元素，被嵌套的都可以称之为 后代元素

        语法：
        选择器1 选择器1，选择器2，{样式声明;}

        ex(例子)：

        1. #d1 span{}
          作用： 匹配id为d1中的 所有的span

        命令显示图：

        1622383966249

        网页示例图：

        1622383976185

        子代选择器：
        子代：
        只具备一级层级关系的元素，被嵌套的称之为 子代元素

        语法：
        选择器1，选择器2，{样式声明}

        伪类选择器
        作用：
        匹配页面元素的不同状态的选择器

        分类：

        1. 链接伪类：

        2. ：link，匹配尚未被访问的超链接状态

        3. ：visited，匹配访问后的超链接的状态
          推荐使用方式：
          元素：伪类{}

                   匹配id为anchor的元素为被访问时的样式
         #anchor：link{}

         匹配页面中id为myAn元素的访问过后的状态
         #myAn：visited{}

          a:link{

         }

        4. 动态伪类：

                  1. :hover 匹配鼠标悬停在元素上的状态  （重点）
        2. ：active 匹配元素被激活时的状态 
        3. ：focus 匹配元素获取焦点时的状态（test，password，textarea）

        5. 目标伪类

        6. 元素状态伪类 .

        7. 结构伪类

        8. 否定伪类

        选择器的优先级：
        示例图：

        1622384017928

        命令显示图：

        1622384034410

        网页示例图：

        1622384061579

        命令显示图：

        1622384075188

        网页示例图：

        1622384086251

      以上是关于HTML和CSS(部分)知识点总结的主要内容，如果未能解决你的问题，请参考以下文章

      HTML和CSS(部分)知识点总结

      HTML和CSS(部分)知识点总结

      HTML CSS JS简易画板（含知识点温习）

      html和css的总结

      前端开发知识总结

      客户端知识总结