html和css知识点整理

288 阅读3分钟
1. charset: 设置编码字符集
  • gb2312: 中国信息处理国家标准码 简体中文编码(数量少,不认识繁体,少数名族的文字)
  • gbk: 扩大了汉字收录, 增加了繁体,藏,蒙,维等少数名族的文字
  • utf-8: unicode 万国码,几乎认识所有文字
2. 不是标签,只是声明。告诉浏览器用哪个版本编写 html。这是html5 声明方式
document.compatMode 兼容性模式:
CSS1CompatW3C标准兼容性模式) 
backCompat(怪异兼容性模式)
3.
&nbsp空格
&lt; <
&gt; >
4. 标签作用
    <a href="javascript:alert("我是a标签")"></a>
    <a href="javascript:;"></a>
5. 上标 sup:superscripted;小标 sub: subscripted

(p的圆圈在上就是上标,圆圈在下就是)

    Na<sup>+</sup>
    H<sub>2</sub>SO<sub>4</sub>
6. frameset 布局,现已弃用,面试可能会考
    <frameset rows="10%, 90%">
        <frame />
        <frameset cols="20%, 80%">
            <frame src="./left.html"/>
            <frame src="./right.html" />
        </frameset>
    </frameset>

缺点:不能与 同时使用, 跨html 数据交互比较困难, 页面加载较慢, 搜索引擎对其不友好,无法查看源代码。

7. iframe,内联块元素

scrolling="no|yes|auto"

    <body>
        <a href="http://www.baidu.com" target="mainFrame">baidu</a>
        <iframe width="100%" height="100px" name="mainFrame" scrolling="no" src="http://www.baidu.com" frameborder="0"></iframe>
    </body>

缺点:搜索引擎对其不友好,无法查看源代码,不方便调试,滚动条混乱,一个页面有两个iframe, 数据传递比较困难。

8.MD5
  • 消息摘要的算法
  • 不可逆的加密算法
  • 不需要提供额外的密钥
9.
  • 内联元素:p/em/strong/del/a/label/ins/sup/sub
  • 块级元素:div/form/table/filedset/legend/span/ul/ol/li/address/hx/dl/dt/dd
  • 内联块级元素:input/img/select/textarea/iframe
10. 浏览器内核
    Google Chrome: webkit/blink
    Safari:        webkit
    firefox:       gecko
    ie:            trident
    opera:         pesto
                   360和昆仑万维
11. css权重
     *             0
     class         1
     id            100
     内联样式       1000
     !important    正无穷
12. rgb
    red:   #FF0000  (255,0,0)
    green: #00FF00  (0,255,0)
    blue:  #0000FF  (0,0,255)
    white: #FFFFFF
    black: #00000
13.em:

默认 1em = 16px;

14. 单行文本截断加省略号
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
15. 行内块和行内元素对齐问题:
    vertical-align: middle/top/bottom/像素
16. 容器内多行文本居中
    a.将容器的display 设置成 table;
    b.将文本容器的 display 设置成 table-cell;(表格单元格属性)
    c.将容器内的文本的vertical-algin 设置成middle
    
17. BFC 块级格式化上下文 block formating contexts
    如何成为 BFC 特性的元素?
-     body
-     float: left|right
-     position: absoluted | fixed
-     display: inline-block | table-cell
-     over-flow: hidden | auto | scroll
    BFC能解决什么问题?
    margin 合并
    margin 塌陷
所有设定的 float 的元素都会转为 inline-block
18. css 书写顺序
    显示属性: display, position, float, clear
    自身属性: width, height, margin, padding, border, background
    文本属性: color, font, text-align, vertical-align, whitespace
    其他
19. 浏览器兼容性写法
    box-sizing: border-box;
    -moz-box-sizing: border-box;         /*firefox*/
    -webkit-box-sizing: border-box;     /*chrome safari*/
    -ms-box-sizing: border-box;         /*IE8以下*/
    -o-box-sizing: border-box;          /*presto opera*/
20. 清除浮动
     .clearfix::after{
        content: "";
        display: block;
        clear: both;
  }
21. css 中使用 attr
    p:before {
        content: attr(data-name);
  }
     <p data-name="小可爱">,欢迎您再次来到本网站</p>
22. 类似淘宝logo
网络加载出来,显示logo。否则显示 文本。
利用` padding-top: 80px;` 将盒子撑开,然后用 `overflow: hiddden;` 将溢出部分隐藏
    // .css
   h1, a {
    margin: 0;
  }
  .logo {
    width: 246px;
    height: 80px;
    background-color: #000;
  }
  .logo h1 .logo-hd {
    display: block;
    width: 246px;
    padding-top: 80px;
    height: 0;
    background: url(./logo.png) no-repeat 0 0 / 246px 80px;
    color: #fff;
    oveflow: hidden;
  }
    
    <div class="logo">
    <h1>
      <a href="" class="logo-hd">ZEEKR</a>
    </h1>
  </div>
23. URI URL URN 都是什么
URI: UNIFORM RESOURCE IDENTIFIER 统一资源标识符

URL: UNIFORM RESOURCE LOCATOR    统一资源定位符
URL: http://www.baidu.com/news#today
URN: UNIFORM RESOURCE NAME   统一资源名称
URN: www.baidu.com/news#today    --> ID
24. js垃圾回收机制
-     找出不再使用的变量
-     释放其占用内存
-     固定时间间隔运行