本文详细介绍了src和href的区别，区分静态和动态网页，探讨DOCTYPE的作用，HTML5的新特性，以及SSR（服务端渲染）的概念及其在SEO和性能优化中的应用。同时讨论了服务端渲染与客户端渲染的优缺点及适用场景。
1.src与href的区别
（1）使用元素不同：src表示源地址，用在img、script、iframe等元素上。href表示超文本引用，用在link和a等元素上。
（2）src的内容是页面必不可少的一部分，表示引入。href的内容与该页面有关联，表示引用。简单来说，区别就是引入和引用。href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
2.静态网页和动态网页
静态网页是指没有数据交互（没有数据库参与，没有服务器数据的加载）的网页，
动态网页指有后台数据参与的网页，比如JSP、ASP页面等
3.DOCTYPE有什么作用
<!DOCTYPE>声明位于文档中的最前面，位于<html>标签之前，即告知浏览器的解析器，用什么文档类型规范来解析这个文档。DOCTYPE不存在或格式不正确都会导致文档以混杂模式呈现。
4.HTML语义化的理解
主要目的用正确的标签做正确的事，语义化标签如<header><section><footer>等。
- 页面结构化，使阅读网站源代码的人能够快速理清HTML文档的结构，便于学习和后期维护
- 可读性好，即使在没有样式的情况下也以一种文档的格式在用户面前展示，用户容易理解阅读
- 有利于SEO，因为搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重
5.锚点的作用及如何创建锚点
锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义锚点后，可以创建直接跳转至该锚点的链接，这样无须通过滚动页面来寻找
<a name="info">个人信息</a>
<a href="#info">跳转个人信息</a>
<h1 id="info">个人信息</h1>
<a href="#info">跳转个人信息</a>
6.html5新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像画布，音频视频，存储，语义化标签，表单控件，多任务，位置等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
7.如何处理HTML5新标签的浏览器兼容问题？
IE6/IE7/IE8支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。
也可以直接使用成熟的框架、比如html5 shim;
< !--[if lt IE 9]> < script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> < ![endif]-->
8.如何区分 HTML 和 HTML5？
在文档声明上，HTML代码很长，而HTML5只有简简单单的声明。
HTML4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5.0
<!DOCTYPE html>
在结构语义上，HTML4.0：没有体现结构语义化的标签，HTML5：在语义上却有很大的优势。提供了一些新的HTML5标签比如:<header> 、<nav>、<article>、<aside>、<footer>等
9.对SSR有了解吗，它主要解决什么问题？
Server-Side Rendering 我们称其为SSR，意为服务端渲染指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程；解决了以下两个问题：
seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo
首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）
10.服务端和客户端渲染的区别
- 二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。
- 响应速度：服务端渲染会加快页面的响应速度，首屏渲染快，客户端渲染页面的响应速度慢。
- SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。
- 开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。
直观的区分服务端渲染和客户端渲染：
源码里如果能找到前端页面中的内容文字，那就是在服务端构建的DOM，就是服务端渲染，反之是客户端渲染。
应该使用服务端渲染还是客户端渲染：
我们要根据业务场景去选择渲染的方式。
如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。
如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。
具体使用哪种渲染方式也不是绝对的，现在很多网站使用服务端渲染和客户端渲染结合的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。
4031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
