1. charset: 设置编码字符集
- gb2312: 中国信息处理国家标准码 简体中文编码(数量少,不认识繁体,少数名族的文字)
- gbk: 扩大了汉字收录, 增加了繁体,藏,蒙,维等少数名族的文字
- utf-8: unicode 万国码,几乎认识所有文字
2. 不是标签,只是声明。告诉浏览器用哪个版本编写 html。这是html5 声明方式
document.compatMode 兼容性模式:
CSS1Compat(W3C标准兼容性模式)
backCompat(怪异兼容性模式)
3.
 空格
< <
> >
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垃圾回收机制
- 找出不再使用的变量
- 释放其占用内存
- 固定时间间隔运行