HTML5总结

一、概要

  

二、细解

这次学习HTML5用的软件是Hbuilder，用这款软件，为了更快更方便，先说说几个常用的快捷键吧

            1、CTRL N 新建文件或者文件夹
            2、CTRL / 注释
            3、CTRL S 保存
            4、CTRL R 运行

1、标签

       （1）网页标题    h1~h6
                      触发智能提示方式有俩种 回车 tab
                      六兄弟，常用的为前三个

        （2）列表标签 

                       有序列表（orderedList）     ol

                      无序列表（unorderedList）   ul

                      列表    li

               新建多个列表的快捷方式： ol>li{我是有序列表$}*3

        （3）网页图片    img
                     绝对路径 网址链接字符串，网上的图片资源 
                    相对路径 
                   1>同级可以直接写文件名
                   2>返回上一级 ../
                   3>进入下一级 /

        （4） 网页超链接    a 
                          行间属性 功能性属性
                          属性名称="" 双引号里面是属性值 多个属性之间以空格隔开 
                          href 超链接地址
                          target="_blank" 可以在新窗口打开
                          title 鼠标悬停时出现的文本提示

        （5）div 块级标签 display:block

               span 行级标签 display:inline

                          1>行级一行显示多个，块级独占一行
                          2>块级可以设置宽度和高度，行级不行
                          3>行级的宽度和高度是由内容撑开的
                          4>块级如果不给高度，由内容撑开（内容不仅仅是文本）
                          5>块级如果不给宽度，继承父级宽度

                css属性书写规则 属性名：属性值；

2、选择器

          （1）标签选择器

                         格式：标签名{css属性}
                         为某一类标签设置统一样式

          （2）id选择器

                     格式：#id名称{css属性}
                     选取的是加了此id的标签，唯一标签

                     id名唯一，所以说找到的标签也是唯一的

                     1>id名称 以数字、字母、下划线组成，且数字不能开头
                     2>id名称不允许出现重复

          （3）类选择器
                       类名 {css属性}
                       为添加了类名标签设置样式

       重置样式，系统标签会有很多默认样式，这些样式会影响我们的布局，这样就用到了通配选择器

         （4）通配选择器

            清样式（不同标签才需要清样式）
                    *{
                    margin: 0;
                    padding: 0;
                            }
                   ul{
                   list-style-type: none;
                             }
                   a{
                  text-decoration: none;
                            }

        （5）后代选择器

                   格式：#id名称 标签{css属性}

         选择器的优先级：

                       通配 < 标签 < 类 < id < 后代
                      id < 后代不是绝对的，要看权重
                               标签         类        id  
                                1             10      100 
                     后代选择器的权重是相加的 

               相同选择器之间产生了样式冲突，后面的样式覆盖前面的。
               并不是选择器的覆盖

                       

3、修饰

（1）鼠标在元素上移入或者悬停时变化

           div:hover{css属性}

（2）margin  外边距

                           margin在垂直方向产生了冲突，取大的。
                           margin在横向产生了冲突，累加

                                /*一个值，四个方向一样*/
                                /*margin: 100px;*/

                               /*俩个值，上下 左右*/
                               /*margin: 100px 200px;*/

                               /*三个值，上 左右 下*/
                               /*margin:100px 200px 300px;*/

                               /*四个值 上 右 下 左*/
                               /*margin: 100px 200px 300px 400px;*/
          border  边框

                        格式：border:1px red solid;

                                 solid 实体线
                                 dashed 虚线
                                 dotted 点状线
         padding  内边距

                         用法与margin类似，只是参照物不同角度不同
          content  内容

     其实算边距需要加边框，加边框就需要量边框距离，计算起来挺麻烦的，但有了“overflow: hidden;”，就不用加边框了 省去量有边框距离的麻烦 

（3）文本修饰   

                 划线    text-decoration

                                 underline 下划线
                                 overline 上划线
                                 line-through 中划线
                                 none 没有修饰

                文本对齐方式    text-align
                           Lef   t默认左对齐     center   居中    right   右对齐 
                行高        line-height
                        单行文本如果行高与容器高度一样，垂直居中
                        多行文本，行高是每行文字基线之间的距离

               字体修饰

                         字体加粗效果    font-weight
                         字体颜色        color
               字体样式     font-family
                            字体大小     font-size
                            字符间距     letter-spacing

   （4）虚化

                   1>不保留空间   display
                           display: none;
                   2>不透明度 0~1   opacity
                          1代表全显示  0代表全隐藏（空间还在）
                          opacity:0.5;
                  3>保留空间    rgba
                          background-color: rgba(255,0,0,0.5);
                  4>保留空间    visibility
                          hidden  消失   
                          visible  可见 

                 opacity与rgba的区别

                             opacity  虚化颜色以及内容
                             rgba只会虚化颜色，不会影响内容
 

4、图片与背景图片

                图片：img

               背景图片：background-image

               背景尺寸   background-size
                （1）直接给定背景尺寸单位
                （2）contain
                （3）cover

              背景重复    background-repeat
                     repeat 既会横向重复，也会纵向重复
                     repeat-x 只有横向重复
                     repeat-y 只有纵向重复
                     no-repeat 不重复
             背景位置   background-position

5、布局

          （1）margin

                       margin-left

                       margin-right

                       margin-top

                       margin-bottom

          （2）position

                     position: relative;

                     position: absolute;

                        1>绝对定位的参照为设置了定位属性的上一级或者父级
                        2>以父级四条边为界，偏移
                        3>正值往内,负值往外
                        4>小的参照大的

                     position: fixed;
                    固定定位参照物为浏览器可视化窗口

           （3）float

                         有时父级的高度是由内容撑开的，但用了float，父级就会没有高度

                                  1>手动为浮动元素父级添加高度
                                         /*height: 300px;*/
                                  2>给浮动元素父级设置属性
                                         /*overflow: hidden;*/

                                  3>在浮动元素同级以下设置一个空的div
                                      并且为div设置clear属性
                                       #clearDiv{
                                              clear:both;
                                        }

                     偏移：left   right     top    bottom
                            偏移参照是自身原先的位置