h4和h5的区别 相关文章

微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻【▄

（页底留言开放，欢迎来吐槽）

●●●

1.HTML5为什么只需要写<!DOCTYPEHTML>？

答案解析：

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

2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

答案解析：

行内元素：abspanimginputselectstrong

块级元素：divulollidldtddh1h2h3h4p等

空元素：<br><hr><img><link><meta>

3、页面导入样式时，使用link和@import有什么区别？

答案解析：

1）link属于XHTML标签，而@import是css提供的；

2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；

3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

4）link方式的样式的权重高于@import的权重。

4、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

答案解析：

新特性，新增元素：

1）内容元素：article、footer、header、nav、section

2）表单控件：calendar、date、time、email、url、search

3）控件元素：webworker，websockt，Geolocation

移除元素：

1）显现层元素：basefont，big，center，font，s，strike，tt，u

2）性能较差元素：frame，frameset，noframes

处理兼容问题有两种方式：

1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2）使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。

5、如何区分HTML和HTML5？

答案解析：

1）在文档类型声明上不同：

HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。

2）在结构语义上不同：

HTML：没有体现结构语义化的标签，通常都是这样来命名的<divid="header"></div>，这样表示网站的头部。

HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>

6、简述一下你对HTML语义化的理解？

答案解析：

1）用正确的标签做正确的事情；

2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；

3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；

4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；

5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。

7、HTML5的离线储存怎么使用，工作原理能不能解释一下？

答案解析：

localStorage长期存储数据，浏览器关闭后数据不丢失；

sessionStorage数据在浏览器关闭后自动删除。

8、iframe有那些缺点？

答案解析：

1）在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面；

2）框架结构有时会让人感到迷惑，页面很混乱；

9、Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

答案解析：

1）<!Doctype>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

10、常见兼容性问题？

1）png24位的图片在IE6浏览器上出现背景；

解决方案是：做成PNG8；

2）浏览器默认的margin和padding不同。

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

3）IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。浮动IE产生的双倍距离#box{float:left;width:10px;margin:000100px;}这种情况下IE6会产生200px的距离。

解决方法：加上_display：inline，使浮动忽略

4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute获取自定义属性；Firefox下，只能使用getAttribute获取自定义属性。

解决方法：统一通过getAttribute获取自定义属性。

5）IE下，even对象有x，y属性，但是没有pageX，pageY属性，但是没有x，y属性；

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

6）Chrome中文界面下默认会将小于12px的文本强制按照12px显示

解决方法：可通过加入CSS属性-webkt-text-size-adjust:none;解决

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

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

11、如何实现浏览器内多个标签页之间的通信？

答案解析：

调用localstorge、cookies等本地存储方式

12、webSocket如何兼容低浏览器？

答案解析：

AdobeFlashSocket、ActiveXHTMLFile(IE)、基于multipart编码发送XHR、基于长轮询的XHR

13、支持HTML5新标签

答案解析：

1）IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式；

2）当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[ifltIE9]>

<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

14、如何区分：DOCTYPE声明\新增的结构元素\功能元素，语义化的理解？

2）html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

3）在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；

4）搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利用SEO；

5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

15、介绍一下CSS的盒子模型？

答案解析：

1）有两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和padding；

2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。

16、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？

答案解析：

1）id选择器（#myid）

2）类选择器（.myclassname）

3）标签选择器（div，h1，p）

4）相邻选择器（h1+p）

5）子选择器（ul>li）

6）后代选择器（lia）

7）通配符选择器（*）

8）属性选择器（a[rel="external"]）

9）伪类选择器（a:hover,li:nth-child）

17、可继承的样式：font-sizefont-familycolor,ULLIDLDDDT

18、不可继承的样式：borderpaddingmarginwidthheight

19、优先级就近原则，同权重情况下样式定义最近者为准

20、载入样式以最后载入的定位为准;

解析答案：优先级为:!important>id>class>tag；important比内联优先级高

21、CSS3新增伪类举例：

答案解析：

p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素；

p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素；

p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素；

p:only-child选择属于其父元素的唯一子元素的每个<p>元素；

p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素；

:enabled:disabled控制表单控件的禁用状态；

:checked单选框或复选框被选中。

22、如何居中div？如何居中一个浮动元素？

答案解析：

给div设置一个宽度，然后添加margin:0auto属性；div{width:200px;margin:0auto;}

23、居中一个浮动元素

答案解析：

确定容器的宽高宽500高300的层，设置层的外边距

.div{width:500px;height:300px;margin:-150px00-250px;position:relative;background:green；left：50%；头：50%}

24、css3有哪些新特性？

答案解析：

CSS3实现圆角（border-radius:8px;），阴影（box-shadow:10px）,对文字加特效（text-shadow）,线性渐变（gradient），旋转（transform）

transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋转，缩放，定位，倾斜

