HTML和css知识网络

知识清单
    html基本结构
    注释
        html注释  <!--注释内容-->
        CSS注释  /*注释内容*/
    标签
        需要注意的是,在html中标签不区分大小写
        单标签
            <br/>换行  
            <hr/>一条横着的贯穿线  
            <img src='路径'/>引入图片  
            <meta charset='utf-8'/>编码解析语言
            \n换行
            \r回车
        双标签
            标题标签:<h1>-<h6>  
            <b>仅加粗</b>  
            <strong>强调加粗</strong>  
                给百度搜索引擎用的,通常用来修饰网站中的关键字/词,但等级却没有标题标签高.需要注意的是,一个页面中的关键字不超过2%,切勿过度优化
            <i>斜体</i>
                仅字体倾斜
            <em>强调斜体</em>
                主要是给搜索引擎用的
            <div>块状元素</div>
                默认独占一行,可以设置宽和高
            <span>无状态</span>
                给CSS用的(说实话这句话本人不太懂)
    属性
        title
            当鼠标移动到标签上的时候会显示其后面的内容
            属于通用属性
        alt
            当图片加载失败的时候所显示的内容
        src
            设置图片的路径
                引入
        style
            设置样式,风格
        href
            引用
        type
            类型
        name
        value
            设置默认值
        id
        class
        rel
            rel='stylesheet'引入的是样式表
        自定义属性
    超链接
        超链接的三种用法
            <a href=='网址'>  </a>可以链接到其他网站
                网址要写对
            <a href='本地文件路径'>  </a>可以在本地不同网站中跳转
                文件路径要写对
            <a href='#+锚点名'>  </a>    <a id='锚点名'>  </a>可以在当前页面的不同位置跳转
                先定义锚点,在跳转
                需要注意的是,利用href属性来跳转,锚点的名字要前后一致
        href和src的区别
            href是引用
            src是引入
    列表
        有序列表
            <ol></ol>
                配合<li>列表项</li>使用
        无序列表
            <ol></ol>
                配合<li>列表项</li>使用
        list-style:none 去掉前面的序号或者小黑点
        list-style-image:url(图片的路径)将前面的序号或者小黑点用图片代替
        list-style-type:none/katakana(参考手册)
        list-style-position:inside/outside设置序号或者小黑点在里面/外面
    表格
        table三部分
            thead表头
            tbody表体
            tfoot表尾
        相关元素
            <tr>行标签</tr>
            <th>表格标题</th>
                特点:文字加粗,居中
            <td>单元格</td>
            colspan跨行
            rowspan跨行
        border-spacing:  px; 每个单元个与外边框之间的距离
        border-padding:  px;  文字与单元格之间的距离
        cellspacing=  px;
        cellpadding=   px;
        border-collaspe:collaspe 双线变单线
    表单
        目的
            收集客户信息的
        <form>   </form>放在里面使用
        input框
            账户 <input type='text'/>
            密码 <input type='password'/ >
            单选框<input type='radio' value='默认值' name='储存值'/>
                name中的值都相同,选项才会相互排斥
                checked 可设置默认选项
            复选框<input type='checkbox' value='默认值' name='储存值'/>
                checked 可设置默认选项
            下拉菜单
                <select name='储存值'><option value='默认值'></option></select>
            文本域
                <textarea name='简介' cols='   ' rows='  '>文本域内容</textarea>
            上传头像/文件
                <input type='file' name='头像/文件'/>
            提交
                <input type='submit '/>
            重置
                <input type='reset'/>
            name可以换成placeholder有提示信息
    语义化标签
        标题标签<h1>-<h6>
        <strong>强调加粗</strong>
        <em>强调斜体</em>
        <header>网站的头部信息</header>
        <nav>导航</nav>
        <footer>网站的脚部内容</footer>
        <article>自成一体的模块,内容,有独立的header section footer <article>
        <aside>和网站内容相关的</aside>
        <section>给<h1>-<h6>标签降级</section>
        <main>页面的主体内容</main>
        <small>字体变小</small>
        语义化标签的优点
            代码结构清晰,易于阅读,利于开发和维护
            提高用户体验度,在样式加载失败时,页面结构清晰
            方便其他设备解析,根据语义渲染网页
            利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同标签来赋予不同的权重
    CSS 样式重叠表
        样式相同会覆盖,样式不同会叠加
        先看选择器
            相同
                就近原则
                    该样式离该元素越近就采用该样式
            不同
                !important > 内联 > id > class > 标签 > 通配符
    选择器
        权重
            !important > 内联 > id > class > 标签 > 通配符
        基本选择器
            标签/元素选择器 element
                范围大,使用时直接写标签名
            类选择器 class
                范围小,使用时 .+类名
            id选择器
                精确,使用时 #+id名
            *通配符
                范围最大,使用时 *代表所有标签
        组合选择器
            每个选择器之间用空格隔开
                eg:div  a{    ;}
        派生选择器/关系选择符
             > 子选择器
                只能选中其父元素的儿子辈,不找孙子辈
                    eg:#box > div
             (空格) 后代选择器
                后代全能选中
                    eg:#box  div
             + 相邻选择器
                同级别,紧挨着,下面的(代码是从上往下执行的)
                    eg:#box + div
             ~ 兄弟选择器
                同级别的所有兄弟元素
                    eg:#box ~ div
        属性选择器
            [属性]
                选中该属性
                    eg:input[type]
            [属性=   属性(自定义属性)   ]
                选中该属性下面对应的属性
                    eg:input[type=password]
            [属性^=某个字母]
                选中以某个字母开头的属性
                    eg:input[type^=p]
            [属性$=某个字母]
                选中以某个字母结尾的的属性
                    eg:input[type$=b]
            div[class~='属性']
                属性值中只要含有该属性就能选中,可匹配多个空格隔开的多个属性
            div[class*='属性']
                属性值中包含该字母就能够选中
        伪类选择器
            :hover 悬停
            :link 未访问
            :visited 访问过
            :active 激活/点击一瞬间
            注意:这四个可以给超链接用,第一个适用于大多数标签,最后三个只能用于超链接
            :nth-child(数字)
                可选中某个标签下的第几个儿子
                    eg:div:nth-child(1){    }
            :not(选择器,可以是组合选择器)
                可选中出了某个标签之外的所有标签
            :noly(选择器,可以是组合选择器)
                只选中该标签
            :first/last-child
                可选中第一个/最后一个儿子
            :empty
                可选中无文本内容的标签
                    eg:<div></div>中间连空格和换行都没有
        伪类对象选择器
            ::bofore{ content:'     '  }
                在元素的前面添加新内容
            ::after{ content:'     '  }
                在元素的后面添加新内容
            需要注意的是:content一定要写,content后面可以跟'url(图片路径)'但不太合适
    字体
        字体颜色
            颜色对应的英文单词
                eg:pink purple white.......
            rgb(0~255,0~255,0~255)
            rgba(0~255,0~255,0~255,0~1)
            十六进制
                eg:00ff00 绿色
        字体尺寸
            font-size:   px;
        字体风格
            font-family:'微软雅黑'
        字体样式
            font-style:italic  意大利斜体
        字体粗细
            font-weight:lighter/normal/bold/bolder 轻/正常/粗/特粗   100/400/700/900(也可使用数字)
    文本
        文本对齐方式
            text-align:center/left/right文本居中/居左/居右
                
        文本装饰
            text-decoration:overline/underline/line-through/none 上划线/下划线/删除线(中间贯穿线)/去掉装饰
        阴影
            text-shadow:____ ___ ___ ___rgba放最前面和最后面都一样,默认与字体颜色一致
    行高
        line-height:  px;
            当行高等于当前元素的高度时,文字会上下居中
    背景
        颜色
            background-color:_______
        位置
            background-position:__px ___px;/____px; 第一个是x值,第二个是y值
        平铺
            background-repeact:repeact-x/repeact-y/no-repeact; 沿x轴平铺/沿y轴平铺/不平铺
        背景尺寸
            background-size:cover/contain/0 auto; 缩放背景图,直到横着或者竖着有任意一边全部显示为止,图片不完整/缩放图片直到图片内容完全显示为止/宽为0,高自适应
        插入背景图片
            background-image:url(图片路径)
    透明度
        opacity:0~1;
        visibility 可见度     
            visible可见的   hidden隐藏的
    盒子模型
        宽高
            width宽度
            height高度
            max/min-width最大/最小宽度
            max/min-height最大/最小高度
        边距
            内边距
                padding:__px;
                padding-left/right/top/bottom:__px;
            外边距
                margin:__px;
                margin-left/right/top/bottom:__px;
                补充
                    1em 为当前元素的字体尺寸
                    5em 为当前元素字体尺寸的五倍
                    rem 参考html的字体尺寸
        如何显示
            display:     ;
            不显示 display:none;
            以块状元素显示 display:block;
            以行内元素显示 display:inline;
            以行内块显示 diaplay:inline-block;
            以列表项显示 dispaly:list;
            以表格显示 display:table;
        阴影
            box-shadow:_1__ _2__3__ _4__ __5__  1和2为必选参数单位:px.  3,4,5为可选参数,3为影子的模糊度,4为影子的延伸度,5为影子的颜色(放最后,默认为黑色)
        盒子尺寸
            标准盒子
                box-sizing:content-box;
            怪异盒子
                box-sizing:border-box;
        边框
            border:_px solid(实线)/dashed(虚线)/dotted(点状线) red;
            border-color:
            border-width:
            border-style:
            border-bottom/left/top/right-color:
            border-bottom/left/top/right-width:
            border-bottom/left/top/right-style:
    超出隐藏
        使用
            overflow:hidden;
        两种解决方法
            当前元素设置好高度,但其里面的内容超过了这个高度,可使用超出隐藏,让超出来的部分隐藏起来
            当该元素中的子元素的高度使用浮动效果脱离文档流从而造成该元素的高度(为0)撑不来,可以使用超出隐藏来解决
    定位
        position:absolute;绝对定位
            参考其含有定位的父元素
        position:relative;相对定位
            参考其原来的位置
        position:fixed;固定定位
            参考浏览器窗口的位置
    2D变换
        transform:translatex(  px/%;)
        transform:translatey(  px/%;)
        transform:translate(  px/%;)
        transform:translate(  px/%   px/%;)
    过渡
        transform:rotate(___deg;)单位度 degree
        transition:__s 单位秒 s
        transition:___ ___ ___ ___ 改变属性 过渡时间(s) 延迟时间(s) 动画类型(ease/ease-in/ease-out/ease-in-out平缓/又快到慢/有慢到快/又快到慢再到快)
    动画
        animation
        @keyframes+动画名字{    ;}
    浮动
        float:left/right/none;
        清除浮动 clear:left/right/both;
    光标
        pointer 小手指
        move 四个方向移动的箭头
        none
        url(图片路径要ico/png格式的)
            免费在线生成ico图标:https://www.butterpig.top/icopor
    阴影
        元素阴影
            box-shadow
                颜色为rgb格式只能放在最后面,默认为黑色
        文本阴影
            text-shadow:x轴 y轴 模糊度 延伸度 颜色
                颜色为rgb格式,可以放在最前面和最后面,默认的颜色和字体颜色一致
    媒体查询标签
        使用方法一:写在style中
            @ media screen and (max-width:900px){div {background:red;};}调整页面布局,当屏幕宽度小于等于900px时就采用上面的样式
        可引入文件
            <link rel='stylesheet' href='__.css' media='screen and (max-width:900px)'/>当屏幕的宽度小于等于900px时,可引入该文件
    精灵图
        利用大一点的图(图上有很多小图标)在设置背景图时,可以利用定位移动,出现不同的图标
        好处:只需要向服务器发送一次请求就行
    二级菜单/二级列表
        特点:通常为父子关系
