您的位置：首页 > Web前端 > CSS

HTML+CSS+DIV+表单制作

2014-05-26 09:55 274 查看

Html 、CSS、JavaScript 综合运用：注册表单的制作

1 Html

什么是 HTML？

HTML 是用来描述网页的一种语言。

· HTML 指的是超文本标记语言 (Hyper Text Markup Language)

· HTML 不是一种编程语言，而是一种标记语言 (markup language)

· 标记语言是一套标记标签 (markup tag)

· HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

· HTML 标签是由尖括号包围的关键词，比如 <html>

· HTML 标签通常是成对出现的，比如 <b> 和 </b>

· 标签对中的第一个标签是开始标签，第二个标签是结束标签

· 开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

· HTML 文档描述网页

· HTML 文档包含 HTML 标签和纯文本

· HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>

     <body>

            <h1>My First Heading</h1>

            <p>My first paragraph.</p>

     </body>

</html>

例子解释

· <html> 与 </html> 之间的文本描述网页

· <body> 与 </body> 之间的文本是可见的页面内容

· <h1> 与 </h1> 之间的文本被显示为标题

· <p> 与 </p> 之间的文本被显示为段落

2 css

CSS 概述

· CSS 指层叠样式表 (Cascading Style Sheets)

· 样式定义如何显示 HTML 元素

· 样式通常存储在样式表中

· 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

· 外部样式表可以极大提高工作效率

· 外部样式表通常存储在 CSS 文件中

· 多个样式定义可层叠为一

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1 浏览器缺省设置

2 外部样式表

3 内部样式表（位于 <head> 标签内部）

4 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS知识点：

|--css样式的某些样式存在着继承关系，如字体，在body中定义了样式之后，里面的元素会有相同的性质，如果里面的元素定义了自己的样式，那么就优先是用自己的样式。这和java中的继承类似。这些元素如：p、td、ul、ol、li、dt、dd等。

|--样式表特殊格式：

|--div p{ } ：派生选择器或者上下文选择器，因为上下有联系。

这种格式针对于div 里面的p标签，当用当<div><p></p></div> 时，会产生效果。

|--.center{ }：类选择器。第一个字符不能是数字。

用法如：.center{text-align:center;}实现文本的居中对齐。

这种类似，是用类时一起使用得到效果。派生用法。.div .p{ }，

<div class="div"><p class="p"></p></div>

或者 .center td{ }

|--id选择器(不常用)：和js中的id属性冲突，也成为唯一选择器。一旦使用了这个，其他的相同类样式不能作用在元素上。

    定义：#pid{ } 用#来定义

    是用：id="pid"

|--div：层，单独占据一行，可以调节其宽和高，里面可以嵌套div，里面可以有<span>         </span>标签，用来控制里面的内容，如位置等。

|--使用：

|--连接外部样式表：在<head> <link href="myCss.css" style="text/css" rel="stylesheet" /> </head>

|--内部样式表：在本html文档的head标签内直接写css样式。

