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的总结

      前端开发知识总结

      客户端知识总结