嵌入式web开发课件：1-html.ppt

1、嵌入式创新实验 华中农业大学 计算机系 倪福川HTML语言 基础嵌入式 Web开发嵌入式创新实验 华中农业大学 计算机系 倪福川HTML 简介HTML(Hyper Text Markup Language，超文本标记语言) 用于创建网页文档。HTML文档是使用HTML标签和元素创建的，此文件以扩展名htm或html保存在Web服务器上。通过HTML 标签和元素, 可以：控制页面和内容的外观控制页面和内容的外观发布联机文档发布联机文档使用使用 HTML 文档中插入的链接检索联机信息文档中插入的链接检索联机信息创建联机表单，收集用户的信息、执行事务等等创建联机表单，收集用户的信息、执行事务等等插入

2、动画插入动画开发帮助文件开发帮助文件嵌入式创新实验 华中农业大学 计算机系 倪福川 HTML 文档的基本结构打开记事本,录入第一个HTML文件: 显示结果:索迪教育，实训一年，精彩一生这是我的第一个页面这是我的第一个页面.This text is bold嵌入式创新实验 华中农业大学 计算机系 倪福川 HTML元素和标签-基本概念HTML文档是由HTML元素组成的文本文件。HTML元素是预定义的正在使用的HTML标签。HTML标签:nHTML标签用来组成HTML元素。nHTML标签两端有两个包括字符：“”,这两个包括字符被称为角括号。nHTML标签通常成对出现，比如和。一对标签的前面一个是开始

3、标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。nHTML标签是大小写无关的，跟表示的意思是一样的。n标签属性:l标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。l属性通常由属性名和值成对出现，就像这样：name=“value”n引号样式:l属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。l在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。l注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。嵌入式创新实验 华中农业大学 计算机系 倪福川 HTML元素和标签-HTML 实体1在HTML中，有些字符拥有特殊含义，比如小

4、于号“”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。n一个字符实体拥有三个部分：一个and符号（&）、一个实体名或者一个实体号、最后是一个分号（;），想要在HTML文档中显示一个小于号，我们必须这样写：<或者<。使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。 最常用的字符实体嵌入式创新实验 华中农业大学 计算机系 倪福川 HTML元素和标签-HTML 实体2其他一些常用的字符实体嵌入式创新实验 华中农业大学 计算机系 倪福川HTML元素和标签- H

5、TML 实体3特殊字体库实例:在字体库 Webdings 中û代表了一张世界地图，看如下代码：û运行后显示如下图：嵌入式创新实验 华中农业大学 计算机系 倪福川 表单表单是Web中最基本的交互元素之一。 表单使用户可以与显示在浏览器中的文本和图形进行交互。可以制作仅用“是”或“否”回答简单问题的表单，也可以制作极为复杂的订单表单，还可以制作供他人反映意见的表单。Web中的表单用途很广，而且还在不断发展。 表单的典型用途包括： 1）在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。为购买某个商品收集信息，例如，如果想通过Internet购买一本书，则

6、必须填写姓名、邮寄地址、付款方式和其他相关信息。 2）收集关于网站的反馈信息。大部分提供服务的网站都鼓励用户发送反馈信息。除了维系良好的客户关系外，它也是一种有助于改进和提高服务质量的信息来源。 3）为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框，使用户能够更快地找到信息。下面显示了网页上的一个典型表单。 嵌入式创新实验 华中农业大学 计算机系 倪福川表单嵌入式创新实验 华中农业大学 计算机系 倪福川表单表单标签form: form标签用于在网页中创建表单区域，用于收集用户输入的信息。一个表单从开始，到结束，形成属于一个容器，其他表单输入元素需要在它的包围中才有效。属性说明t

7、ype此属性指定了输入元素的类型，可用的选项有：text、password、checkbox、radio、submit、reset、button、file、hidden、image，默认选项是textname此属性用于指定输入元素的名称，用于区分不同的输入元素value此属性用于指定输入元素的初始值输入元素 创建表单后，就可以在表单中放置输入元素以接受用户的输入。这些控件通常与元素一起使用，当然也可以在表单之外用来创建用户界面，但会失去表单的统一支持。 input元素定义要在表单中显示的大多数输入元素的类型和外观。此元素包括的常用属性如下表所示嵌入式创新实验 华中农业大学 计算机系 倪福川表单

8、个人信息姓名：年龄：嵌入式创新实验 华中农业大学 计算机系 倪福川文本输入元素文本输入元素text:text 属性值用来设定在表单的文本域中，输入任何类型的文本、数字或字母。输入的内容以单行显示。 基本语法：常用属性及含义如下表所示： 属性名说明示例作用name文本域的名称name=txtName当前文本域名为txtNamemaxlength文本域的最大输入字符数maxlength=6当前文本域最多输入6个字符size文本域的宽度（以字符为单位）size=10当前文本域显示为10个字符宽value文本域的默认值value=张山当前文本域默认为张山readonly文本域只读readonly当前文

