HTML课程.ppt

2020 1 24 HTML基础 1 HTML guozhanxian 2020 1 24 HTML基础 2 计算机及软件技术发展史 计算机硬件发展史计算机操作系统的发展史计算机程序语言的发展史计算机软件体系结构发展史B S结构软件体系结构的特点 2020 1 24 HTML基础 3 HTML简介 HTML HyperTextMarkupLanguage 超文本标记语言 是网页制作的基本语言 所有的网页都是由HTML语言或将其它的脚本语言嵌入HTML语言中编写而成的HTML的特点及浏览器的工作原理 2020 1 24 HTML基础 4 HTML特点 描述性语言 结构语言 用于决定网页内容以什么样的形式显示通过标签来控制网页的文档 字符和段落等的格式 以及对脚本语言等的调用纯文本文件 可以使用各种文本编辑器编写文件扩展名 htm或 htmlhtml文件必须在Web浏览器上运行目前常用的浏览器 IE FireFox Mozilla等具有跨平台性 2020 1 24 HTML基础 5 HTML文件结构 起始标记 表示HTML网页的起始文件头部 设置初始化文档信息和文档管理标注文件主体 设置格式化的浏览器显示的文档 内容 注释部分 可以放在任何位置 2020 1 24 HTML基础 6 HTML文件示例 HTML超文本标记语言在线教程 2020 1 24 HTML基础 7 该节点是HTML文档的根节点告诉浏览器其节点中的内容是HTML文档该节点必须成对出现 表明开始和结束 2020 1 24 HTML基础 8 HEAD和TITLE元素 HEAD没有属性HEAD中可以包含其它元素 可以包含的元素如下 titlemetascriptstylelink如 title html 2020 1 24 HTML基础 9 meta元素 设置文档的编码方式 设置关键字 描述以及作者的信息 2020 1 24 HTML基础 10 body元素 你想让浏览器显示什么样的内容 核心两个方面 页面的显示效果数据提交的方式 2020 1 24 HTML基础 11 HTML注释 2020 1 24 HTML基础 12 复习HTML模板 yoursite locationwithinsite topictitle 2020 1 24 HTML基础 13 使用HEADERS HTML定义了六个级别的标题分别是 例 headers html 2020 1 24 HTML基础 14 使用段落 定义段落元素 注意 在使用该元素的时候 HTML中允许没有回标签 但是为了能将现有的HTML迁移到XHTML中建议大家在使用该标签的时候将回标签加上 例 UsingParagraph html 2020 1 24 HTML基础 15 使用换行元素 HTML中的换行元素是或者注意 尽量不要在文本中加入换行控制符 最好采用外部的显示控制方式来进行显示的控制 例 PageBreaks html 2020 1 24 HTML基础 16 顺序列表元素 在 中添加 构成会自动在li标签中的文字前加上序号Li标签在使用的时候可以没有回标签 但是建议大家使用回标签例 OrderedList html 2020 1 24 HTML基础 17 非顺序列表元素 在 标签中加入 的方式会在li标签中的字符串内容前加上项目符号如果要改变项目符号 可以通过CSS来设定例 UnorderedList html 2020 1 24 HTML基础 18 嵌套列表 可以在一个列表中的某一个项中再嵌套一个列表 形成嵌套列表建议 不要使用更多层次的嵌套 因为如果层次过多 说明你使用的表现方式不好 例1 OrderedNestingList html例2 MixedOrderedList html 2020 1 24 HTML基础 19 定义列表元素 用来定义概念构成 三个标签 definitionlist definitionterm definitiondescription 例 DefinitionList html 2020 1 24 HTML基础 20 超链接元素 连接到Google连接到Google例 Link html 2020 1 24 HTML基础 21 电子邮件连接元素 蝈蝈Email例 EmailLink html 2020 1 24 HTML基础 22 table元素 例 TableExample html 2020 1 24 HTML基础 23 在table中添加行 利用来添加一个行例 AddRowInTable html 2020 1 24 HTML基础 24 在表格中添加标题 使用标签例 TableHeadersOne html例 TableHeadersTwo html 2020 1 24 HTML基础 25 给表格添加说明 使用 标签例 AddingCaptionToTable html 2020 1 24 HTML基础 26 表单 什么是表单HTML表单是HTML页面与浏览器端实现交互的重要手段 利用表单可以收集客户端提交的有关信息 它是网站实现互动功能的重要组成部分 表单的主要功能是收集信息 2020 1 24 HTML基础 27 表单的组成 表单的组成 一是描述表单元素的HTML源代码 二是客户端的脚本 或者服务器端用来处理用户所添信息的程序 表单的形式 单行输入 多行输入 单选框和多选框等 2020 1 24 HTML基础 28 表单 表单信息的处理过程如下 当单击表单中的提交按钮时 输入在表单中的信息就会上传到服务器中 然后由服务器的有关应用程序 例如CGI ASP PHP JSP等 进行处理 处理后将用户提交的信息存储在服务器端的数据库中 或者将有关信息返回到客户端浏览器上以供用户确认 2020 1 24 HTML基础 29 表单头及其属性 表单的通用格式是 xx表单的元素包含在以开始到结束中的 有两个重要的属性 method post 或是 get 这两个选择的区别是 post是一种邮寄的方式 在浏览器的地址栏不显示提交的信息 但是这种方式传送的数据是没有限制的 get是一种手把手的提交到服务器上 最大的信息量是2K 而且提交的信息显示在浏览器上 2020 1 24 HTML基础 30 表单中包含的标记 表单输入标记 菜单和列表标记菜单和列表项标记文字域标记 2020 1 24 HTML基础 31 输入标记 表单中最常用的标记之一 常用的文本域 按钮等都使用这个标记 基本语法 2020 1 24 HTML基础 32 文字域TEXT TEXTText属性值用来设定在表单的文本域中 输入任何类型的文本 数字或字母 输入的内容以单行显示 基本语法 2020 1 24 HTML基础 33 密码域Password Password密码域是一种特殊的文本域 输入到文本域中的内容均以 星号显示 基本语法 2020 1 24 HTML基础 34 单选框radio Radio单选框能够进行项目的单项选择 以一个圆框表示 基本语法 2020 1 24 HTML基础 35 复选框checkbox Checkbox复选框能够进行项目的多项选择 以一个方框表示 基本语法 2020 1 24 HTML基础 36 按钮 表单中的按钮起着至关重要的作用 按钮可以激发提交表单的动作 按钮可以在用户需要修改表单的时候将表单恢复到初始的状态 还可以依照程序的需要发挥其他的作用 类型提交按钮 重置按钮 普通按钮 2020 1 24 HTML基础 37 提交按钮 Submit单击提交按钮后 可以实现表单内容的提交 基本语法 2020 1 24 HTML基础 38 重置按钮 Reset单击重置按钮后 可以清除表单的内容 恢复成默认的表单内容设定 基本语法 2020 1 24 HTML基础 39 普通按钮 Button普通按钮主要配合JavaScript脚本来进行表单的处理 基本语法 button text 2020 1 24 HTML基础 40 隐藏域 Hidden隐藏域在页面中对用户是不可见的 在表单中插入隐藏域目的在于收集或发送信息 以利于被处理表单的程序所使用 浏览者单击发送按钮发送表单的时候 隐藏域的信息也被一起发送到服务器 基本语法 2020 1 24 HTML基础 41 图象域 Image图象域是指可以用在提交按钮位置上的图片 这幅图片具有按钮的功能 我们可以使用图象域 创建和网页整体效果相统一的图象提交按钮 基本语法 2020 1 24 HTML基础 42 文件域 File文件域可以让用户在域的内部填写自己硬盘中的文件路径 然后通过表单上传 这是文件域的基本功能 如在先发送E mail时的附件功能 文件域的外观是一个文本框加一个浏览按钮 用户即可以直接将要上传给网站的文件路径填写在文本框中 也可以单击浏览按钮 在自己的电脑中找到要上传的文件 基本语法 2020 1 24 HTML基础 43 文字域标记 Textarea这个标记用来制作多行的文字域 可以在其中输入更多的文本 基本语法 2020 1 24 HT