htmlCSS面试题

1、问答知道的网页制作会用到的图片格式有哪些?

Webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%

2、问答1.SGML(标准通用标记语言)和HTML(超文本标记语)

解析:①HTML是SGML的一个实例,它的DTD作为标准被固定下来,因此,HTML不能作为定义其它置标语言的元语言。XML是SGML的一个子集,严格地讲,XML也还是SGML。与HTML不同的是,XML有DTD,因而也可以象SGML那样,作为元语言,来定义其它文件系统,或称其它置标语言。如果把置标语言分为元置标语言和实例置标语言的话,SGML和XML都是元置标语言,而HTML和由XML派生的XHTML都是实例置标语言。②SGML(standard general markup language)是一种在WEB发明之前就已存在的使用标记来描述文档资料的通用语言,它是一种定义标记语言的元语言,HTML和XML都是由SGML发展过来的.HTML(HyperText Markup Language)是SGML定义下的一个描述性的语言,是SGML的一个应用,它不能用来定义新的应用,HTML,用于一些Internet的短期的数据.HTMI文档格式非常松散,导致解析的复杂性增加,也导致了不同浏览器浏览的不同.XML(extend MarkUp Lanuage)是SGML的一个简化版本,是SGML的一个子集,严格意义上讲,XML就是SGML.如果一些数据要长期使用,并且要更多的一些结构,XML将更好.XML比HTML严格,如果出现语法错误,浏览器将不发解析显示

③ 标准答案:

SGML(标准通用标记语言)是一个标准,告诉我们怎么去指定文标记。他是只描述文档标记应该是怎么样的元语言,HTML是被用SGML描述的标记语言。因此利用SGML创建了HTML参照和必须共同遵守的DTD,你会经常在HTML页面的头部发现“DOCTYPE”属性,用来定义用于解析目标DTD“!DOCTYPE html PUBLIC ‘-//W3C//DTDHTML 4.01//EN’ ‘http://www.w3.org/TR/html4/strict.dtd’"现在解析SGML是一件痛苦的事情,所以创建了XML使事情更好。XML使用了SGML,例如:在SGML中你必须使用起始和结束标签,但是在XML你可以有自动关闭的结束标签。XHTML创建于XML,他被使用在HTML4.0中。你可以参考

下面代码片段中展示的XML DTD“Q!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’>"

总之,SGML是所有类型的父类,较旧的HTML利用SGML,HTML4.0使用派生自XML的XHTML。

3、你对CSS中的浮动的理解以及如何清理浮动

浮动的元素 脱离标准文档流(后面简称:脱标)。

浮动的元素可以并排(包含div之类块级元素),并且可以设置宽和高。因为行内元素不能设置宽和高是标准文档流的限制,所以脱标之后就没有这些限制。(绝对定位、固定定位也可以脱离标准文档流)

我们可以理解浮动的元素,先浮(脱标)再动(left),那么脱标之后,该元素就不占有标准文档流的空间,标准文档流的其他元素还是按照从上而下排列。这里可以理解成上下俩层空间的。

一个span元素浮动之后就可以设置宽和高,那么就代表在浮动的世界里,没有块级和行内元素之分。一个元素一旦浮动了,无论它是块级的还是行内的,就能够并排,能够设置宽和高。

清除浮动的原因:

1.因为浮动的元素实际上不占有高,那么没有高的盒子,就没有安全感。例如,想设置下margin都没有办法。

2.因为浮动的元素对其它元素有影响,该影响就是布局混乱。例如,想用2个ul做2行元素都没办法实现。

注意:没有高度的父盒子是管不住浮动的儿子的对其他元素的影响的。

清除浮动的方法:

1.给父盒子加高(height)

这个方法不推荐,因为网站开发过程中需要浮动的元素比较多,通过加高的方法会使得css代码变多,拖慢页面加载速度。

2.外墙法(在盒子外面添加一个带有clear:both属性的盒子)

3.内墙法(给盒子加上clear:both属性,推荐使用)

4.溢出影藏(overflow:hidden)

给一个盒子添加了overflow:hidden,该盒子就会有高度,也可以用来清楚浮动的影响.

4、 CSS引入的方式有哪些?Link和@import的区别是?

引入方式:
行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例:

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。

语法:

1、链接式

2、导入式

Link和@import的区别是
本质上,这两种方式都是为了加载css文件,但还是存在细微的差别。

差别1:老祖宗的差别,link属于XHTML标签,而@import完全是css提供的一种方式。

link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import只能加载CSS。

差别2:加载顺序的差别:当一个页面被夹在的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式(就是闪烁),网速慢的时候还挺明显。

差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题,完全兼容。

