什么是DOCTYPE，有什么作用

1. doctype是HTML5中的文档声明部分，它告诉浏览器使用什么版本的HTML标准解析文档。如果不告诉浏览器文档解析标准，一般情况下浏览器会开启最大兼容模式来解析网页，这被称为怪异模式，会降低解析效率，同时在解析过程中会产生一些奇怪的bug，所以文档声明是必须的。
2. < !DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
3. < !DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

为什么html5文档声明只需要写，但是html4需要写

因为html4基于SGML，需要DTD声明来告诉浏览器该文档的解析规范，但是html5不基于SGML，所以不需要DTD声明。

SGML 、 HTML 、XML 和 XHTML 是什么？

1. SGML：标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
2. HTML：超文本标记语言，主要是用于规定怎么显示网页。
3. XML：可扩展标记语言，标签可以自己创建，数量无限多。
4. XHTML：可扩展超文本标记语言，是现在基本上所有网页都在用的标记语言，和HTML没什么本质的区别，标签都一样，用法也都一样，但是比HTML更严格，比如标签必须都用小写，标签都必须有闭合标签等。

严格模式和混杂模式

• 他们分别是什么？

  • 严格模式又叫做标准模式，表示游览器使用W3C标准去解析html文档
  • 混杂模式又叫做怪异模式或兼容模式，此时浏览器按照自己的方式解析代码

• 如何区分标准模式和混杂模式

  • 对于html4文档
    1. 包含严格DTD（文档定义类型）的doctype会使页面以标准模式呈现
    2. 包含过渡DTD和URI（统一资源标志符，就是声明最后的地址）的doctype会使页面以标准模式呈现
    3. 有过渡DTD但没有URI的doctype会使页面以混杂模式呈现
    4. doctype不存在或形式不正确会使页面以混杂模式呈现
  • 对于html5文档
    1. html5没有DTD，所以没有严格模式和混杂模式的区别。

• 严格模式和混杂模式导致页面元素有什么区别

  1. 盒模型。严格模式下设置元素的宽高表示内容区的宽高，但混杂模式下设置元素的宽高包括元素的内容区，border，padding。
  2. 行内元素。在严格模式下，给行内元素设置宽高都不会生效，但在混杂模式下会生效
  3. 设置高度百分比。严格模式下如果父元素没有设置高度但是给子元素设置高度百分比，那子元素高度不起效果，混杂模式下有效
  4. margin:0 auto；在混杂模式下失效。

对html语义化理解

1. html标签语义化理解为根据标签名就能让人理解到这一块元素的内容以及它处于页面什么结构中。
2. 常见语义化标签：https://blog.csdn.net/m0_48166663/article/details/124040188

语义化优点

1. 在不使用css情况下使页面呈现更清晰的布局
2. 有利于搜索引擎优化（SEO），通过搜索引擎优化，可以在用户搜索内容时，时该页面排名一定程度靠前一点
3. 提高代码可读性，利于团队开发

src和href的区别

都是html中特定元素的属性，都用来引入外部的资源。

区别：

1. src常用于img video script 标签，通过src指向外部资源地址，指向的内容会被嵌入到文档当前标签所在位置，在请求src资源时，浏览器会把资源下载并应用到文档中，浏览器解析到这个元素时会暂停其他元素的下载，直到该资源加载编译执行完。
2. href常用于a link标签，当浏览器识别到它指向的文件会同时下载资源，但不会暂停对html文档的解析处理。

title和h1区别，b和strong区别，i和em的区别

1. title是整个网页的标题h1是页面中的标题
2. b和strong都会被加粗表示，b会将标签内的内容加黑强调，strong会让标签内的内容在阅读设备阅读网页时被重读
3. i和em都表示斜体，i是视觉上无意义的斜体，em还强调文本

前端页面由哪三层构成，分别是什么

由结构层，表现层，行为层构成

1. 结构层：简单理解为html，即页面的元素结构
2. 表现层：理解为css，丰富页面样式
3. 行为层：理解为js，即用来丰富页面功能，使用户操作网页

iframe的作用和优缺点

iframe标签可以将一个网页嵌入到另一个网页里面。

1. 优点：用来处理加载缓慢的内容
2. 缺点：iframe会阻塞主页面的onload事件；会产生很多页面，不易管理；浏览器的后退按钮失效；无法被一些浏览器识别。

img标签的title和alt属性的区别

title属性内容可以在鼠标放到图片上的时候显示在鼠标箭头旁边，alt属性的内容会在图片加载失败的时候代替图片显示出来。

H5和HTML5的区别

1. H5是用HTML5，CSS3，ES6等新技术制作出来的应用
2. HTML5指第五代HTML

HTML5新增了哪些特性

1. 语义化标签，如footer,header,artical,nav
2. 视频video，音频audio
3. 画布canvas
4. 表单控件如email,date,time
5. localstorage,sessionstorage
6. 允许拖拽属性

如何处理HTML5新标签兼容问题

1. 使用document.createTagName()创建，同时可以修改样式
2. 使用HTML5的shim框架，在head标签里面添加下面的代码

行内元素和块元素

• 分别有什么元素

  1. 常见的行内元素：span，a，img，button，input，select
  2. 常见的块元素：div，p，form，ul，table，h1~h6

• 有什么区别

  1. 块级元素
     1. 每个块元素都独占一行，默认从上到下排列，一个新的块元素会从新一行开始排列
     2. 块元素内部可以包含块元素和行内元素
     3. 可以设置宽高，没有设置宽高时宽度默认百分百，高度由子元素撑开
  2. 行内元素
     1. 每个行内元素的宽度由元素内容决定，行内元素会与其他元素在同一行排列
     2. 行内元素内部只能包含行内元素或文本
     3. 宽高设置无效
     4. 设置的margin和padding只有左右有效，上下无效

如何将行内元素转化为块元素

1. display: block;
2. position:absolute;
3. float

label的作用是什么，如何使用

常与表单控件搭配使用，当用户点击label上的文字时，鼠标会自动聚焦到那个label所绑定的id表单控件。

男女

a标签除了链接地址，还有什么用

1. 用作锚点，点击跳转到页面指定部分
2. a标签的href支持浏览器的任何协议，所以可以用来打电话发邮件
3. 伪协议，即，如果xxx代码的返回值不是undefined，那么返回值就会代替当前页面

如何实现对图片某区域的点击事件

配合使用img标签的usemap属性以及map,area标签，例子见：https://m.jb51.net/w3school/tiy/t.asp-f=html5_map.htm

对于Web标准和W3C的理解

1. Web标准就是页面的构成，由结构层，表现层，应用层共同构成
2. W3C是万维网联盟，是制定各种标准的组织，标准包括HTML，CSS，ECMAScript等。通过制定标准可以用来统一开发流程，降低学习成本，方便迁移不同设备。

什么是微格式

理解为：在已经有的结构基础上创建新的数据格式，比如在html中添加某些属性使html文档语义化，使用微格式便于机器读懂并提取到html中某些信息

你知道SEO的TDK是什么吗

SEO是页面搜索优化，通过SEO可以使自己的页面在用户搜索结果中靠前一点。

TDK分别代表：title,description,keyword三个标签，分别表示页面的标题，描述，关键字