H5和CSS知识点总结(全)

1.图像标签可以有多个属性,但必需写在标签名后面

2.属性之间不分先后顺序,标签名与属性,属性与属性之间用空格隔开

3.属性采取键值对的格式,即key="value"的格式,属性="属性值".

4.导图片

  src属性是必须要写的,他决定你用哪张图片

  alt是替换文本:当图片显示不出来时将文字替换到文本中,

  title是提示文本,当鼠标移到图片上会出来提示

6.目录文件夹:普通文件夹,里面放了我们制作页面需要的相关素材,html文件,图片等

7.根目录:打开最外面一层是根目录

8.相对路径:图片相对文件所在位置,同级(直接用图片名),下一级(先写图片所在文件夹,再写图片名),上一级(先用../返回上一级,再写图片路径)

9.绝对路径:从盘符开始,到图片位置,与相对路径不同的是使用"\"(斜杠)隔开而不是"/".绝对路径可以使用网站上的图片地址

10.超链接:外部链接,内部链接,下载链接,网页元素链接,锚点链接和空链接。内部链接不需要hittp://开头

11.注释:

12.特殊字符: (空格);<(小于号); >(大于号);

13.表格基本语法:

             

   

               

   

               

               

:单元格范围

               

:行

               

:单元格标签

               

:表头单元格

                align:表格相对周围居中

                border:边框

                cellpadding:单元格内文字与单元格边框的距离

                cellspacing:单元格边框之间的距离

                width,height:设置单元格宽高

                rowspan="合并单元格个数":跨行合并

                colspan="合并单元格个数":跨列合并

14.列表标签:

    无序列表(重点),里面只能放
  • 标签,不能放其他标签和文字。但可以放到
  •            

      有序列表(理解),里面只能放
    1. 标签,不能放其他标签和文字。但可以放到
    2.            

      自定义列表(重点),
      定义列表,
      定义项目/名字,
      每个项目名字,
      里可以放任何标签

      15.表单标签:表单域

                  input输入表单元素,单标签,

                  select下拉表单元素 

                  textarea文本域元素

      16.CSS选择器:写在里, 

        1.标签选择器:快速为同类型标签统一设置样式,但不能设计差异化样式,只能选择全部标签。

        2.class类选择器:样式点定义 结构类调用 一个或多个 开发最常用

          多类名:标签属性可以有个类名,在标签class属性中写,class="类名一 类名二 类名三"; 多个类名之间用空格隔开

        3.id选择器,样式#定义,结构id调用,只调用一次,别人切勿使用。

          类选择器和id选择器区别:class如名字,可以多人使用。而id是身份证,只能一人使用。

        4.*通配符选择器:不需要调用,自动修改所有元素样式

        5.伪类选择器:  :hover  :link  :active :focus等

      17.字体属性:

        font-weight ,normal:默认值,bold:变粗,100-900:400不变粗(normal),700变粗(bold)。

        font-style,字体设置倾斜字体italic,或者用normal使倾斜的字体不倾斜。

      18.符合属性:font:font-style font-weight font-size/line-height font-family

                    font-size和font-family必须有,且不能更换顺序。

      19.文本属性

        text-color改变文本颜色三种方法: 1.预定义的颜色值:red,green,blue

                                      2.十六进制:#FF0000,#FF6600,#29D794

                                        3.RGB代码:rgb(255,0,0)或rgb(100%,0,0)             

        text-decoration装饰文本:1.none:默认,没有装饰或取消下划线

                                2.underLine:下划线

                                3.line-through: 删除线

                                4.overLine:上划线

        文本外观

        text-indent文本缩进:  text-indent:20px; 缩进20个像素距离

                              text-indent:2em;缩进当前字体元素两个大小的距离

        line-height行间距::行高,控制行与行之间的距离

        20.引用方式

          内部样式表:写到html页面里,将CSS代码抽取出来,单独放到一个

          精灵图缺点

            1.图片本身较大

            2.放大缩小会失真

            3.一但图片完成想要跟换很困难

      40.字体图标

              可以是方框图标,也可以用前面的代码

              展示的是图标,本质属于字体。

              简单的图片可以用字体图标,而复杂的不行,所以字体图标不能替代精灵图

              下载字体图标网站:iconmoon和iconfont

            追加图标:在网站上点击import icons选择selection.json文件,然后选择想要图标进行下载,最后将原来图标文件扔掉

      41.鼠标样式

              格式

              li {cursor : pointer}

              属性值          描述

              default        小白(默认)

              pointer        小手

              move            移动

              text            文本

              not-allowed    禁止

      42.CSS用户界面样式

          1.轮廓线outline

              input {outline:none;}

          2.文本域防止拖拽文本域

              textarea {resize:none;}

              文本域书写最好在一行,否则网页文本域中会出现开头有空格的情况

      43.vertical-align属性应用

          可以使图片表单和文字对齐

          默认基线对齐

          只对行内或行内块元素有效

              格式: img {vertical-align:middle;}

              middle  中线对齐

              top      顶线对齐

              bottom  底线对齐

          给图片加边框时底部经常会有空隙,那是因为图片与文字默认基线对齐,只要添加其它对齐方式即可   

          也可以将元素转换为块级元素,因为块级元素没有vertical-align属性

      44.溢出的文字省略号

          单行文字省略号步骤:

              div {

                先强制一行内显示

                white-space: nowrap;

                溢出部分隐藏

                overflow:hidden;

                文字用省略号代替超出部分

                text-overflow:ellipsis;

                }

          多行文字省略号步骤:

              div{

                一段固定代码

              }

              可以选择第几行.

      45.margin负值的的巧妙运用

          使用margin-left:-1px;做出1px的边框

        使鼠标经过将边框变色

          如果盒子没有定位,则鼠标经过添加相对定位即可

          如果如果有定位,则利用z-index提高层级

      46.文字围绕浮动元素

          在父盒子里直接加文字,给放图片的子盒子加浮动

      47.CSS初始化

          CSS初始化是指重设浏览器的样式(也称CSSreset)

          就是设置自己最初想要的标签或图片等样式

          例如: * {

                  padding:0;

                  margin: 0;

                  }

      48.HTML5的新特性

          1.HTML5新增的语义化标签

         

      :头部标签