9、本域不能修改嵌入式创新实验 华中农业大学 计算机系 倪福川文本输入元素Password: 在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号*或圆点显示。 基本语法：常用属性及含义与text的相同 密码：嵌入式创新实验 华中农业大学 计算机系 倪福川文本输入元素Textarea:这个标记用来制作多行的文字域，可以在其中输入更多的文本。基本语法：常用属性及含义如下表所示： 属性名说明示例作用name文字域的名称name=txtMessage文字域名为txtMessagerows文字域的行数rows=5文字域显示为5行cols文字域的列数cols=60文字域显示为每行60字符嵌入式

10、创新实验 华中农业大学 计算机系 倪福川文本输入元素嵌入式创新实验 华中农业大学 计算机系 倪福川选择性输入元素选择性输入元素 Radio:单选框能够进行项目的单项选择，以一个圆框选择。基本语法：常用属性及含义如下表所示：属性名说明示例作用name文本域的名称，同类选项同名name=optFruit当前文本域名为optFruitvalue文本域代表的值value=”Apple”当前文本域值为Applechecked默认被选中checked当前文本域默认被选中嵌入式创新实验 华中农业大学 计算机系 倪福川选择性输入元素选择性输入元素香蕉苹果橘子 嵌入式创新实验 华中农业大学 计算机系 倪福川选择

11、性输入元素选择性输入元素 Checkbox:复选框能够进行项目的多项选择，以一个方框表示。基本语法：常用属性及含义与radio相同。香蕉苹果橘子嵌入式创新实验 华中农业大学 计算机系 倪福川选择性输入元素选择性输入元素 Select: 表单的对象中出现菜单和列表。说到底，菜单和列表主要是为了节省网页的空间而产生的。 菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。通过和标记可以设计页面中的菜单和列表效果。 基本语法：常用属性及含义如下表所示：选项

12、选项嵌入式创新实验 华中农业大学 计算机系 倪福川选择性输入元素选择性输入元素属性名说明示例作用name列表的名称name=selFruits当前列表名为selFruitssize显示的选项数目size=6当前列表显示6项multiple列表中的项目多选multiple当前列表项目允许多选selectselect常用属性及含义如下表所示：常用属性及含义如下表所示：option属性及含义如下表所示：属性及含义如下表所示：属性名说明示例作用value选项值value=Apple当前选项值为Appleselected默认选项selected默认选项嵌入式创新实验 华中农业大学 计算机系 倪福川选择性

13、输入元素选择性输入元素 香蕉苹果橘子下拉列表：下拉列表： 嵌入式创新实验 华中农业大学 计算机系 倪福川选择性输入元素选择性输入元素 香蕉苹果橘子桃子一般列表：一般列表： 嵌入式创新实验 华中农业大学 计算机系 倪福川选择性输入元素选择性输入元素 香蕉苹果橘子桃子复选列表：复选列表： 注意，是用注意，是用 Ctrl 键配合鼠标实现多选。键配合鼠标实现多选。(和和 MS-WINDOWS 的的 File Manager 一样一样) 嵌入式创新实验 华中农业大学 计算机系 倪福川HTML DOM嵌入式创新实验 华中农业大学 计算机系 倪福川嵌入式创新实验 华中农业大学 计算机系 倪福川 什么是什么是

14、 DOM？ 在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。 所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。嵌入式创新实验 华中农业大学 计算机系 倪福川 节点节点 根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点嵌入式创新实验 华中农业大学 计算机系 倪福川 Node 层次层次节点彼此都有等级关系。HTML 文档

15、中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。嵌入式创新实验 华中农业大学 计算机系 倪福川文档树（节点数）文档树（节点数）请看下面这个HTML文档： DOM Tutorial DOM Lesson one Hello world! 1) 所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。2) 大部分元素节点都有子节点。当节点分享同一个父节点时，它们就是同辈（同级节点）。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，

16、以此类推。比方说，所有的文本节点都是 节点的后代，而第一个文本节点是 节点的后代。3)节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 节点作为先辈节点。嵌入式创新实验 华中农业大学 计算机系 倪福川查找并访问节点查找并访问节点你可通过若干种方法来查找您希望操作的元素：通过使用 getElementById() 和 getElementsByTagName() 方法通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性嵌入式创新实验 华中农业大学 计算机系 倪福川 parentNode、firstChild以及以及lastChild这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。嵌入式创新实验 华中农业大学 计算机系 倪福川 John Doe Alaska