HTML
- DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别?
声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。
标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作！
具体区别
1.盒模型
在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
在兼容模式中 ：width则是=width+padding+border
2.兼容模式下可设置百分比的高度和行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
3.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
- html5为什么只需要写<!doctype html>?你知道多少种Doctype文档类型？
需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
html4：html strict /strɪkt/型、xhtml strict型、html Transitional/trænˈzɪʃənl/型、xhtml Transitional型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。BUT，HTML5不是的。
- 行内元素有哪些？块级元素有哪些？ 行内块元素有那些？
常见的块级元素有：
<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,
<address>,<blockquote>,<form>
行内元素：<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,<select>
行内块元素：img|input|select|textarea|button等，也被称为可置换元素（Replaced element）。
- 请说出五种html5的特性
（1）语义化标签：header,footer,nav etc.
（2）canvas 画布
（3）audio, video
（4）drag 拖拽
（5）本地存储 localStorage, sessionStorage
（6）webSocket 长连接
（7）定位
（8）增强型表单 input number, datalist, keygen, output, progress
（9）svg 矢量绘图
（10）webWorker 实现js多进程。
- 请写出至少5个HTML块元素标签。
<div>,<p>,<li>,<ol>,<ul><h1>~<h6>
- 简述a标签target属性的取值和作用？
<a>标签的target属性规定在何处打开连接文档
属性值
_black：点击一次打开一个新窗口
_self：默认，在当前窗口打开
_new：始终在同一个新窗口中打开
_parent：在父级窗口打开
_top：在当前的整个浏览器中打开所链接文档，即在顶级窗口打开
framename：在指定的框架中打开被链接文档
- 请列举几个html5新增的标签？
#video：表示一段视频并提供播放的用户界面#
audio：表示音频
time：日期和时间值
source：为video和audio提供数据源
nav：导航
aside：在一边
article：文章
footer：页尾
header：页眉f
main：主要的
menu：菜单
canvas：表示位图区域
track：为video和audio指定字母
svg：定义矢量图
code：代码段
figure：和文档有关的图例
figcaption：图例的说明
mark：高亮的引用文字
Datalist：提供给其他控件的预定义选项
keygen：秘钥对生成器控件
output：计算值
progress：进度条
embed：嵌入的外部资源
menuitem：用户可点击的菜单项
template：模板
section：部分
- 如何定义一个单选按钮？
input[type='radio']radio定义单选按钮
- 标签上的title属性与alt属性的区别是什么？
alt是在图片不能正常加载时候显示的提示语
title属性是鼠标划上去显示的内容
- 如何处理html5新标签的浏览器兼容问题？
（1）使用静态资源的html5shiv包
（2）载入后，初始化新标签的css
- 分别写出以下几个HTML标签：文字加粗、下标、居中、斜体
加粗：<b>、<strong>，下标：<sub>，居中：<center>，字体：<i>
- 对WEB标准以及W3C的理解与认识
web标准，简单来说就是将页面的结构、表现和行为各自独立实现，尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、
使用外链css和js脚本、
结构行为表现的分离、文件下载与页面速度更快、
内容能被更多的用户所访问、
内容能被更广泛的设备所访问、
更少的代码和组件，容易维护、改版方便，不需要变动页面内容、
提供打印版本而不需要复制内容、
提高网站易用性。
- 前端页面有哪三层构成，分别是什么，作用是什么？
最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。
HTML：结构层：
网页的结构或内容层是该页面的基础HTML代码。
CSS：样式层：
该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。
JavaScript：行为层
行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改
- 请讲述一下iframe框架的优缺点？
优：iframe能够原封不动地把嵌入的网页展现出来。如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决
缺：会产生很多页面，不容易管理。很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差
现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发
- form表单实现上传文件必不可少的属性是什么？
Enctype=”multipart/form-data”
enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。
- src和href的区别是什么？
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
- input不可编辑，必填属性分别是什么？
Disabled readonly不可被编辑； required必填项；
- 请写出input常用的13种type类型，并写出每种类型的应用场景
text 默认的输入类型。
password 密码，表现为一连串的点。
file 文件上传控件。
radio 单选按钮
checkbox 复选框
hidden 隐藏的输入字段，用于在表单中添加对用户不可见
button 按钮
image 图像形式的提交按钮
reset 重置按钮,清除表单中所有数据
submit 提交按钮,提交按钮会把表单数据发送到服务器
color 调色板
tel 包含电话号码的输入域
email 包含email地址的输入域
url 包含URL地址的输入域
search 搜索域
number 包含数值的输入域
range 包含一定范围内数字值的输入域
date 选取日、月、年的输入域
month 选取月、年的输入域
week 选取周、年的输入域
time 选取月、年的输入域
datetime 选取时间、日 月、年的输入域(UTC时间)
datetime-local 选取时间、日 月、年的输入域(本地时间)
- 请简述一下你对语义化标签的理解
⒈用正确的标签做正确的事情
⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
⒊即使在没有CSS样式的情况下也以一种文档格式显示，并且是任意阅读的；
⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
⒌阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
- 如何区分html和html5
1、在文档声明上，html有很长的一段代码，并且很难记住这段代码，都只是靠工具直接生成，而html5却不同，只有简简单单的声明，也方便人们的记忆，更加精简。
2、在结构语义上；html4.0没有体现结构语义化的标签。html5在语义上却有很大的优势,提供了一些新的html5标签
- img的常用属性
Src 图像的源文件
Alt 提示文字
width,height 高度，宽度
Border 边框
Vspac 垂直间距
Hspace 水平间距
- 字体加粗的方法
（1）用CSS中font-weight:bold样式给字体加粗
（2）用html中的<strong>加粗标签
（3）用html中的<b>加粗标签
- 一个网页从开始请求到最终显示的完整历程
一个网页从开始请求到最终显示的完整历程一般可以分为以下7个步骤：
1.在客户端浏览器中输入网址URL。
2.发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。
3.客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。
4.客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。
5.WEB服务器响应请求，返回指定的URL数据或错误信息；如果设定重定向，则重定向到新的URL地址。
6.客户端浏览器下载数据，解析HTML源文件，解析的过程中实现对页面的排版，解析完成后，在浏览器中显示基础的页面。
7.分析页面中的超链接，显示在当前页面，重复以上过程直至没有超链接需要发送，完成页面的全部显示。
以后会更新其他方面的面试题，这只是一小部分！
3695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