html基本结构
注释
    html注释  <!--注释内容-->
    CSS注释  /*注释内容*/
标签
    需要注意的是,在html中标签不区分大小写
    单标签
        <br/>换行  
        <hr/>一条横着的贯穿线  
        <img src='路径'/>引入图片  
        <meta charset='utf-8'/>编码解析语言
        \n换行
        \r回车
    双标签
        标题标签:<h1>-<h6>  
        <b>仅加粗</b>  
        <strong>强调加粗</strong>  
            给百度搜索引擎用的,通常用来修饰网站中的关键字/词,但等级却没有标题标签高.需要注意的是,一个页面中的关键字不超过2%,切勿过度优化
        <i>斜体</i>
            仅字体倾斜
        <em>强调斜体</em>
            主要是给搜索引擎用的
        <div>块状元素</div>
            默认独占一行,可以设置宽和高
        <span>无状态</span>
            给CSS用的(说实话这句话本人不太懂)
属性
    title
        当鼠标移动到标签上的时候会显示其后面的内容
        属于通用属性
    alt
        当图片加载失败的时候所显示的内容
    src
        设置图片的路径
            引入
    style
        设置样式,风格
    href
        引用
    type
        类型
    name
    value
        设置默认值
    id
    class
    rel
        rel='stylesheet'引入的是样式表
    自定义属性
