发表于： 2022-11-15 21:39:28
0 464
4.知道css有个content属性吗？有什么作用？有什么应用？
4.知道css有个content属性吗？有什么作用？有什么应用？
content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被所有主流浏览器支持。
在CSS 3 Generated Content工作草案中，content属性添加了更多的特征，
例如：插入以及移除文档内容的能力，以创建脚注，结语，及段落注释。但是目前还没有浏览器支持content的扩展功能。
CSS 的 content 属性就用于替换内容，也可以说，content 属性决定了是替换元素还是非替换元素。
content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的 内容， 这个属性要结合：before和：after这俩个伪类属性来使用。
before和after是什么呢？
before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素.
需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，
并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。
伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等
<style>
h1:after{
content: "这里是插入内容";
}
</style>
<body><h1>11111</h1>
</body>
5.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。
具体表现是把语义嵌入到 HTML 中，以便有助于分离式开发，
并通过制定一些简单的约定，来兼顾 HTML 文档的人机可读性，相当于对 Web 网页进行了语义注解。
所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。
具体表现是把语义嵌入到 HTML 中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾 HTML 文档的人机可读性，
相当于对 Web 网页进行了语义注解。
采用微格式的 Web 页面，在 HTML 文档中给一些标签增加一些属性，这些属性对信息的语义结构进行注解，有助于处理 HTML 文档的软件，
更好的理解该 HTML 文档。
在前端构建中微格式的意义
微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以下事情：
在爬取 Web 内容时，能够更为准确地识别内容块的语义；
对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。
总结： 微格式可以对网站进行 SEO 优化，如果需要可以考虑。
6.HTML5的离线储存怎么使用？
HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，
在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css等等文件，
但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
它是浏览器自己的一种机制，随着移动互联网时代的到来，网络可靠性降低，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。
而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。
HTML5的离线存储是基于一个新建的.manifest文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，
这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。
Manifest 的特点：
离线浏览：即当网络断开时，可以继续访问你的页面。
访问速度快：将文件缓存到本地，不需每次都从网络上请求。
稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存
7.渐进增强和优雅降级之间有什么不同?
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，
然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。
当浏览器支持时，它们会自动地呈现出来并发挥作用。）
优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。
由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，
使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）
区别：
优雅降级是从复杂的现状开始，并试图减少用户体验的供给。
而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
渐进增强观点：
渐进增强观点认为应该关注于内容本身。内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，
还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。
这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。
优雅降级观点：
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。
而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，
并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。
你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
8.Quirks模式是什么？它和Standards模式有什么区别？
什么是 Quirks Mode? 简单来说，Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计，
并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式
Quirks Mode是一种浏览器（像IE，Firefox，Opera）操作模式。
从根本上说，怪异模式（也称之为兼容模式）意味着一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug，特别是在IE4和IE5中。
Quirks Mode是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个HTML文档的开始，
看它是否包含一个HTML规范所要求的文档类型声明。
Quirks Mode的目标是使旧页面显示出他们的作者想要的那样。旧页面可能利用旧浏览器已知的特性写成，或者至少是适应旧浏览器。
Quirks Mode是什么没有权威的规范。毕竟，实质上Quirk Mode是一个故意违反CSS和HTML的规
现代浏览器在Quirks Mode下，页面会发生哪些变化，怎么样去避免？
1.在Quirks Mode下，为body设置一个margin是无效的。
2.默认情况下，IE有一个垂直滚动条，尽管当没有东西可以滚动的时候，
它是非活动状态（迟钝状态），在Quirks Mode下，你可以通过设置body { overflow: auto;}删除它（当不需要它的时候），
但是在标准模式下，你仍然需要增加html { overflow: auto;}。
3.默认的浮动图片的水平margin是3像素（而不是0）。
4.在CSS中，使用margin: 0 auto使一个块居中是无效的。；
5.字体属性不会从body或其他封闭元素继承到table中。特别是font-size。字体，颜色，行高也都有可能。
9.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
浏览器兼容性问题
出现浏览器兼容性问题的主要原因，是不同浏览器对同一段代码的有不同解析，造成的页面显示效果不统一。
在大多数情况下，我们的需求是，无论用户在什么浏览器上查看我们的网站或登录我们的系统，显示效果都应该是一致的。
所以浏览器兼容性问题是我们web前端开发人员经常会碰到和必须解决的问题。
什么是css hack
不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。
而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。
10.描述一个你在实际使用中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？
就拿响应式布局来说，pc站当然是把所有能呈现的东西都呈现出来，而且一般整体是纵向布局，局部用横向布局（float较多）。
到了平板电脑，基本上和pc的布局也是差不多的。到了手机，才开始有了很大的变化，整体依然是纵向布局，
但是横向布局却变得越来越少，因为手机能呈现在一屏的内容确实是少之又少，而且还要考虑到分辨率大小的问题，
所以一般都是不用float布局，把最重要的功能呈现出来，没有pc里面那么多的效果。
左侧固定宽度，右侧自适应 给父盒子设置高度和左内边距如200px 给左侧子盒子设置设置高度和左外边距-200px，
设置float:left,设置宽度为200px 右侧子盒子设置高度
左侧固定宽度，右侧自适应 给父盒子设置高度和左内边距如200px 给左侧子盒子设置设置高度和左外边距-200px，
设置float:left,设置宽度为200px 右侧子盒子设置高度
部分js练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>js练习</title>
<!-- 内嵌式的js-->
<script>
// var num = 10;
// var a = 0;
// for ( var i = 1; 1<=100; i++) {
// num = num + i;
// }
// console.log(num);
// a = num / 100;
// console.log(a);
// var num = prompt('请输入学生人数');
// var sum = 0;
// var average = 0;
// for ( var i = 1; i <= num; i++) {
// var a = prompt('请输入第' + i + '个学生成绩');
// //因为从来prompt转化过来的数据是字符串型，需要转化成字符型所以需要parseFloat转化
// sum = sum + parseFloat(a);
// }
// average = sum / num;
// alert('班级总成绩是：' + sum);
// alert('班级平均成绩是：' + average);
// var str = '';
// for (var i = 1; i <=5; i++) {
// str = str + '★';
// }
// console.log(str);
var num = prompt('请输入小星星数量');
var str = '';
for (var i = 1 ; i <= num; i++) {
for (var j = 1; j <=5; j++) {
str = str + '★';
}
str = str +'\n';
}
console.log(str);
</script>
</head>
<body>
<!-- 行内式的js 直接写到元素的内部 -->
<!-- onclick是点击的意思 alert是弹出框的意思 -->
<!-- <input type="button" value="唐伯虎" onclick="alert('秋香')">-->
</body>
</html>
明天计划：完成接下来的任务。
返回列表
评论