web前端面试题总结(day1)

本文探讨了HTML语义化的重要性,包括如何选择合适的标签以增强代码的可读性和可维护性,以及如何在不牺牲功能性的前提下提升用户体验。文章还详细介绍了在HTML编码中应遵循的最佳实践,如合理使用特定标签、避免使用纯样式标签以及正确使用表单和列表标签。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.用于加亮文本的标签是   

<mark>

2.什么是HTML语义化?

<基本上都是围绕着几个主要的标签,想标签(H1~H6)、列表(li)、强调(strong em)等等>

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。

3.为什么要语义化?

为了在没有CSS的情况下,页面呈现出很好地内容结构、代码结构:为了裸奔时好看;

用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;

有利用SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

4.写HTML代码时应注意什么?

尽可能少的使用无语义的标签div和span;

在语义不显示时,既可以使用div或者p时,尽量用p,因为p在默认情况下有上下间距,对兼容特殊终端有利;

不要使用纯样式标签,如:b、font、u等,改用css设置。

需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);

使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

表单域要用fieldset标签包起来,并用legend标签说明表单的用途;

每个input标签对应的说明文本都需要使用lable标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

5.在不改变元素的显示属性的情况下,元素都是可以设置宽度的,并且能够设置成功,这句话是错误的。

6.<svg>标签的目的是什么?

用可伸缩矢量图来画图或文本。

7.在css3中要使元素由一种样式转换成另一种样式,为元素添加效果的属性是?

transform

8.读取localStorage数据的方法是:

localStorage.getItem("键名");

9.写入字段有三种方式:

localStorage["a"]=1;

localStorage.b=1;

localStorage.setltem("c",3);

读取字段的三种方式:

var a = localStorage.a;

var b = localStorage["b"];

var c = localStorage.getltem("c");

10.localstorage的使用

1.获取对象          var localstroage = window.localStorage;

2.存储值             localstroage.setItem('openid','ksjhfkjajkdfjkszdjfksad');    localstroage.setItem('uid','10001');  

3.获取值             var openid = localstroage.getltem('openid');

4.删除某个值       localstroage.removeltem('openid');

5.删除所有值       localstroage.clear();

6.遍历所有键值     localStorage.uid = 1;  localStorage.sex='nan';   localStorage.age = 23;

                             for( var i = 0, len = localStorage.length; i<len; ++i){

                             console.log( localStorage.key(i)+'.'+localStorage.getltem( localStorage.key(i) ) ) ; }

注意:1.如果不主动删除localstorage是不会自动清空的 不会像cookie一样清除     

           2.localstorage几乎支持大部分浏览器 不用考虑IE8的问题 大小为5M

11.以下正确表示10^2的是

10<sup>2</sup>

包含在<sup>标签和其结束标签</sup>中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

<sup></sup>上标文本

<sub></sub>下标文本

<mark></mark>突出显示

12. e.stopPropagation()  此操作是W3C标准定义的阻止事件向父容器传递

13.在HTML5中,getCurrentPosition()  用于获得用户的当前位置

14.关于HTTP协议,下面哪个说法是正确的?(C)

   A.  HTTP协议是有状态协议。

   B.  以下是一个Http链接的response的响应头:GET /xxx/xxx/js/lib/test.js HTTP/1.1 Host: 127.0.0.1 Connection: keep-alive             Pragma: no-cache Cache-Control: no-cache Accept: */*

   C. RESTful 接口中,利用HTTP协议的method字段来描述要对资源操作的方式,比如 GET 表示获取资源,POST 表示新增一个资源,PUT 表示更新资源,DELETE 表示删除资源等等。

   D.一个HTTP请求返回的HTTP状态码中,304表示临时重定向。

       A错误,http是无状态的

       B错误,后面的是request头

       C正确,GET表示获取资源,POST表示新增一个资源,PUT表示更新资源,DELETE表示删除资源等等

       D错误,状态码304表示:如果客户端发送了一个带条件的GET请求且该请求已被允许,二文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。

15.关于bootstrap3,错误的是  (B)

   A.在Windows上支持IE8;

   B.在IOS上支持Opera;

   C.MAC os及Windows上支持Firefox

   D.IOS及Android上都支持Chrome

16.iframe的使用场景有?

与第三方域名下的页面共享cookie

上传图片,避免当前页刷新

左边固定右边自适应的布局

资源加载

iframe可用在以下几个场景中:

1:典型系统结构,左侧是功能树,右侧就是一些常见的table或者表单之类的。为了每一个功能,单独分离出来,采用iframe。

2:ajax上传文件。

3:加载别的网站内容,例如Google广告,网站流量分析。

4:在上传图片时,不用flash实现无刷新。

5:跨域访问的时候可以用到iframe,使用iframe请求不同域名下的资源。

17.<input>元素的type属性的取值可以是

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值