超链接
    超链接的三种用法
        <a href=='网址'>  </a>可以链接到其他网站
            网址要写对
        <a href='本地文件路径'>  </a>可以在本地不同网站中跳转
            文件路径要写对
        <a href='#+锚点名'>  </a>    <a id='锚点名'>  </a>可以在当前页面的不同位置跳转
            先定义锚点,在跳转
            需要注意的是,利用href属性来跳转,锚点的名字要前后一致
    href和src的区别
        href是引用
        src是引入
列表
    有序列表
        <ol></ol>
            配合<li>列表项</li>使用
    无序列表
        <ol></ol>
            配合<li>列表项</li>使用
    list-style:none 去掉前面的序号或者小黑点
    list-style-image:url(图片的路径)将前面的序号或者小黑点用图片代替
    list-style-type:none/katakana(参考手册)
    list-style-position:inside/outside设置序号或者小黑点在里面/外面
表格
    table三部分
        thead表头
        tbody表体
        tfoot表尾
    相关元素
        <tr>行标签</tr>
        <th>表格标题</th>
            特点:文字加粗,居中
        <td>单元格</td>
        colspan跨行
        rowspan跨行
    border-spacing:  px; 每个单元个与外边框之间的距离
    border-padding:  px;  文字与单元格之间的距离
    cellspacing=  px;
    cellpadding=   px;
    border-collaspe:collaspe 双线变单线
