zoukankan      html  css  js  c++  java
  • html知识点

    ---------------------------day1 html简介------------------------------------------------------------------

    1.web标准 结构(xhtml xml) 表现(css) 行为(dom,ECMAscript)
    2.html超文本标记语言 xhtml可扩展的超文本标记语言(语法更加严谨,大小写敏感)
    3.自定义列表 dl dt(title写名词)dd(data 写名词解释)
    3. img标签的必须有的两个属性 src和alt
    4.相对路径,../ 返回上一层 ../../返回上两层
    5.表格合并 先合并行在合并列

    html语法:分为单标记(没有关闭标签)和双标记,尖括号第一个是标记,空格后面是属性="属性值"
    web标准 html xhtml 语法更严格

    ---------------------------day2 css简介------------------------------------------------------------------

    1. /*css注释*/
    /*css代码必须放在css样式表里面!!!*/
    /*
    px : 像素
    */
    2. <link rel="stylesheet" type="text/css" href="css/demo2.css">
    rel="stylesheet" 建立关联性
    type 定义文档类型
    href css外部样式表的路径

    @import和link的区别:
    1、本质区别:link 属于 xhtml标签 @import > css提供的方法
    2、加载顺序:link:结构和样式同时加载 @import先加载结构网速慢的情况下会导致没有样式
    3、link的兼容性比较好
    4、使用dom控制css样式的差别。
    3. 样式表的权重关系:
    内联样式的权重(优先级)最高!
    内部样式表和外部样式表的权重和书写顺序有关(放在后面的权重比较高)
    被覆盖的只是相同的属性!
    4.ID选择符 定义页面结构
    5 权重
    内联样式表(1000) > id(100) > class(10) 、伪类选择符(10)> 类型选择符(1)

    包含选择符的权重为选择符之和
    6 选择符:
    类型选择 id选择符 class选择符 特殊选择符
    特殊选择符: 群组选择符 包含选择符 伪类选择符 通配符

    ---------------------------day3 css属性------------------------------------------------------------------------------

    1.css样式清除边距,取消标签默认样式:
    *{margin:0;padding:0}
    ul,ol,li{list-style:none;}
    2.margin:0 auto;让当前元素在父元素里面左右居中 0(上下边距)auto(左右自动)

    4 css文本属性
    4.1 font-size 字体大小 默认16px=1em 9pt=12px
    4.2 color 颜色
    4.3 font-family 文本字体 "汉字字体使用双引号" "有空格的字体使用双引号"
    4.4 font-weight 文字加粗 取消加粗 font-weight:noemal <b></b><strong></strong>文字加粗标签
    4.5 font-style 文字倾斜样式 取消倾斜 font-style:normal <i></i><em></em>文字倾斜标签
    4.6 text-align 水平对齐方式 left right
    4.7line-height 文字行高
    4.8 文本修饰 text-decoration 文本修饰(下划线样式) text-decoration:none 取消下划线 <u></u> <a></a>带有下划线标签
    4.9 text-indent 首行缩进 可以取负值 text-indent:2em
    4.10 letter-spacing 字间距 中文英文适用
    4.11 word-spacing 词间距 英文适用 中文不适用
    font简写:字体大小 行高 字体 font:12px/24px "宋体"
    5 css列表属性
    list-style:none 去掉列表符号

    6 css浮动属性
    float:left right
    只要子元素有浮动。父元素必须设置height!!!
    只要设置浮动,必须外边嵌套一个父元素
    ---------------------------day4 padding和margin用法------------------------------------------------------------------------------

    padding的用法:
    1:padding是长在盒子里面的(内容和边框之间的距离)
    2:padding会把盒子撑大。
    3:如果想让盒子保持原有的大小,必须在宽高的基础上减去padding的值。
    4:padding是用来调整子元素(文字、图片、元素...)在父元素里面的位置关系
    5:给单一某个方位添加padding值 padding-left/right/top/bottom:
    6:padding值得设置方式:
    四个值:上 右 下 左
    三个值:上 左右 下
    二个值:上下 左右
    一个值:四个方向
    7:padding不会对背景图造成影响!!!

    margin的用法:
    1:margin长在元素外面的
    2:margin调整的是元素与元素之间的位置关系
    3:margin-left/right/top/bottom:
    4:
    四个值:上 右 下 左
    三个值:上 左右 下
    二个值:上下 左右
    一个值:四个方向

    5:margin容易出现的问题
    a:两个上下排列的元素之间的margin值不会叠加,会按照较大值设置
    b:长在父元素里面的第一个元素如果有margin-top:会错误的添加在父元素上面

    ---------------------------day8 高度自适应用法------------------------------------------------------------------------------

    高度自适应的两个目的:
    1:内容多的时候,让内容撑开父元素高度
    2:内容少或者没有内容的时候,让父元素保持最小高度



    min-height IE6不支持 _height下划线属性ie6能识别,非ie6浏览器不能识别

    height属性 在IE6中默认解析的就是最小高度

    如果考虑IE6的情况下最小高度的设置:
    1:_height:value;min-height:value;
    2:min-height:value;height:auto!important;height:value;

    高度塌陷问题:
    /*
    高度塌陷:
    出现高度塌陷的场景:当子元素有浮动,并且父元素没有高度或者是设置最小的高度的时候,父元素会出现高度坍塌的BUG.


    解决高度塌陷的方法:

    1:给高度塌陷的元素添加overflow:hidden;
    原理:overflow:hidden;触发了一个BFC
    bfc布局规则:计算BFC高度的时候,浮动元素也参与计算

    弊端:会隐藏一些定位到外面的元素

  • 相关阅读:
    HOJ 2930 Perfect Fill IIl 线性递推
    BZOJ 1269: [AHOI2006]文本编辑器editor Splay
    linux shell常用快捷键(转)
    【引用】Linux date命令
    linux shell if 参数(转)
    vsftpd 530 Permission denied(转)
    捕获非广播包和非发给自己主机的数据包的原理是什么 混杂模式(转)
    代理ARP(转)
    Linux和Unix系统 关系和区别详细介绍(转)
    路由表(转)
  • 原文地址:https://www.cnblogs.com/hanguidong/p/8961940.html
Copyright © 2011-2022 走看看