HTML基本标签.ppt

第一章 HTML基本标签(一) 本门课程目标 学完本门课程后，你能够： 制作界面美观大方、面向企业应用的静态商业网站 掌握Web开发的行业规范和标准 课程项目展示 贵美商城 首页 商品展示页（点击左边“商品分类”任一链接） 具体商品详细介绍页（点击任一商品图片） 购物车页面（点击“立刻购买”按钮） 登录页（点击右上方的导航菜单） 注册页（点击右上方的导航菜单） 帮助中心客服页面（点击右上方的导航菜单） 教员现场演示贯穿项目 本章任务 制作图文并茂的商品介绍页 本章目标 使用HTML的基本结构创建网页 使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面 什么是HTML HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 HTML告知浏览器如何显示网页 HTML文档的结构 html head title我的第一个网页 /title /head body Hello World! /body /html HTML 网页 head头部部分 body主体部分 html…/html标签标记 HTML 文档的开始和结束 网页标题 网页内容，可以是文本、图像等 这部分包括标题和其他说明信息，包括在 head…/head 标签内 这部分包含文本、图像和链接，它包括在 body…/body 标签内 HTML文档的基本结构 记事本 UltraEdit HTML的编辑工具 操作演示1：在记事本里创建网页 网页的摘要信息2-1 网页摘要信息利于浏览器解析和搜索引擎搜索： 使用title标签 head title搜狐-中国最大的门户网站/title /head head meta name= keywords content= 淘宝,网上购物,在线交易,交易市场 / meta name= description content= 淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、…… / /head head meta http-equiv=Content-Type content=text/html; charset=gb2312 / /head 网页的摘要信息2-1 使用meta标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述 提供搜索关键字和内容描述信息，方便搜索引擎的搜索 HTML页面中的块和行 HTML标签分类（方便后续的布局设计）： 块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计 块级： 块内包含多行 行级：包括文字、图片等 块级标签 根据使用场合，块级标签又细分为： 基本块级标签 常用于布局的块级标签 标题标签 …… body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 /body …… 基本块级标签3-1 h1最大 h6最小 前后隔行 操作演示2：标题标签 h1标题/h1 …… h6标题/h6 段落标签 …… body h1北京欢迎你/h1 p北京欢迎你，有梦想谁都了不起！/p p有勇气就会有奇迹。/p /body …… 基本块级标签3-2 前后换行，类似教材中的段落 操作演示3：段落标签 p……/p 水平线标签 …… body h1北京欢迎你/h1 hr / p北京欢迎你，有梦想谁都了不起！/p p有勇气就会有奇迹。/p /body …… 基本块级标签3-3 横线用于内容分割 单个标签的闭合形式 操作演示4：水平线标签 hr / 练习——基本块级标签 需求说明： 显示唐诗介绍（ UltraEdit环境 ） 完成时间：20分钟 分析应使用哪些标签？ 有序列表标签 …… body h3注册步骤：/h3 ol li填写信息/li li收电子邮件/li li注册成功/li /ol /body …… 常用于布局的块级标签7-1 有序列表 操作演示5：有序列表标签 ol li列表项1/li … … /ol 无序列表标签 body h3新人上路指南 /h3 ul li如何激活会员名？/li li如何注册贵美会员？/li li注册时密码设置有什么要求？/li li贵美认证/li /