办公室留言系统实现

最新推荐文章于 2024-08-03 22:09:54 发布

a1937935900

最新推荐文章于 2024-08-03 22:09:54 发布

阅读量730

点赞数

分类专栏： LAMP架构文章标签： html css mysql php lamp

本文链接：https://blog.csdn.net/a1937935900/article/details/76446968

版权

LAMP架构专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、HTML

HTML（hyper text makeup language）超文本标记语言，稳当的一种类型，类似红头文件，可分为头信息(head)和主体内容(body)，标记语言，不是程序语言，给人画图的感觉。使用标签来描述网页

如何使用html语言实现网页效果

可以使用记事本编辑HTML代码，通过浏览器执行就可以

HTML语法规范

元素：html head title body meta div等

标签：> < 是标签是闭合的

<img /> 该标签页有闭合，是单标签

meta标签 keywords 提供分类点击标志

meta标签 description 提供基本介绍搜索引擎在搜索页面时可以取出该内容

meta标签 http-equiv="Content-type" 用来标记页面的解码方式

文件本身编码、内容编码和浏览器识别编码必须相同浏览器识别编码默认为gbk/gb2312

HTML标签讲解

结构html 样式css 行为javascript

结构在html里体现就是各种标签，我们将需要显示的内容在各种标签中呈现出来

标题标签 h1-h6 字体由大变小

段落标签 <p></p>

换行<br />和水平线<hr /> 标签

列表标签 <ul><li></li><li></li></u;l>无序列表 <ol></ol>有序列表

超链接

<!--html注释内容

超链接内容：-->

内部链接

外部链接

链接到外部网站 <a href=" http://........ ">…</a>
链接到email <a href=“mailto:邮件地址”>…</a>
链接到下载文件 <a href="文件地址">…</a>

引入图片

src:图片路径源地址

alt:显示信息， w3c规定必须得写

titlr;鼠标悬停提示信息

当前目录的图片，相对路径，当前目录可用"./3d.jpg"上级目录"../"上两级目录"../../"上三级目录"../../../" <imgsrc=“3d.jpg” alt=“” title=“”/>

绝对路径，同一服务器上的图片 <imgsrc=“file:///d:/picture/3d.jpg” alt=“” title=“” />
网络上的图片<imgsrc=“http://i3.itc.cn/sdsd/1.jpg” alt=“” title=“” />

图片基本格式

gif：在压缩过程中，图像的像素资料不会被丢失，然而丢失的却是图像的色彩。GIF格式最多只能储存256色，所以通常用来显示简单图形及字体。

jpg：利用一种失真式的图像压缩方式将图像压缩在很小的储存空间中，其压缩比率通常在10:1～40:1之间。这样可以使图像占用较小的空间，所以很适合应用在网页的图像中。JPEG格式的图像主要压缩的是高频信息，对色彩的信息保留较好，因此也普遍应用于需要连续色调的图像中。有损压缩

png：PNG能够提供长度比GIF小30％的无损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。要求背景透明可用

上标<sup>和下标<sub>标签

容器标签 div span （无语意标签）

div：容器标签，可将其他标签放入容器中，通过控制div，间接控制内容的位置、颜色、大小等样式

每个div需要占据一行，大容器大容器里可嵌套小容器可以把<div></div>中的内容视为一个独立的对象，用于以后学习的CSS的控制

span：多个span会共享一行，小容器该标签可以包含于<div>标签中，成为它的子元素，而反过来则不成立，即<span>标签不能包含<div>标签。

符号实体

引入多媒体

HTML发展历史

现在使用的版本为XHTML1.0

二、CSS

css（cascading style sheet）层叠样式表，w3c要求在编写前端静态页面时，结构（HTML）、样式/外观（css）、行为（javascript）要分离。我们通过css改变网站的颜色、宽、高、位置、大小、等外观样式。

html标签达到样式效果 <b></b>内容加粗体 <i></i> 加字体斜体效果，在w3c中不建议使用

如何使用CSS

获得一个对象，并对对象的相应属性赋予相应的样式

第一步：获得一个对象

<html>

</html>

第二个：为对象赋予什么属性

例如：颜色、宽度、高度、字体大小等等

第三个：给这个对象的属性赋予什么值

例如颜色：红色、绿色

宽度：100px 200px

CSS引入的4种方式

1.内部样式引入

2.行内样式引入

3.外部样式

4.样式嵌套

CSS获取对象的方式、选择器

css选择器使用，获得css样式对象过程就是选择的过程

1、通过id来获得——id选择器（唯一标识选择器）

2、标签选择器 div p h1 span

3、类别选择器属性class

我们的html文档里边有许多标签，当某些标签的样式是一致的，就可以使用类别选择器进行样式赋予

4、派生选择器

选择器选择器选择器

5、分组选择器

选择器，选择器，选择器，

我们可以挑选我们需要的元素对象进行样式赋予

6、通用选择器* 可以将html文档中全部标签都获得，效率低

7、伪类选择器

超链接a 默认样式:link、访问后样式:visited:、鼠标滑过样式;hover、鼠标按下样式:active

顺序固定；LVHA

注意：超链接a的属性href一定要完整，不要使用#简单的标志。有些浏览器不能识别简单,例如：href=”#”

