![HTML总结2 [转]](images/news1.jpg)
以下转载和参考自HTML 表单。1、表格可以通过 CSS 设置表格的样式如下为将上面table.lamp th,td样式中的padding注释掉开启table.lamp中的padding的效果2、列表3、导航栏导航栏使用ul列表实现以下为一个垂直导航栏可以为导航栏添加边框通过添加ul的borderli的border-bottom同时将li:last-child的border-bottom设为none以防止最下面的边框线成为两行以下为一个全高的固定侧导航栏上面使用到的overflow属性规定如何处理超出元素框的内容如下为其值及对应的处理以及一个使用示例以下为实现了一个水平导航栏如果想要其固定在底部显示的话将ul的top属性修改为bottom属性以下实现了一个粘性导航栏鼠标滚动的时候导航栏也跟着滚动但最多到顶部后就固定了如下实现了一个带下拉菜单的导航栏4、表单表单用于收集用户的输入如下图所示form 用来定义表单表单中的元素有input 元素如text文本输入、radio单选按钮、submit提交按钮、单选按钮、文本输入框等。提交按钮用来向表单处理程序提交表单表单处理程序通常是包含处理数据的页面表单的action属性指定提交表单时执行的动作表单处理程序通常表单会被提交到 web 服务器上的网页如果省略 action 属性则 action 会被设置为当前页面。表单中的input元素必须指定name否则提交的时候会忽略该输入元素。method指定使用的HTTP方法GET或POST。如果不指定method属性默认采用的是GET。上面的html页面在执行submit提交后会向当前页面所在的URL去除文件名demo.php页面发送POST请求text input输入的内容会回被写入到请求体body中如果是GET请求的话会放在 URL 的查询参数里如下所示表单中除了action、method属性外还有target、autocomplete、enctype等属性target属性设置设置提交表单后在何处显示响应默认为_blank在新选项卡_self为在当前页面其它值还有_parent、_top、framenameaccept-charset设置表单使用的字符集编码默认为使用页面字符集autocomplete设置是否打开自动完成功能即输入的时候是否显示用户的历史输入默认为on即开启enctype指定HTTP请求的Content-Type默认为application/x-www-form-urlencoded。novalidate属性设置为novalidate的话表示提交表单时不对其进行验证即不会验证表单的输入。表单中还可以有隐藏字段即hidden类型的inputinput typehidden元素用于在表单中包含用户不可见且不可修改的数据这些数据在用户提交表单时会一并发送到服务器。如下所示将隐藏输入框的 value 属性值设置为user对象的namevalue要设置成变量数据的话需要加上th:form action demo.php method POST input type hidden name _name th:value ${user.name}br /form以下为一些其它input元素的示例以及相关属性的说明其中一些属性是布尔属性不需要设置其值如readonly、disabled以下为下拉列表、文本输入框、按钮、datalisthtml5新增这些表单元素的使用示例如下为上面代码的效果其中图1为点击按钮时的效果图2为点击最后一个input元素时的效果元素的formaction属性会覆盖form的action属性formaction属性适用于 type submit 以及 type image 其规定当提交表单时处理该输入元素的URL。如下所示有两个提交按钮并且其提交动作不同5、canvasHTML5的canvas画布元素拥有绘制字符、圆形、图像、路径的能力画布是一个矩形区域可以控制其每一像素。canvas 本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成WebGL我们要在浏览器上开发3D游戏、3D可视化比如VR看房、3D产品展示、三维数字城市以及酷炫的活动宣传页的话可以使用WebGL。webgl 是在网页上绘制和渲染三维图形的技术之前学过的divcss、canvas 2d 都是专注于二维图形的它们之间的差异如下图所示。WebGL实际上是基于OpenGL ES设计的WebGL程序的控制代码是用JavaScript编写的其本质是JavaScript操作OpenGL接口。WebGL 开发的常用框架有Three.js、Cesium.js、Babylon.js。Unity3D将游戏发布为网页端的时候支持使用WebGL选择WebGL作为发布平台的话会通过WebGL模板将项目导出为HTML5文件并在网页中嵌入相应的代码即可。Sovit2D/3D是一个物联网2D/3D可视化方案底层使用WebGL技术可以通过组态模式类似“搭积木”的简单方式来搭建软件简单的拖拽即可完成可视化页面的编排设计来完成可视化设计如下所示。 Sovit2D/3D可以应用于物联网、电力、水利、工业互联网、智慧城市、智慧医疗、智慧农业、IT运维等各多领域效果如下所示。其它可视化解决方案还有帆软开源图表库echarts。几大计算机图形编程接口说明GDI传统的Windows图形界面开发接口基于DCDevice Context即设备上下文来进行图形绘制功能相对基础比如渐变、半透明特效需自实现无抗锯齿。图形渲染的计算通过CPU执行高渲染量的绘制工作会显著升高CPU使用率。MFC中就是使用GDI进行的绘制如下所示void CMFCTestDlg::OnPaint() { CPaintDC dc(this); // 用于绘制的设备上下文 dc.TextOutW(0, 0, Ltest); }GDIGDI的升级版面向对象模式基于Graphics对象通常从窗口的DC构造比如构造方法Graphics(HDC hdc)来进行图形绘制提供渐变透明、抗锯齿等更丰富的图形绘制功能。GDI仍然是通过CPU进行图形渲染计算。如果想要在MFC中使用GDI的话需要手动集成引入GDI库如下所示#include gdiplus.h #pragma comment(lib, gdiplus.lib) void DrawWithGDIplus(CDC* pDC) { Gdiplus::Graphics graphics(pDC-GetSafeHdc()); Gdiplus::Pen pen(Gdiplus::Color(255, 0, 0), 3); graphics.DrawLine(pen, 0, 0, 100, 100); }Direct 2D/3D利用硬件加速即GPU的强大并行计算能力来进行图形渲染计算Windows/XBOX平台专用不再依赖DC进行绘制工作而是使用COM接口。也可以手动集成Direct到MFC中来进行高性能的2D绘制或者嵌入3D视图。Direct是一整套的开发解决方案其除了图形接口还包括音频、键鼠手柄、网络等。OpenGL跨平台Windows, Linux, macOS的应用编程接口API主要聚焦于3D也可以进行2D绘制同样是使用GPU进行渲染计算。OpenGL ES是OpenGL针对手机等嵌入式设备设计的图形编程接口支持跨平台Android、IOS、Windows、MAC、Linux。如下为CPU与GPU、OpenGL、DX、显卡之间的关系Vulkan是OpenGL所属组织发布的一个新的图形API是与DirectX12能够匹敌的GPU API标准相当于是OpenGL的替代但开发复杂度比OpenGL要高。Metal是苹果推出的3D图形编程接口只支持IOS和MAC苹果号称以后的IOS和MAC上会停止对OpenGL ES的支持。ANGLE由于有的Windows系统上没有安装OpenGL驱动或者安装的OpenGL的驱动不兼容所以谷歌推出了ANGLE其被用在 chromium 项目里面。ANGLE可以将OpenGL ES API调用转换为平台可用的API比如将OpenGL ES的调用翻译成 Direct3D/Vulkan调用未来还有转换到Metal的计划。使用ANGLE后就可以用一套OpenGL代码同时运行在移动端和PC上而且不用考虑系统对OpenGL ES的兼容性。WebGL是基于OpenGL ES的一个Web 3D编程规范它提供了一系列的JavaScript API来实现在浏览器里绘制3D图形支持跨平台Android、IOS、Windows、MAC、Linux。WebGPU功能类似于WebGL但其底层基于各平台最新的3D图形接口Vulkan、Metal和Direct3D 12其可以更好地利用现代GPU的并行计算能力提供更高的图形渲染性能, 支持跨平台Android、IOS、Windows、MAC、Linux。OpenCV是提供图像处理和视频处理的基础算法库还涉及一些机器学习的算法其应用有人脸识别、物体识别、动作识别、运动跟踪、运动分析、视频降噪、汽车安全驾驶等。。6、绘制矢量图矢量图是使用数学公式描述图形的图像。矢量图具有可编辑性可以对其中的元素进行修改和调整当我们观察一张矢量图时我们可以看到它由许多数学方程描述的几何形状组成。不是像素点的集合所以其文件相对于位图较小。矢量图是基于数学公式的描述而不是像素点的集合其在放大或缩小时能保持图像的清晰度和质量不会失去细节或出现像素化而位图在放大时会变得模糊因为每个像素都会变得更大导致失去细节。一般logo会经常使用矢量图。常见的矢量图格式包括SVG可缩放矢量图形、AI、EPS。html中使用svg标签定义一个矢量图如下所示SVG与CanvasHTML中的SVG使用 XML 来描述 2D 图形因为基于 XML这意味着 SVG DOM 中的每个元素都是可用的可以为某个元素添加JavaScript 事件处理器。在 SVG 中每个被绘制的图形均被视为对象如果 SVG 对象的属性发生变化那么浏览器能够自动重现图形。SVG不依赖分辨率支持事件处理器适合大型区域渲染比如谷歌地图复杂度高会减慢渲染速度任何过度使用 DOM 的应用都不快不适合游戏应用。Canvas 是逐像素进行渲染的依赖分辨率。一旦图形被绘制完成它就不会继续得到浏览器的关注。如果其位置发生变化那么整个场景也需要重新绘制。Canvas不支持事件处理器适合图像密集型的游戏其中的许多对象会被频繁重绘。7、HTML5HTML5 是最新的 HTML 标准它是跨平台的被设计为在不同类型的硬件PC、平板、手机等之上运行。使用!DOCTYPE html声明的文档类型就表示使用HTML5HTML5 中默认的字符编码是 UTF - 8。HTML5新增了许多标签元素如header、dialog新增了许多表单控件如日期、日历新增了一些API比如用本地存储取代 cookie。HTML5也废弃了一些标签元素如下所示acronymappletbasefontbigcenterdirfontframeframesetnoframesstrikett8、XHTMLXHTML是以 XML 格式编写的 HTML它是更严格更纯净的 HTML 版本它与 HTML 4.01 几乎是相同的。HTML中对于一些书写错误也能正确标识比如缺少关闭标签属性值无引号等但是对于一些小型设备其往往缺乏解释“糟糕”的标记语言的能力所以就必须使用XHTML。XHTML中的文档类型声明!DOCTYPE ....是必须的head、title 以及 body 也是必须的。9、响应式网页设计与BootStrap响应式网页设计WRDResponsive Web Design)指的是能够以可变尺寸传递网页即一个网站能够针对多个类型的终端PC、移动、平板提供不同的显示样式而不是针对每个终端制作一个特定的版本。BootStrap是一个前端开发工具包前端开发框架基于html、css和javascript主要用于构建响应式网站并且是移动优先原则。BootStrap也提供了很多css样式和js插件使得web开发更加便捷这块与vue相比的话BootStrap的缺点是如果使用BootStrap现成的插件进行开发的话会很快但是想对于组件进行订制就不太方便自定义标签或部件的话需要一些额外的代码或查找额外的插件而vue则适合开发自定义功能和交互比较多的web。 目前最新的BootStrap 5已经从jQuery依赖切换到了使用原生的JavaScript。 Bootstrap 5 与所有现代浏览器兼容Chrome、Firefox、Edge、Safari 和 Opera。有两种获得Bootstrap的方法一种是引用来自 CDN 的 Bootstrap 5一种是从其官网 https ://getbootstrap.com/)下载 Bootstrap 5后自己托管来引用。比如我们可以使用W3School为Bootstrap 的 CSS 和 JavaScript 提供的CDN这样用户请求的时候会从最近的缓存中获取Bootstrap加载时间更短。如下所示为通过第一种方式来引用Bootstrap并对其使用Bootstrap 5 的JavaScript 用于不同的组件如模态、工具提示、弹出框等如果只使用 Bootstrap 的 CSS 部分的话可以不引用Bootstrap JS。Foundation也是一个用来快速构建响应式、移动设备优先Web项目的开源前端框架它也提供了类似于Bootstrap的丰富的CSS、JS等前端组件如按钮、表格、表单、导航、分页等。Foundation还提供了数据可视化、交互式表单等一些复杂的组件。10、jQueryjQuery 是一个 JavaScript 函数库它包含HTML 元素选取、元素操作、事件函数CSS操作JS特效和动画HTML DOM遍历和修改AJAX等功能。同时JQuery对于不同浏览器有很好的兼容性比如不同浏览器对 AJAX 的实现并不相同如果你不想编写额外的测试代码的话就可以使用jQuery中的AJAX功能。使用JQuery会极大地简化 JavaScript 编程。jQuery 库位于一个 JavaScript 文件中可以像引入Bootstrap JS一样引入它。如下使用了 jQuery 的 hide() 函数当点击button后会隐藏了 HTML 文档中所有的 p 元素可以看到上面引入js文件的时候添加了type类型而在上面引入Bootstrap的时候并没有指定type这是因为上面BootStrap中使用的是HTML5JavaScript 已经是 HTML5 以及所有现代浏览器中的默认脚本语言。如果不想自己托管jQuery库那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。使用Google的CDNheadscript typetext/javascript srchttp://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js/script/head使用Miscrsoft的CDNheadscript typetext/javascript srchttp://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js/script/head使用谷歌或微软的 jQuery有一个很大的优势许多用户在访问其他站点时已经从谷歌或微软加载过 jQuery所以JQuery已经被缓存而且大多数 CDN 都可以确保当用户向其请求文件时会从离用户最近的缓存服务器上返回响应。随着HTML5的到来jQuery现在已经不流行了因为HTML5中已经完善了浏览器的兼容问题jQuery 实现的很多功能现在通过几行新标准的JavaScript也能实现。而后面出现的AngularJS、React、vue这些前端框架进一步简化了JS操作比如它们使用MVVM结构Model数据模型、View视图UI组件、ViewModel同步View和Model的对象即二者使用ViewModel进行交互使得数据与视图分离通过数据来驱动视图封装了DOM操作进而使DOM操作从业务代码中移除, 这样使得jQuery的DOM操作便没有了用武之地。
HTML总结2 [转]
以下转载和参考自HTML 表单。1、表格可以通过 CSS 设置表格的样式如下为将上面table.lamp th,td样式中的padding注释掉开启table.lamp中的padding的效果2、列表3、导航栏导航栏使用ul列表实现以下为一个垂直导航栏可以为导航栏添加边框通过添加ul的borderli的border-bottom同时将li:last-child的border-bottom设为none以防止最下面的边框线成为两行以下为一个全高的固定侧导航栏上面使用到的overflow属性规定如何处理超出元素框的内容如下为其值及对应的处理以及一个使用示例以下为实现了一个水平导航栏如果想要其固定在底部显示的话将ul的top属性修改为bottom属性以下实现了一个粘性导航栏鼠标滚动的时候导航栏也跟着滚动但最多到顶部后就固定了如下实现了一个带下拉菜单的导航栏4、表单表单用于收集用户的输入如下图所示form 用来定义表单表单中的元素有input 元素如text文本输入、radio单选按钮、submit提交按钮、单选按钮、文本输入框等。提交按钮用来向表单处理程序提交表单表单处理程序通常是包含处理数据的页面表单的action属性指定提交表单时执行的动作表单处理程序通常表单会被提交到 web 服务器上的网页如果省略 action 属性则 action 会被设置为当前页面。表单中的input元素必须指定name否则提交的时候会忽略该输入元素。method指定使用的HTTP方法GET或POST。如果不指定method属性默认采用的是GET。上面的html页面在执行submit提交后会向当前页面所在的URL去除文件名demo.php页面发送POST请求text input输入的内容会回被写入到请求体body中如果是GET请求的话会放在 URL 的查询参数里如下所示表单中除了action、method属性外还有target、autocomplete、enctype等属性target属性设置设置提交表单后在何处显示响应默认为_blank在新选项卡_self为在当前页面其它值还有_parent、_top、framenameaccept-charset设置表单使用的字符集编码默认为使用页面字符集autocomplete设置是否打开自动完成功能即输入的时候是否显示用户的历史输入默认为on即开启enctype指定HTTP请求的Content-Type默认为application/x-www-form-urlencoded。novalidate属性设置为novalidate的话表示提交表单时不对其进行验证即不会验证表单的输入。表单中还可以有隐藏字段即hidden类型的inputinput typehidden元素用于在表单中包含用户不可见且不可修改的数据这些数据在用户提交表单时会一并发送到服务器。如下所示将隐藏输入框的 value 属性值设置为user对象的namevalue要设置成变量数据的话需要加上th:form action demo.php method POST input type hidden name _name th:value ${user.name}br /form以下为一些其它input元素的示例以及相关属性的说明其中一些属性是布尔属性不需要设置其值如readonly、disabled以下为下拉列表、文本输入框、按钮、datalisthtml5新增这些表单元素的使用示例如下为上面代码的效果其中图1为点击按钮时的效果图2为点击最后一个input元素时的效果元素的formaction属性会覆盖form的action属性formaction属性适用于 type submit 以及 type image 其规定当提交表单时处理该输入元素的URL。如下所示有两个提交按钮并且其提交动作不同5、canvasHTML5的canvas画布元素拥有绘制字符、圆形、图像、路径的能力画布是一个矩形区域可以控制其每一像素。canvas 本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成WebGL我们要在浏览器上开发3D游戏、3D可视化比如VR看房、3D产品展示、三维数字城市以及酷炫的活动宣传页的话可以使用WebGL。webgl 是在网页上绘制和渲染三维图形的技术之前学过的divcss、canvas 2d 都是专注于二维图形的它们之间的差异如下图所示。WebGL实际上是基于OpenGL ES设计的WebGL程序的控制代码是用JavaScript编写的其本质是JavaScript操作OpenGL接口。WebGL 开发的常用框架有Three.js、Cesium.js、Babylon.js。Unity3D将游戏发布为网页端的时候支持使用WebGL选择WebGL作为发布平台的话会通过WebGL模板将项目导出为HTML5文件并在网页中嵌入相应的代码即可。Sovit2D/3D是一个物联网2D/3D可视化方案底层使用WebGL技术可以通过组态模式类似“搭积木”的简单方式来搭建软件简单的拖拽即可完成可视化页面的编排设计来完成可视化设计如下所示。 Sovit2D/3D可以应用于物联网、电力、水利、工业互联网、智慧城市、智慧医疗、智慧农业、IT运维等各多领域效果如下所示。其它可视化解决方案还有帆软开源图表库echarts。几大计算机图形编程接口说明GDI传统的Windows图形界面开发接口基于DCDevice Context即设备上下文来进行图形绘制功能相对基础比如渐变、半透明特效需自实现无抗锯齿。图形渲染的计算通过CPU执行高渲染量的绘制工作会显著升高CPU使用率。MFC中就是使用GDI进行的绘制如下所示void CMFCTestDlg::OnPaint() { CPaintDC dc(this); // 用于绘制的设备上下文 dc.TextOutW(0, 0, Ltest); }GDIGDI的升级版面向对象模式基于Graphics对象通常从窗口的DC构造比如构造方法Graphics(HDC hdc)来进行图形绘制提供渐变透明、抗锯齿等更丰富的图形绘制功能。GDI仍然是通过CPU进行图形渲染计算。如果想要在MFC中使用GDI的话需要手动集成引入GDI库如下所示#include gdiplus.h #pragma comment(lib, gdiplus.lib) void DrawWithGDIplus(CDC* pDC) { Gdiplus::Graphics graphics(pDC-GetSafeHdc()); Gdiplus::Pen pen(Gdiplus::Color(255, 0, 0), 3); graphics.DrawLine(pen, 0, 0, 100, 100); }Direct 2D/3D利用硬件加速即GPU的强大并行计算能力来进行图形渲染计算Windows/XBOX平台专用不再依赖DC进行绘制工作而是使用COM接口。也可以手动集成Direct到MFC中来进行高性能的2D绘制或者嵌入3D视图。Direct是一整套的开发解决方案其除了图形接口还包括音频、键鼠手柄、网络等。OpenGL跨平台Windows, Linux, macOS的应用编程接口API主要聚焦于3D也可以进行2D绘制同样是使用GPU进行渲染计算。OpenGL ES是OpenGL针对手机等嵌入式设备设计的图形编程接口支持跨平台Android、IOS、Windows、MAC、Linux。如下为CPU与GPU、OpenGL、DX、显卡之间的关系Vulkan是OpenGL所属组织发布的一个新的图形API是与DirectX12能够匹敌的GPU API标准相当于是OpenGL的替代但开发复杂度比OpenGL要高。Metal是苹果推出的3D图形编程接口只支持IOS和MAC苹果号称以后的IOS和MAC上会停止对OpenGL ES的支持。ANGLE由于有的Windows系统上没有安装OpenGL驱动或者安装的OpenGL的驱动不兼容所以谷歌推出了ANGLE其被用在 chromium 项目里面。ANGLE可以将OpenGL ES API调用转换为平台可用的API比如将OpenGL ES的调用翻译成 Direct3D/Vulkan调用未来还有转换到Metal的计划。使用ANGLE后就可以用一套OpenGL代码同时运行在移动端和PC上而且不用考虑系统对OpenGL ES的兼容性。WebGL是基于OpenGL ES的一个Web 3D编程规范它提供了一系列的JavaScript API来实现在浏览器里绘制3D图形支持跨平台Android、IOS、Windows、MAC、Linux。WebGPU功能类似于WebGL但其底层基于各平台最新的3D图形接口Vulkan、Metal和Direct3D 12其可以更好地利用现代GPU的并行计算能力提供更高的图形渲染性能, 支持跨平台Android、IOS、Windows、MAC、Linux。OpenCV是提供图像处理和视频处理的基础算法库还涉及一些机器学习的算法其应用有人脸识别、物体识别、动作识别、运动跟踪、运动分析、视频降噪、汽车安全驾驶等。。6、绘制矢量图矢量图是使用数学公式描述图形的图像。矢量图具有可编辑性可以对其中的元素进行修改和调整当我们观察一张矢量图时我们可以看到它由许多数学方程描述的几何形状组成。不是像素点的集合所以其文件相对于位图较小。矢量图是基于数学公式的描述而不是像素点的集合其在放大或缩小时能保持图像的清晰度和质量不会失去细节或出现像素化而位图在放大时会变得模糊因为每个像素都会变得更大导致失去细节。一般logo会经常使用矢量图。常见的矢量图格式包括SVG可缩放矢量图形、AI、EPS。html中使用svg标签定义一个矢量图如下所示SVG与CanvasHTML中的SVG使用 XML 来描述 2D 图形因为基于 XML这意味着 SVG DOM 中的每个元素都是可用的可以为某个元素添加JavaScript 事件处理器。在 SVG 中每个被绘制的图形均被视为对象如果 SVG 对象的属性发生变化那么浏览器能够自动重现图形。SVG不依赖分辨率支持事件处理器适合大型区域渲染比如谷歌地图复杂度高会减慢渲染速度任何过度使用 DOM 的应用都不快不适合游戏应用。Canvas 是逐像素进行渲染的依赖分辨率。一旦图形被绘制完成它就不会继续得到浏览器的关注。如果其位置发生变化那么整个场景也需要重新绘制。Canvas不支持事件处理器适合图像密集型的游戏其中的许多对象会被频繁重绘。7、HTML5HTML5 是最新的 HTML 标准它是跨平台的被设计为在不同类型的硬件PC、平板、手机等之上运行。使用!DOCTYPE html声明的文档类型就表示使用HTML5HTML5 中默认的字符编码是 UTF - 8。HTML5新增了许多标签元素如header、dialog新增了许多表单控件如日期、日历新增了一些API比如用本地存储取代 cookie。HTML5也废弃了一些标签元素如下所示acronymappletbasefontbigcenterdirfontframeframesetnoframesstrikett8、XHTMLXHTML是以 XML 格式编写的 HTML它是更严格更纯净的 HTML 版本它与 HTML 4.01 几乎是相同的。HTML中对于一些书写错误也能正确标识比如缺少关闭标签属性值无引号等但是对于一些小型设备其往往缺乏解释“糟糕”的标记语言的能力所以就必须使用XHTML。XHTML中的文档类型声明!DOCTYPE ....是必须的head、title 以及 body 也是必须的。9、响应式网页设计与BootStrap响应式网页设计WRDResponsive Web Design)指的是能够以可变尺寸传递网页即一个网站能够针对多个类型的终端PC、移动、平板提供不同的显示样式而不是针对每个终端制作一个特定的版本。BootStrap是一个前端开发工具包前端开发框架基于html、css和javascript主要用于构建响应式网站并且是移动优先原则。BootStrap也提供了很多css样式和js插件使得web开发更加便捷这块与vue相比的话BootStrap的缺点是如果使用BootStrap现成的插件进行开发的话会很快但是想对于组件进行订制就不太方便自定义标签或部件的话需要一些额外的代码或查找额外的插件而vue则适合开发自定义功能和交互比较多的web。 目前最新的BootStrap 5已经从jQuery依赖切换到了使用原生的JavaScript。 Bootstrap 5 与所有现代浏览器兼容Chrome、Firefox、Edge、Safari 和 Opera。有两种获得Bootstrap的方法一种是引用来自 CDN 的 Bootstrap 5一种是从其官网 https ://getbootstrap.com/)下载 Bootstrap 5后自己托管来引用。比如我们可以使用W3School为Bootstrap 的 CSS 和 JavaScript 提供的CDN这样用户请求的时候会从最近的缓存中获取Bootstrap加载时间更短。如下所示为通过第一种方式来引用Bootstrap并对其使用Bootstrap 5 的JavaScript 用于不同的组件如模态、工具提示、弹出框等如果只使用 Bootstrap 的 CSS 部分的话可以不引用Bootstrap JS。Foundation也是一个用来快速构建响应式、移动设备优先Web项目的开源前端框架它也提供了类似于Bootstrap的丰富的CSS、JS等前端组件如按钮、表格、表单、导航、分页等。Foundation还提供了数据可视化、交互式表单等一些复杂的组件。10、jQueryjQuery 是一个 JavaScript 函数库它包含HTML 元素选取、元素操作、事件函数CSS操作JS特效和动画HTML DOM遍历和修改AJAX等功能。同时JQuery对于不同浏览器有很好的兼容性比如不同浏览器对 AJAX 的实现并不相同如果你不想编写额外的测试代码的话就可以使用jQuery中的AJAX功能。使用JQuery会极大地简化 JavaScript 编程。jQuery 库位于一个 JavaScript 文件中可以像引入Bootstrap JS一样引入它。如下使用了 jQuery 的 hide() 函数当点击button后会隐藏了 HTML 文档中所有的 p 元素可以看到上面引入js文件的时候添加了type类型而在上面引入Bootstrap的时候并没有指定type这是因为上面BootStrap中使用的是HTML5JavaScript 已经是 HTML5 以及所有现代浏览器中的默认脚本语言。如果不想自己托管jQuery库那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。使用Google的CDNheadscript typetext/javascript srchttp://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js/script/head使用Miscrsoft的CDNheadscript typetext/javascript srchttp://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js/script/head使用谷歌或微软的 jQuery有一个很大的优势许多用户在访问其他站点时已经从谷歌或微软加载过 jQuery所以JQuery已经被缓存而且大多数 CDN 都可以确保当用户向其请求文件时会从离用户最近的缓存服务器上返回响应。随着HTML5的到来jQuery现在已经不流行了因为HTML5中已经完善了浏览器的兼容问题jQuery 实现的很多功能现在通过几行新标准的JavaScript也能实现。而后面出现的AngularJS、React、vue这些前端框架进一步简化了JS操作比如它们使用MVVM结构Model数据模型、View视图UI组件、ViewModel同步View和Model的对象即二者使用ViewModel进行交互使得数据与视图分离通过数据来驱动视图封装了DOM操作进而使DOM操作从业务代码中移除, 这样使得jQuery的DOM操作便没有了用武之地。
