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. 学习mongo系列（八）密码与权限

    一.设置密码及用户角色[1] > db.createUser(... {... user: "maxh",... pwd: "123",... roles ...

  2. java练习题：输出100以内与7有关的数、百马百担、打分（去掉最高、最低分）、二分法查找数据

    1.输出100以内与7有关的数 注: 这些数分为三类:(1)7的倍数,(2)个位数字是7的数,(3)十位数字是7的数 int i=1; System.out.println("输出100以内 ...

  3. CSS 3 颜色表示法

    1,Color Name:red    优点:方便记忆  缺点:数量少不支持透明度 2,HEX方式:#FFFFFF    优点:颜色种类多   缺点:换算复杂需要借助工具 3,RGB方式:rgb(25 ...

  4. git github 异常

    git :版本控制工具 github:项目托管 git clone failed:git是否安装正确 github commit failed:github 是否账号 / 密码是否正确(密码错误也可以 ...

  5. [转载]【基础篇】不为人知的Maya移动坐标轴

    maya 设置轴向1.将整体模型方向调整到与世界坐标系一致.设置具体模型的轴朝向. 操作:选中模型,按住W键,鼠标左键,在弹出的菜单中选择Axis,比较常用的有Set To Ponit.Set To ...

  6. 《高级Web应用程序设计》课程学习资料

    任务1:什么是ASP.NET MVC 1.1  ASP.NET MVC简介 1.2 认识ASP.NET MVC项目结构 1.3 ASP.NET MVC生命周期 任务2:初识ASP.NET MVC项目开 ...

  7. 【安全测试】 WebScarab安装方法

    Webscarab同样需要java环境,下载j2_webscarab-installer.jar包. 1.进入cmd,执行java -jar j2_webscarab-installer.jar命令( ...

  8. C++ 中 ZeroMemory、memset 危险需慎用

    使用C/C++编程时,常使用ZeroMemory.memset或 “={0}”来对结构体对象进行初始化或清零.然而这三种方式都有各自的特点,使用时需谨慎,否则容易出现严重错误,本人今日解决一个导致宕机 ...

  9. 【转】Ant学习笔记——自己构建Ant编译环境

    自从年初开始用NetBeans6.0,才接触到Ant. 这是今年6月份的一篇Ant学习笔记.安装 1.下载并构建环境.   去官网下载src包和bin包.解压缩它们到同一目录,运行build.bat, ...

  10. Hibernate 检索策略

    概述 检索数据时的 2 个问题: –不浪费内存:当 Hibernate 从数据库中加载 Customer 对象时, 如果同时加载所有关联的 Order 对象, 而程序实际上仅仅需要访问 Custome ...