第2章_HTML.pptVIP

网页制作第2章 HTML 第2章 HTML 2.1 HTML简介 2.2 HTML常用标签介绍 2.3 表单布局 2.4 表格布局 2.5 框架布局 2.1 HTML简介 HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 HTML文档的基本结构 网页的摘要信息 HTML页面中的块和行 HTML标签分类（方便后续的布局设计）： 块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计 块级标签 根据使用场合，块级标签又细分为： 基本块级标签 常用于布局的块级标签 标题标签 基本块级标签—段落 段落标签 基本块级标签—水平线 水平线标签 常用于布局的块级标签—有序列表 有序列表标签 常用于布局的块级标签—无序列表 无序列表标签 常用于布局的块级标签—描述标签 定义描述标签 常用于布局的块级标签—描述标签 用定义描述标签实现图文混编的效果 常用于布局的块级标签—表格 表格 table tr td百度/td td新浪/td /tr …… /table 常用于布局的块级标签—表单 表单 常用于布局的块级标签—div层 分区标签 div 小结 请说出实际开发常用的4种块状结构是什么？ 1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单 行级标签—图像标签 图像标签 img的属性 属性align的值 行级标签—范围标签 范围标签span ：显示某行内的独特样式 行级标签—换行标签 换行标签 br/ 为什么需要W3C标准 W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：OM 页面交互方面：ECMAScript …… W3C提倡的Web结构 不规范的示例 W3C提倡的Web结构 规范的示例 XHTML 1.0基本规范 标签名和属性名称必须小写 HTML标签必须关闭 属性值必须用引号括起来 标签必须正确嵌套 必须添加文档类型声明 练习 需求说明： 实现简单的商品购买页 超链接 超链接---实现页面间的导航 超链接 链接路径 相对地址：相对于当前目录的地址，常用 绝对地址：指向目标地址的完整描述 ，少用 相对路径的用法 如果链接到同一目录下，则只需输入要链接文件的名称。 要链接到下级目录中的文件。只需先输入目录名，然后加/，再输入文件名。 要链接到上一级目录中文件，则先输入../，再输入文件名。 超链接的三类应用场合 页面间链接 锚链接 功能性链接 超链接的三类应用场合 实现锚链接 1、定义标记（锚）：a name=标记名目标位置/a 2、设置链接到标记位置：a href=#标记名当前位置/a 超链接的三类应用场合 实现锚链接 超链接的三类应用场合 功能性链接 邮箱、QQ链接等 超级链接target的属性值 注释 注释 特殊符号 表单的应用 表单的典型应用 常见的表单元素 表单基本语法 表单元素基本格式 表单各元素语法 文本框 密码框 按钮 单选按钮 表单各元素语法 复选框 文件域 列表框 多行文本框 表单的高级用法 隐藏域 方便服务器端“记住”客户端的信息、但又不希望客户看到的数据 表单的高级用法 只读和禁用属性 readonly：希望某个框内的内容只允许用户看，不能修改 disabled：因没达到使用的条件，限制用户使用 练习——简易求职表 需求说明： 使用表单制作简易求职表 表格的应用 表格应用场合 基本语法 跨行、跨列 表格高级应用 如何实现年终数据报表？ 表格高级应用 table标签的属性 表格布局 表格布局的应用场合 图文布局的实现 图文布局的实现 实现步骤 练习：贵美商品分类 需求说明 表单布局应用 实际页面中的登录表单布局 表单布局应用 小结 使用表格进行布局对显示数据有什么要求？实现思路是什么？ 嵌套布局 如何用表格实现下图布局？ 嵌套布局 嵌套表格布局的缺点： 代码量大 层次结构也相对复杂 不利于Goole等有哪些信誉好的足球投注网站引擎有哪些信誉好的足球投注网站查找数据 表格布局仅适用于： 规则的数据显示 表单页面 框架的应用 框架的用途 框架的两类用途： 1、显