前端面试题归类-HTML2
作者：互联网
一、 SGML 、 HTML 、XML 和 XHTML 的区别？
- SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
- HTML 是超文本标记语言，主要是用于规定怎么显示网页。
- XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多， 而 HTML 的标签都是固定的而且数量有限。
- XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。
二、DTD 介绍
- DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元 素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。
- DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。
三. meta viewport 是做什么的？怎么写?
- 移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。
- meta viewport 的6个属性：
|
width |
设置layout viewport 的宽度，为一个正整数，或字符串”width-device” |
|
initial-scale |
设置页面的初始缩放值，为一个数字，可以带小数 |
|
minimum-scale |
允许用户的最小缩放值，为一个数字，可以带小数 |
|
maximum-scale |
允许用户的最大缩放值，为一个数字，可以带小数 |
|
height |
设置layout viewport 的高度，这个属性并不重要，很少使用 |
|
user-scalable |
是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许 |
四. 你用过哪些 HTML 5 标签？
|
<article> |
定义独立的内容 |
|
<aside> |
定义页面内容之外的内容 |
|
<audio> |
定义声音内容 |
|
<bdi> |
定义文本的文本方向，使其脱离其周围文本的方向设置 |
|
<canvas> |
定义图形 |
|
<command> |
定义命令按钮 |
|
<datalist> |
定义下拉列表 |
|
<details> |
定义元素的细节 |
|
<embed> |
定义外部交互内容或插件 |
|
<figcaption> |
定义figure元素的标题 |
|
<figure> |
定义媒介内容的分组，以及他们的标题 |
|
<footer> |
定义section或page的页脚 |
|
<header> |
定义section或page的页眉 |
|
<hgroup> |
定义有关文档中的section信息 |
|
<keygen> |
定义生成密钥 |
|
<mark> |
定义有记号的文本 |
|
<meter> |
定义预定义范围内的度量 |
|
<nav> |
定义导航链接 |
|
<output> |
定义输出的一些类型 |
|
<progress> |
定义任何类型的任务的进度 |
|
<rp> |
定义若浏览器不支持ruby元素显示的内容 |
|
<rt> |
定义ruby注释的解释 |
|
<ruby> |
定义ruby注释 |
|
<section> |
定义section |
|
<source> |
定义媒介源 |
|
<summary> |
定义details元素的标题 |
|
<time> |
定义日期/时间 |
|
<track> |
定义用在媒体播放器中的文本轨道 |
|
<video> |
定义视频 |
五、 H5 是什么？
H5是HTML5的简称，就是“HTML”的第5个版本，也就是第5个版本的超文本标记语言。
六、 页面导入样式时，使用 link 和 @import 有什么区别？
- html页引用css的三种，一是页内的style标签，二是link外链；三是@import导入
- @import是CSS提供的语法规则，只有导入样式表的作用；link是HTML的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性、引入网站图标等。
- 加载顺序区别。加载页面时，link外链的文件会与文档同步加载，而@import则是等待文档加载完成后才加载。
- 兼容性区别。@import是CSS 2.1才有的语法，低版本浏览器不支持；link标签没有兼容问题。
- DOM可控性区别。可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方法插入样式。
七、 Label 的作用是什么？是怎么用的？
label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
八、div模拟textarea
contenteditable属性，值为布尔值，为true时可以编辑。
<div contenteditable="true">可以编辑里面的1内容</div>
九、web标准及w3c的理解和认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构行为表现的分离，
文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，
容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
十、离线缓存与传统浏览器缓存区别
①离线缓存是针对整个应用，浏览器缓存是单个文件
②离线缓存断网了仍可以打开缓存的页面，浏览器缓存不行
③离线缓存有网也会优先使用缓存资源，但可以主动通知浏览器更新资源
标签：面试题,缓存,浏览器,定义,标签,归类,HTML2,HTML,页面 来源： https://www.cnblogs.com/naitang/p/14219666.html