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

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

相关文章
N..
|
1月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
|
3月前
|
XML 移动开发 前端开发
HTML5简介(什么是网页、什么是 HTML、Web标准)
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
37 0
|
12天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
19 1
|
12天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
30天前
|
移动开发 监控 数据可视化
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
组态软件之万维组态、web组态、html组态、vue2/vue3组态,组态在工业自动化领域越来越重要,但由于市面上组态软件费用昂贵、集成复杂,使用技术门槛高,万维组态就应运而生;万维组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,使用Vue2和Vue3语言,基于B/S架构进行开发,支持WEB端显示;支持快速集成,集成简单方便;支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统;
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
23 0
|
2月前
|
人工智能
瓴羊One·客服与AI大模型技术联合打造智能服务新体验
瓴羊One·客服与AI大模型技术联合打造智能服务新体验
|
3月前
|
前端开发 Linux 编译器
web开发:HTML详解
web开发:HTML详解
46 0
|
3月前
|
前端开发 JavaScript 定位技术
web版拳皇,使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏
38 0
|
3月前
|
移动开发 前端开发 JavaScript
web前端基础(一)——HTML+CSS
web前端基础(一)——HTML+CSS
106 0