HTML+CSS+DIV+表单制作


 

    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 文档 = 网页

· HTML 文档描述网页

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

· HTML 文档也被称为网页

 

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



    

           

My First Heading



           

My first paragraph.



    



 

例子解释

· 与 之间的文本描述网页

· 与 之间的文本是可见的页面内容

·

之间的文本被显示为标题

·

之间的文本被显示为段落

 

 

 2  css

CSS 概述

 

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

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

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

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

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

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

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

 

HTML 标签原本被设计为用于定义文档内容。通过使用

这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。

多重样式将层叠为一个

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

 

 

层叠次序

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

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

1 浏览器缺省设置

2 外部样式表

3 内部样式表(位于 标签内部)

4 内联样式(在 HTML 元素内部)

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

CSS知识点:

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

|--样式表特殊格式:

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

这种格式针对于div 里面的p标签,当用当

时,会产生效果。

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

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

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



或者 .center td{ }

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

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

    是用:id="pid"

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

|--使用:

|--连接外部样式表:在

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

格式:

|--内联样式:在各个标签中使用样式,

如:



 

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

 

 

|--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.οnlοad=function()

{

//函数体

}

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

注册表单实例:

分析:

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

CSS部分:




 JavaScript部分

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



Html部分

用户名部分:



        

           

       

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

密码部分:



        

           

       

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

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

单选框部分:











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

复选框,type属性值是checkbox。

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

示例如下:







       

提交数据和重填:





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

你可能感兴趣的:(JavaWeb开发)

用户名称:



用户名错误,请按要求输入


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


输入密码:



密码格式错误,请重新输入


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


性别:

           




 

           


 
选择所在地: