南师大教育技术web学习视频课件html基础加强

1、北京传智播客教育 HTML基础加强讲师：蒋 坤课前说明- 内容：HTML、CSS- 目标：掌握手写HTML实现页面的能力，为 打基础- 参考书：张孝祥JavaScript网页开发体验式学习教程简介与开发工具- HTML文档就是网页- HTML超文本标记语言(HyperText Markup Language)- HTML是纯文本文件- HTML利用浏览器进行解释、显示-解释HTML源码个工具，是一个解释显示页面的应用程序-五大浏览器：IE(IE6特)、FF、Chrome、Opera、Safari- Trident引擎、WebKit引擎-浏览器兼容性(CSS、JS)- 开发可以直接使用记事本或高

2、级记事本- 不要将大多经历放在界面显示上HTML体验- 我的第一个HTML页面- 新建一个文本文件- 修改后缀名为html或htm- 添加html标签- 添加head标签和title标签- 添加body标签- 添加注释- 说明- 注意隐藏的后缀名(1.html.txt)- 改背景颜色bgcolor=redHTML结构- 标签结构- 有始有终，小写规范- 内容结构- body分工，内容其中- 注释结构- 跨行注释，不要嵌套- 属性结构- 键值双引，空格分列静态页面与动态页面(*)- 静态页面- 网页代码都在页面中，不用执行asp、php、jsp、.net等程序生成客户端代码- 不能自主管理发布更

3、新的页面,如想更新内容,要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外） - 常见的静态页面举例：.html、.htm- 注意：静态页面并非网站上没有动画的就是静态页面- 动态页面- 通过执行asp、php、jsp、.net等程序生成客户端网页代码- 动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能。也是我们常见的- 动态页面常见的扩展名有：.asp .php .jsp .cgi 等- 注意：动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面颜色体系

4、- 案例- 设定背景颜色- bgcolor属性- 预留名、十六进制- rgb方法(兼容问题)HTML与XML(*)- 相同点- 标记语言，注释相同- 可以通过DOM控制- 可以通过CSS控制- 不同点- xml语法更加规范- xml主要存储数据、html注重展示- 满足XML规范的HTML语言- XHTML(eXtensible HyperText Markup Language)- 动态HTML- DHTML(Dynamic HTML)标签概述- 先分类，在学习- 文本标签- 描述文本与字体等- 格式标签- 控制文本排版、分隔等- 链接与图表- 跳转与锚定，显示图片- 列表与表格- 展示数据

5、等- 表单标签- 提交数据与服务器交互等- 帧标签与分区标签- 框架结构内嵌多个页面、分区使用样式文本标签- 标题标签- h#:16- 搜索引擎优化- 物理字体(了解)- 逻辑字体(推荐使用)- 客户端字体HTML字体物理字体(了解)定义粗体文本定义意大利斜体定义打字机文本定义下划线文本、定义上下标定义加删除线的文本HTML字体逻辑字体(推荐使用)定义强调文本(斜体)定义强调文本(粗体)定义计算机代码文本定义计算机代码样本定义键盘文本定义文本的变量部分定义定义项目定义引用(citation)定义小号文本定义大号文本HTML字体客户端字体字体标签字体属性HTML字体客户端字体的size属性取值为

6、17color属性的取值通过取色器记忆英文名face属性格式标签- 段落p- align:left/center/right- 换行br- 居中center- 分割线hr- size、width、align、noshade、color- 预格式化pre- 少用tab，多与逻辑字体一起使用HTML图像- 语法- 常用属性src、alt、title、border、width、height- 建议用height和width，可以撑起页面- 图片格式- 如果浏览器无法显示某张图片，不是修改一下后缀名就可以的，需要使用转码软件对图片进行转码，才能显示- 相对路径与绝对路径URL与超链接(1)- 名词解释

7、- URL：Uniform / Universal Resource Locator统一资源定位符- URI：Uniform Resource Identifier通用资源标志符- URI的概念比URL大，暂且认为一样- 超链接热点文字- target属性- _blank在新窗口打开(国内多如此)- _self在当前窗口打开- _parent在父窗口打开- _top在顶级窗口打开- 框架名称在制定框架打开(frameset)URL与超链接(2)- a标签常见属性href、title、target、name- a标签中可以有文本，也可以是图片- 相对路径与绝对路径- 锚定- href说明- hr

8、ef=“协议:内容”- 超链接跳转- 执行JavaScript- 发送邮件等HTML背景body属性(用CSS代替)text属性link属性alink属性vlink属性bgcolor属性background属性HTML列表List (*)- 无序列表(unorder list)- 有序列表(order list)- 列表项(list item)- type属性disk、circle、square、A、a、I、i、1- 自定义列表(definition list)- 术语定义(definition title)- 解释定义(definition description)表格table- 作用-

9、布局、陈列数据等- 表格模型- 一行一行左到右，伪列真行一一标- 基本语法table、tr、td- 表头th- 标题captionHTML表格的相关属性bgcolor、border、bordercolor、cellspacing、cellpadding、width、heightalign、valign、bgcolor、width、height、colspan、rowspantable示例演示- 跨行跨列表格- 带有标题行的表格- 带有表名的表格- 表格中空单元格的处理- 表格的背景与边框表格练习，作业：为什么要使用表单?用于向服务器传数据B与S交互表单和框架单行文本输入框(TEXT)单选按钮(

10、RADIO)复选框(CHECKBOX)下拉列表(SELECT)重置按钮(RESET)提交按钮(SUBMIT)多行文本框(TEXTAREA)密码框(PASSWORD)HTML表单HTML表单是用于搜集用户输入的HTML表单都扩在一对form标签中(提交)的常用属性action表示提交的目标服务器method提交的方法get、postenctypemultipart/form-data上传文件(post)HTML表单表单元素的基本格式HTML表单文本框标签属性size、maxlength、readonly密码框标签隐藏标签(*)文本域标签属性rows和cols(column)HTML表单提交按钮标

11、签重设按钮标签按钮标签图像标签HTML表单复选框标签标签:for=“id”单选按钮签文件选择标签form的enctype必须设置为multipart/form-data、method属性为POSTHTML标签(ComboBox ListBox)列表标签 属性size（1或非1）属性multiple(select)属性value和selected(option)练习实现登录界面，有用户名、密码、验证码（使用普通图片代替）、“记住密码”复选框、登录按钮、重置按钮。使用Table进行布局。使用label来写修饰文本。练习实现注册页面，分为两个页面，第一个页面是协议显示页面，点击“我同意”超链接进入第二个注册页面，填写内容：用户名、密码、重复密码、省份（下拉列表）、性别（男、女、保密三个Radio）、职业（学生、公司职员、其他三个Radio）、爱好（登山、篮球、足球、读书、游泳五个CheckBox）。使用label来写修饰文本。将爱好几个CheckBox放到一个fieldset(GroupBox)中meta(*)- 包含在head标签中- meta有两种用法- 指定name- 指定http-equiv- 示例指定网页编码 三秒钟后刷新此网页。 三秒钟