-
CSS的全称是什么?
答:Cascading Style Sheets ,层叠样式表,html布局文件。 -
CSS有几种引入方式? link 和@import 有什么区别?
答:4种。 -
内联:样式直接写入标签中
<td style="color:#c00; font-size:15px; line-height:18px;>
-
嵌入:样式写入html头标签head里
<head><style>.content {background: red; }</style></head>
-
链接:样式以文件方式从link标签引入
<link rel=stylesheet type="text/css" href="example.css">
-
导入:样式使用 CSS 规则引入外部 CSS 文件
<style>@import url(style.css);</style>
区别:@import 为CSS服务。link是为当前的页服务。
link 属于 HTML,通过 <link> 标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件。
当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载。
@import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件。 -
以下这几种文件路径分别用在什么地方,代表什么意思?
- css/a.css
相对路径:当前文件夹下CSS文件夹下a.css - ./css/a.css
跟上面一样 - b.css
相对路径:当前文件夹下b.css - ../imgs/a.png
相对路径:上级文件夹下imgs文件夹下a.png - /Users/hunger/project/css/a.css
绝对路径:User文件夹下hunger文件夹下project文件夹下css文件夹下a.css - /static/css/a.css
绝对路径,在网站服务器通过该路径找到a.css文件 -
http://cdn.jirengu.com/kejian1/8-1.png
同上
- 如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
答:一种是将图片上传到该网站的服务,第二种是引用图片链接。当然第二种的时间空间效率就很高了。 - 列出5条以上html和 css 的书写规范
- 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js。
- 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等;
- 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有,
可以使用须以”data-”为前缀来添加自定义属性,避免使用”data:”等其他命名方式; - 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
- 尽可能减少div嵌套,
- 书写链接地址时, 必须避免重定向
能以背景形式呈现的图片, 尽量写入css样式中; -
截图介绍 chrome 开发者工具的功能区
答:
- Elements看到chrome渲染页面所需要的的HTML、CSS可以编辑这些内容更改页面显示效果。
- Console: 显示各种警告与错误信息,并且可以直接在上面写js代码。
- Sources: 看资源文件,主要用来调试js。
- Network: 页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间,哪些资源不能成功加载,查看HTTP的请求头,返回内容等。
- Timeline:加载页面时花费时间的完整分析,所有事件,从下载资源到处理Javascript,计算CSS样式等花费的时间都展示在Timeline中;
- Profiles: 分析web应用或者页面的执行时间以及内存使用情况;
- Resources: 对本地缓存(IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage)中的数据进行确认及编辑;
- Audits: 分析页面加载的过程,进而提供减少页面加载时间、提升响应速度的方案;
网友评论