淘宝首页的HTML以及CSS技术点

1、

一个网页的开发流程

• 内容结构，比如js、css
• 页面结构。自上而下，从左往右。（内容、颜色块、间距、边框）

2、

line-height的5种设置方式及区别 normal || 1.5 || 150% || 50px || 5em

初始化元素的时候，一般使用 line-height: 1.5 这种方式，它区别于其它四种方式的

根本原因在于元素继承后的计算方式

比如body初始化为 body{font-size: 14px; line-height: 1.5}

则body里的元素都会这样继承

div{font-size:20px} ——>继承后line-height是 20 x 1.5 = 30px

又比如body初始化为 body{font-size: 14px; line-height: 150% || 5em }

则body里的元素都会继承计算后的行高默认值

div{font-size:20px} ——>继承后，line-height 只会被默认为 14 x 150% = 21px

 

‘\5b8b\4f53’ 万国码，这串数字是转码后的表示，它对应的中文是“宋体”

为什么不使用 font-family:"宋体"呢？因为在全世界，别的浏览器不一定会识别中文，但一定识别Unicode字符。

 

3、

css模块化

@规则

• @charset 设置样式表的编码
• @import 导入其它样式文件
• @media 媒体查询
• @font-face 自定义字体/图标

 

4、

标签栏上的图标显示

——图标格式的后缀是 favicon.ico 可通过一些线上工具去生成这种格式

——放在网站的根目录，与首页同级

——link 引入，比如<link rel="icon" href="favicon.ico">

——IE在file协议下显示不出来

 

5、

base标签

——定义文档当中所有url的基础目录或链接

——定义文档当中所有target的默认值

——文档只能定义一个base标签

基础链接

基础目录

6、

自定义字体、图标的使用方式

用@font-face引入，可以将图标像字体一样定义

.eot格式只针对IE的，其它浏览器都不认识

.ttf格式是系统文件的格式，特别大，IE9+支持，其它都不支持

.svg一种图形的技术，可修改且不失真，浏览器都支持

format 为了性能的优化，建议不要省略，浏览器会根据它识别是否需要从服务器下载，因为浏览器可能已经有这个格式了

 

——最好用的是阿里的图标库

 

7、

行级元素的回车会被自动解析成一个空格，而空格的间距其实是由父级的font-size决定的，当设置它所在的父级font-size：0时，就没有默认空格的间距了

 

8、

h标签的使用也跟SEO有关系，标签的重要性在seo是有优先级的。

• title标签 > h1标签（主标题）> h2标签（副标题）> h3标签（板块标题）> h4标签（板块内一级标题）> h5标签（板块内嵌套板块的标题）> h6标签（同h5），一般用到h4就够了
• 一个页面只要1个h1标签，且h1~h4系列标签都要用上
• 如果一个页面没有很醒目的标题给h1标签，就把h1给logo，并且以图换字，参考淘宝

 

9、

IE8如何兼容css3的线性渐变？

——滤镜filter

‘#ffff9000’——前两个ff代表透明度

GradientType=1 1代表水平方向，0代表垂直方向

 

10、calc函数 IE9+

 

11、

rgba函数 IE9+

flex弹性布局 IE10+

 

12、

两个边框重叠的1px问题

 

13、

webp格式的图片 谷歌开发 IE不支持 火狐65+

• 占用空间更小，甚至比其它同类型图片小10倍以上
• 清晰度却不变
• 需要JavaScript来解决兼容性问题

 

14、

关于伪元素使用一个冒号，可以兼容IE8，IE8对于伪元素只认识一个冒号，伪类使用两个冒号