表单
    目的
        收集客户信息的
    <form>   </form>放在里面使用
    input框
        账户 <input type='text'/>
        密码 <input type='password'/ >
        单选框<input type='radio' value='默认值' name='储存值'/>
            name中的值都相同,选项才会相互排斥
            checked 可设置默认选项
        复选框<input type='checkbox' value='默认值' name='储存值'/>
            checked 可设置默认选项
        下拉菜单
            <select name='储存值'><option value='默认值'></option></select>
        文本域
            <textarea name='简介' cols='   ' rows='  '>文本域内容</textarea>
        上传头像/文件
            <input type='file' name='头像/文件'/>
        提交
            <input type='submit '/>
        重置
            <input type='reset'/>
        name可以换成placeholder有提示信息
语义化标签
    标题标签<h1>-<h6>
    <strong>强调加粗</strong>
    <em>强调斜体</em>
    <header>网站的头部信息</header>
    <nav>导航</nav>
    <footer>网站的脚部内容</footer>
    <article>自成一体的模块,内容,有独立的header section footer <article>
    <aside>和网站内容相关的</aside>
    <section>给<h1>-<h6>标签降级</section>
    <main>页面的主体内容</main>
    <small>字体变小</small>
    语义化标签的优点
        代码结构清晰,易于阅读,利于开发和维护
        提高用户体验度,在样式加载失败时,页面结构清晰
        方便其他设备解析,根据语义渲染网页
        利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同标签来赋予不同的权重
