Html、Css基础

一、Html

   
   
   
   


   

一级标签

   

二级标签

   

三级标签

   

四级标签

   

五级标签

   

六级标签

   

段落标签

    图片标签,src地址,alt文本替代
    href为跳转地址 target:_blank(另起一页)、_self(本页面)、规定在何处打开 action URL。
    text-decoration: none;没有下划线
    倾斜标签
   

区域,盒子标签
    强调加粗标签
   
换行标签
    表格
        cellspacing:设置单元格的距离
        cellpadding:设置内容到单元格距离
        colspan:在行里合并列
        rowspan:在列里合并行,之后删除多余行列
        表头
            表行
                表行头
           
       
        表身
           
               
               
           
       
   
   

无序列表
       

        去掉li前面的项目符号(小圆点)
        list-style: none;
   

   

有序列表
       

   

   

自定义列表
       

列表头
       

   

   

target:_blank(另起一页)、_self(本页面)、规定在何处打开 action URL。
        单行文本字段 value    指定输入字段的初始值
        按钮
        多选框 checked:checked     指定该属性的复选框,默认显示为勾选状态
        密码栏
        单选按钮 name要一致
        重置按钮
        提交按钮
        多行文本字段
        选择文件
        男for     input单选按钮里id=nan     指定 label 将绑定另一个表单元素的 ID 属性值
        下拉列表
   

    表单元素属于行内块,两者之间默认有缝隙,只需将其浮动起来就可以

    二、Css

    字体类型
    字体大小px
    字体粗细700=bold normal=400;
    字体风格
    font-style: italic倾斜 normal正常,多数让i,em标签不倾斜

    复合属性,简写方式 其他可以省略,font-size和font-family不可省
    font: font-style font-weight font-size/font-height font-family
    font: italic 700 16px 微软雅黑

    对齐文本 左(默认) 右 居中
    text-align: left right center;

    装饰文本 给文本添加下划线 删除线 上划线
    text-decoration: none(默认,没有装饰线) underline overline line-though

    文本缩进 首行缩进2em两个文字大小
    text-indent:  2em 20px;

    行间距 行高
    line-height: 26px;
    行高等于盒子高度可以使文字居中对齐

    外部样式引入
   
    后代选择器 元素1 元素2{样式声明}
    div ul li
    子选择器 元素1>元素2{样式声明}只选择最近的一级子元素
    ul>a
   

       
• 
              只选择这个子元素
         

       
