【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集成。
1961 15
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
291 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
609 33
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek 实践应用解析:合力亿捷智能客服迈向 “真智能” 时代
DeepSeek作为人工智能领域的创新翘楚,凭借领先的技术实力,在智能客服领域掀起变革。通过全渠道智能辅助、精准对话管理、多语言交互、智能工单处理、个性化推荐、情绪分析及反馈监控等功能,大幅提升客户服务效率和质量,助力企业实现卓越升级,推动智能化服务发展。
502 1
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
263 22
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
267 24
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
331 6
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
498 1
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
146 0
CSS3几何透明层文本悬停变色源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
100 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码