weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

Java Web程序设计------网页开发基础_javascripr网页程序

作者：weixin_40725706 | 2024-08-29 06:18:33

踩

javascripr网页程序

1.1 HTML技术

1.1.1 HTML简介

hyper text mark language，超文本标记语言，主要通过HTML标记语言对网页的文本、图片、声音等内容进行描述。文件后缀 .html或.htm。

1.<!DOCTYPE>标记，位于文档最前面，用于向浏览器说明当前文档使用哪种HTML标准规范，指定HTML文档的HTML版本和类型。

2.<html></html>标记，根标记，标志着文档的开始和结束。

3.<head></head>标记，头部标记，定义HTML文档的头部信息，用来封装其他位于文档头部的标记

<title>文档的标题

4.<body></body>标记，主体标记，定义文档所要显示的内容。


<!DOCTYPE html PUBLIC"-//w3c//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>这是网页标题</title>
    </head>
 
    <body>
        这里是网页内容
    </body>
</html>

1.1.2

单标记：又叫空标记，用一个标记符号便可完整的描述某个功能，不需要选择内容来描述。

<标记名 /> 建议加空格

双标记：又叫体标记，

<标记名> 内容 </标记名>

1.1.3 文本控制与文本样式标记

1.为了使网页内容有条理的显示出来，HTML提供了段落标记<p></p>。

2.如果需要某段文本强制换行显示，要使用换行标记<br />。

3.使用<font></font>标记来控制网页文本的样式，如字体、字号和颜色。


<font face="微软雅黑" size="7" color="green"></br>
我是7号绿色文本，我的字体是微软雅黑</font>

1.1.4图像标记

在网页中显示图片<img />

src属性用来指定图像文件的路径，可以使绝对路径，也可以是相对路径。


<body>
    显示图片:<img src="106.jpg" width="102" height="130" border="0" />
</body>

1.1.5表格标记

是网页中的数据能够条理的显示出来，对网页进行规划。


<body>
    <table border="1">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>91</td>
        </tr>
    </table>
</body>

1.1.6表单标记

简单说，表单就是网页中用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。

表单由三部分构成：

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框提交按钮等。
提示信息：控件前的文字说明，提醒用户进行填写和操作。
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息。

1.<from></from>标记用于定义表单域。即创建一个表单。

<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </from>

2.使用<input/>控件可以在表单中定义输入框<input type="text">、单选按钮<input type="radio">、复选框<input type="checkbox">、重置按钮<input type="reset">、提交按钮<input type="submit">、文本域<textarea>、密码框<input type="password">、邮件框<input type="email">、下拉菜单等<select><option> </option></select>、文件上传控件<input type="file">。

注意：name属性代表控件名，value属性表示该控件的值。单选框和复选框每一个选项的name必须相同，为了方便在处理页面数据时获得表单传递的值（表单所传递的值就是value的值）。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
        <title>实验一</title>
    </head>
<body>
<h1 align="center"><u>请留下个人资料</u></h1>
<form>
    <table align="center">
        <tr>
            <td a
            <td align="lign="right">姓名：</td>
            <td align="left"><input  type="text" name="name" size="20px"></td>
        </tr>
        <tr>right">E-mail：</td>
            <td align="left"><input type="email" name="email" size=" 50px" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"></td>
        </tr>
        <tr>
            <td align="right">电话：</td>
            <td align="left"><input type="telephone" name="phonenumber" size="25px"  pattern="^[0-9]{11}$"> </td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td align="left">
                <input type="radio" name="sex" value="fmale" checked="checked">女
                <input type="radio" name="sex" value="male">男
            </td>
        </tr>
        <tr>
            <td align="right">年龄：</td>
            <td align="left"> <select name="age" >
                <option value="1" selected>20以下</option>
                <option value="2" >20</option>
                <option value="3" >21</option>
                <option value="4" >22</option>
                <option value="5" >23</option>
                <option value="6" >24</option>
                <option value="7" >25</option>
                <option value="8" >25以上</option>
            </select>
            </td>
        </tr>
        <tr>
            <td align="right" >留言板：</td>
            <td align="left"><textarea name="leave_word" rows="3" cols="50"></textarea></td>
        </tr>
        <tr>
            <td align="right" rowspan="4">您的爱好：</td>
            <td align="left"><input type="checkbox" name="hobby" value="">运动</td>
        </tr>
        <tr>
            <td align="left"><input type="checkbox" name="hobby" value="">阅读</td>
        </tr>
        <tr>
            <td align="left"><input type="checkbox" name="hobby" value="">听音乐</td>
        </tr>
        <tr>
            <td align="left"><input type="checkbox" name="hobby" value="">旅游</td>
        </tr>
    </table>
    <p align="center">
        <input type="submit" value="提交">
        <input type="reset" value="全部重写">
    </p>