CSS 样式重叠表
    样式相同会覆盖,样式不同会叠加
    先看选择器
        相同
            就近原则
                该样式离该元素越近就采用该样式
        不同
            !important > 内联 > id > class > 标签 > 通配符
选择器
    权重
        !important > 内联 > id > class > 标签 > 通配符
    基本选择器
        标签/元素选择器 element
            范围大,使用时直接写标签名
        类选择器 class
            范围小,使用时 .+类名
        id选择器
            精确,使用时 #+id名
        *通配符
            范围最大,使用时 *代表所有标签
    组合选择器
        每个选择器之间用空格隔开
            eg:div  a{    ;}
    派生选择器/关系选择符
         > 子选择器
            只能选中其父元素的儿子辈,不找孙子辈
                eg:#box > div
         (空格) 后代选择器
            后代全能选中
                eg:#box  div
         + 相邻选择器
            同级别,紧挨着,下面的(代码是从上往下执行的)
                eg:#box + div
         ~ 兄弟选择器
            同级别的所有兄弟元素
                eg:#box ~ div
    属性选择器
        [属性]
            选中该属性
                eg:input[type]
        [属性=   属性(自定义属性)   ]
            选中该属性下面对应的属性
                eg:input[type=password]
        [属性^=某个字母]
            选中以某个字母开头的属性
                eg:input[type^=p]
        [属性$=某个字母]
            选中以某个字母结尾的的属性
                eg:input[type$=b]
        div[class~='属性']
            属性值中只要含有该属性就能选中,可匹配多个空格隔开的多个属性
        div[class*='属性']
            属性值中包含该字母就能够选中
    伪类选择器
        :hover 悬停
        :link 未访问
        :visited 访问过
        :active 激活/点击一瞬间
        注意:这四个可以给超链接用,第一个适用于大多数标签,最后三个只能用于超链接
        :nth-child(数字)
            可选中某个标签下的第几个儿子
                eg:div:nth-child(1){    }
        :not(选择器,可以是组合选择器)
            可选中出了某个标签之外的所有标签
        :noly(选择器,可以是组合选择器)
            只选中该标签
        :first/last-child
            可选中第一个/最后一个儿子
        :empty
            可选中无文本内容的标签
                eg:<div></div>中间连空格和换行都没有
    伪类对象选择器
        ::bofore{ content:'     '  }
            在元素的前面添加新内容
        ::after{ content:'     '  }
            在元素的后面添加新内容
        需要注意的是:content一定要写,content后面可以跟'url(图片路径)'但不太合适
字体
    字体颜色
        颜色对应的英文单词
            eg:pink purple white.......
        rgb(0~255,0~255,0~255)
        rgba(0~255,0~255,0~255,0~1)
        十六进制
            eg:00ff00 绿色
    字体尺寸
        font-size:   px;
    字体风格
        font-family:'微软雅黑'
    字体样式
        font-style:italic  意大利斜体
    字体粗细
        font-weight:lighter/normal/bold/bolder 轻/正常/粗/特粗   100/400/700/900(也可使用数字)
文本
    文本对齐方式
        text-align:center/left/right文本居中/居左/居右
            
    文本装饰
        text-decoration:overline/underline/line-through/none 上划线/下划线/删除线(中间贯穿线)/去掉装饰
    阴影
        text-shadow:____ ___ ___ ___rgba放最前面和最后面都一样,默认与字体颜色一致
行高
    line-height:  px;
        当行高等于当前元素的高度时,文字会上下居中
