HTML基本标签说课.ppt

Chapter 第一章 预习检查 HTML文档的基本结构是什么？ 什么是块级、行级标签？ h1、p、hr分别代表什么？ 插入一条直线用什么标签？ 本章任务 制作图文并茂的商品介绍页 本章目标 使用HTML的基本结构创建网页 使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面 什么是HTML HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 HTML文档的基本结构 HTML文档的结构 网页的摘要信息2-1 网页的摘要信息2-1 HTML页面中的块和行 块级标签 基本块级标签3-1 标题标签 基本块级标签3-2 段落标签 基本块级标签3-3 水平线标签 练习——基本块级标签 需求说明： 显示唐诗介绍（ UltraEdit环境 ） 常用于布局的块级标签7-1 有序列表标签 常用于布局的块级标签7-2 无序列表标签 常用于布局的块级标签7-3 定义描述标签 常用于布局的块级标签7-4 用定义描述标签实现图文混编的效果 常用于布局的块级标签7-5 表格 table tr td百度/td td新浪/td /tr …… /dl 常用于布局的块级标签7-7 分区标签 div 练习——常用于布局的块级标签 需求说明： 实现简单的商品购买页 行级标签3-1 图像标签 行级标签3-2 范围标签span ：显示某行内的独特样式 行级标签3-3 换行标签 br/ 练习——行级元素 需求说明： 基本语法 链接路径 相对地址：相对于当前目录的地址，常用 绝对地址：指向目标地址的完整描述 ，少用 常见的表单元素 表单的基本语法2-1 表单的基本语法2-2 表单元素的基本格式 表单元素的逐一介绍8-1 文本框 表单元素的逐一介绍8-2 密码框 表单元素的逐一介绍8-3 按钮 表单元素的逐一介绍8-4 单选按钮 表单元素的逐一介绍8-5 复选框 练习——贵美登录页 需求说明： 完成网站登录页面 表单元素的逐一介绍8-6 文件域 小结 前面所学的各类表单元素，语法分别是什么？ 表单元素的逐一介绍8-7 列表框 表单元素的逐一介绍8-8 多行文本框 表单的高级用法2-1 隐藏域 方便服务器端“记住”客户端的信息、但又不希望客户看到的数据 表单的高级用法2-2 只读和禁用属性 readonly：希望某个框内的内容只允许用户看，不能修改 disabled：因没达到使用的条件，限制用户使用 练习——简易求职表 需求说明： 使用表单制作简易求职表 说明样式方面的内容后续章节将学习 …… form action=login.jsp method=post p用户名：input name=username type=text size=20 maxlength=10 //p p密nbsp;nbsp;码： input name=pwd type=password size=20 //p pinput type=submit name=btn value=提交 /nbsp;nbsp; input name=reset type=reset value=重填 //p /form …… 表单输入元素：input 表单提交地址和方法的设置 操作演示9：表单应用 input name=表单元素名称 type=类型 value=值 size=显示宽度 maxlength=对大长度 checked=是否选中 / 指定元素的类型，可为text、radio、submit等 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中checked form method=post action= p用户名： input name= userName type=text size=21 / /p …… /form 单行文本输入框，字符宽度为21 name用于服务器端获取数据，例如：request.getParameter(userName ) 操作