HTML总结2 [转]

milanleon

已于 2024-03-27 15:19:34 修改

阅读量635

点赞数

分类专栏： HTML 文章标签： html 前端

于 2023-08-23 13:47:18 首次发布

本文链接：https://blog.csdn.net/milanleon/article/details/131995950

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以下转载和参考自：HTML 表单。

1、表格

可以通过 CSS 设置表格的样式：

如下为将上面table.lamp th,td样式中的padding注释掉，开启table.lamp中的padding的效果：

2、列表

3、导航栏

导航栏使用<ul>列表实现，以下为一个垂直导航栏：

可以为导航栏添加边框，通过添加ul的border，li的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，其它的还有target属性设置设置提交表单后在何处显示响应（默认为_blank在新选项卡，_self为在当前页面，其它值还有_parent、_top、framename），accept-charset设置表单使用的字符集编码（默认为使用页面字符集），autocomplete设置是否打开自动完成功能，即输入的时候是否显示用户的历史输入（默认为"on"即开启），enctype指定HTTP请求的Content-Type，默认为application/x-www-form-urlencoded。novalidate属性设置为"novalidate"的话表示提交表单时不对其进行验证，即不会验证表单的输入。

以下为一些其它input元素的示例，以及相关属性的说明（其中一些属性是布尔属性，不需要设置其值，如readonly、disabled）：

以下为下拉列表、文本输入框、按钮、datalist（html5新增）这些表单元素的使用示例：

如下为上面代码的效果，其中图1为点击按钮时的效果，图2为点击最后一个input元素时的效果：

元素的formaction属性会覆盖form的action属性，formaction属性适用于 type = "submit" 以及 type = "image"，其规定当提交表单时处理该输入元素的URL。如下所示有两个提交按钮并且其提交动作不同：

5、canvas

HTML5的canvas（画布）元素拥有绘制字符、圆形、图像、路径的能力，画布是一个矩形区域，可以控制其每一像素。canvas 本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

WebGL

我们要在浏览器上开发3D游戏、3D可视化（比如VR看房、3D产品展示、三维数字城市）以及酷炫的活动宣传页的话，可以使用WebGL。webgl 是在网页上绘制和渲染三维图形的技术，之前学过的div+css、canvas 2d 都是专注于二维图形的，它们之间的差异如下图所示。WebGL实际上是基于OpenGL ES标准设计的，WebGL程序的控制代码是用JavaScript编写的，其本质是JavaScript操作OpenGL接口。WebGL 开发的常用框架有Three.js、Cesium.js、Babylon.js。

Unity3D将游戏发布为网页端的时候也支持WebGL技术，选择WebGL作为发布平台的话，会通过WebGL模板将项目导出为HTML5文件，并在网页中嵌入相应的代码即可。

WebGPU也能够实现3D渲染，它是基于底层的GPU硬件架构设计的，可以更好地利用现代GPU的并行计算能力，提供更高的图形渲染性能。除了web端，它还支持移动和桌面平台，但WebGPU还处于初级阶段，应用不如WebGL广泛。

Sovit2D/3D是一个物联网2D/3D可视化方案，底层使用WebGL技术，可以通过组态模式（类似“搭积木”的简单方式来搭建软件，简单的拖拽即可完成可视化页面的编排设计）来完成可视化设计，如下所示。 Sovit2D/3D可以应用于物联网、电力、水利、工业互联网、智慧城市、智慧医疗、智慧农业、IT运维等各多领域，效果如下所示。其它可视化解决方案还有帆软，开源图表库echarts。

6、绘制矢量图

矢量图是使用数学公式描述图形的图像。矢量图具有可编辑性，可以对其中的元素进行修改和调整，当我们观察一张矢量图时，我们可以看到它由许多数学方程描述的几何形状组成。不是像素点的集合，所以其文件相对于位图较小。矢量图是基于数学公式的描述，而不是像素点的集合，其在放大或缩小时能保持图像的清晰度和质量，不会失去细节或出现像素化，而位图在放大时会变得模糊，因为每个像素都会变得更大，导致失去细节。一般logo会经常使用矢量图。常见的矢量图格式包括SVG（可缩放矢量图形）、AI、EPS。

html中使用<svg>标签定义一个矢量图，如下所示：

SVG与Canvas：

HTML中的SVG使用 XML 来描述 2D 图形，因为基于 XML，这意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素添加JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象，如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。SVG不依赖分辨率，支持事件处理器，适合大型区域渲染（比如谷歌地图），复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快），不适合游戏应用。

Canvas 是逐像素进行渲染的，依赖分辨率。一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制。Canvas不支持事件处理器，适合图像密集型的游戏（其中的许多对象会被频繁重绘）。

7、HTML5

HTML5 是最新的 HTML 标准，它是跨平台的，被设计为在不同类型的硬件（PC、平板、手机等）之上运行。使用<!DOCTYPE html>声明的文档类型就表示使用HTML5，HTML5 中默认的字符编码是 UTF - 8。HTML5新增了许多标签元素，如<header>、<dialog>，新增了许多表单控件，如日期、日历，新增了一些API，比如用本地存储取代 cookie。HTML5也废弃了一些标签元素，如下所示：

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

8、XHTML

XHTML是以 XML 格式编写的 HTML，它是更严格更纯净的 HTML 版本，它与 HTML 4.01 几乎是相同的。HTML中对于一些书写错误也能正确标识，比如缺少关闭标签，属性值无引号等，但是对于一些小型设备，其往往缺乏解释“糟糕”的标记语言的能力，所以就必须使用XHTML。XHTML中的文档类型声明<!DOCTYPE ....>是必须的，<head>、<title> 以及 <body> 也是必须的。

9、响应式网页设计与BootStrap

响应式网页设计（WRD，Responsive 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、jQuery

jQuery 是一个 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中使用的是HTML5，JavaScript 已经是 HTML5 以及所有现代浏览器中的默认脚本语言。如果不想自己托管jQuery库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

使用Google的CDN：

使用Miscrsoft的CDN：

使用谷歌或微软的 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操作便没有了用武之地。

11、AJAX

AJAX（Asynchronous JavaScript And XML）可以在不重载整个页面的情况下，实现了对部分网页的更新，即不刷新页面来更新网页。AJAX可以在页面加载后从服务器请求和接收数据，以及在后台向服务器发送数据。

AJAX是一项技术，它通过浏览器内建的 XMLHttpRequest 对象来从 web 服务器请求数据，然后通过JavaScript 和 HTML DOM来显示或使用数据，如下所示。Ajax 可使用 XML 来传输数据，但将数据作为JSON 文本或纯文本传输也很常见。

如下使用了AJAX技术，按钮在点击的时候会通过XMLHttpRequest来请求数据，然后通过JS来显示回应的数据：

milanleon

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML总结2 [转]

BootStrap也提供了很多css样式和js插件，使得web开发更加便捷，这块与vue相比的话，BootStrap的缺点是，如果使用BootStrap现成的插件进行开发的话会很快，但是想对于组件进行订制就不太方便，自定义标签或部件的话需要一些额外的代码或查找额外的插件，而vue则适合开发自定义功能和交互比较多的web。表单用于收集用户的输入，如下图所示，用来定义表单，表单中的元素有input 元素（如text文本输入、radio单选按钮、submit提交按钮）、单选按钮、文本输入框等。
复制链接

扫一扫