背景
    颜色
        background-color:_______
    位置
        background-position:__px ___px;/____px; 第一个是x值,第二个是y值
    平铺
        background-repeact:repeact-x/repeact-y/no-repeact; 沿x轴平铺/沿y轴平铺/不平铺
    背景尺寸
        background-size:cover/contain/0 auto; 缩放背景图,直到横着或者竖着有任意一边全部显示为止,图片不完整/缩放图片直到图片内容完全显示为止/宽为0,高自适应
    插入背景图片
        background-image:url(图片路径)
透明度
    opacity:0~1;
    visibility 可见度     
        visible可见的   hidden隐藏的
盒子模型
    宽高
        width宽度
        height高度
        max/min-width最大/最小宽度
        max/min-height最大/最小高度
    边距
        内边距
            padding:__px;
            padding-left/right/top/bottom:__px;
        外边距
            margin:__px;
            margin-left/right/top/bottom:__px;
            补充
                1em 为当前元素的字体尺寸
                5em 为当前元素字体尺寸的五倍
                rem 参考html的字体尺寸
    如何显示
        display:     ;
        不显示 display:none;
        以块状元素显示 display:block;
        以行内元素显示 display:inline;
        以行内块显示 diaplay:inline-block;
        以列表项显示 dispaly:list;
        以表格显示 display:table;
    阴影
        box-shadow:_1__ _2__3__ _4__ __5__  1和2为必选参数单位:px.  3,4,5为可选参数,3为影子的模糊度,4为影子的延伸度,5为影子的颜色(放最后,默认为黑色)
    盒子尺寸
        标准盒子
            box-sizing:content-box;
        怪异盒子
            box-sizing:border-box;
    边框
        border:_px solid(实线)/dashed(虚线)/dotted(点状线) red;
        border-color:
        border-width:
        border-style:
        border-bottom/left/top/right-color:
        border-bottom/left/top/right-width:
        border-bottom/left/top/right-style:
超出隐藏
    使用
        overflow:hidden;
    两种解决方法
        当前元素设置好高度,但其里面的内容超过了这个高度,可使用超出隐藏,让超出来的部分隐藏起来
        当该元素中的子元素的高度使用浮动效果脱离文档流从而造成该元素的高度(为0)撑不来,可以使用超出隐藏来解决
定位
    position:absolute;绝对定位
        参考其含有定位的父元素
    position:relative;相对定位
        参考其原来的位置
    position:fixed;固定定位
        参考浏览器窗口的位置
2D变换
    transform:translatex(  px/%;)
    transform:translatey(  px/%;)
    transform:translate(  px/%;)
    transform:translate(  px/%   px/%;)
过渡
    transform:rotate(___deg;)单位度 degree
    transition:__s 单位秒 s
    transition:___ ___ ___ ___ 改变属性 过渡时间(s) 延迟时间(s) 动画类型(ease/ease-in/ease-out/ease-in-out平缓/又快到慢/有慢到快/又快到慢再到快)
动画
    animation
    @keyframes+动画名字{    ;}
浮动
    float:left/right/none;
    清除浮动 clear:left/right/both;
光标
    pointer 小手指
    move 四个方向移动的箭头
    none
    url(图片路径要ico/png格式的)
        免费在线生成ico图标:https://www.butterpig.top/icopor
阴影
    元素阴影
        box-shadow
            颜色为rgb格式只能放在最后面,默认为黑色
    文本阴影
        text-shadow:x轴 y轴 模糊度 延伸度 颜色
            颜色为rgb格式,可以放在最前面和最后面,默认的颜色和字体颜色一致
媒体查询标签
    使用方法一:写在style中
        @ media screen and (max-width:900px){div {background:red;};}调整页面布局,当屏幕宽度小于等于900px时就采用上面的样式
    可引入文件
        <link rel='stylesheet' href='__.css' media='screen and (max-width:900px)'/>当屏幕的宽度小于等于900px时,可引入该文件
精灵图
    利用大一点的图(图上有很多小图标)在设置背景图时,可以利用定位移动,出现不同的图标
    好处:只需要向服务器发送一次请求就行
二级菜单/二级列表
    特点:通常为父子关系