网页设计面试题目

一.HTML常用的标签.....................................................................................................1二。!DOCTYPE标签的定义与用法...........................................................................5三。块级元素和行内元素都有哪些...............................................................................5四。你真的了解HTML吗.............................................................................................6五。介绍所知道的CSShack技巧(如：_，*，+，\9，!important之类)...........6六。介绍CSS盒模型....................................................................................................11七。CSS层叠是什么?介绍一下...................................................................................12八。都知道哪些CSS浏览器兼容性问题....................................................................12九。CSS3都有哪些新内容...........................................................................................14十。CSS3有什么效果可以实现的...............................................................................14一.HTML常用的标签1、文本标签b/b加粗tt/tt打印机字体标签pre/pre原样输出em/em强调输出斜体显示strong/strong加粗font/font字体标签color:控制字体的颜色size:控制字体的大小i/i斜体显示u/u下划线sup/sup上标sub/sub下标2、段落标签(自动换行)p/p属性：align=left|center|right3、换行标签br/hr/属性:color='';width=npx;size=npx(不是height);4、列表标签a)普通列表dldt列表标题/dtdd列表项/dd/dlb)无序列表//ultype=circlediscsquareulli列表项/lili列表项/lili列表项/li/ulc)有序列表type=aAIi1circlediscsquareolli列表项/lili列表项/lili列表项/li/ol5、图片和链接标签图片：imgsrc='图片的位置'alt='图片没有加载完成是显示的文字'width=''height=''border='设置图片的边框'/链接：ahref='链接的地址'title='鼠标移动到文字上的提示信息'链接的文本/atarget:链接打开的位置_blanck_self_parent_topaname='flag'/aahref='#flag'返回/a6、地图标签地图标签是基于图片的imgsrc=''usemap='#map名称'mapname='map名称'areashape='circle|rect'coords='坐标'href='链接地址'/area//map7、行内修饰符标签span/span8、实体字符在html中具有特殊含义的字符，例如常见的空格,&&#数字;或者&实体字符名称的;例如： 空格"#'&空格9、html注释!--注释的html内容--10、绝对路径与相对路径绝对路径：文件的物理路径(即资源管理器上的路径)相对路径：相对于本页面的路径/代表根目录./代表当前目录../代表父级目录./../../代表当前目录的父目录的父目录11、布局标签1、table2、iframe3、frameset、noframeset4、div(专门学习)表格标签tabletrtd显示的内容/td/tr/table属性：border边框bgcolor表格的背景颜色bordercolor边框的颜色cellspacing单元格之间的距离cellpaddig单元格内容与边框之间的距离width表格的宽度height表格的高度valign垂直位置top|bottom|middlealign水平位置right|left|centercolspan和并列rowspan合并行frameset标签htmlheadtitleframeset实例/title/headframesetcols='20%,80%'rows='20%,30%,*'border='0px'framesrc='包含的文件名'scrollingnoresizename=''framesrc='包含的文件名'scrollingnoresizename=''noframesbodyp您的浏览器不支持框架,请更新您的浏览器/p/bodynoframes/frameset/htmliframe标签htmlheadtitleframeset实例/title/headbodyiframesrc='文件名路径'width=''height=''scrollingframeborder='0px'allowTransparency=''iframe/body/html12、居中标签center/center13、表单标签formaction='处理表单的数据的页面'enctype='表单数据的编码形式'method='上传数据的方法'/formenctype:3中形式a)multipart/form-data文件上传必须的b)text/plain纯文本形式上传c)application/x-中方法get:我所有数据通过地址栏post:表单数据通过协议传递1、inputtype='text'size='用户输入的字符个数'maxlength='用户输入的最大个数'/type:password:密码框file:文件上传submit:确定按钮button:按钮reset:重置按钮radio:当选按钮checkbox:复选按钮image:图片按钮(同时传递XY轴坐标)hidden:隐藏域,通常用于传递默认值2、select/select下拉列表option/optionoption/option(位于select标签中间)optgroup/optgroup(位于select标签中间)属性:size下拉框的大小multiple:是否可以多选option的属性:selected(下拉列表的默认值)value:下拉表的实际值\3、label/label文本标签4、textareatextarea属性:cols代表列rows:代表行5、fieldset标签(写在form标签的外部)fieldsetlegend标题legend/fieldset二。!DOCTYPE标签的定义与用法!DOCTYPEhtml作用就是加了这行网页按xhtml解析，不加则是按html解析。三。块级元素和行内元素都有哪些块级元素(blockelement)div-最常用的块级元素dl-和dtdd搭配使用的块级元素form-交互表单h1-大标题hr-水平分隔线ol-排序表单p-段落ul-非排序列表内联元素(inlineelement)a-锚点b-粗体(不推荐)br-换行em-强调font-字体设定(不推荐)i-斜体img-图片input-输入框label-表格标签select-项目选择small-小字体文本span-常用内联容器，定义文本内区块strike-中划线strong-粗体强调sub-下标sup-上标textarea-多行文本输入框tt-电传文本u-下划线四。你真的了解HTML吗有这么一段HTML，请挑毛病：P  哥写的不是HTML，是寂寞。brbr  我说：br不要迷恋哥，哥只是一个传说对原题改进的结果：html4.01:p哥写的不是HTML，是寂寞。p我说：br不要迷恋哥，哥只是一个传说xhtml1.0:p哥写的不是HTML，是寂寞。/pp我说：br/不要迷恋哥，哥只是一个传说/p加分：p哥写的不是HTML，是寂寞。p我说：brq不要迷恋哥，哥只是一个传说/q五。介绍所知道的CSShack技巧(如：_，*，+，\9，!important之类)1.区别IE6与Firefox程序代码background:orange;*background:blue;2.区别IE6与IE7程序代码background:green!important;background:blue;3.区别IE7与Firefox程序代码background:orange;*background:green;4.区别Firefox、IE7、IE6程序代码background:orange;*background:green!important;*background:blue;5.分别针对Firefox、IE8、IE7和IE6显示值程序代码selector{property:value;/*所有浏览器*/property:value\9;/*所有IE浏览器*/+property:value;/*IE7*/_property:value;/*IE6*/}IE都能识别*，标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别!important；IE7能识别*，也能识别!important；FF不能识别*，但能识别!important；于是大家还可以这样来区分IE6，IE7，Firefox:程序代码background:orange;*background:green;_background:blue;不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。以下两种方法几乎能解决现今所有HACK1-!important随着IE7对!important的支持,!important方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)程序代码#wrapper{width:100px!important;/*IE7+FF*/width:80px;/*IE6*/}2-IE6/IE77对FireFox*+html与*html是IE特有的标签，Firefox暂不支持。而*+html又为IE7特有标签。注意:*+html对IE7的HACK必须保证HTML顶部有如下声明：程序代码!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01