【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通过配置弹出窗体类声明对特定页面元素操作后的弹出窗体属性

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

相关文章
|
7月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
7月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
7月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
7月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
7月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
3月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
324 4
|
7月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
7月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析,结合官方文档深度扩展。内容涵盖点击响应时延核心指标(≤100ms)、性能分析工具链(如DevTools时间线、ArkUI Trace抓取)以及高频优化场景,包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧,如首帧加速、透明动画陷阱规避及Web组件初始化加速,并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议,助力开发者提升Web应用性能。