差别4:使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的(不支持)。

差别5(不推荐):@import可以在css中再次引入其他样式表,比如创建一个主样式表,在主样式表中再引入其他的样式表

5、CSS(cascading style sheets级联样式表)中的选择器是

选择器在你想应用一个样式的时候,帮助你去选择元素。

举例,下面是简单的被命名为“instro”的样式,他适用于HT

ML元素显示红色背景

应用上面的”intro”样式给div,我们可以使用”class”选择

器,如下图所示

My name is Shivprasad koirala

I write interview questions

6、如何使用ID值来应用一个CSS样式?

假设,你有一个HTML段落标签,使用id是”mytext”,就和下面的片段中显示的那样p id='mytext’ThisisHTML interview questions

你可以使用”#“选择器和”id”的名字创建一种样式,并把CSS值应用到段落标签中,因此应用样式到“mytext”元素,我们可以使用”#mytext”,如下所示

7、CSS中使用列布局是什么?

CSS列布局帮助你分割文本变为列,例如考虑下面的杂志新闻在一个大的文本中,但是我们需要在他们之间使用边界划分为3列,这里HTML5的列布局就有所帮助了为了实现列布局我们需要指定以下内容为了实现列布局我们需要指定以下内容·我们需要把text划分为多少列指定列数我们需要使用column-count,对于Chrome和firefox分别需要”webkit”和“moz-column”

