网页设计面试题目

来源：用户分享时间：2025/8/26 16:44:43 本文由

说明：文章内容仅供预览，部分内容可能不全，需要完整文档或者需要复制内容，请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ：xxxxxx 处理（尽可能给您提供完整文档），感谢您的支持与谅解。

一.HTML常用的标签 ..................................................................................................... 1 二。标签的定义与用法 ........................................................................... 5 三。块级元素和行内元素都有哪些 ............................................................................... 5 四。你真的了解HTML吗 ............................................................................................. 6 五。介绍所知道的CSS hack技巧(如：_， *， +， \\9， !important 之类) ........... 6 六。介绍CSS盒模型 .................................................................................................... 11 七。CSS层叠是什么?介绍一下 ................................................................................... 12 八。都知道哪些CSS浏览器兼容性问题 .................................................................... 12 九。CSS3都有哪些新内容 ........................................................................................... 14 十。CSS3有什么效果可以实现的 ............................................................................... 14

一.HTML常用的标签

1、文本标签加粗打印机字体标签

原样输出强调输出斜体显示加粗字体标签 color:控制字体的颜色 size:控制字体的大小斜体显示下划线上标下标 2、段落标签(自动换行)

属性：align=left | center | right 3、换行标签

属性:color=''; width= n px ;size= n px(不是height); 4、列表标签 a)普通列表

列表标题: 列表项

b)无序列表//ul type=circle disc square

列表项

列表项
列表项

c)有序列表 type= a A I i 1 circle disc square

列表项
列表项
列表项

5、图片和链接标签图片：图片没有加载完成是显示的文字链接：链接的文本 target:链接打开的位置_blanck _self _parent _top 返回 6、地图标签地图标签是基于图片的

7、行内修饰符标签 8、实体字符在html中具有特殊含义的字符，例如常见的空格,< > & &#数字; 或者&实体字符名称的; 例如：空格 " # ' \空格 9、html注释 10、绝对路径与相对路径绝对路径：文件的物理路径(即资源管理器上的路径) 相对路径：相对于本页面的路径 /代表根目录 ./代表当前目录 ../代表父级目录 ./../../代表当前目录的父目录的父目录 11、布局标签 1、table 2、iframe 3、frameset、noframeset

4、div(专门学习) 表格标签

显示的内容

