web前端面试题[html篇]

1、img标签的title和alt有什么区别?

2、html5有哪些新特性、移除了那些元素？

3、WEB标准以及W3C标准是什么?

4、xhtml和html有什么区别?

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

1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。 
2. 严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。
3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

6、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
空元素：br hr img input link meta
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行
注：img、input、select虽然是行内元素，同时也是可替换元素，可替换元素内部可以设置宽高

7、HTML全局属性(global attribute)有哪些

html属性赋予元素意义和语境，可以用于任何的html元素
1、class：为元素设置类标识
2、data-*：为元素增加自定义属性
3、id：元素id，文档内唯一
4、lang：元素内容的语言
5、style：行内css样式
6、title：元素相关的建议信息
7、dir：规定元素中内容的文本方向（ltr：从左到右， rtl：从右到左）
8、contenteditable：html新增属性，设置true后可编辑元素
9、hidden：隐藏一个html元素

8、Canvas和SVG有什么区别？

canvas
* canvas是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，已经有十几年了。
* Canvas 通过 JavaScript 来绘制 2D 图形。
* Canvas 是逐像素进行渲染的。
* 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG
* svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。
* SVG 是一种使用 XML 描述 2D 图形的语言。
* SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
* 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

canvas依赖分辨率。
canvas支持事件处理器。
canvas最适合带有大型渲染区域的应用程序（比如谷歌地图）。
canvas复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。
canvas不适合游戏应用。
svg不依赖分辨率。
svg不支持事件处理器。
svg弱的文本渲染能力。
svg能够以 .png 或 .jpg 格式保存结果图像。
svg最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

9、HTML5 为什么只需要写 ？

<!DOCTYPE HTML> 是文档类型声明，它声明了文档类型为html5，告诉浏览器和其他开发者，该文档使用的是html5标准

10、很多网站不常用table iframe这两个元素，知道原因吗？

因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

11、jpg和png格式的图片有什么区别？

jpg是有损压缩格式，png是无损压缩格式。
所以，相同的图片，jpg体积会小。
比如我们一些官网的banner图，一般都很大，所以适合用jpg类型的图片。
但png分8位的和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿。

12、请用html知识解决seo(搜索引擎优化)优化问题

网站上线应该设置TDK:
主要内容有：
标题-title
描述-deion
关键词-keywords
1、meta标签，这个是重中之重

<title>html对seo的优化</title>
<meta name="title" content="html对SEO的优化">/*不推荐用这个*/
<meta name="keywords" content="SEO,爬虫，搜索引擎、百度、html优化">
<meta name="description" content="通过html标签及属性的使用提高网站被爬虫爬取的几率，使用户百度时网站尽量排在前面，提高用户的点击率">

2、logo，给logo图片添加h1标签、a链接连接到首页以及alt

<h1>
   //这个href应该是要写线上的首页地址，比项目目录地址要好
	<a href="https://blog.csdn.net/qq_37291064/article/details/90442991">
		<img src="images/pagelogo.png"  alt="html对seo的优化"/>
	</a>
</h1>

3、img标签，img标签增加alt属性，这个logo的时候也提到了
4、a 标签
a标签增加 title 属性，不可以有href="#"这种空指向写法，另外我觉得大量的title感觉体验也不是很好，不需要的地方就不用了吧
5、h1~h6标签
h1要分配给网站名称或给带alt标签的logo使用（这个前面也提到了），用以强调网站名称。h2标签用来定义“站点副标题”。如果没有副标题，h2标签最好也空着，以备不时之需。h3标签用来定义导航栏目名称，h4标签用来定义文章列表标题，但大多数内容系统，文章列表输出用UL标签，所以h4可能就派不上用场，这里只是以此类推。浏览器会自动地在标题的前后添加空行。请确保将HTML heading标签只用于标题。不要仅仅是为了产生粗体或大号文本而使用标题因为搜索引擎使用标题为你的网页的结构和内容标志索引。

6、添加robots.txt，搭建网站与搜索引擎对话的桥梁
在项目根目录添加robots.txt文件，robots.txt文件可以告诉搜索引擎哪些是重点，哪些又是可以忽略的，节约搜索引擎蜘蛛抓取网页的时间，也在一定程度上节省了服务器资源

7、页面结构清晰，使用语义化标签比如header、footer、content、section，js、css使用外部文件

8、增加外部链接
即是对方没有和你链接，你也是可以链接别人的，大概搜索引擎的算法体现了互联网“分享”的精神吧，通过外链网站的活跃度蹭点seo度

9、前后端分离（vue、ajax）、flash不利于seo

以上只是站在seo的角度出发，具体根据自己情况而定，不过前几条应该不是问题，就像后两条没有外部链接怎么办，非要强行添加吗？不使用前后端分离你这是在搞笑吧，所以该舍弃的时候还是要舍弃，而且前后端分离这种现在也有提高seo的办法,用服务端渲染功能，俗话说兵来将挡、水来土淹。

13、常用浏览器有哪些，内核都是什么？

常用浏览器有 IE 火狐(firefox)  chrome safari  360 搜狗 等
内核：IE的是 Trident  
      火狐的是 Gecko
      chrome和safari 用的是 Webkit
      360和搜狗这些分极速模式和兼容模式，极速模式用的Webkit的内核，兼容模式用的Trident内核。

14、写了2个标签，两个标签之间有空格的情况遇到过吗？

一般换行写会出现空格，
<a>我们</a>
<a>你们</a>
写在同一行就不会出现空格了
<a>我们</a><a>你们</a>

15、form标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？

form表单定义请求类型的是  method 属性  ， 
定义请求地址的是  action属性
posted @ 2021-07-06 09:34  cairn  阅读(177)  评论(0)    收藏  举报