HTML面试知识点
目录
DOCTYPE的作用?
位于文档的最前面,告知浏览器以何种方式来渲染页面。
参考链接
HTML5
新特性
- 标签方面(参考资料)
- 语义化标签:
header,nav,main,artical,section,aside,footer
- 输入表单类型:
color,calander,date,time,email,url,search
- 语义化标签:
- 多媒体方面(参考资料)
audio,video,source,embed,track
- 存储方面
- 其他:
移除的标签
- 纯表现的元素:
basefont,font,center,u,big,strike,tt
- 框架集:
frameset,noframes,frame
语义化
不同的标签有自己的含义,根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。
有何优点?
- 页面代码结构清晰,可读性好。
- 便于其他设备(屏幕阅读,盲人阅读器,移动设备)以语义的方式来渲染网页。
- 有利于搜索引擎优化(SEO)。
如何做?
- 根据内容的语义,选择合适的标签;
- 减少无意义的标签,如div和span;
- 不使用
b,font,u,i,center
等纯样式标签,推荐使用CSS控制样式; - 使用
strong,em
标签表示强调文本,而不使用同样功能的b,i
;参考资料 - 使用表格时,标题用 caption,表头用 thead,主体部分用 tbody 包围,尾部用 tfoot 包围。表头和一般单元格要区分开,表头用 th,单元格用 td;
- 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
HTML和XHTML的区别
定义:HTML(超文本标记语言)、XHTML(可扩展超文本标记语言)
- XHTML所有标签和属性的名字必须为小写;
- XHTML所有标签必须要有结束标记;
- XHTML标签必须正确嵌套,嵌套顺序必须正确;
- XHTML必须有根元素;
- XHTML所有属性必须使用引号括起来;
- XHTML中
<
、>
、&
等特殊符号用编码表示; - XHTML中的文档用id属性代替name属性;
- XHTML属性值不能简写
src和href的区别
- 处理结果不同:src会将指向的资源下载并替代这个元素签入文档中,href只是用于建立这个标签(锚点)与引用资源的联系。
- 浏览器处理不同:src会阻塞其他资源的下载和处理,知道该资源加载编译执行完毕,href会并行下载资源且不会停止对当前文档的处理。
title和alt的区别
- title既是标签,又是属性,作为属性时,用来为元素提供额外的说明信息。
- alt是属性,用于网页中图片无法显示时给用户提供的文字说明。
如何解决html5新标签与浏览器兼容性问题
- 使用document.createElement创建标签
- 使用html5shim,在页面的head部分添加框架的引用:
<!--if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
- 使用Kill IE6
<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
行内元素、块元素、空元素有哪些?
- 行内元素:多为描述性标记,如:
a,b,span,img,input,strong,label,em
- 块元素:多为结构性标记,如:
h1~h6,div,p,ul,li
- 空元素:为没有内容的标记,如:
br,hr,meta,img,link
meta标签
meta标签有4个属性,在head标签中可以添加多个meta标签。
- charset属性:用于声明页面的字符集编码,一般为
utf-8
; - http-equiv属性:定义这个属性会添加到http头部,可用于刷新重定向和设置Cookie等操作,与content属性结合使用;
- name属性:用于描述网页,比如网页的关键字,描述等,与content属性结合使用。常用属性有(1-3):
- keywords:关键字,用于告诉搜索引擎,网页的关键字。
- description:描述,用于告诉搜索引擎,网页的主要内容。
- viewport:移动端网页相关设置。
- author:作者,用于告诉搜索引擎,网页的作者。
- copyright:版权信息。
web标准和W3C标准是什么?
- web标准:将结构、表现、行为分离,使网站的结构清晰,易于阅读和维护。
- W3C标准:W3C对于web标准提出了规范化的要求
- 对结构的要求:
- 标签字母要小写;
- 标签要闭合;
- 标签不允许随意嵌套。
- 对CSS和JS的要求:
- 尽量使用外联css样式表和js脚本,使结构、表现和行为分成三块,符合规范,同时提高页面渲染速度,提高用户体验;
- 样式尽量少用行间样式表,使结构与表现分离,标签的id和class命名要做到见文知义,标签越少,加载越快,用户体验更高,代码维护更简单,便于改版;
- 不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。
- 对结构的要求:
HTML全局属性有哪些?
主要有:
- class:为元素设置类标识
- data-*:为元素增加自定义属性
- draggable:设置元素是否可拖拽
- id:元素Id,文档内唯一标识
- style:行内css样式
- title:元素相关的建议信息
更多详细,请看参考资料
在input里,name的作用?
- 用于对提交到服务器后的表单数据的字段名;
- 用于radio类型的分组;
- 用于指定input的名称,
label标签
label标签有2个属性,for
和accesskey
- for: 表示label是为id为for值得控件服务的,当用户点击label标签时,浏览器会自动将焦点设置在for指向的控件上;
- accesskey:表示访问for指向控件的热键(跟浏览器热键冲突时无效)
type=hidden 隐藏域的作用?
用来收集或发送对用户不可见的信息。
参考资料
前端性能优化
- 资源压缩合并,减少HTTP请求;
- 非必要异步加载;
- 利用浏览器缓存静态资源;
- 使用CDN
- 预解析DNS
参考资料
页面渲染优化
- 对于HTML:
- 尽量减少标签的使用;
- 使用语义化标签,减少CSS的代码,增加可读性和SEO;
- 避免
src
、href
等值为空; - 减少dns查询次数;
- 避免在HTML中直接写CSS代码。
- 对于CSS:
- 优化选择器路径;
- 压缩文件;
- 选择器合并;
- 精准样式;
- 减少浮动
float
的使用; - 0值去单位;
- 对于JS:
- 尽量将script标签放在body之后;
- 尽量合并JS代码;
- 尽量压缩JS文件;
- 尽量避免JS中修改DOM样式,可预定义CSS样式,通过改变样式名来修改DOM样式;
- 尽量减少JS中创建DOM,可在HTML中使用
display:none
来隐藏,在JS中按需显示,减少对DOM的操作。
参考资料