Html5 常见问题总结

1. DOCTYPE 的作用是什么?标准模式与集容模式各有什么区别?
声明位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现;          

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作      

2. html5为什么只需要写<!ldoctype html>?     你知道多少种Doctype文档类型?
 HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

 过渡类型，框架类型，严格类型
3.行内元素有家些? 块级元素有哪些?行内块元素有那些?

常见的块元素有div、p、h1、ol、ul、dl、tabel、form；(独占一行)

常见的行内元素有a、span、i、strong、em、label、cite、code；(可以共处一行)

常见的行内块元素有img、input、select、textarea、button；(不独占一行)

4.请说出五种html5的特性？
1.语义标签
2.增强型表单
3.视频和音频
4.Canvas绘图
5.SVG绘图
5.简述a标签target属性的取值和作用?
_black：点击一次打开一个新窗口
_new：始终在同一个新窗口中打开
_self：默认，在当前窗口打开
_parent：在父级窗口打开
_top：在当前的整个浏览器中打开所链接文档，即在顶级窗口打开
_framename：在指定的框架中打开被链接文档
6.请列举几个htm15新增的语义化标签?
audio   video    time     input     canvas
7.如何定义一个单选按钮?
<label><input type="radio" name="111" value=""></label>

<label><input type="radio" name="111" value=""></label>

<标签 属性＝“属性的值”>保证name的值一样就可以单选
8.<img>标签上的title属性与alt属性的区别是什么?
alt是当图片不存在或加载失败时，会出现alt里设置的替代文字

Title是当图片正常加载出来后，当鼠标移动到图片上时，会出现tittle里设置的文字，是对图片的一种描述
9.如何处理html5新标签的浏览器兼容可题?
实现标签被识别(通过document.createElement（tagName）即可以让浏览器识别标签和CSS引擎知道该标签的存在)

使用html5shiv

使用Kill IE6

Namespace hack

Bulletproof技术

10.对WEB标准以及W3C的理解与认识
web标准简单来说可以分为结构、样式和行为。HTML标签构成页面的结构框架。css完成美化html标签构成的页面。js可以完成页面和用户的交互。

web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

1）标签字母要小写

2）标签要闭合

3）标签不允许随意嵌套

2.对于css和js来说

1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

11.前端页面有哪三层构成，分别是什么，作用是什么?
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

12.请讲述一下iframe框架的优缺点?
优点

1. 可以跨域请求其他网站，并将网站完整展示出来。
2. 典型系统结构可以提高代码的复用性。
3. 创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象。
4. 模块分离，若多个页面引用同一个iframe，则便于修改操作。
5. 实现广告展示的一个解决方案。
6. 若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面。

缺点

1. iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件，动态设置src可解决这个问题。
2. 加载了新页面，增加了css与js文件的请求，即额外增加了HTTP请求，增加了服务器负担。
3. 有时iframe由于页面挤占空间的原因出现滚动条，造成布局混乱。
4. 不利于SEO，搜索引擎的爬虫无法解读iframe的页面。
5. 有些小型的移动设备如手机等无法完全显示框架，兼容性较差。
6. iframe与主页面是共享链接池的，若iframe加载时用光了链接池，则会造成主页面加载阻塞。

13.form表单实现上传文件必不可少的属性是什么?
enctype="multipart/form-data"

14. src和href的区别是什么?

src 是指向物件的来源地址,是引入。 在img、script、iframe 等元素上使用。

href 是超文本引用,指向需要连结的地方,是与该页面有关联的,是引用。 在link和a 等元素上使用。 简而言之,src用于替换当前元素;
 

15. input只读，禁用，必填属性分别是什么?
input只读属性：readonly

input禁用属性：disabled

input必填属性：required

16. 请写出input常用的13种type类型，并写出每种类型的应用场景

type='text': 创建单行文本输入框（默认的输入类型）

type='password': 密码输入框

type='radio': 单选按钮

type='checkbox': 复选框

type='button': 普通按钮

type='submit': 提交按钮

type='reset': 重置按钮

type='image': 图像按钮

type='hidden': 隐藏域

type='file': 文件域

type='url': 输入URL字段

type='tel': 用来输入电话号码

type='search': 搜索字符串

type='email': 输入“email”地址

17.请简述一下你对语义化标签的理解
用正确的标签做正确的事情。

html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

18.如何区分html和]html5
html5是第五代超文本标记语言，其文档声明及其简洁。而html一般指html4.01,其文档声明繁杂。

19. canvas和Dsvg的区别

canvas输出的是一整幅画布；svg输出的图形是矢量图形.

Svg后期可以修改参数来自由放大缩小，没有锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者有锯齿。