HTML 是一种基本的 WEB 网页设计语言, XHTML 是一个基于 XML 的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素
2、简述一下src与href的区别:
href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
3、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
行内元素: a、b、span、img、input、strong、select、label、em、button、textarea
块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的 HTML元素,例如:br、meta、hr、link、input、img
4、 form 中的 action 属性和 method 属性的含义是什么 ? method 常用值有哪些 ?
action 属性用于指定 form 表单提交的后台程序地址 ; method 属性用于指定 form 表单提交的方法。
method 的常用值有 : get 和 post
5、 表单元素新增的属性有哪些?
required : 必填项目
placeholder : 提示信息 , 点击 input 内容时会消失
pattern: 校验正则表达式
antofocus : 自动获得焦点
aotucomplete: 自动完成
6.向指定服务器提交数据的方法有哪些?
Ajax 表单Form
URL? 参数
AngularJS的$HTTP
JQ Ajax: $.POST(,,) $.GET(,,) $.Ajax({})
JS Ajax: 5步。(参考25题)
7、写一个function,清除字符串前后的空格。(兼容所有浏览器)
function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
}
}
8、如何消除一个数组里面重复的元素?
var arr1 =[1,2,2,2,3,3,3,4,5,6],
var arr2 = [ ];
for(var i = 0; i< arr1.length; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6
9、请描述一下cookies,sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外, Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。
10 、cookie 和session 的区别是什么?
Cookie 保存在客户端本机 ;
Session 保存在服务器端 ;
联系:session 的 id 存在 cookie 中。
11.页面导入样式时,使用 link 和 @import 有什么区别 ?
1 ) .link 属于 XHTML 标签,而 @import 是 CSS 提供的;
2 ) . 页面被加载的时, link 会同事被加载,而 @import 引用的 CSS 会等到页面被加载完再加载;
3 ) .import 只有在 IE5 以上才能被识别,而 link 是 XHTML 标签,无兼容问题 ;
4 ) .link 方式的样式的权重 >@import 的权重
12.简单描述下定位Position:
Relative: 相对定位。相对于自身原有位置定位,原 DOM 空间会保留;
Absolute : 绝对定位。相对于第一个非 static 定位的祖先元素进行定位,会删除原 DOM 空间;
Fixed :固定定位器窗口进行定位; 会删除 DOM 空间
Static : 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
Inherit : 规定从父元素继承 position 属性的值。
13. display 有哪些值?说明他们的作用。
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值
14 、 jquery 中如何将数组转化为 json 字符串,然后再转化回来?
$.parseJSON
$.fn.stringify = function() {
return JSON.stringify(this);
}
使用 : $(array).stringify();
15.JSON 的了解?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于 JavaScript 的一个子集。数据格式简单 , 易于读写 , 占用带宽小
如: {"age":"12", "name":"back"}
JSON 字符串转换为 JSON 对象 :
var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
JSON 对象转换为 JSON 字符串:
var last=obj.toJSONString();
var last=JSON.stringify(obj);
16、 什么是响应式设计?响应式设计的基本原理是什么?
根据不同设备的屏幕大小、分辨率、方向等,统一网站展示为不同效果。
移动优先。可以使用 JS 跳转不同手机站和 PC 站,可以使用 MediaQuery 检测不同设备的属性展示不同的 CSS ,可以使用各种响应式前端框架。
优点:用户体验好,尤其是手机端。
缺点:包含大量冗余代码,开发成本较大 ( 但是远低于开发手机站 +PC 站的模式 )
1 7. visibility : hidden 和 display : none 的区别?
使用 display : none 隐藏以后,元素的空间被释放,其余元素可以占用空间;
使用 visibility : hidden 仅仅是看不见,但是元素的空间依然占据,别的元素无法使用。
18、 列举数组相关的常用方法
push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter
19 、 列举字符串相关的常用方法
indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase
20 、 常见的浏览器内核有哪些?
Trident 内核: IE,MaxThon,TT,The World,360, 搜狗浏览器等。 [ 又称 MSHTML]
Gecko 内核: Netscape6 及以上版本, F ireFox (火狐) ,MozillaSuite/SeaMonkey 等
Presto 内核: Opera7 及以上。 [Opera 内核原为: Presto ,现为: Blink;]
Webkit 内核: Safari (苹果自带的浏览器) ,Chrome (谷歌) 等。 [ Chrome 的: Blink ( WebKit 的分支) ]
21. title 与 h1 的区别、 b 与 strong 的区别、 i 与 em 的区别?
title 属性没有明确意义只表示是个标题, H1 则表示层次明确的标题,对页面信息的抓取也有很大的影响;
strong 是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时: <strong> 会重读,而 <b> 是展示强调内容。
i 内容展示为斜体, em 表示强调的文本;
22 、 网页验证码是干嘛的,是为了解决什么安全问题。
区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水;
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。
23.对前端工程师这个职位你是怎么样理解的 ?
a. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好
b. 参与项目,快速高质量完成实现效果图,精确到1px;
c. 与团队成员,UI设计,产品经理的沟通;
d. 做好的页面结构,页面重构和用户体验;
e. 处理hack,兼容、写出优美的代码格式;
f. 针对服务器的优化、拥抱最新前端技术。
24 、 什么是闭包 (closure), 为什么要用它 ?
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量 , 利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。可以把闭包简单理解成“定义在一个函数内部的函数”
闭包的特性 :
1. 函数内再嵌套函数
2. 内部函数可以引用外层的参数和变量
3. 参数和变量不会被垃圾回收机制回收
//li 节点的 onclick 事件都能正确的弹出当前被点击的 li 索引
<ul id="test">
<li> index = 0</li>
<li> index = 1</li>
<li> index = 2</li>
<li> index = 3</li>
</ul>
<script type="text/javascript">
var nodes = document.getElementsByTagName("li");
for(i = 0;i<nodes.length;i+= 1){
nodes[i].onclick = function(){
console.log(i+1); // 不用闭包的话,值每次都是 4
}(i);
}
</script>
25 、 Ajax 是什么?如何创建一个 Ajax ?
ajax 全称为 : Asynchronous javascript and XML, 即异步的 JavaScript 和 xml , 也称页面无刷技术 。 这里的异步可以简单的理解为 :向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。
如何创建一个 Ajax ?
(1) 创建 XMLHttpRequest 对象 , 也就是创建一个异步调用对象
(2) 创建一个新的 HTTP 请求 , 并指定该 HTTP 请求的方法、 URL 及验证信息
(3) 设置响应 HTTP 请求状态变化的函数
(4) 发送 HTTP 请求
(5) 获取异步调用返回的数据
(6) 使用 JavaScript 和 DOM 实现局部刷新
26. 原生 JS 的 window.onload 与 Jquery 的 $(document).ready(function(){}) 有什么不同?如何用原生 JS 实现 Jq 的 ready 方法?
window.onload() 方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready() 是 DOM 结构绘制完毕后就执行,不必等到加载完毕。
27. (设计题)想实现一个对页面某个节点的拖曳?如何做?(使用原生 JS )
回答出概念即可,下面是几个要点
给需要拖拽的节点绑定 mousedown, mousemove, mouseup 事件
mousedown 事件触发后,开始拖拽
mousemove 时,需要通过 event.clientX 和 clientY 获取拖拽位置,并实时更新位置
mouseup 时,拖拽结束
28 、 apply, call 和 bind 有什么区别 ?
三者都可以把一个函数应用到其他对象上,注意不是自身对象. apply,call 是直接执行函数调用, bind 是绑定,执行需要再次调用.
apply 和 call 的区别是 apply 接受数组作为参数,而 call 是接受逗号分隔的无限多个参数列表,
代码演示
function Person() {
}
Person.prototype.sayName() { alert(this.name); }
var obj = {name: 'michaelqin'}; // 注意这是一个普通对象,它不是Person的实例
1) apply
Person.prototype.sayName.apply(obj, [param1, param2, param3]);
2) call
Person.prototype.sayName.call(obj, param1, param2, param3);
3) bind
var sn = Person.prototype.sayName.bind(obj);
sn([param1, param2, param3]); // bind需要先绑定,再执行
sn(param1, param2, param3); // bind需要先绑定,再执行 29 、 iframe 有那些缺点?
*iframe 会阻塞主页面的 Onload 事件;
* 搜索引擎的检索程序无法解读这种页面,不利于 SEO;
*iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe ,最好是通过 javascript
动态给 iframe 添加 src 属性值,这样可以绕开以上两个问题。
30 、如何解决 ajax 跨域问题?
jsonp 、 iframe 、 window.name 、 window.postMessage 、服务器上设置代理页面
自己的做法 :
jQuery 中 ajax 的使用
$.ajax({
dataType:’jsonp’
})
以上就是xhtml和html有什么区别?的详细内容,更多请关注Gxl网其它相关文章!
查看更多关于xhtml和html有什么区别?的详细内容...