选择器优先级

行内>id>类别>派生>分组>标签>通用

DTD（document type defined）文档类型定义

我们使用xhtml1.0版本编写html代码，使用DTD告知浏览器当前html文档的版本，这样浏览器按照DTD的声明版本来解释html代码

XHTML1.0规范

标签必须闭合

标签大小写有区分

属性值必须使用引号

有根节点元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

strict：严格按照XHTML1.0规范

transitional：既有html4.0 不严格

frameset：

html5定义类型

背景及宽高设置

宽高设置：width height

背景设置：

颜色 background-color 在css设置颜色有三种方法：1、英文字母 2、使用6位16进制数表示颜色 #23AD65 3、使用rgb格式 rgb(0-255,0-255,0-255)

图片 background-imag

图片的repeat，平铺 background-repeat：repeat-x -y no-repeat 决定图片平铺选项对于多图片网站，可将大图片裁成小图片，通过平铺显示为大图片

图片的位置 background-position x位置 left center right 具体像素值 y位置 top center buttom 具体像素值

背景图片的附着 background-attachment：fixed/scroll

可用统一的一个符合样式来设置 background:颜色图片平铺附着位置

字体样式设置：文字颜色color、大小font-size、高度line-height、字体、倾斜、

下划线等 text-decoration: underline overline line-through blink

font-style:italic;/*normal italic obliqueZ 文字倾斜 */
font-weight:bold;/*文字粗体*/
text-align:left;/*文字对齐方式left center right*/
text-indent:20px;/*文本缩进像素*/

字体设置：文字在网页中显示，不需要多种花样，两个基本字体：有衬线serif（美观，内容正文，Times New Roman）和无衬线sans serif（标题，字号较大，内容较少，Arial）

混合字体中，默认黑体可同时包含中英文分布对中英文设置字体类型，先设置英文字体，再设置中文

字体备份，设置两个字体类型，第一个没有，可用第二个

选择正确字体

无序列表样式设置

list-style:none list-style-image l ist-style-position list-style-type

div+css布局

div，是一个无语义容器标签，将一般性内容放入div中，通过控制div来间接控制网站内容的样式，可类比为，摩天大楼的钢筋混凝土的结构

css，层叠样式表，设置容器内容的外观和位置可类比为摩天大楼的装修工作

将DIV和CSS分开优势：

页面布局发展的3个阶段：table网页设计 table+css网页设计（内容和样式混合）（table布局，css指定外观） DIV+CSS（div放内容，css指定样式）

DIV布局

盒子：内容、内边距、边框、外边距

一个盒子实际占据的宽度和高度由内容+内边距+边框+外边距组成，即内容 width+padding+border+margin

盒子模型边框border分析

border-style:dotted;/*边框样式solid dotted dashed double*/
border-width:2px;/*边框厚度 thin thick*/
border-color:red;/*边框颜色*/

边框的四边还可以分别设置

border-top/left/right/bottom-style

复合属性设置border边框样式

border:宽度样式颜色

盒子模型margin外边距分析

margin-top:20px;
margin-bottom:20px;
margin-left:20px;
margin-right:40px;

复合属性设置：margin:top right buttom left

上下外边距累加：上下外边距重叠后没有出现累加效果，而是以较大外边距为准

居中效果：margin:auto;/*盒子居中效果，以父级盒子的大小为准*/

盒子内边距padding分析

我们在设置边框和内边距时，内容大小并不改变，只是改变盒子的大小；内边距颜色为盒子背景颜色

padding： top right bottom left

样式初始化

对于一些html标签，浏览器分配了默认的样式，如

body：左外边距、上外边距

h1-h6:：字体大小、上下外边距等样式

超链接：文字有蓝色和下划线样式

段落p：上下外边距

我们不需要标签默认样式，通过css来去默认，并进行样式初始化

浮动效果float

只要div实现浮动效果，就可在一行展示多个div

float:left

三、PHP

四、MySQL

五、办公留言系统网站开发实例

如何通过php程序操作MySQL数据库，利用PHP语言实现数据的增、删、改、查

php程序实现数据的增加-留言添加

MySQL_connect(主机名，用户名，密码)

mysql_select_db(库名，连接句柄)

mysql_query('set names utf8')设置字符集

拼写具体sql语句（insert）

将sql语句发送到数据库执行 mysql_query(sql语句)

判断是否执行成功

mysql_query() 将sql语句发送到数据库执行

返回值：

针对增。删。改返回布尔值

针对查语句返回资源结果集

mysql_fetch_assoc() 从资源结果集中获取具体的信息结果，信息结果以数组形式返回，每次只获得一条结果

展示留言板

查询内容出现？号乱码

执行set names gbk;

a1937935900

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
办公室留言系统实现

一、HTMLHTML（hyper text makeup language）超文本标记语言，稳当的一种类型，类似红头文件，可分为头信息(head)和主体内容(body)，标记语言，不是程序语言，给人画图的感觉。使用标签来描述网页二、CSS css（cascading style sheet）层叠样式表，w3c要求在编写前端静态页面时，结构（HTML）、样式/外观（css）、行为（javascript）要分离。我们通过css改变网站的颜色、宽、高、位置、大小、等外观样式。
复制链接

扫一扫