第一章HTML基本标签选读.ppt

本节内容 HTML简介 HTML常用标签介绍 常用的块级标签 常用的行级标签 超链接标签 W3C标准及XHTML规范 HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 HTML文档的基本结构 网页的摘要信息 基本块级标签—段落 段落标签 基本块级标签—水平线 水平线标签 常用于布局的块级标签—有序列表 有序列表标签 常用于布局的块级标签—无序列表 无序列表标签 常用于布局的块级标签—描述标签 定义描述标签 常用于布局的块级标签—描述标签 用定义描述标签实现图文混编的效果 常用于布局的块级标签—表格 表格 table tr td百度/td td新浪/td /tr …… /dl 常用于布局的块级标签—表单 表单 常用于布局的块级标签—div层 分区标签 div 小结 1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单 行级标签—图像标签 图像标签 行级标签—范围标签 范围标签span ：显示某行内的独特样式 行级标签—换行标签 换行标签 br/ 为什么需要W3C标准 W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：OM 页面交互方面：ECMAScript …… W3C提倡的Web结构 不规范的示例 W3C提倡的Web结构 超链接 超链接---实现页面间的导航 超链接 链接路径 超链接的三类应用场合 页面间链接 锚链接 功能性链接 超链接的三类应用场合 实现锚链接 1、定义标记（锚）： a name=标记名目标位置/a 2、设置链接到标记位置：a href=#标记名当前位置/a 超链接的三类应用场合 实现锚链接 超链接的三类应用场合 功能性链接 邮箱、QQ链接等 注释 注释 特殊符号 上机练习1 需求说明： 实现简单的商品购买页 上机练习3 需求说明： 实现页面超链接的效果 XHTML 1.0基本规范 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html head …… /head ……body部分内容…… /html 标签名和属性名称必须小写 HTML标签必须关闭 属性值必须用引号括起来 标签必须正确嵌套 必须添加文档类型声明 1、声明必须位于文档的最前面 2、三种级别：Strict（严格类型） 、Trasitional（过度类型）、 Frameset（框架类型） 链接文本或图像 链接地址（目标） …… a href=span.html target=_blank灿坤蒸气电熨斗/a …… 链接在新窗口中打开 a href=链接地址 target=目标窗口位置 链接热点文本或图像/a …… a href=../web1.htm上级目录/a a href=../../web2.htm上上级目录/a …… 相对地址：相对于当前目录的地址，常用 绝对地址：指向目标地址的完整描述 ，少用 上级目录：../ 上上级目录：../../ a href=/memAdmin/login/login.htm登录/a a href=搜狐/a a href=login/login.htm登录/a …… a href=register/register.html[免费注册]/a a href=login/login.htm[登录]/a …… 常用于网站导航 相对路径 …… a href=#star[明星专区]/a …… a name=“star”明显专区内容/a …… 定义标记 设置链接到标记位置 A.页面内的锚链接 适用于页面内容较多，超过一屏的场合 ……标记所在页…. a href=#star[明星专区]/a …… B.页面间的锚链接 ……链接页…. 明星体验：a href=anchor.html#star明星专区/a …… A.页面内部的锚链接 …… a href=mailto: guimeiWebMa