使用HTML制作网页 PPT
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
演示示例：图像标签
超链接标签
语法
链接路径
链接在哪个窗口打开,常用值： _self、_blank
<a href="path" target="目标窗口位置" > 链接文本或图像 </a>
示例
演示示例：超链接
锚链接
锚链接
从A页面的甲位置跳转到本页中的乙位置(同一页面) 从A页面的甲位置跳转到B页面中的乙位置(两个页面)
本课目标
什么是HTML
HTML
Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图 片、音频、视频、动 画等
HTML的发展史
HTML的发展史
HTML5
XHTML2.0 2014-10-28
XHTML1.1
XHTML1.0 2001-5-31
超
HTML4.01 2000-1-26
案例分析
案例分析
HTML
斜体标签<em>
特殊符号 (空格)
段落标签 <p>
网页分析
标题标签<h1> 粗体标签
<strong> 水平线标签
<hr/>
换行标签 <br/>
需求说明：
制作清平乐诗词网页 要求：使用HTML标签实现
课堂演示
演示示例：制作清平乐诗词网页
小结2-1
小结
网页基本标签元素
完成时间：10分钟
共性问教题员集讲中需讲求解
课堂练习
无序列表 有序列表 定义列表
HTML列表
语法
<ul > <li>列表项内容一</li> <li>列表项内容x</li> <li>列表项内容最后一项</li>
</ul>
无序列表
说明
没有顺序，每个<li>标签独占一行 默认<li>标签项前有实心小圆点 一般用于无序类型的列表，如导航，侧边栏新闻列表等
W3C标准包括:
结构化标准语言（XHTML 、XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript ）
大家学习辛苦了，还是要坚持
继续保持安静
TXT记事本 EditPlus DreamWeaver
网页开发软件
演示示例： 使用软件演示新建网页
HTML基本结构
HTML网页基本结构
有序列表
语法
<ol> <li>列表项内容一</li> <li>列表项内容x</li> <li>列表项内容最后一项</li>
</ol>
创建步骤
创建跳转标记
<a name="marker">乙位置</a>
创建跳转链接
<a href="#marker">甲位置</a>
演示示例：锚链接
需求说明
制作家用电器排行榜页面 标题使用标题标签 家电名称加上超链接 商品之间使用水平线分隔
实现思路 家用电器排行榜放在标题<h1>标签中 图像使用<img>标签 商品名称使用超链接<a>标签 商品之间使用<hr>标签实现分隔
<html> <head> <title>网页标题</title> </head> <body> 网页内容 <hr/> </body>
</html>
网页头部（用于设置网 页的一些属性）
主体部分（网页内容 编辑区）
注意
1、< body>、</body>等成对的标签，分别叫开放标签和闭合标签; 2、单独呈现的标签（空元素），如 <hr/> ；意为用 / 来关闭空元素;
完成时间：10分钟 共性问题集中讲解
常见的图像格式
图像标签2-1
图像标签2-2
语法
鼠标悬停提示文字
图像高度
<img src="path" alt="text" title="text" width="x" height="y" />
图像路径 （绝对路径&相对路径）
图像宽度
示例
图像的替代文字
<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>
网页编码设置
<meta>标签
- 用于定义文件信息
给标签设置不同属性，具体不同的功能
<meta http-equiv="Content-Type" content="text/html; charset= utf-8 " />
推荐utf-8，还可设置为 gb2312
注意
1、 gb2312包含全部中文字符; utf-8 则包含全世界所有国家需要用到的字符 2、 页面编码应与页面文件保存时的编码一致
文 本
HTML4.0 1999-12-24
标
HTML3.2Baidu Nhomakorabea1997-12-18
记 语
HTML2.0
1996-1-14
言 1995-11
1993-6
W3C标准
W3C：
World Wide Web Consortium（万维网联盟） 成立于1994年，Web技术领域最权威和具影响力的国
际中立性技术标准机构
小结2-2
小结
注释和特殊符号
注释
<!-- HTML注释内容 -->
标签规范（ XHTML标签规范）：
标签名应小写 HTML标签应闭合 标签应正确嵌套 应添加文档类型声明<!DOCTYPE>
标签规范
注意
书写HTML页面时，请遵循XHTML标签规范
课堂练习
需求说明
标题用标题标签，人名加粗显示，时间斜体显示， 并制作页面版权部分
页面规范声明
DOCTYPE声明 （告诉浏览器使用什么规范）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head>
<meta http-equiv="Content-Type" content="text/htmXHl; TchMaLrse1t.=0u版tf-本8" /> <title>标题</title> </head> <body> 网页内容 </body> </html>
使用HTML制作网页
学完本门课程后，你能够：
使用HTML进行网页布局 使用CSS美化网页 使用JavaScript制作网页特效
本门课程目标
当当网上书城
课程项目展示
演示示例：当当网上书城
制作图文并茂的简单网页
李清照简介页面 家用电器排行榜页面
本课任务
4/37
学完本次课程后，你能够：
熟练掌握HTML基本结构创建网页 熟练掌握HTML的基本标签 掌握超链接标签制作页面导航 熟练掌握表格标签制作网页表格 会使用表单标签制作提交页面 了解XHTML框架结构