增加了更多的css选择器多背景rgba

25、为什么要初始化CSS样式

答案解析：

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法是：*{padding:0;margin:0}(不建议)

淘宝的样式初始化：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,

textarea,th,td{margin:0;padding:0;}

body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

address,cite,dfn,em,var{font-style:normal;}

code,kbd,pre,samp{font-family:couriernew,courier,monospace;}

small{font-size:12px;}

ul,ol{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

legend{color:#000;}

fieldset,img{border:0;}

button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}

26、display:inline-block什么时候会显示间隙？

答案解析：

移除空格，使用margin负值、使用font-size:0、letter-spacing、word-spacing

27、使用CSS预处理器吗？喜欢哪个？

答案解析：SASS

干货！免费领取腾讯高级讲师网页设计教程

点我领取

737373

关注网页设计自学平台，99%的努力都在这里

h4和h5的区别的更多相关文章

  1. HTML 、XHTML、H5的区别：

    概括: HTML指的是HTML4.01:HTML是标记/设计语言.XHTML是HTML的过渡版:XHTML是可扩展的标记语言. H5是HTML的升级版.H5是一门编程语言. 区别: 1.XHTML标签 ...

  2. H5测试区别与PC端测试关注点

    除了基本的业务逻辑功能测试之后,H5页面的测试,需要关注以下几点: 1.  通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2.  横屏竖屏相互切换,能自适应,并且布局不 ...

  3. 深入分析：微信小程序与H5的区别

    作为前端工程师,从前端的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同. 传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览 ...

  4. weex h5开发区别-实践初级篇

    html标签 weex中没有标签的概念,html中标签对应于weex中的Components weex 无<span> .<p> ,用<text>替代.但是< ...

  5. 微信支付---公众号支付和H5支付区别

    微信支付分为如下几种:(来源https://pay.weixin.qq.com/wiki/doc/api/index.html) 本文主要讲解公众号支付和H5支付,两者均属于线上支付比较常用的方式: ...

  6. html5 和h5的区别

    html5 是公认的web开发的html规范,是一系列关于html的标准,它就好比是国家的法律,比如未成年不准进网吧,网吧要是允许未成年人进入,国家就要对网吧和未成年人进行处罚和教育.同样的,你写的h ...

  7. 微信小程序开发和h5的区别

    1. 开发小程序时,每个页面一定要在app.json文件中注册,页面文件夹和其包含的四个文件的名字要保持一致. 2. 小程序发起的都是HTTPS网络请求,在开发调试的过程中可以不校验协议和TLS版本, ...

  8. 小程序 与 App 与 H5 之间的区别

    小程序的实现原理 根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览器内核),Android 的 X5 (QQ 浏览器内核),开发时用的 nw.js(C+ ...

  9. iPhone与iPad在开发上的区别

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

随机推荐

  1. Oracle PL/SQL实战代码下载

    最近在学习PL/SQL编程,算是一个进阶吧,书没带光盘,所以按照书中的地址去下载样例,无法下载,到图灵官网找到了源代码下载地址,无法下载的留邮箱,我发给大家 下载地址: http://www.itur ...

  2. jQuery核心之那些有效的方法

    jQuery提供了一些很有效的方法,这些方法都在$命名空间之下,对常规的编码很有帮助,完整的api详见:utilities documentation on api.jquery.com $.trim ...

  3. 【hdu5973】高精度威佐夫博弈

    题意:输入a, b表示两堆石头数目,威佐夫博弈,问:先手胜负? a, b <= 1e100. 高精度.当a > b时, a = (a-b)*黄金分割比 时是先手败状态.因为a, b < ...

  4. Head First 设计模式 --5 单例模式

    单例模式:确保一个类只有一个实例,并提供一个全局访问点.用到的设计原则:1.封装变化2.组合优于集成3.针对接口变成而不是针对实现4.为交互对象之间的松耦合设计而努力5.类应该对扩展开放,对修改关闭6 ...

  5. Windows 7 封装与定制不完全教程

    Windows 7 封装与定制不完全教程 从定制Win7母盘到封装详细教程 手把手教你定制WIN7小母盘 Windows 7 封装与定制不完全教程 [教程] Windows 7 封装与定制不完全教程( ...

  6. WPF:带复选框CheckBox的树TreeView

    最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节 ...

  7. C#窗体自定义控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  8. 编译osg的一个错误

    C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\Microsoft.CppCommon.targets! 提示找不到CMAKELIST.T ...

  9. escape()、encodeURI()、encodeURIComponent()区别详解--zt

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...

  10. java_easyui体系之目录 [转]

    摘要:简单介绍form的提交方式.与validatebox的结合使用. 一:form简介 Easyui中的form有两种提交方式.结合自己新添加的一种ajax提交方式.本文简单说明form的三种提交方 ...