• 
             
         

   

    并集选择器 元素1,元素2{样式声明} 喜欢竖着写
    div,
    p,
    a{} div 和 p 和 a标签

    伪类选择器 用:表示,:hover :first-child   链接伪类 结构伪类
    a:link  选择所有未被访问的链接
    a:visited 选择所有已被访问的链接
    a:hover  选择鼠标指针位于其上的链接
    a:active 选择活动链接(鼠标按下未弹起的链接)
    按顺序写lvha

    :focus伪类选择器 用于选取获得焦点的表单元素
    焦点就是光标
    input:focus{
        background-color:yellow;
    }

    元素显示模式转换

    转化为块级元素: display:block
    转化为行内元素: display:inline
    转化为行内块元素: display:inline-block

    背景图片
    backgroud-image: url()
    背景平铺
    background-repeat: repeat no-repeat repeat-x repeat-y
    背景图片位置
    background-position: x y
    background-position: center left (中上位置)  精准位置(20px 50px) 混合位置(center 20px)
    背景图片固定
    background-attachment: scroll(图像随对象内容滚动) | fixed(图像固定)
    背景属性复合写法
    background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
    背景颜色半透明
    background: rgba(0,0,0,0.3)取值范围在0-1

    盒子模型
    边框border
    bordder-width: 50px 粗细
    border-style: solid 实线 dashed 虚线 dotted 点线
    border-color: pink 颜色
    边框简写 border: 1px solid pink
    border-top: 上边框   border-bottom: 下边框    border-left: 左边框    border-right: 右边框
    border-collapse: collapse 合并相邻的边框

    内边距 padding
    padding-left: 左内边距    padding-right: 右内边距    padding-top: 上内边距    padding-bottom: 下内边距
    内边距复合写法
    padding: 5px 上下左右内边距
    padding: 2px 2px 上下 左右内边距
    padding: 2px 3px 4px 上 左右 下内边距
    padding: 2px 3px 4px 5px 上右下左内边距 顺时针

    外边距 margin
    margin-left: 左外边距 margin-right: 右外边距 margin-top: 上外边距 margin-bottom: 下外边距
    margin 简写方式与 padding 一样
    外边距可以让块级盒子水平居中(盒子必须有宽度 只要左右设为auto)
    margin: 0 auto
    行内 行内块元素水平居中对齐
    给其父元素添加 text-align: center

    外边距合并-嵌套块元素塌陷解决方法:
    (父元素和子元素都有外边距时)
    1. 可以给父元素定义上边框
    2.可以给父元素定义上内边距
    3.可以给父元素添加 overflow: hidden
    浮动的盒子不会有外边距合并的问题

    清除内外边距
    (css第一行代码)
    * {
        padding: o;
        margin: 0;
    }

    圆角边框
    border-radius: 10px ;(数值 或百分比)
    正方形盒子,数值改为高度的一半可变为园
    矩形,数值改为高度一半可为(__)
    border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
     border-bottom-left-adius

     盒子阴影
     box-shadow: h-shadow v-shadow blur spread color inset;
     h-shadow: 必须,水平阴影的位置,允许负值
     v-shadow: 必须,垂直阴影的位置,允许复制
     blur: 可选 模糊距离
     spread: 可选 阴影的尺寸
     color: 阴影的颜色
     inset: 将外部阴影改为内部阴影
     鼠标经过盒子出现阴影
     div:hover {
         box-shadow:
     }

     文字阴影
     text-shadow: h-shadow v-shadow blur color

     浮动(float)
     浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
     清除浮动
     由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,
     本质:清除浮动元素造成的影响
     选择器 {
         clear: 属性值; (left 不允许左侧有浮动元素 right both )        
     }
     清除浮动的策略是: 闭合浮动
     清除浮动的方法:
     1.额外标签法也称为隔墙法,是w3c推荐的做法
     在最后的浮动盒子后面添加一个新标签 (必须是块级元素,不能是行内元素)
     2.父级添加overflow属性
     overflow: hidden ,auto 或 scroll
     但是溢出部分会隐藏
     3.父级添加 :after伪元素
     选择器(clearfix):after {
         content: "";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
     }
     选择器 {
         IE6 ,7 专有
         *zomm: 1;
     }
     4.父级添加双伪元素
     选择器.clearfix:before,
     .clearfix:after {
        content: "";
        display: table;        
     }
     .clearfix:after {
         clear: both;
     }
     .clearfix {
         *zoom: 1;
     }

     css 属性书写顺序
     布局定位属性
     自身属性
     文本属性
     其他属性

     导航栏 nav 制作
     实际开发中用 li 包含链接 a 的做法

     css定位 position
     定位=定位模式 (指定一个元素在文档中的定位方式) + 边偏移 (决定该元素的最终位置)
     static : 静态定位
     选择器 {
         position : static;
     }     静态定位按照标准流特性摆放位置,没有边偏移

     relative : 相对定位
     选择器 {
         position: relative;
     }   1. 相对自己原来的位置来移动;
         2.原来在标准的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)
     
     absolute : 绝对定位 是在元素移动位置的时候,相对于它祖先元素来说的
     选择器 {
         position: absolute;
     }  1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
        2.如果祖先元素有定位(相对 绝对 固定定位),则以最近一级有定位祖先元素为参考点移动位置
        3.绝对定位不再占用原有的位置
        子绝父相

     fixed : 固定定位 是元素固定于浏览器可视区域的位置
     选择器 {
         position: fixed;
     }  1.以浏览器的可视窗口为参照点移动元素
        跟父元素没有关系
        不随滚动条滚动
        2.固定定位不在占用原先的位置
        固定定位也是脱标的,其实固定定位也可以看作一种特殊的绝对定位
        固定定位小技巧: 固定在版心右侧位置
        1. 让固定定位的盒子 left: 50%;走到浏览器可视区的一半位置
        2.让固定定位的盒子 margin-left: 版心宽度的一半距离

    粘性定位 sticky
        选择器 {
            position: sticky;
        }   1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
            2.粘性定位占有原先的位置(相对定位特点)
            3.必须添加 top left right bottom 其中一个才有效
     边偏移 : top bottom left right
     定位叠放次序 z-index
     选择器 {
         z-index: 1;
     } 数值默认为 auto ,数值越大,盒子越靠上
      如果属性值相同,则按照书写顺序,后来居上
      数字后面不能加单位
      只有定位的盒子才有 z-index 属性

    绝对定位的盒子居中
    加了绝对定位的盒子不能通过 margin: 0 auto 水平居中
    left: 50% 让盒子的左侧移动到父级元素的水平中心位置
    margin-left: -100px; 让盒子向左移动自身宽度的一半
    定位特殊特性
    绝对定位固定定位也和浮动类似
    1.行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度
    2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
    3.脱标的盒子不会触发外边距塌陷
    4.绝对定位(固定定位)会完全压住盒子
      浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字
      但是绝对定位(固定定位)会压住下面标准流所有内容
      浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果,文字会围绕浮动元素
      
      一个盒子既有 left 属性又有 right 属性,则默认 left

      元素的显示和隐藏
      1.display : none;隐藏对象  block : 除了转化为块级元素,还有显示元素的作用
      display 隐藏元素后不再占有原来的位置
      2.visibility : hidden 元素隐藏   visible 元素可视
      visibility 隐藏元素后,继续占有原来的位置
      3.overflow : visible : 默认显示
                  hidden : 溢出的部分隐藏
                  scroll : 溢出的部分显示滚动条,不溢出也显示滚动条
                  auto : 在溢出的时候显示滚动条,不溢出不显示滚动条
        如果有定位的盒子,慎用 overflow: hidden 因为它会隐藏多余的部分

    精灵图 sprites
    移动背景图片位置 background-position 一般情况下精灵图都是负值
    字体图标 iconfont
    icomoon 阿里iconfont字库
    @font-face{
        font-family: 'icomoon';
        src: url('../fonts/icomoon.eot?7kkyc2');
        src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('../fonts/icomoon.woff?7kkyc2') format('woff'),
            url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        }

        三角制作
        宽度和高度都为0,只给边框大小,transparent
        width: 0;
        height: 0;
       
        line-height: 0;
        font-size: 0;
        border: 5px solid transparent;
        border-bottom-color: red;

        鼠标样式 cursor
        li {cursor: pointer;}
        default: 小白 默认  pointer: 小手 move: 移动 text: 文本 not-allowed: 禁止
        轮廓线 outline
        input {outline: none;} 去掉表单默认的蓝色边框
        防止拖曳文本域 resize
        textarea {resize: none;}

        vertical-align : 用于设置图片或者表单(行内块元素)和文字垂直对齐
        vvertical: baseline  默认元素放置在父元素的基线上
                   top  把元素的顶端与行中最高元素的顶端对齐
                   middle  把元素放置在父元素的中部
                   bottom  把元素的顶端与行中最低元素的顶端对齐
        解决图片底侧空白缝隙(图片是行内块元素会和文字的基线对齐)
        1.给图片添加 vertical-align: middle top bottom 等
        2.把图片转化为块级元素 display: block;

        单行文字溢出省略号显示
        1.先强制一行内显示文本
         white-space: nowrap;
        2.超出部分隐藏
         overflow: hidden;
        3.文字用省略号代替超出的部分
         text-overflow: ellipsis;

        多行文字溢出省略号显示
        overflow: hidden;
        text-overflow: ellipsis;
        弹性伸缩盒子模型显示
        display: -webkit-box;
        限制在一个块元素显示的文本的行数
        -webkit-line-clamp: 2;
        设置或检伸缩盒对象的子元素的排列方式
        -webkit-box-orient: vertical;

        布局技巧
        1.margin 负值运用
        margin-left: -1px;
        让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
        鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),
        如果有定位,则加 z-index )
        2.文字围绕浮动元素
        3.行内块巧妙运用
        4.css三角强化
        (只保留右边边框)盒子宽度和高度都为0,把上边框宽度调大,颜色透明,左边框和下边框宽度设为0
        border-color: transparent red transparent transparent ;
        border-style: solid;
        border-width: 100px 50px 0 0 ;

       三、 HTML5新特性

       

头部标签
        导航栏标签
       

内容标签
       

定义文档某个区域
       

侧边栏标签
       

尾部标签