</form>
</body>
</html>
 
[点击并拖拽以移动]

1.1.7列表标记和超链接标记

1.无序列表<ul></ul>

为了使网页易读，列表项并列存在，无序列表最为常用。<li>标签的type属性用来指定列表项的符号disc实心圆,square实心矩形,circle空心圆三种，默认为disc。


<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

2.超链接标记<a></a>

<a href="跳转目标" target="目标窗口的弹出方式">文本或图片</a>

target的值self（默认）在原窗口中打开、blank在新窗口中打开、parent在父框架中打开被链接的文档、top在整个窗口中打开被链接的文档。


<body>
        <a href="http://www.baidu.com" target="_blank">百度</a>
    <!--定义链接  href 为属性 属性能够赋予标签含义和语境，提供有关HTML元素的更多信息-->
    <!--target规定在何处打开连接-->
    
    <p>使用图片来做链接</p>
    <img  src="D:\123.png">
    <a href="http://www.baidu.com" target="_blank">
        <img border="0" src="D:\11111111111111文档\图\火影\Screenshot_2017-09-26-00-11-37-65.png">
    </a>
</body>

1.1.8<div>标记

div是division的缩写，意为“分割、区域”，简单而言就是一个区块容器标记，可以将网页分为独立的、不同的部分，以实现网页的规划和布局。<div>中还可以套嵌使用<div>,一般与CSS搭配使用。

1.2 CSS技术

1.2.1 CSS简介

CSS是cascading style sheet 层叠样式表，是用于（增强）控制网页样式并允许将样式信息与网页内用分离的一种标记性语言。

定义规则：选择器{属性1：属性值1；属性2：属性值2；}


div{
    border:1px solid red;
    width:600px;
    height:400px;
}

border属性有三个值：表示该边框1像素、实心框线、红色。

在CSS中通常使用px为计量单位，px是相对于显示屏幕的分辨率而言的。二百分比是相对于父对象而言的，例如一个元素的宽度为400px，它的子元素设置为50%，则宽度为200px。

在CSS中颜色的取值方式有3种：

预定义颜色的值：如red、blue
十六进制：#FF0000、#FF6600（常用）
RGB代码

1.2.2 CSS样式的引用方式

要使用CSS修饰网页，要在HTML文档中引入CSS文件，有4种方式

1.内嵌式：


<head>
    <style type="text/css">
        选择器{
                属性1：属性值1；
                属性2：属性值2；
              }
    </style>
</head>

2.链入式：


<head>
    <link href="css文件的路径" type="text/css" rel="stylesheet" />
</head>

href：定义链入外部样式表的文件地址，可以使相对路径和绝对路径。
type：定义链入文档的类型。
rel：指定当前文档与链入文档的关系。

3.行内式

4.导入式

1.2.2 CSS选择器和常用属性

1.标记选择器：标记名{ } 所有标记都可以，缺点不能设计差异化样式。

2.类选择器： . 类名{ }

3.id选择器：#id { } id唯一，只能对应文档中的某一具体的元素。

4.通配符选择器：*{ } 范围最广匹配到页面中的所有元素。

