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

1.1 HTML技术

  1.1.1 HTML简介

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

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

                2.标记,根标记,标志着 文档的开始和结束。

                3.标记,头部标记,定义HTML文档的头部信息,用来封装其他位于文档头部的标记

                                    文档的标题</p> <p>                                    <meta>标记可以提供有关页面的元信息</p> <p>                                    <link>定义文档与外部资源的关系</p> <p>                                    <style>用于为HTML文档定义样式信息</p> <p>                4.<body></body>标记,主体标记,定义文档所要显示的内容。</p> <pre class="has"><code class="language-html"><!DOCTYPE html PUBLIC"-//w3c//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>这是网页标题 这里是网页内容

1.1.2

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

                      <标记名 />  建议加空格

        双标记:又叫体标记,

                       <标记名> 内容

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

        1.为了使网页内容有条理的显示出来,HTML提供了段落标记

        2.如果需要某段文本强制换行显示,要使用换行标记

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

                  文本内容


我是7号绿色文本,我的字体是微软雅黑

1.1.4图像标记

        在网页中显示图片

         

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


    显示图片:

1.1.5表格标记

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


    
姓名 语文 数学
张三 90 91

1.1.6表单标记

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

        表单由三部分构成:

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

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

               

  各种表单控件

        2.使用控件可以在表单中定义输入框、单选按钮、复选框、重置按钮、提交按钮、文本域 您的爱好: 运动 阅读 听音乐 旅游

[点击并拖拽以移动] ​

1.1.7列表标记和超链接标记

        1.无序列表

    为了使网页易读,列表项并列存在,无序列表最为常用。

  • 标签的type属性用来指定列表项的符号disc实心圆,square实心矩形,circle空心圆三种,默认为disc。

    • 列表项1
    • 列表项2
    • 列表项3

            2.超链接标记

                    文本或图片

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

    
            百度
        
        
        
        

    使用图片来做链接

      1.1.8
    标记

            div是division的缩写,意为“分割、区域”,简单而言就是一个区块容器标记,可以将网页分为独立的、不同的部分,以实现网页的规划和布局。

    中还可以套嵌使用
    ,一般与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.内嵌式:

    
        
    

            2.链入式:

    
        
    
    
    • 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对象是元素,、元素可看成是树的枝干。概念:父节点、子节点、兄弟节点。

    Java Web程序设计------网页开发基础_第1张图片

    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)内嵌式:

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

    
    
        
            标题
            
        
        
            学习JavaScript
        
    

    (2)外链式:

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

    
    
        
            标题
            
        
        
            学习JavaScript
        
    

    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的一大特征,事件就是用户在使用页面时执行的操作。

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

    
        
    

    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 对象。

     

     

     

     

     

                 

                                      

                                                

  • 你可能感兴趣的:(学习笔记)