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. APP成功上线前的bug解决方案

    首先测试用例设计阶段,设计并维护一个各个功能入口的说明文档.其实这个文档的作用很大,一方面对于bug回归阶段的人来说,这是用于提醒的;另外一个方面,在随机测试的时候,随机程度也能有所提高,测试人员能够 ...

  2. Android之垂直显示TextView

    Android之垂直显示TextView 1因为界面需求原因,需要TextView垂直显示,话不多说,看代码,我也是搜的例子,在此感谢写这个例子的大神,在此做个笔记和分享给大家 2.用到了自定义控件的 ...

  3. rebuild new environment for DW step

    Steps to rebuild PPE environment: (CTS) 1, Disable both CTS Daily Job (Daily) and CTS Daily Job (Sta ...

  4. python3 字典相关函数

    python版本3.5 #Author by Liguangbo#_*_ coding:utf-8 _*_'''info={'No.1':'ligb','No.2':'donglx','No.3':' ...

  5. linux如何修改文件或目录的权限(chmod)

    chmod命令是linux上用于改变权限的命令,-R 是递归遍历子目录,因为你要操作的文件使用的*通配符.777,第一个7代表文件所属者的权限,第二个7代表文件所属者所在组的权限,第三个7代表其它用户 ...

  6. 一个php soap的错误记录

    今天使用php soap实现两个系统之间的互通 在写好php的soapserver后,client端调用一直报 looks like we got no XML document,尝试好久后无法解决 ...

  7. python--安装PIL

    PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了.PIL功能非常强大,但API却非常简单易用. 安装PIL 在Debian/Ubuntu Linux ...

  8. a标签中的点击事件

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这 是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...

  9. 樱花漫地集于我心，蝶舞纷飞祈愿相随---总结 浮动：flux 浮动：flux

    知识点 数据类型,运算符与表达式: 程序结构:顺序,选择,循环 问题 各种结构,单词意思 心得体会 抄程序是最笨的方法但我认为它是进步最快的方法,抄程序是积累经验的时候,而做项目才是真正把所学为所用的 ...

  10. django中上传图片的写法（转）

    view参数 @csrf_exemptdef before_upload_avatar(request):    before = True    return render_to_response( ...