前端面试题归类-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 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“/>

 

 

 

 

八、div模拟textarea

contenteditable属性,值为布尔值,为true时可以编辑。

<div contenteditable="true">可以编辑里面的内容</div>   

九、web标准及w3c的理解和认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构行为表现的分离,

文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,

容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

十、离线缓存与传统浏览器缓存区别?

①离线缓存是针对整个应用,浏览器缓存是单个文件

②离线缓存断网了仍可以打开缓存的页面,浏览器缓存不行

③离线缓存有网也会优先使用缓存资源,但可以主动通知浏览器更新资源

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwjpj.html