《PHP+MySQL动态网站开发实例教程》第2章 HTML与JavaScript语言速成_第1页
《PHP+MySQL动态网站开发实例教程》第2章 HTML与JavaScript语言速成_第2页
《PHP+MySQL动态网站开发实例教程》第2章 HTML与JavaScript语言速成_第3页
《PHP+MySQL动态网站开发实例教程》第2章 HTML与JavaScript语言速成_第4页
《PHP+MySQL动态网站开发实例教程》第2章 HTML与JavaScript语言速成_第5页
已阅读5页，还剩39页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第1页第2章HTML与JavaScript语言速成本章概述本章的学习目标主要内容第2页本章概述网站是万维网上相关网页的集合，网页上的许多元素都需要由HTML编写后展现出来。HTML文档是所有网页制作技术的基础。JavaScript是一种客户端脚本语言，专门用来编写浏览器程序，可实现与用户交互。在动态网站开发中，HTML和JavaScript可以很好的配合服务器端程序实现Web运行功能。本章将介绍HTML和JavaScript的基本知识。第3页本章的学习目标掌握HTML文件的基本结构和语法规则掌握文本控制、列表、超链接和图像的标签及其属性掌握表单标签及其属性掌握JavaScript语言的基本要素及代码编写规则掌握事件的调用和对象的使用第4页主要内容2.1HTML简介2.2编辑网页2.3创建表单2.4JavaScript简介2.5文档对象模型（DOM）2.6浏览器对象模型（BOM）2.7本章小结第5页2.1HTML简介HTML（HypertextMarkedLanguage，超文本标记语言）是万维网（www）描述网页内容和外观的标准。HTML语言使用“标签”（也叫“标记”）来指示Web浏览器应该如何显示网页元素，HTML标签是HTML中用来鉴别网页元素的类型、格式和外观的文本字符串。第6页2.1.1HTML结构HTML文件的本质是一个纯文本文件，只是它的扩展名为html或htm。任何纯文本编辑软件都能创建、编辑HTML文件。一个HTML文件的基本结构如下：<html>//文件开始标签

<head>//文件头开始的标签

……//文件头的内容</head>//文件头结束的标签<body>//文件主体开始的标签

……//文件主体的内容

</body>//文件主体结束的标签</html>//文件结束标签第7页2.1.2HTML的标签HTML是超文本标记语言，主要通过各种标签来标识和排列各对象，通常由尖括号“<”、“>”以及其中所包含的标签元素组成。1单标签，只需要单独使用就能表达意思，语法是：<标签名称/>2双标签，

由“开始标签”和“结束标签”两部分构成，必须成对使用。语法是：<标签>内容</标签>3标签属性，许多单标签和双标签的开始标签内可以包含一些属性，语法是：<标签名称

属性1=属性值1属性2=属性值2…>第8页主要内容2.1HTML简介2.2编辑网页2.3创建表单2.4JavaScript简介2.5文档对象模型（DOM）2.6浏览器对象模型（BOM）2.7本章小结第9页2.2编辑网页在网页中添加文本、图像、超链接、表格、表单等元素的方法是，在HTML代码中插入对应的标签，并设置相关的属性和内容。第10页2.2.1编辑文本标题标签<hn>换行标签<br/>段落标签<p>水平线标签<hr/>第11页2.2.2编辑列表无序列表<ul>有序列表<ol>定义列表<dl>第12页2.2.3编辑图像在HTML中用<img/>标签表示图像文件，通过其各个属性可以设置图像的大小、对齐方式等等。<img/>标签的常见属性如表2-3所示。第13页2.2.4超链接超链接是包含在网页中，用于链接到其他网页的元素。在HTML中用<a></a>标签且带有href属性时表示超链接。第14页2.2.5

创建表格定义表格

表格由<table></table>标签来定义。每个表格均有若干行（由<tr></tr>标签定义），每行被分割为若干单元格（由<td></td>标签定义）。第15页2.2.5

创建表格2表格的标题标签<caption>和表头标签<th> 表格的标题标签<caption>用来设置表格的标题，可由align和valign属性来设置其位置。表格的表头用标签<th>来设置，表头是指表格的第一行，用<th>标签替代<td>标签，不同之处在于<th>标签中的内容居中加粗显示。3单元格的设置

单元格标签<td>必须嵌套在<tr>标签内，且成对出现。可以对<td>标签的align和valign属性进行设置，调整内容的对齐方式。单元格<td>标签的合并属性有colspan和rowspan，分别用于合并列或合并行。第16页主要内容2.1HTML简介2.2编辑网页2.3创建表单2.4JavaScript简介2.5文档对象模型（DOM）2.6浏览器对象模型（BOM）2.7本章小结第17页2.3创建表单表单信息的处理过程为：当单击表单中的“提交”按钮时，表单中输入的信息就会传到服务器中，然后由服务器的有关应用程序进行处理，处理后或者将用户信息存储到服务器的数据库中，或者将有关的信息返回客户端浏览器。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮。用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。第18页2.3.1

表单的定义<form>标签的作用是设定表单的起始位置，并指定处理表单数据程序的URL地址，表单所包含的控件在<form></form>之间定义。基本语法为：<formaction=”url”method=”get/post”name=”value”target=”目标窗口”enctype=”编码方式”>……</form>第19页2.3.2<input/>标签在HTML表单中，<input/>标签是最常用的控件标签，其基本语法为：<inputname=”控件名称”type=”控件类型”/>

第20页2.3.3<textarea></textarea>标签如果用户需要输入多行文本，如留言、发表评论等，就可以使用文本域标签<textarea></textarea>，这是一个双标签。第21页2.3.4<select></select>标签菜单和列表都是通过<select></select>和<option></option>标签来实现。在<select>标签中如果没有设置size属性，或者size=1，表示是下拉列表，否则是列表框。第22页主要内容2.1HTML简介2.2编辑网页2.3创建表单2.4JavaScript简介2.5文档对象模型（DOM）2.6浏览器对象模型（BOM）2.7本章小结第23页2.4JavaScript简介JavaScript是一种基于对象和事件驱动的脚本语言。使用它的目的是与HTML（超文本标记语言）一起实现网页中的动态交互功能，JavaScript有如下特点。基于对象的语言：JavaScript是一种基于对象的语言，它能创建含有属性和方法的对象，并能实现对象的继承。事件驱动：采用事件驱动方式,并执行指定的操作简单性：它是一种基于java基本语句和控制流之上的简单而紧凑的设计；其次它的变量类型是采用弱类型，未使用严格数据的数据类型。安全性：它不允许访问本地硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，对数据的操作是安全的。动态性：可以直接对用户或客户的输入做出响应，无需经过web服务程序。跨平台性：与操作环境无关，只依赖于浏览器本身，只要计算机支持实现了JavaScript的浏览器，它就可被正确执行。第24页2.4.1JavaScript的组成一个完整的JavaScript实现由3个部分组成，核心（ECMAScript）、文档对象模型（DOM）、浏览器模型（BOM）。ECMAScript文档对象模型（DocumentObjectModel）浏览器对象模型（BroswerObjectModel）第25页2.4.2JavaScript的引入JavaScript必须引入到HTML文档才能被浏览器的JavaScript引擎解析，有3种方式可以将JavaScript引入至HTML文档。行内式嵌入式外部文件第26页2.4.3JavaScript事件JavaScript是基于对象和事件驱动的编程语言。Javascript中把某一行为的变化称为事件，例如鼠标点击、用户输入、页面加载等，都会被当做一个事件来对待，并可以对事件做出相应的处理。第27页2.4.3JavaScript事件第28页2.4.3JavaScript事件第29页2.4.3JavaScript事件第30页主要内容2.1HTML简介2.2编辑网页2.3创建表单2.4JavaScript简介2.5文档对象模型（DOM）2.6浏览器对象模型（BOM）2.7本章小结第31页2.5文档对象模型（DOM）文档对象模型（DocumentObjectModel）把整个页面映射为一个多层节点结构（树状结构），如下图所示。第32页2.5.1页面标签对象的引用为了操作HTML元素，必须首先找到该元素。使用document对象的方法可以得到页面中所有标签对象的引用。实现的方法有以下三种。1getElementById方法2getElementByName方法3getElementsByTagName方法第33页2.5.2改变HTML内容修改HTML内容的最简单的方法时使用innerHTML

属性。innerHTML可以将HTML元素的内容（位于开始标签和结束标签之间）改成其他任何内容，包括文本或HTML元素。改变HTML元素的内容，使用如下语法：

document.getElementById(id).innerHTML=newHTML第34页2.5.3读写HTML对象的属性当获取到指定的HTML元素（DOM对象）后，就可以使用“HTML元素.属性名”来访问元素的HTML属性。读取和设置元素的HTML属性的方法是：变量=HTML元素.属性名;//读取元素的HTML属性HTML元素.属性名=属性值;//设置元素的HTML属性第35页2.5.4改变CSS改变元素的CSS属性可以使用“HTML元素.style.CSS属性名”的结构，读取和设置HTML元素的CSS属性的方法如下：变量=HTML元素.style.CSS属性名;//读取元素的HTML属性HTML元素.style.CSS属性名=属性值;//设置元素的HTML属性第36页主要内容2.1HTML简介2.2编辑网页2.3创建表单2.4JavaScript简介2.5文档对象模型（DOM）2.6浏览器对象模型（BOM）2.7本章小结第37页2.6浏览器对象模型（BOM）浏览器对象模型（BOM）提供了独立于内容而与浏览器窗口进行交互的对象，BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象，如图所示。第38页2.6.1window对象Window对象代表浏览器的整个窗口，是JavaScript的顶层对象。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。第39页第40页2.6.2loca

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论