属性： border 边框 bgcolor 表格的背景颜色 bordercolor 边框的颜色 cellspacing 单元格之间的距离 cellpaddig 单元格内容与边框之间的距离 width 表格的宽度 height 表格的高度 valign 垂直位置 top|bottom|middle align 水平位置 right|left|center colspan 和并列 rowspan 合并行 frameset标签 frameset实例 <body> <p>您的浏览器不支持框架,请更新您的浏览器</p> </body> <noframes> </frameset> </html> iframe标签 <html> <head> <title>frameset实例</title> </head> <body> <iframe src='文件名路径' width='' height='' scrolling allowTransparency=''><iframe> </body> </html> </p><p> </p><p>frameborder='0px' </p><p>12、居中标签 <center></center> 13、表单标签 <form action='处理表单的数据的页面' enctype='表单数据的编码形式' method='上传数据的方法'> </form> enctype:3中形式 a)multipart/form-data 文件上传必须的 b)text/plain 纯文本形式上传 c)application/x-www-form-urlencoded 经过url编码后上传 method:2中方法 get:我所有数据通过地址栏 post:表单数据通过协议传递 1、<input type='text' size='用户输入的字符个数' maxlength='用户输入的最大个数' /> type: password:密码框 file:文件上传 submit:确定按钮 button:按钮 reset:重置按钮 radio:当选按钮 checkbox:复选按钮 image:图片按钮(同时传递XY轴坐标) hidden:隐藏域,通常用于传递默认值 2、<select></select>下拉列表 <option></option> <option></option>(位于select标签中间) <optgroup></optgroup>(位于select标签中间) 属性:size下拉框的大小 multiple:是否可以多选 option的属性:selected(下拉列表的默认值) value:下拉表的实际值\\ 3、<label></label>文本标签 4、<textarea><textarea> 属性:cols代表列 rows:代表行 5、fieldset标签(写在form标签的外部) <fieldset> <legend>标题<legend> </fieldset> </p><p> </p><p> </p><p> </p><p>二。<!DOCTYPE>标签的定义与用法 </p><p> </p><p><!DOCTYPE html> </p><p>作用就是加了这行网页按xhtml解析，不加则是按html解析。 </p><p>三。块级元素和行内元素都有哪些 </p><p> </p><p>块级元素(block element) div -最常用的块级元素 </p><p>dl - 和dt dd搭配使用的块级元素 form - 交互表单 h1 - 大标题 hr - 水平分隔线 ol - 排序表单 p - 段落 </p><p>ul - 非排序列表 </p><p>内联元素(inline element) a - 锚点 </p><p>b - 粗体(不推荐) br - 换行 em - 强调 </p><p>font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 label - 表格标签 select - 项目选择 small - 小字体文本 </p><p>span - 常用内联容器，定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 </p><p>textarea - 多行文本输入框 tt - 电传文本 u - 下划线 </p><p> </p><p></p><div class="page"><ul><li><a href=c53xk63wo911qw0b8dn6k_1.html class="hover" >1</a></li><li><a href=c53xk63wo911qw0b8dn6k_2.html>2</a></li><li><a href=c53xk63wo911qw0b8dn6k_3.html>3</a></li></ul></div> <script type="text/javascript">s("content-body-bot");</script> </div> <div class="search-more">搜索更多关于： <a class="title2" title="网页设计面试题目" href="sp5du45rlqrkxtwirmdu54nhq_1.html">网页设计面试题目</a> 的文档</div> <div class="down-word"> <div class="word-ico"></div> <div class="word-tit"> <span class="docx" id="82f1a66425c52cc58bd6be9c">网页设计面试题目.doc</span> <span>将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印</span> <span><script type="text/javascript">s("content-down");</script></span> </div> <div class="word-pic"><a rel="nofollow" href="javascript:;">下载这篇word文档</a></div> </div> <div class="show-url">本文链接：<a href="">https://www.diyifanwen.net/c53xk63wo911qw0b8dn6k_1.html</a>（转载请注明文章来源）</div> <script type="text/javascript">s("content-bot");</script> <div class="block7"> <p> 相关推荐： </p> <ul class="box"> <li><a title="网页设计面试题目" href=c53xk63wo911qw0b8dn6k_1.html>网页设计面试题目</a></li><li><a title="人教版八年级地理下册第七章第一节自然特征与农业教案" href=c7dp55572v33ef8l940oa3cwgi893aj006ff_1.html>人教版八年级地理下册第七章第一节自然特征与农业教案</a></li><li><a title="本科华师考试：儿童社会性发展与教育2014.7ok" href=c30mwl3v5gm17c193745n_6.html>本科华师考试：儿童社会性发展与教育2014.7ok</a></li><li><a title="高考语文诗歌鉴赏及阅读题各题型答题技巧" href=c5acxs485ia37lyd0yjbf83hrt8bf8q008oz_1.html>高考语文诗歌鉴赏及阅读题各题型答题技巧</a></li><li><a title="灭火救援员职业技能鉴定考试指导手册(题库)" href=c3gr4d7sv8k7zlrl1bkfq6d7jn4l91z0137c_1.html>灭火救援员职业技能鉴定考试指导手册(题库)</a></li><li><a title="海淀2012年高考一模语文试卷文言文分析" href=c6z4tw51urv9nplw1m1ya_1.html>海淀2012年高考一模语文试卷文言文分析</a></li><li><a title="vray各种材质中英文对照全参数大全 " href=c199tp9ftq25ap1c1kzfj507xn0uyq600qnx_1.html>vray各种材质中英文对照全参数大全 </a></li><li><a title="人教版新目标初中英语语法大全" href=c8gwro78v920fvan2h1n3_1.html>人教版新目标初中英语语法大全</a></li><li><a title="民法典的时代意义(苏永钦)" href=c243fu30fvs4x67j2punf_1.html>民法典的时代意义(苏永钦)</a></li><li><a title="六年级数学培优版" href=c7jyw01vjf57z7sh75m1a072ie1yi3600n0g_11.html>六年级数学培优版</a></li><li><a title="C语言程序设计实验与习题答案" href=c9ja0v9w2sh6u75f0b3w102ra61x73m01dkb_4.html>C语言程序设计实验与习题答案</a></li><li><a title="威斯康星大学麦迪逊分校中文介绍" href=c2plhn7w3e05o77k3183z_2.html>威斯康星大学麦迪逊分校中文介绍</a></li><li><a title="大学英语视听说3听力原文翻译Unit 3精编版" href=c4nwir4q8au7dd7d92wae4uc568cqjj01a5o_2.html>大学英语视听说3听力原文翻译Unit 3精编版</a></li><li><a title="统计学期末复习题库" href=c6jll97ct4a3cwgi88zxy_3.html>统计学期末复习题库</a></li><li><a title="本科华师考试：儿童社会性发展与教育2014.7ok" href=c30mwl3v5gm17c193745n_3.html>本科华师考试：儿童社会性发展与教育2014.7ok</a></li><li><a title="2016年4月计算机应用基础统考题库 - 网考计算机应用基础真题5" href=c20e2s1i8ax423gj8fm50_1.html>2016年4月计算机应用基础统考题库 - 网考计算机应用基础真题5</a></li><li><a title="主城区大气敏感点周边餐饮油烟治理项目招标文件定稿" href=c7txy62hx125kaxd91bwp423gj8gje700l2x_7.html>主城区大气敏感点周边餐饮油烟治理项目招标文件定稿</a></li><li><a title="2015年二建法规真题解析去答案版" href=c19r4z66e375136r5shog_5.html>2015年二建法规真题解析去答案版</a></li><li><a title="Get清风5、学校审计制度" href=c5ttao8jo7g1symv1jox557eja0pqs3006m7_1.html>Get清风5、学校审计制度</a></li><li><a title="企业战略管理论文" href=c1gvfp4eqk6667gj1z1r5_1.html>企业战略管理论文</a></li> <li><a href="https://www.05166.com/" title="六六文库" target="_blank">六六文库网</a></li><li><a href="/cidian/" title="第一汉语词典" target="_blank">第一汉语词典</a></li><li><a href="/chengyu/" title="第一成语大全" target="_blank">第一成语大全</a></li><li><a href="/gushici/" title="第一古诗词大全" target="_blank">第一古诗词大全</a></li> </ul> </div> </div> </div> <div class="right_1"> <div class="u_2"><script type="text/javascript">s("right-1");</script></div> <div class="region2 u_2"> <div class="t_1">综合文库</div> <ul class="menu"> <li><a href="/wenku/youer/">幼儿教育</a></li> <li><a href="/wenku/xiaoxue/">小学教育</a></li> <li><a href="/wenku/gaozhongjiaoyu/">高中教育</a></li> <li><a href="/wenku/chuzhong/">初中教育</a></li> <li><a href="/wenku/gaodengjiaoyu/">高等教育</a></li> <li><a href="/wenku/waiyuxuexi/">外语学习</a></li> <li><a href="/wenku/zigekaoshirenzheng/">资格考试认证</a></li> <li><a href="/wenku/jiaoxueyanjiu/">教学研究</a></li> <li><a href="/wenku/renwensheke/">人文社科</a></li> <li><a href="/wenku/jingguanyingxiao/">经管营销</a></li> <li><a href="/wenku/gongchengkeji/">工程科技</a></li> <li><a href="/wenku/ITjisuanji/">IT计算机</a></li> <li><a href="/wenku/zirankexue/">自然科学</a></li> <li><a href="/wenku/yiyaoweisheng/">医药卫生</a></li> <li><a href="/wenku/nonglinmuyu/">农林牧渔</a></li> <li><a href='/wenku/zonghe/' class='on'>综合文库</a></li> <div class="clear"> </div> </ul> </div> <div class="region2 u_2"> <div class="t_1"> 最新文档 </div> <ul class="block3 u_1"> <li><a title="网页设计面试题目" href=c53xk63wo911qw0b8dn6k_1.html>网页设计面试题目</a></li><li><a title="人教版八年级地理下册第七章第一节自然特征与农业教案" href=c7dp55572v33ef8l940oa3cwgi893aj006ff_1.html>人教版八年级地理下册第七章第一节自然特征与农业教案</a></li><li><a title="本科华师考试：儿童社会性发展与教育2014.7ok" href=c30mwl3v5gm17c193745n_6.html>本科华师考试：儿童社会性发展与教育2014.7ok</a></li><li><a title="高考语文诗歌鉴赏及阅读题各题型答题技巧" href=c5acxs485ia37lyd0yjbf83hrt8bf8q008oz_1.html>高考语文诗歌鉴赏及阅读题各题型答题技巧</a></li><li><a title="灭火救援员职业技能鉴定考试指导手册(题库)" href=c3gr4d7sv8k7zlrl1bkfq6d7jn4l91z0137c_1.html>灭火救援员职业技能鉴定考试指导手册(题库)</a></li><li><a title="海淀2012年高考一模语文试卷文言文分析" href=c6z4tw51urv9nplw1m1ya_1.html>海淀2012年高考一模语文试卷文言文分析</a></li><li><a title="vray各种材质中英文对照全参数大全 " href=c199tp9ftq25ap1c1kzfj507xn0uyq600qnx_1.html>vray各种材质中英文对照全参数大全 </a></li><li><a title="人教版新目标初中英语语法大全" href=c8gwro78v920fvan2h1n3_1.html>人教版新目标初中英语语法大全</a></li><li><a title="民法典的时代意义(苏永钦)" href=c243fu30fvs4x67j2punf_1.html>民法典的时代意义(苏永钦)</a></li><li><a title="六年级数学培优版" href=c7jyw01vjf57z7sh75m1a072ie1yi3600n0g_11.html>六年级数学培优版</a></li> </ul> </div> <div class="region2 u_2"> <div class="t_1"> 热门推荐 </div> <div class="block3"> <script type="text/javascript">s("right-2");</script> </div> </div> <div class="region2 u_2"> <div class="t_1"> 热门排行 </div> <ul class="block1"> <li><a title="2014年度成本会计试题及答案" href="s01e01c01d01ginoip2jdckdofmirkxrmdu54gjuod0klk_1.html">2014年度成本会计试题及答案</a></li><li><a title="2020-2020高考英语试题分类解析01:冠词名词和主谓一" href="s01e01c01e01c01901e01c01e01cul4pabpv5rn1rmdu54g7aol7r8jkgg01c01d01mg4grm5glprm5gp8fgbro3feo_1.html">2020-2020高考英语试题分类解析01:冠</a></li><li><a title="新版部编版三年级上册语文课内外阅读理解专项练习题及答案" href="sk34mkosmgp3qmkofexinop0nfeyg3wrn1k1zrnig3phlitmtrnfmx2r8jff7u49p1ffhcu54gjuod0klk_1.html">新版部编版三年级上册语文课内外阅读理解专项练习</a></li><li><a title="本科华师考试：儿童社会性发展与教育2014.7ok" href="skdoo29ggeikopabrmd01mg1ro9xny6fmiizrgk1i8lff2k0ppf601e01c01d01g01a01j03302z_1.html">本科华师考试:儿童社会性发展与教育2014.7</a></li><li><a title="五金模具折弯成型教程" href="sfisssxkypg3bjh4isvjdchajk0po3v_1.html">五金模具折弯成型教程</a></li><li><a title="寝室美化大赛主持稿" href="si59i3op72geuhlzrx7fgbjk1o5b_1.html">寝室美化大赛主持稿</a></li><li><a title="月季栽培管理要点docx" href="skcoi1vkl9hdlof5mx2r5tm9l02s03302r03c_1.html">月季栽培管理要点docx</a></li><li><a title="桥梁日常巡查及巡查表" href="skmdkn5k4lim0ijlkitgjuijlkitqy0_1.html">桥梁日常巡查及巡查表</a></li><li><a title="苹果电脑使用启动u盘装win7系统图文教程" href="spvdkgsn5hphtfpbn54gmngbs039nh4r0l03b02x03201joorp27h6mk1zk0po3v_1.html">苹果电脑使用启动u盘装win7系统图文教程</a></li><li><a title="统计学期末复习题库" href="sp27rkxi1ykdbkdnhl9fhcu54ioj_1.html">统计学期末复习题库</a></li> </ul> </div> <div class="u_2"><script type="text/javascript">s("right-3");</script></div> </div> <div class="clear"> </div> </div> <div class="sidebar word-pic"><a href="javascript:;" class="copy-fullpage"><span>一键复制全文</span></a><a href="javascript:;" class="sidedown dl-link"><span>下载文档</span></a></div>    <div class="codelogin-mask"></div> <div class="service-mask"></div> <div class="theme-popover-mask"></div> <div class="theme-popover-mask"></div> <script type="text/javascript"> $(".pay1 img").click(function () { $(".wxpay").css("display", "block"); $(".alipay").css("display", "none"); $(".pay1 img").addClass("over"); $(".pay2 img").removeClass("over"); }); $(".pay2 img").click(function () { $(".wxpay").css("display", "none"); $(".alipay").css("display", "block"); $(".pay1 img").removeClass("over"); $(".pay2 img").addClass("over"); }); </script> <script type="text/javascript"> $(document).ready(function ($) { $(".word-pic a").click(function () { location.href = '/d.asp?id=53xk63wo911qw0b8dn6k&p=1' // $(".theme-popover-mask").fadeIn(200); // $(".theme-popover").slideDown(200); // $.ajax({ // type: "POST", // dataType: "json", // url: "/user/check_rank.php", // data: {"aid": "{dede:field.id/}"}, // async: false, // success: function (data, textStatus, jqXHR) { // location.href = '/d.asp?id=53xk63wo911qw0b8dn6k&p=1' // if (data.code === "2") { // //游客 // $(".vip-up").hide(); // $(".vip-pay").hide(); // var downid = "{dede:field.id/}" // $(".wxpay a").click(function(){ // var payurl = "/hupipay/payment_pay_tz.php?payway=wx&aid="; // payurl = payurl.replace("payment", "youke"); // var gotourl = payurl + downid // location.href = gotourl; // }); // $(".alipay a").click(function(){ // var payurl = "/hupipay/payment_pay_tz.php?payway=ali&aid="; // payurl = payurl.replace('payment', 'youke'); // var gotourl = payurl + downid // location.href = gotourl; // }); // } else if (data.code === "3") { // $(".theme-popover .theme-poptit b").text("会员快捷下载通道"); // //注册会员 // $(".guest-pay").hide(); // $(".vip").hide(); // $(".vip-pay").show(); // $(".vip-up").show(); // var downid = "{dede:field.id/}" // $(".wxpay a").click(function(){ // var payurl = "/hupipay/payment_get.php?version=1.1&paymethod=2&pid="; // payurl = payurl.replace("payment", "pay"); // var gotourl = payurl + downid // location.href = gotourl; // }); // $(".alipay a").click(function(){ // var payurl = "/hupipay/payment_get.php?version=1.1&paymethod=3&pid="; // payurl = payurl.replace("payment", "pay"); // var gotourl = payurl + downid // location.href = gotourl; // }); // } else if (data.code === "5") { // layer.alert("今日下载次数已用完！请明日再来！您可以升级会员增加下载次数！", {icon: 2}); // } else if (data.code === "6") { // layer.alert("VIP会员已到期！请及时续费！", {icon: 2}); // } else { // location.href = "/plus/d.php?id={dede:field.id/}"; // } // } // }); }) // $(".theme-poptit .close").click(function () { // $(".theme-popover-mask").fadeOut(200); // $(".theme-popover").slideUp(200); // }) }) </script> <script type="text/javascript"> // $(document).ready(function ($) { // $.ajax({ // type: "POST", // dataType: "json", // data: {"aid": ""}, // url: "/user/check_level.php", // async: false, // success: function (data, textStatus, jqXHR) { // if (data.code === "2" || data.code === "3") { // $(document).keydown(function (e) { // if (e.ctrlKey && (e.keyCode == 65 || e.keyCode == 67)) { // $(".theme-popover-mask").fadeIn(100); // $(".theme-popover").slideDown(200); // } // }); // document.body.oncopy = function () { // $(".theme-popover-mask").fadeIn(200); // $(".theme-popover").slideDown(200); // return false; // } // } // } // }) // }) </script> <script type="text/javascript"> // $(".service a").click(function () { // $(".service-mask").fadeIn(200); // $(".service-box").slideDown(200); // $(".theme-popover-mask").fadeOut(200); // $(".theme-popover").slideUp(200); // }); // $(".service-tit .close").click(function () { // $(".service-mask").fadeOut(200); // $(".service-box").slideUp(200); // }); // $("#vip-buy a").click(function () { // $(".codelogin-mask").fadeIn(200); // $(".codelogin-box").slideDown(200); // $(".theme-popover-mask").fadeOut(200); // $(".theme-popover").slideUp(200); // }); // $(".codelogin-tit .close").click(function () { // $(".codelogin-mask").fadeOut(200); // $(".codelogin-box").slideUp(200); // }); </script>   <script type="text/javascript"> // $(function() { // //微信登录 // var obj = new WxLogin({ // self_redirect: false, // id: "codeLogin", // appid: "wxc14721457b782a70", // scope: "snsapi_login", // redirect_uri: encodeURIComponent("https://www.diyifanwen.net/plus/wx_login.php"), // state: "https://www.diyifanwen.net", // style: "", // href: "https://www.diyifanwen.net/style/css/wxlogin.css" // }); // }) </script> <div class="foot">Copyright © 2012-2023 第一范文网版权所有 <a href="https://www.diyifanwen.net/about/disclaimer.html" target="_blank" rel="nofollow">免责声明</a> | <a href="https://www.diyifanwen.net/about/contact.html" target="_blank" rel="nofollow">联系我们</a><br/> 声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/> 客服QQ：xxxxxx 邮箱：xxxxxx@qq.com<br/> <a href="//www.beian.miit.gov.cn/" target="_blank">渝ICP备2023013149号</a> </div> <a href="#0" class="cd-top">Top</a> <script type="text/javascript" src="/style/js/jquery.min.js"></script> <script type="text/javascript"> $(".right-tag a").each(function(){$(this).addClass("tags"+(Math.floor(Math.random()*9)+1));}); $(function(){var c=$("#FontSizeBtn i"),a=$(".art_body");c.click(function(){var b=$(this).index();0==b&&a.css("font-size","18px");1==b&&a.css("font-size","16px");2==b&&a.css("font-size","14px");c.removeClass("active");$(this).addClass("active")})}); </script> <script type="text/javascript"> function search() { var q = document.getElementById("q").value; window.location.href = "/search/"+q+".html"; } function enterIn(obj,evt) { var evt = evt ? evt : (window.event ? window.event : null); if (evt.keyCode == 13) { var q = obj.value; window.location.href = "/search/"+q+".html"; } } </script>  <script type="text/javascript"> $(function () { $(".user-box").hover(function () { $(".drop-menu").stop(true, true).fadeIn(0); }, function () { $(".drop-menu").fadeOut(500, function () { $(".drop-menu").css("display", "none"); }); }); }); </script> <script> //首页分类 $('.nav_list li').hover(function() { $(".nav_list > li > div ").css('display', 'none'); $(this).children("div").show(); }, function() { $(".nav_list > li > div ").css('display', 'none'); }); //分类下拉 $(function() { $(".nav.down").hover(function() { $(".nav.down > ul").fadeIn("slow"); $(".nav.down > ul").css('display', 'block'); }, function() { $(".nav.down > ul").css('display', 'none'); }); }); $(document).on("keydown", function(e) { if (e.keyCode == 13 && $("#txt_search").is(":focus")) { $("#search_button").click(); } }); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1e9741f8c1b2df70963b3e7f3680f749"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>