资讯专栏INFORMATION COLUMN

html&&css

eccozhou / 508人阅读

摘要:标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。控制表单控件的禁用状态。首先,巧妙的使用这一标记,将游览器从所有情况中分离出来。

1.Doctype作用?标准模式与兼容模式各有什么区别

声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器,用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2.HTML5 为什么只需要写 ?

HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。**

3.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”,是“行内”元素
(1)行内元素有:a b span img input select strong(强调的语气)
(2)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
(3)常见的空元素:


13.如何实现浏览器内多个标签页之间的通信?

WebSocket、也可以调用localstorge、cookies等本地存储方式,还可以使用页面的路有参数传递
localstorge另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,
我们通过监听事件,控制它的值来进行页面信息通信;
14.如何在页面上实现一个圆形的可点击区域?
map+area或者svg
border-radius
纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

15.title与h1的区别、b与strong的区别、i与em的区别?

title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取也有很大的影响;
strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:会重读,而是展示强调内容。
 i内容展示为斜体,em表示强调的文本;

16.data-属性的作用是什么?

h5新增的属性
可以通过ele.dataset获取到标签上的data-x的属性
返回一个对象

17.常见兼容性问题? 问题:png24位的图片在iE6浏览器上出现背景,

解决:解决方案是做成PNG8.

问题:浏览器默认的margin和padding不同。

解决:方案是加一个全局的*{margin:0;padding:0;}来统一。

问题:IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}这种情况之下IE会产生20px的距离**

解决:解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
                 渐进识别的方式,从总体中逐渐排除局部。
                 首先,巧妙的使用“9”这一标记,将IE游览器从所有情况中分离出来。 接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
css
 

.bb{ 
   background-color:#f1ee18;/*所有识别*/ 
  .background-color:#00deff9; /*IE6、7、8识别*/ 
  +background-color:#a200ff;/*IE6、7识别*/ 
  _background-color:#1e0bd1;/*IE6识别*/ 
  } 
问题:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性,Firefox下,只能使用getAttribute()获取自定义属性.

解决:解决方法:统一通过getAttribute()获取自定义属性.

问题:IE下,even对象有x,y属性,但是没有pageX,pageY属性,Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

问题:Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

解决:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

问题:超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了

解决:方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

18.你知道多少种Doctype文档类型?

该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

19.HTML与XHTML——二者有什么区别?

1)所有的标记都必须要有一个相应的结束标记
2)所有标签的元素和属性的名字都必须使用小写
3)所有的XML标记都必须合理嵌套
4)所有的属性必须用引号""括起来
5)把所有<和&特殊符号用编码表示
6)给所有属性赋一个值
7)不要在注释内容中使“--”
8)图片必须有说明文字

20.的title和alt有什么区别?

title是global attributes之一,用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
alt是的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。

21.div+css的布局较table布局有什么优点?

改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化(seo)搜索引擎更友好,排名更容易靠前。

22.CSS都有哪些选择器?

派生选择器(用HTML标签申明)
id选择器(用DOM的ID申明)
类选择器(用一个样式类名申明)
属性选择器(用DOM的属性申明,属于CSS2,IE6不支持,不常用,不知道就算了)
除了前3种基本选择器,还有一些扩展选择器,包括
后代选择器(利用空格间隔,比如div .a{  })
群组选择器(利用逗号间隔,比如p,div,#a{  })
那么问题来了,CSS选择器的优先级是怎么样定义的?

基本原则:

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。
复杂的计算方法:
用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
xxx li 优先级 100 +1
那么问题来了,看下列代码,

标签内的文字是什么颜色的?


123



答案:red。与样式定义在文件中的先后顺序有关,即是后面的覆盖前面的,与在

中的先后关系无关。

23.行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?

块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的),就是里面文字或图片的大小。
那么问题来了,浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?
答案:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52787.html

相关文章

  • JS前端首屏优化技巧

      访问时间超过3S对于用户就十分痛苦,为考虑到用户访问效果。为此我,首屏加载时间一顿操作,基本都在2s左右,这样的首屏加载时间,对于用户来说,算是可以接受的。  那我都哪些操作?下面就为大家展示  打包分析  在 package.json 中添加命令  "report":"vue-cli-servicebuild--report"  然后命令行执行npm ...

    3403771864 评论0 收藏0
  • 让WordPress支持google AMP

    摘要:那百度为什么不和一样用呢况且还是开源的。我想一个重要的原因是使用的需要调用官网的库,用于控制资源加载缓存等功能这个恐怕是百度不愿意采用的一个核心原因,鉴于国内的网络环境伟大的,难免不让人担心这个库那天被屏蔽了。 1.关于AMP 在移动互联网的时代,尽管网站响应式设计可以满足多屏(pc、手机、ipad等)浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accele...

    陈江龙 评论0 收藏0
  • 运用Python即时获得steam优惠游戏存档

      Steam是由美国网络游戏商Valve于2003年9月12日上线的数字发行服务平台,被称之为电子计算机游戏圈最大的一个数码科技发售服务平台之首。本文运用Python即时获得steam优惠游戏存档,有兴趣的话可以试一试  序言  Steam是由美国网络游戏商Valve于2003年9月12日上线的数字发行服务平台,被称之为电子计算机游戏圈最大的一个数码科技发售服务平台之首,Steam网站是全球最大...

    89542767 评论0 收藏0
  • 关于react+antd样式不生效问题的解决方式

      1、下面是添加antd组件样式不生效代码  在入口文件中引入import'antd/dist/antd.css'   样式生效,但是生成警告   WARNINGin./node_modules/antd/dist/antd.css   Failedtoparsesourcemap:'webpack://antd/./components/time-   picker/s...

    3403771864 评论0 收藏0
  • 新版selenium4.0+Python使用详解

      小编写这篇文章的主要目的,是给大家做一个介绍,具体是给大家介绍新版4.0Python代码的相关解释,以及具体的实例,下面就给大家详细的解答下。  1、selenium简介  Selenium是一个用于Web应用程序测试的工具,Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7,8,9,10,11),MozillaFirefox,Safari,Google...

    89542767 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<