格式：<style> p{color:#f00;} table{ border:1px;}</style>

|--内联样式：在各个标签中使用样式，

如：<p style="color:#f00;margin-left:20px"></p>

三种样式权限从大到小：内联、内部、外部。

|--CSS背景：不能被继承

|--使用背景色：background-color:#f00;padding:20px; 可以为body以及里面的元素各部分添加背景色。

|--使用背景图像：background-image:url(../image/1.jpg);同样的可以对某一个元素部分进行背景图像的设置。甚至可以设置：textareas和select，即文本域和下拉菜单选项。

css样式表中常用属性：

1 文本对其方式： text-align: center;

2 颜色：color: black;或者 color: #000;

3 字体：font-family: arial;

4 背景色：background: #fff;

5 边距：margin：0,auto;

|--margin-bottom

|--margin-left

|--margin-right

|--margin-top

6 填充距：padding:0;

7 字体大小：font-size:20px;

8 背景：background-color、background-image背景色和背景图像

|--通过设置background-repeat：repeat-y或者repeat-x或者no-repeat;

|--background-position:center;设置body的背景图像位置。

|--值top、bottom、left、right、center。可以混搭使用，

如：top right 表示右上方，最多使用两个关键字。注意：当和 center混合使用时，效果和不用center一样，是等价的。

|--百分制设置图像位置：background-position:50% 50%;

3 JavaScript

JS知识点：

|--JavaScript 被设计用来向 HTML 页面添加交互行为。

|--JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。

|--JavaScript 由数行可执行计算机代码组成。

|--JavaScript 通常被直接嵌入 HTML 页面。

|--JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

函数定义：

1 一般函数权限最低，同名的函数，定义在最后的函数将覆盖前面的同名函数

|--function 函数名(参数列表){ }

2 动态函数与一般函数同名时，动态函数执行

|--var 函数名=new Function("参数列表","函数体");

|--var 函数名=new Function("参数1"，"参数2"，...,"函数体");

3 匿名函数权限和动态函数相同，调用时，那个函数在最近上方就调用谁

|--函数名=function(参数列表){函数体}

|--调用：函数名(参数列表);用法和不同函数一样。

事件驱动函数：

window.onload=function()

{

//函数体

}

注：arguments[number];表示第几个参数值，放在函数体中接收传递的参数，因为js中的函数可以传递任意个参数而正常运行。

注册表单实例：

分析：

整体分为三个部分：CSS 样式表、JavaScript处理、Html代码。

CSS部分：

<style type="text/css">//样式表开始

table//对整个表格的处理部分

{

border:#0066ff 1px solid;

width:600px;

border-collapse:collapse;

}

table td,table th//对表格中的单元格和表头处理

{

border:#0066ff 1px solid;

padding:20px;

}

table td//单元格处理

{

background-color: #FF9

}

table th

{

background-color: #F90

}

.errorinfo//定义样式类

{

color:#F00;

display:none;

}

.focus//定义获取焦点的样式类

{

border:#09f 2px solid;

}

.norm

{

border:#666 1px solid;

}



.error

{

border:#f00 2px solid;

}

</style>

JavaScript部分

JS部分是注册表单的核心部分，其分析功能由此完成。

<script type="text/javascript">

//对文本框进行焦点处理,实现简单的获取焦点动态效果

//此方法是对重复的代码进行抽取的结果

function inputColor(input)

{

input.classNmae="norm";

input.onfocus=function()

{

this.className="focus";

}

}

window.onload=function()

{

with(document.forms[0])

{

//分别调用获焦点方法

inputColor(user);

inputColor(psw);

inputColor(repsw);

}

}

/*

进行用户名校验

不符合规则时，焦点离开则会显式提示信息，输入符合规则信息，焦点离开，提示信息消失

由于校验的函数代码重复度很高，所以选择了对一部分代码进行单独抽取封装的方法，简化代码书写

*/

//校验方法,需要input节点，正则表达式和div节点

//此方法是对重复部分进行抽取的结果

function check(inputNode,regex,divId)

{

//获取此div节点

var divNode=document.getElementById(divId);

if(regex.test(inputNode.value))

{

//这里可以使用innerHTML属性，改变单元格内容

inputNode.className="norm";

divNode.style.display="none";

}

else

{

inputNode.className="error";

divNode.style.display="block";

}

}

//校验用户名

function checkUser(userNode)

{

//校验用户名正则

var regex= /^\w{3,9}$/ ;

check(userNode,regex,"userdiv");

}

//校验初次密码

function checkPsw(pswNode)

{

//校验密码正则

var regex= /^[a-z0-9]{6,16}$/;

check(pswNode,regex,"pswdiv");

}

//校验确认密码,单独进行校验

function checkRepsw(repswNode)

{

//获取再次输入的密码

var value1=repswNode.value;

//获取初始输入的密码

var value2=document.getElementsByName("psw")[0].value;

//获取再次输入密码input所在div的div节点

var divNode=document.getElementById("repswdiv");

//比较两次输入的密码是否一致即可

if(value1==value2)

{

repswNode.className="norm";

divNode.style.display="none";

}

else

{

repswNode.className="error";

divNode.style.display="block";

}

}

</script>

Html部分

用户名部分：

<tr>

         <td>用户名称：</td>

            <td align="center"> 

<div><input type="text" name="user" onblur="checkUser(this)"/></div>

<div class="errorinfo" id="userdiv">用户名错误，请按要求输入</div>

<div>用户名必须是3-9位字母(a-z)、下划线(_)和数字(0-9)组合</div>

</td>

        </tr>

----------------------------------------------------------------

密码部分：

<tr>

         <td>输入密码：</td>

            <td align="center">

<div><input type="password" name="psw" onblur="checkPsw(this)"/></div>

<div class="errorinfo" id="pswdiv">密码格式错误，请重新输入</div>

<div>密码必须是6-16位字母(a-z)和数字(0-9)的组合</div>

</td>

        </tr>

使用的都是input标签。其中要有input的标签的属性。用户名的属性type值是”text”，密码属性type属性值”password”。

----------------------------------------------------------------

单选框部分：

<tr>



<td>性别：</td>

<td align="center">

            <div>

<input type="radio" name="sex" value="man" />男

<input type="radio" name="sex" value="wuman" checked="checked"/>女

            </div>

</td>

</tr>

单选框的属性type属性值是”radio”，通过设定checked=”checked”;表示默认选择哪一个。设定name属性值为”sex”,name的属性值都是sex，表示只能选择一个，如果name值不同的话，不能够实现单选效果。

复选框，type属性值是checkbox。

下拉列表框使用的属性为select，每一个选项使用option标签来表现。

示例如下：

<tr>

<td>选择所在地：</td>

<td align="center">

<select name="province">

<option value="none">--选择--</option>

<option value="北京">北京</option>

<option value="上海">上海</option>

<option value="山东">南京</option>

<option value="湖南">济南</option>

</select>

</td>

        </tr>

提交数据和重填：

<input type="submit" value="提交数据"/>

<input type="reset" value="清除数据"/>

提交数据使用submit属性值，重填是reset属性值。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css div 表单制作

相关文章推荐

新的分享

章节导航