web前端必学功法之一：留言板

# web前端必学功法之一：留言板

案例效果：

![在这里插入图片描述](https://img-blog.csdnimg.cn/81d380bed5294f54bdc41d63ec79214d.gif#pic_center)

```html

css部分

<style>

.container{

width: 600px;

}

.mes-board{

margin: 25px 0;

padding: 10px;

background-color: gray;

}

.mes-board li{

padding: 0.7em;

list-style: none;

}

.mes-board li + li {

border-top: 1px dashed #ffffff;

}

.mes-board h4{

display: inline;

margin-right: 10px;

font-weight: 400px;

color: #000000;

}

.mes-board small{

color: #999999;

float: right;

}

.mes-board div{

padding: 0.4em 0;

text-align: justify;

font-size: 12px;

margin-top: 10px;

}

</style>

html部分：

</div>

<li>

<h4>admin</h4>

<div>

EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEOOOOOO

PPPPPPPPPPPPPPPPPPPPPPPPPPPPPEEEEEEEEEEEEEEEEEEEEEEEEEEE

</div>

</li>

<li>

<h4>admin</h4>

<div>

EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEOOOOOO

PPPPPPPPPPPPPPPPPPPPPPPPPPPPPEEEEEEEEEEEEEEEEEEEEEEEEEEE

</div>

</li>

</div>

```

```javascript

<!--

留言板

实现思路：

1.获取用户姓名与留言内容

2.判断值是否为空，如果为空，则提示信息

3.绑定提交按钮的点击事件

4.获取姓名，留言内容以及当前系统时间，拼接成指定的html标签

5.将标签追加到留言表中

-->

// 发送留言

$("#sendBtn").click(function(){

//获取用户姓名

var userName = $("#userName").val();

//判断非空

if(userName == null || userName.trim() == ""){

$("#msg").html("用户姓名不能为空！");

return;

}

//获取留言内容

var content= $("#content").val();

//判断非空

if(content.trim() == ""){

$("#msg").html("请输入留言内容！");

return;

}

//留言数据

var msg = "<li><h4>"+userName+"</h4><small>"+formatDate()+"</small>";

msg +="<div>"+content+"</div></li>";

//将留言内容追加到留言板中

$("#msgBoard").prepend(msg);

//清空内容与提示信息

$("#userName").val("");

$("#content").val("");

$("msg").val("");

});

//格式化时间

function formatDate(){

//获取系统当前时间

var date = new Date();

//获取年月日时分秒

var str = date.getFullYear()+"-"+(parseInt(date.getMonth())+1)+"-"+date.getDate();

str +" "+ date.getHours +":"+ date.getMinutes()+":"+date.getSeconds();

return str;

}

</script>

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 链接

如何在HTML文档中创建链接。

(可以在本页底端找到更多实例)

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：:

href 属性描述了链接的目标。.

实例

<a href="http://www.runoob.com/">访问菜鸟教程</a>

上面这行代码显示为：: 访问菜鸟教程

点击这个超链接会把用户带到菜鸟教程的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

实例

<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

访问有用的提示部分</a>

基本的注意事项 - 有用的提示

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"。

图片链接

如何使用图片链接。

在当前页面链接到指定位置

如何使用书签

跳出框架

本例演示如何跳出框架，假如你的页面被固定在框架之内。

创建电子邮件链接

本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

建电子邮件链接 2

本例演示更加复杂的邮件链接。

HTML 链接标签

标签	描述
<a>	定义一个超级链接

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

一篇文章我们说了单选框、多选框以及下拉框的使用，今天呢我们继续看一下表单剩下的常用控件：提交按钮以及重置按钮。

（1）提交按钮

提交按钮，顾名思义就是当我们填好了表单中的数据之后，我们需要通过提交按钮来将数据传递到后台的服务器中，供后台程序使用。

使用语法：<input type="submit" value="提交数据">

详细讲解：

1、type：只有当type值设置为submit时，按钮才有提交作用，才能正常的进行表单的提交。（或者使用JavaScript代码来触发提交事件，这个到后期我们讲解js的时候我进行介绍）

2、value：按钮上显示的文字，显示按钮的名称。

（2）重置按钮

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

使用语法：<input type="reset" value="重置数据">

详细讲解：

1、type：只有当type值设置为reset时，按钮才有重置作用，点击按钮会将form表单内的所有信息还原到初始未输入的状态。

2、value：按钮上显示的文字，显示重置按钮的名称

使用练习：

我们创建一个表单，数据我们以post的形式提交到百度首页，表单里边有姓名和年龄的输入框，并且添加提交数据按钮以及重置数据按钮。具体代码如下图所示：

在网页中的显示效果就如下图所示：

我们在姓名和年龄输入框中输入内容，点击重置数据既可以清空里边的内容，还原到初始状态，点击提交数据按钮，那么数据将会提交到我们的指定链接处。

以上呢就是表单最常用的一些控件了，接下来我们对学到的表单知识进行一次综合的测试，我们来写一个完整的表单包含我们学到的所有知识。

我们在这里就写一个网站制作常用的留言表，表格名称就叫留言表，然后表中包含有姓名输入框、性别单选框（默认选中男）、爱好多选框（默认选中第一个）、所在地区下拉框、留言内容多行文本框，以及提交信息按钮和重置信息按钮。数据提交呢我们还是提交到百度，提交类型我们使用post。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

好了，到了这里我们的第一个表单就算是做完了，到这有人就会问了，为什么别人的代码在浏览器上看起来都是那么的规整，我这么写完看着怎么这么丑，接下来的文章我们将为大家介绍css的知识了，学习了css你也可以将你的页面做的高达上起来。最后大家看完一定要自己动手写一写，只有自己写出的代码才能体会到其中的乐趣，多加练习才是王道。

每日金句：人生最大的喜悦是每个人都说你做不到，你却完成它了！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

在线咨询

上一篇：「前端开发」HTML5 新特性学习
下一篇：HTML常用字体标签：揭秘HTML字体标签，让你的网页“字”得其乐！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web前端必学功法之一：留言板

（1）提交按钮

（2）重置按钮

您的项目需求