【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)

简介: 【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)

觉得有帮助请点赞关注收藏~~~

一、HTML基础

HTML全称是HyperText Markup Language 是网页的标准标记语言,使用HTML可以创建自定义网站或者模板网站,HTML代表超文本标记语言,主要用于描述网页结构,HTML页面元素体现浏览器如何显示内容,英文字母的大写和小写在HTML中做相同处理

HTML元素组成的页面基本结构,其中<!DOCTYPE html> 声明定义此文档为 HTML5,<html lang="en">表示页面语言为英文。HTML 元素由开始标签、内容和结束标签共同组成,例如<html></html>

实例如下

<!DOCTYPE html>

<html lang="en-US">

<html>

<head>

<title>标题

</title>

HTML主要元素的含义和说明如下表

二、CSS基础

CSS全称 Cascading Style Sheets 指定HTML元素显示的风格和样式,CSS语法格式如下

selector {property: value}

其中selector是选择子,如果值为#id,代表HTML元素对应的id;如果是.classname,则大括号内代表所有类名为classname的HTML元素的显示样式;如果是elementname.classname,则代表HTML元素名elementname对应的类名 classname的显示格式;*代表所有页面元素;如果是elementname则仅适用于该页面元素。property代表字体(font-size)、颜色(color)以及位置(text-align)等,value是具体的属性值,比如字体大小等。

CSS分为内嵌CSS、内部CSS和外部CSS三种格式。

内嵌式直接将显示样式代码嵌入HTML元素定义中,通过style关键字设定,内部式CSS通过HTML的<head>部分<style>元素指定,而外部式CSS通过<head>部分的<link>元素指定

三、BootStrap基础

Bootstrap 是网站开发的前端框架,包括基于 HTML 和 CSS 的模板,用于优化表单、按钮、表格等排版,可以根据设备类型(如手机和电脑)创建自适应设计效果。

1:自适应显示设置

width=device-width将浏览器宽度设置为设备宽度

2:容器

Bootstrap中,一般需要配置容器来包含网站内容,可以在元素的类属性中设置,容器类包括container和container-fluid两种 前者宽度固定 而后者占浏览器显示的全部宽度

3:列宽

Bootstrap默认将屏幕划分为十二单元列,可以合并单元列调整显示宽度

4:颜色

Bootstrap可以通过颜色类定制显示效果的颜色,导入相关Bootstrap库后在HTML文件中的配置

5:按钮

Bootstrap支持不同风格的按钮显示,可以通过不同类属性来设置

6:菜单

Bootstrap中可以通过navbar类来设置菜单属性,navbar-expand则控制菜单的横向和纵向显示属性

7:隐藏

Bootstrap通过collapse类设置网页内容的显示和隐藏属性,可以利用data-toggle=”collpase“声明,而data-target可以实现显示目标对象或者隐藏目标对象显示的目的

8:窗体

Bootstrap通过form-group和form-control定义窗体显示,窗体可以包含用户输入,文本框以及选择等项目

9:弹出窗体

Bootstrap通过配置弹出窗体类声明对特定页面元素操作后的弹出窗体属性

创作不易 觉得有帮助请点赞关注收藏~~~

相关文章
|
人工智能 自然语言处理 JavaScript
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
Magnitude是一个基于视觉AI代理的开源端到端测试框架,通过自然语言构建测试用例,结合推理代理和视觉代理实现智能化的Web应用测试,支持本地运行和CI/CD集成。
2664 15
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
|
前端开发
基于CSS3+Bootstrap实现的侧边栏后台菜单源码
CSS3+Bootstrap实现的侧边栏后台菜单特效源码是一段基于Bootstrap和图标库制作的侧边栏菜单后台管理页面效果代码,简洁大方、易于管理,是一段非常不错的后台菜单栏效果,欢迎对此段代码感兴趣的朋友前来下载。
287 54
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
629 1
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
1197 1
|
开发框架 Java .NET
基于SpringBoot+Bootstrap【爱码个人博客系统】附源码
基于SpringBoot+Bootstrap【爱码个人博客系统】附源码
616 1
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
493 1
|
前端开发 开发者 安全
JSF表单处理大揭秘:数据绑定与事件处理,如何让Web应用更加智能?
【8月更文挑战第31天】在现代Web应用开发中,JSF(JavaServer Faces)框架因强大的表单处理能力而广泛应用。其数据绑定机制可实现表单控件与后端模型的双向传输,降低前后端耦合度,提高代码维护性和类型安全性。事件处理机制则支持丰富的内置与自定义事件,进一步增强应用灵活性。本文通过示例代码展示这些特性,帮助开发者更好地利用JSF构建高效、灵活的Web应用。然而,JSF也存在组件库较小和学习成本较高等局限,需根据具体需求权衡使用。
213 0
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
502 0
|
前端开发 JavaScript 开发者
革命性的飞跃:Apache Wicket新特性大揭秘,让你的Web开发之旅如虎添翼!
【8月更文挑战第31天】Apache Wicket作为一个成熟的Java Web框架,持续进化以适应现代Web开发需求。本文介绍Wicket的最新特性,包括响应式布局支持、组件化与模块化开发、异步请求处理、增强的表形处理以及与现代JavaScript框架的集成。通过具体代码示例展示如何利用这些特性构建高效、灵活且用户友好的Web应用程序。
419 0

热门文章

最新文章