前端面试题

为什么要语义化?

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看;

用户体验:例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用;

有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

语义化标签有哪些?

<header></header>

<footer></footer>

<nav></nav>

<section></section>

<article></article> 表示一套结构完整且独立的内容部分

<aslde></aside> 主题的附属信息 

<figure></figure>媒体元素,比如视频,图片

<datalist></datalist>选项列表,与 input 元素配合使用,来定义 input 可能的值

<details></details>用于描述文档或者文档某个部分的细节

3.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

1)、 声明位于文档中的最前面,处于标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。

2)、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。

3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

11.请你描述一下 cookies,sessionStorage 和 localStorage 的区别?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据,其中 sessionStorage 的概念很特别,引入了一个“浏览器窗口”的概念。

 

sessionStorage 是在同源的同窗口(或 tab )中,始终存在的数据。只要浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。

关闭窗口后, sessionStorage 即被销毁。同时“独立”打开的不同窗口,即使是同一页面, sessionStorage 对象也是不同的

cookies会发送到服务器端。其余两个不会。

区别:

Cookie

每个域名存储量比较小(各浏览器不同,大致 4K )

所有域名的存储量有限制(各浏览器不同,大致 4K )

有个数限制(各浏览器不同)

会随请求发送到服务器

LocalStorage

永久存储

单个域名存储量比较大(推荐 5MB ,各浏览器不同)

总体数量无限制

SessionStorage

只在 Session 内有效

存储量更大(推荐没有限制,但是实际上各浏览器也不同)

浏览器页面有哪三层构成,分别是什么,作用是什么?

构成:结构层、表示层、行为层

分别是:HTML、CSS、JavaScript

作用:HTML实现页面结构,CSS完成页面的表现与风格,JS实现一些客户端的功能与业务。

HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?

行内元素

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体 ( 不推荐 )

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码 ( 在引用源码的时候需要 )

dfn - 定义字段

em - 强调

font - 字体设定 ( 不推荐 )

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线 ( 不推荐 )

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器,定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 定义变量

块元素 (block element)

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易,也是 css layout 的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h3 - 大标题h4 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容,(对于不支持 frame 的浏览器显示此区块内容

noscript - )可选脚本内容(对于不支持 script 的浏览器显示此内容)

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表

可变元素,可变元素为根据上下文语境决定该元素为块元素或者内联元素。

applet - java applet

button - 按钮

del - 删除文本

iframe - inline frame

ins - 插入的文本

map - 图片区块 (map)

object - object对象

script - 客户端脚本

空元素 ( 在 HTML[1] 元素中,没有内容的 HTML 元素被称为空元素 )

br

hr

input

img

link

meta

19.常见的浏览器内核有哪些?

>1. `Trident内核`: `IE`,`MaxThon`,`TT`,`The World`,`360`, `搜狗`等。[ 又称 MSHTML]

2. `Gecko内核`: `Netscape6` 及以上版本,`FF`,`MozillaSuite/SeaMonkey `等

3. `Presto内核`: `Opera7 `及以上。[`Opera` 内核原为: `Presto` ,现为:` Blink`;]

4. `Webkit内核`: `Safari`,`Chrome` 等。[ `Chrome` 的: `Blink ( WebKit 的分支)` ]

问:xhtml和html有什么区别?

答:HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言

最主要的不同:

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

link和@import的区别:

两者都是外部引用CSS方式,但是存在一定的区别

a、link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

b、link支持使用Javascript控制DOM去改变样式,而@import不支持。

c、link是XHTML标签,除了加载CSS,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS

d、link是XHTML标签,无兼容问题;@import是在CSS 2.1提出的,低版本的浏览器不支持。

问:. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

important优先级高

posted @ 2019-10-21 16:58  白泽霜  阅读(101)  评论(0编辑  收藏  举报