前端基础之HTML(二)

1.6 介绍一下你对浏览器内核的理解

主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和js引擎

• 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
• js引擎：解析和执行JavaScript来实现网页的动态效果

1.7 常见的浏览器内核有哪些

• Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器
• Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
• Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
• Webkit：Safari Chrome

1.8 label标签的作用是什么? 是怎么用的?

• label标签用来定义表单控件间的关系
• 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上
• label 中有两个属性是非常有用的, FOR和ACCESSKEY
• FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点

1.9 title与h1的区别、b与strong的区别、i与em的区别?

• title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
• strong标明重点内容，语气加强含义；b是无意义的视觉表示
• em表示强调文本；i是斜体，是无意义的视觉表示
• 视觉样式标签：b i u s
• 语义样式标签：strong em ins del code

1.10 元素的alt和title有什么不同？

• 在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

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

• 浏览器页面构成：结构层、表示层、行为层
• 分别是：HTML、CSS、JavaScript
• 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

1.12 网页制作会用到的图片格式有哪些？

• Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
• Apng：是PNG的位图动画扩展，可以实现png格式的动态图片效果，有望代替GIF成为下一代动态图标准

1.13 viewport 所有属性？

• width :设置layout viewport的宽度，为一个正整数，或字符串'device-width'
• initial-scale:设置页面的初始缩放值，为一个数字，可以带小数
• minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数
• maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数
• height:设置layout viewport的高度，这个属性对我们并不重要，很少使用
• user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’

安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素

1.14 meta标签的name属性值？

name 属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

A 、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。

B 、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容。

C 、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

1.15 a标签中 如何禁用href 跳转页面 或 定位链接?

e.preventDefault();

href="javascript:void(0);

1.16 video标签的几个属性方法

• src：视频的URL
• poster：视频封面，没有播放时显示的图片
• preload：预加载
• autoplay：自动播放
• loop：循环播放
• controls：浏览器自带的控制条
• width：视频宽度
• height：视频高度

1.17 块级元素、行内元素、行内块元素

块级元素：

特点：可设置宽高边距，占满整行，会自动换行

示例：div、 p、 h1 、h6、ol、ul、dl、table、address、blockquote、form

行内元素：

特点：无法设置宽高边距，不会占满整行，不会自动换行

示例：a、strong、b、em、i、del、s、ins、u、span

行内块元素：

特点：可设置宽高，占满整行，但不会自动换行

示例：img、input

1.18 web标准和w3c标准

web标准：分为结构、表现和行为

W3C标准：提出了更规范的要求

1、结构方面：标签字母要小写，标签要闭合，标签要正确嵌套

2、css和js方面：尽量使用外链写法，少用行内样式，属性名要见名知意

1.19 前端需要注意哪些SEO

1、合理的title、description、keywords：搜素时对这三项的权重逐个减少，title强调重点，重要关键词不要超过两次，而且要靠前，不同页面title要有所不同，description高度概括页面内容，长度合适，不过分堆砌关键词，不同页面description有所不同，keywords列出重要关键词即可

2、语义化的html代码，符合W3C标准

3、提高网站速度

4、重要HTML代码放前面

5、重要内容不要用js输出：爬虫不会执行js获取内容

6、少用 iframe：搜索引擎不会抓取 iframe 中的内容

7、非装饰性图片必须加 alt

1.20 canvas和svg的区别

canvas	svg
通过js绘制2D图形，按像素进行渲染，当位置发生改变会重新进行绘制	使用XML绘制的2D图形，可以为元素添加js处理器
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有哦大型渲染区域的应用程序（如谷歌地图）
能以.png或.jpg格式保存结果图像	复杂度高会减慢渲染速度
最适合图像密集型游戏，其中的许多对象会被频繁重绘	不适合游戏应用