1.3 JavaScript基础

1.3.1 DOM相关知识

DOM是文档对象模型的简称“document object model”，是w3c推荐的处理可扩展标志语言的标准编程接口，它可以以独立于平台和语言的方式访问和修改文档的内容和结构。

分为三个不同部分：核心DOM、XML DOM、HTML DOM。

HTML DOM模型被构造成对象树，该树的根节点就是document，有一个documentelement属性引用，表示文档根元素的element对象。HTML文档中的element对象是<html>元素，<head>、<body>元素可看成是树的枝干。概念：父节点、子节点、兄弟节点。

1.节点的访问

DOM中，HTML文档的各个节点被视为各种类型的Node对象，如：想要通过子节点找到父节点的元素，如下：

父节点对象=子节点对象.parentNode；

属性	类型	描述
parentNode	node	返回节点的父节点，没有则为null
childNode	nodelist	返回节点到子节点的节点列表
fistChild	node	返回节点的首个子节点，没有则为null
lastChild	node	返回节点的最后一个子节点，没有则为null

2.获取文档的指定元素

遍历获取节点的方法太麻烦，提供了直接获取的方法。

（1）通过元素ID属性获取

如：获取ID元素值为userid节点的代码：document.getElementById("userid");

（2）通过元素的name属性获得

由于具有相同name的元素不止一个，所以该方法返回的是一个数组，如果要获取其中一个，可以通过加下标的方法。

如：document.getElementByName("usename")[5];

1.3.2javascript概述

js是web中的一种功能强大的脚本语言，用来为网页添加各种动态功能，不需要进行编译，直接套嵌在HTML页面中，就可以吧静态网页转变为支持用户交互并响应事件的动态网页。

1.JavaScript的引用

（1）内嵌式：


<script type="text/javascript">
    //此处为js代码
</script>

js中有三种弹出对话框的方式：alert（）、confirm（）、prompt（）。如果不想弹出也可以直接用document.write（）直接将信息输出在页面上。


<!doctype html>
<html>
    <head>
        <title>标题</title>
        <script type="text/javascript">
            doucument.write("js引入演示");
        </script>
    </head>
    <body>
        学习JavaScript
    </body>
</html>

（2）外链式：

当一段js脚本代码要被很多页面引用时，放到一个.js文件中。

<script type="text/javascript" src="js文件的路径" ></script>


<!doctype html>
<html>
    <head>
        <title>标题</title>
        <script type="text/javascript" src="demo01.js">
        </script>
    </head>
    <body>
        学习JavaScript
    </body>
</html>

2.数据类型

常用数据类型：

类型	含义	说明
number	数值型	不区分整型和浮点型
string	字符串类型	用单引号或双引号引起来的一个或多个字符
boolean	布尔类型	true/false
object	对象类型	一组数据和功能的键值对集合
null	空类型	没有任何值
undefined	未定义类型	指变量被创建但未赋值

3.变量

使用var声明变量，不需要声明变量类型。变量名由字母、下划线、美元符号组成。


var number="27";
var str="javascript学习";

4.运算符

算术运算符：+ - * / ++ --
比较运算符：< > <= >= == !=
逻辑运算符：&& || ！
赋值运算符：= += -= *= /= %=
条件与算符：三目运算符操作数/布尔表达式？结果1：结果2 如：alert((a==b)?true:false);

5.条件if语句

if( ){ } else { }

1.3.3JavaScript的使用

1.函数的定义及调用

函数定义：


function functionname(parameter1,parameter2){
    tatements;
    [return expression;]
}

2.事件处理

采用事件驱动是js的一大特征，事件就是用户在使用页面时执行的操作。

事件处理通常有三步：事件发生、启动事件处理程序、事件处理程序做出反应。


<body>
    <input type="button" name="btn" value="点我" onclick="alert('hello');" />
</body>

3.常用对象

（1）Window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

（2）Date对象

Date 对象用于处理日期和时间。

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/1022066