CSS和模型是围绕在HTML元素周围的定义Border(边界),padding(内边距)和margin(外边距)的矩形空间Border(边界):定义了元素包含的最大区域,我们能够使边界可见,不可见,定义高度和宽度等;Padding(内边距):定义了边界和内部元素的间距Margin:定义了边界和任何相邻元素的间距例如以下是简单的CSS代码定义了盒子的边界,内边距和外边距值.box{width:200px;border:10pxsolid#99c;padding:20px;margin:50px;}现在如果我们应用了以上的CSS到一个如下显示的DIV标签,你输出将会和下面图形中显示的那样。我已经创建两个测试“Some text”和“Some other text”,因此我们能看到多少margin(外边距)的属性功能

Some text

Some other text

9、你能解释一些CSS3中的文本效果么?

这里面试官期待你回答两个Css的文本效果,以下是两种需要注意的效果阴影文本效果

.specialtext{text-shadow:5px5px5px#FF0000;}

文字包装效果

10、什么是Web Workers?为什么我们需要他们?

考虑以下会执行上百万次的繁重的循环代码

function SomeHeavyFunction()

{for(i=0;i<10000000000000;i++)

x = i +x;}

}

比方说上面的循环代码在HTML按钮点击以后执行,现在这个方法执行是同步的,换句话说这个浏览器必须等到循环完成才能操作

  • apache 安装linux windows 墙头上一根草 apacheinuxwindows
    linux安装Apache 有两种方式一种是手动安装通过二进制的文件进行安装,另外一种就是通过yum 安装,此中安装方式,需要物理机联网。以下分别介绍两种的安装方式     通过二进制文件安装Apache需要的软件有apr,apr-util,pcre  1,安装 apr        下载地址:htt
  • fill_parent、wrap_content和match_parent的区别 Cb123456 match_parentfill_parent
    fill_parent、wrap_content和match_parent的区别:   1)fill_parent   设置一个构件的布局为fill_parent将强制性地使构件扩展,以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。 2) wrap_conte
  • 网页自适应设计 天子之骄 htmlcss响应式设计页面自适应
    网页自适应设计        网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起,更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小,需要设计几套css样式,用js脚本判断窗口大小,选择加载。结构臃肿,加载负担较大。现笔者经过一定时间的学习,有所心得,故分享于此,加强交流,共同进步。同时希望对大家有所
  • [sql server] 分组取最大最小常用sql 一炮送你回车库 SQL Server
    --分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( col1 int, col2 int, Fcount int)insert into tbselect 11,20,1 union allselect 11,22,1 union allselect 1
  • ImageIO写图片输出到硬盘 3213213333332132 javaimage
    package awt; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imagei
  • 自己的String动态数组 宝剑锋梅花香 java动态数组数组
    数组还是好说,学过一两门编程语言的就知道,需要注意的是数组声明时需要把大小给它定下来,比如声明一个字符串类型的数组:String str[]=new String[10];    但是问题就来了,每次都是大小确定的数组,我需要数组大小不固定随时变化怎么办呢?  动态数组就这样应运而生,龙哥给我们讲的是自己用代码写动态数组,并非用的ArrayList 看看字符
  • pinyin4j工具类 darkranger .net
    pinyin4j工具类Java工具类 2010-04-24 00:47:00 阅读69 评论0 字号:大中小 引入pinyin4j-2.5.0.jar包: pinyin4j是一个功能强悍的汉语拼音工具包,主要是从汉语获取各种格式和需求的拼音,功能强悍,下面看看如何使用pinyin4j。 本人以前用AscII编码提取工具,效果不理想,现在用pinyin4j简单实现了一个。功能还不是很完美,
  • StarUML学习笔记----基本概念 aijuans UML建模
    介绍StarUML的基本概念,这些都是有效运用StarUML?所需要的。包括对模型、视图、图、项目、单元、方法、框架、模型块及其差异以及UML轮廓。         模型、视与图(Model, View and Diagram)        &
  • Activiti最终总结 avords Activiti id 工作流
    1、流程定义ID:ProcessDefinitionId,当定义一个流程就会产生。 2、流程实例ID:ProcessInstanceId,当开始一个具体的流程时就会产生,也就是不同的流程实例ID可能有相同的流程定义ID。 3、TaskId,每一个userTask都会有一个Id这个是存在于流程实例上的。 4、TaskDefinitionKey和(ActivityImpl activityId
  • 从省市区多重级联想到的,react和jquery的差别 bee1314 jqueryUIreact
    在我们的前端项目里经常会用到级联的select,比如省市区这样。通常这种级联大多是动态的。比如先加载了省,点击省加载市,点击市加载区。然后数据通常ajax返回。如果没有数据则说明到了叶子节点。   针对这种场景,如果我们使用jquery来实现,要考虑很多的问题,数据部分,以及大量的dom操作。比如这个页面上显示了某个区,这时候我切换省,要把市重新初始化数据,然后区域的部分要从页面
  • Eclipse快捷键大全 bijian1013 javaeclipse快捷键
    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)Alt+En
  • js 笔记 函数 征客丶 JavaScript
    一、函数的使用 1.1、定义函数变量 var vName = funcation(params){ } 1.2、函数的调用 函数变量的调用:      vName(params); 函数定义时自发调用:(function(params){})(params); 1.3、函数中变量赋值 var a = 'a'; var ff
  • 【Scala四】分析Spark源代码总结的Scala语法二 bit1129 scala
    1. Some操作   在下面的代码中,使用了Some操作:if (self.partitioner == Some(partitioner)),那么Some(partitioner)表示什么含义?首先partitioner是方法combineByKey传入的变量, Some的文档说明:   /** Class `Some[A]` represents existin
  • java 匿名内部类 BlueSkator java匿名内部类
    组合优先于继承 Java的匿名类,就是提供了一个快捷方便的手段,令继承关系可以方便地变成组合关系 继承只有一个时候才能用,当你要求子类的实例可以替代父类实例的位置时才可以用继承。   在Java中内部类主要分为成员内部类、局部内部类、匿名内部类、静态内部类。 内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类如同一个人是由大脑、肢体、器官等身体结果组成,而内部类相
  • 盗版win装在MAC有害发热,苹果的东西不值得买,win应该不用 ljy325 游戏applewindowsXPOS
    Mac mini 型号: MC270CH-A RMB:5,688   Apple 对windows的产品支持不好,有以下问题:   1.装完了xp,发现机身很热虽然没有运行任何程序!貌似显卡跑游戏发热一样,按照那样的发热量,那部机子损耗很大,使用寿命受到严重的影响!   2.反观安装了Mac os的展示机,发热量很小,运行了1天温度也没有那么高 &nbs
  • 读《研磨设计模式》-代码笔记-生成器模式-Builder bylijinnan java设计模式
    声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 生成器模式的意图在于将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示(GoF) * 个人理解: * 构建一个复杂的对象,对于创建者(Builder)来说,一是要有数据来源(rawData),二是要返回构
  • JIRA与SVN插件安装 chenyu19891124 SVNjira
    JIRA安装好后提交代码并要显示在JIRA上,这得需要用SVN的插件才能看见开发人员提交的代码。 1.下载svn与jira插件安装包,解压后在安装包(atlassian-jira-subversion-plugin-0.10.1) 2.解压出来的包里下的lib文件夹下的jar拷贝到(C:\Program Files\Atlassian\JIRA 4.3.4\atlassian-jira\WEB
  • 常用数学思想方法 comsci 工作
      对于搞工程和技术的朋友来讲,在工作中常常遇到一些实际问题,而采用常规的思维方式无法很好的解决这些问题,那么这个时候我们就需要用数学语言和数学工具,而使用数学工具的前提却是用数学思想的方法来描述问题。。下面转帖几种常用的数学思想方法,仅供学习和参考   函数思想   把某一数学问题用函数表示出来,并且利用函数探究这个问题的一般规律。这是最基本、最常用的数学方法
  • pl/sql集合类型 daizj oracle集合typepl/sql
    --集合类型 /*   单行单列的数据,使用标量变量   单行多列数据,使用记录   单列多行数据,使用集合(。。。)   *集合:类似于数组也就是。pl/sql集合类型包括索引表(pl/sql table)、嵌套表(Nested Table)、变长数组(VARRAY)等 */ /*     --集合方法 &n
  • [Ofbiz]ofbiz初用 dinguangx 电商ofbiz
    从github下载最新的ofbiz(截止2015-7-13),从源码进行ofbiz的试用 1. 加载测试库 ofbiz内置derby,通过下面的命令初始化测试库 ./ant load-demo (与load-seed有一些区别)   2. 启动内置tomcat ./ant start 或 ./startofbiz.sh 或 java -jar ofbiz.jar &
  • 结构体中最后一个元素是长度为0的数组 dcj3sjt126com cgcc
    在Linux源代码中,有很多的结构体最后都定义了一个元素个数为0个的数组,如/usr/include/linux/if_pppox.h中有这样一个结构体: struct pppoe_tag {     __u16 tag_type;     __u16 tag_len;   &n
  • Linux cp 实现强行覆盖 dcj3sjt126com linux
    发现在Fedora 10 /ubutun 里面用cp -fr src dest,即使加了-f也是不能强行覆盖的,这时怎么回事的呢?一两个文件还好说,就输几个yes吧,但是要是n多文件怎么办,那还不输死人呢?下面提供三种解决办法。 方法一 我们输入alias命令,看看系统给cp起了一个什么别名。 [root@localhost ~]# aliasalias cp=’cp -i’a
  • Memcached(一)、HelloWorld frank1234 memcached
    一、简介 高性能的架构离不开缓存,分布式缓存中的佼佼者当属memcached,它通过客户端将不同的key hash到不同的memcached服务器中,而获取的时候也到相同的服务器中获取,由于不需要做集群同步,也就省去了集群间同步的开销和延迟,所以它相对于ehcache等缓存来说能更好的支持分布式应用,具有更强的横向伸缩能力。 二、客户端 选择一个memcached客户端,我这里用的是memc
  • Search in Rotated Sorted Array II hcx2013 search
    Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this affect the run-time complexity? How and why? Write a function to determine if a given ta
  • Spring4新特性——更好的Java泛型操作API jinnianshilongnian spring4generic type
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装JDK liuxingguome centos
    1、行卸载原来的: [root@localhost opt]# rpm -qa | grep java tzdata-java-2014g-1.el6.noarch java-1.7.0-openjdk-1.7.0.65-2.5.1.2.el6_5.x86_64 java-1.6.0-openjdk-1.6.0.0-11.1.13.4.el6.x86_64 [root@localhost
  • 二分搜索专题2-在有序二维数组中搜索一个元素 OpenMind 二维数组算法二分搜索
    1,设二维数组p的每行每列都按照下标递增的顺序递增。 用数学语言描述如下:p满足 (1),对任意的x1,x2,y,如果x1<x2,则p(x1,y)<p(x2,y); (2),对任意的x,y1,y2, 如果y1<y2,则p(x,y1)<p(x,y2); 2,问题: 给定满足1的数组p和一个整数k,求是否存在x0,y0使得p(x0,y0)=k? 3,算法分析: (
  • java 随机数 Math与Random SaraWon javaMathRandom
    今天需要在程序中产生随机数,知道有两种方法可以使用,但是使用Math和Random的区别还不是特别清楚,看到一篇文章是关于的,觉得写的还挺不错的,原文地址是 http://www.oschina.net/question/157182_45274?sort=default&p=1#answers 产生1到10之间的随机数的两种实现方式: //Math Math.roun
  • oracle创建表空间 tugn oracle
    create temporary tablespace TXSJ_TEMP   tempfile 'E:\Oracle\oradata\TXSJ_TEMP.dbf'   size 32m   autoextend on   next 32m maxsize 2048m   extent m
  • 使用Java8实现自己的个性化搜索引擎 yangshangchuan javasuperword搜索引擎java8全文检索
    需要对249本软件著作实现句子级别全文检索,这些著作均为PDF文件,不使用现有的框架如lucene,自己实现的方法如下: 1、从PDF文件中提取文本,这里的重点是如何最大可能地还原文本。提取之后的文本,一个句子一行保存为文本文件。 2、将所有文本文件合并为一个单一的文本文件,这样,每一个句子就有一个唯一行号。 3、对每一行文本进行分词,建立倒排表,倒排表的格式为:词=包含该词的总行数N=行号