网页设计面试题目

来源：用户分享时间：2025/11/28 11:57:10 本文由

说明：文章内容仅供预览，部分内容可能不全，需要完整文档或者需要复制内容，请下载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=c2ljia00j2s8n6j4879hw6x2111f27v00bc7_1.html>职场模拟大赛策划书</a></li><li><a title="最新电大土木工程本《建筑结构试验》01任务答案" href=c5sz0a2dyqa4bptb11x4w7g2499ip7300mml_1.html>最新电大土木工程本《建筑结构试验》01任务答案</a></li><li><a title="2019年度考核表个人总结4篇" href=c01dp91falm3cwgi893aj3uh255c6oi00c8o_1.html>2019年度考核表个人总结4篇</a></li><li><a title="1 教师招聘考试小学科学习题集" href=c2pdn48a8826o2vt5kycu_5.html>1 教师招聘考试小学科学习题集</a></li><li><a title="网页设计面试题目" href=c53xk63wo911qw0b8dn6k_1.html>网页设计面试题目</a></li><li><a title="小四班社会安全预案" href=c7yrgu98ito9o8y29wt5t6vudb8bhn000z8s_1.html>小四班社会安全预案</a></li><li><a title="中小学生必考的英语单词系统分类终" href=c1xj134j1ie17c19373fh7l7tx29ybm00g5e_10.html>中小学生必考的英语单词系统分类终</a></li><li><a title="哈佛商学院要求学生必看的20部商业电影 - 黄玉玺老师推荐 - 图文" href=c0yy562vxon207lr1babk_5.html>哈佛商学院要求学生必看的20部商业电影 - 黄玉玺老师推荐 - 图文</a></li><li><a title="110kv变电站施工组织设计方案(完整版)" href=c0yzwr2un529kcek7hm3l8mqar1rud1013b4_5.html>110kv变电站施工组织设计方案(完整版)</a></li><li><a title="课堂新坐标2016 - 2017学年高中数学第1章推理与证明1.1.1归纳推理学" href=c37old210zz9x6b742rz56u75f0b3w101d70_2.html>课堂新坐标2016 - 2017学年高中数学第1章推理与证明1.1.1归纳推理学</a></li><li><a title="人教新版英语6年级上册课文中文翻译" href=c7fpqm0lpv61wxgu8jpt1_7.html>人教新版英语6年级上册课文中文翻译</a></li><li><a title="《高等数学（二）》专升本考试大纲" href=c6oixj4l8n46i8ss1cmuw_1.html>《高等数学（二）》专升本考试大纲</a></li><li><a title="基于单片机的心电监测系统设计" href=c5i1s41jeyd6ehs64cpg7_5.html>基于单片机的心电监测系统设计</a></li><li><a title="成人高考专升本教育理论心理学复习资料" href=c5tx6c0pn3c5o77k30e8m0fvqu4yw9b00pc8_1.html>成人高考专升本教育理论心理学复习资料</a></li><li><a title="生态农业旅游休闲观光园项目可行性研究报告" href=c9vecv8klf54zk8m0hvkq6k2tg1xu6l00s2x_3.html>生态农业旅游休闲观光园项目可行性研究报告</a></li><li><a title="基于单片机的心电监测系统设计-贺州学院本科毕业论文(设计)" href=c9ocsj4abee6d7jn4l8uv58u602x74s012ot_8.html>基于单片机的心电监测系统设计-贺州学院本科毕业论文(设计)</a></li><li><a title="塔群施工方案" href=c3io2x416gx02tjb2ixwe3xy6q955i0014rp_3.html>塔群施工方案</a></li><li><a title="中国式食物结构养生方案之五菜为充" href=c5v1gx6ed617e16g2fc3b_1.html>中国式食物结构养生方案之五菜为充</a></li><li><a title="精选工作自我鉴定模板锦集十篇" href=c28y755kdt557eja0pqkz5136q5t3m0006qe_1.html>精选工作自我鉴定模板锦集十篇</a></li><li><a title="建筑电气专业考试卷 - 图文 " href=c0opj89hw4s0mq5e7eayt5nd0e7n2rf017er_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=c54n0s1pn7h5uqa87qs2o_1.html>犀牛入门简易教程（讲义） - 图文 </a></li><li><a title="管理会计习题" href=c0ek2b1tyk33j4le875q7_2.html>管理会计习题</a></li><li><a title="塔群施工方案" href=c3io2x416gx02tjb2ixwe3xy6q955i0014rp_3.html>塔群施工方案</a></li><li><a title="神游之旅高中作文高中作文" href=c8s67181zxu1wxgu8k8be9y6ym8c7hv00mvj_1.html>神游之旅高中作文高中作文</a></li><li><a title="台式电脑主板IO和电源芯片测试脚位表" href=c1yib31y9b56vuda8cer2_1.html>台式电脑主板IO和电源芯片测试脚位表</a></li><li><a title="冀教版小学音乐二年级上册教案（2000字）" href=c2fppn1wvp19jajq89mfb_10.html>冀教版小学音乐二年级上册教案（2000字）</a></li><li><a title="采访提纲(范例10篇)全面版" href=c5rcfo8ykbt1h1yk7phhy1xkfw968ko01azx_1.html>采访提纲(范例10篇)全面版</a></li><li><a title="班主任工作理论试题非常全" href=c9ahri7smf16c4ro7popn_7.html>班主任工作理论试题非常全</a></li><li><a title="以果蝇为素材考题" href=c4md3u1n8c9036aw5ujxo_1.html>以果蝇为素材考题</a></li><li><a title="企业文化手册编制方案" href=c0g6k09l8m235m4y31ezc5v45r56fh10092n_1.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="海康威视智能化小区安防系统解决实施方案_DVR+综合平台" href="slmfipjhs1r7qk8qph9geui6ngfui2xto2oorp27r8jg4zi3ik3hk3dklk02n01w02e02a017p30glkinngkw_1.html">海康威视智能化小区安防系统解决实施方案_DVR</a></li><li><a title="医疗器械经营企业管理制度" href="sgfvn87h2gkogp1rq3pfltffeof5mx2g8mip2_1.html">医疗器械经营企业管理制度</a></li><li><a title="两篇2020年某银行警示教育学习心得体会稿合编" href="sffoog701e01c01e01cinoki8tfaqx8rjany2k0ppf6i1yfhciwzivrfo3fmio5bglkp3q_1.html">两篇2020年某银行警示教育学习心得体会稿合编</a></li><li><a title="幼儿园征文:远离电子产品养成良好习惯" href="sinwg1rh65iv5k1z01msf0o1nn5hi1cfjbgqp00wg3fjdcprjhodfhcj5b_1.html">幼儿园征文:远离电子产品养成良好习惯</a></li><li><a title="2020-2021学年江苏省中考英语一模" href="s01e01c01e01c01901e01c01e01di1yinolenpu7ni9ffxpabpv5rn1feokyp_1.html">2020-2021学年江苏省中考英语一模</a></li><li><a title="2007-2008(1)期末考试试卷(B" href="s01e01c01c01j01901e01c01c01k01401d015kdbkdnpabrmdrmdghj01401u_1.html">2007-2008(1)期末考试试卷(B</a></li><li><a title="数控机床的定位精度检测方式" href="sk1cjonke2ioanesi3efnxon2ip2kowll7k3dirz_1.html">数控机床的定位精度检测方式</a></li><li><a title="00263外国法制史_202010_试卷" href="s01c01c01e01i01fhlih6llhxg8mgky02n01e01c01e01c01d01c02nrmdghj_1.html">00263外国法制史_202010_试卷</a></li><li><a title="(3份试卷汇总)2019-2020学年山东省名校物理八年级(" href="s01401fflprmdghjldzj0b01501e01c01d01l01901e01c01e01ci1yinoi9dffgni9glpkkhmllmx2g2zinop0n014_1.html">(3份试卷汇总)2019-2020学年山东省名</a></li><li><a title="小升初字义专题" href="si6ngg7g7xi1jfgpff7u54_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>