html设置文本和图像(web编程基础)PPT课件

信息工程学院 web编程基础 用HTML设置文本 图像 列表教师 刘欣欣年级 2014级时间 2015 2016学年第一学期联系方式 621422公室 21号楼303 3 知识回顾 什么是HMTL HTML HypertextMarkupLanguage 是一种SGML StandardforGeneralMarkupLanguage 定义下的一个描述性的语言 全称是超文本标记语言是一种国际化标准语言 它用于在Web上发布超文本信息 是一种基于SGML 公开的资源描述格式不是程序语言 只是标记语言 设计者只需要掌握各类标记的使用方法即可 4 X HTML 什么是XHTML XHTML是TheExtensibleHypertextMarkupLanguage可扩展标识语言的缩写 在HTML4 0的基础上 用XML的规则对其进行扩展 得到了XHTML 它实现HTML向XML的过渡 什么是XML XML ExtensibleMarkupLanguage 的出现 结构化文档和数据有了一个通用的 科适应的格式 不仅仅应用在web上 也可以应用在任何地方 标准成为可能 是Web未来的发展方向 5 X HTML 为什么要使用XHMTL HTML没有足够的可扩展性 HTML文档创建要素是有限的 如无法处理非常规的内容 乐谱 数学表达式等 同时HTML不能很好地支持不断更新的显示媒体 如手机等 而XHMTL就可以很好地解决这一点 XHMTL的优点有 HTML没有非常良好的格式 所以当添加新的元素时 需更改文档类型定义 而XHMTL有良好的格式 极大简化了新元素的开发和集成 HTML没有非常良好的格式 所以在计算能力较差的浏览设备上不能正常显示 而XHMTL有良好的格式 可在非台式设备中正常显示 新建的Web文档使用XHTML 将会使文档具有更大的扩展性和兼容性 6 HTML文件的总体结构 文件标题 表头区 主体区 以开头 以结尾 HTML页面结构 7 X HTML页面结构 XHMTL页面结构 关于文档类型的说明 声明名字空间页面标题这里是页面内容部分 注意内容与浏览器边缘的距离 8 XHTML文件基本结构说明 说明 1 HTML只是一个纯文本文件 由 显示内容 及 控制语句 两部分组成2 规范的标记方法为 受影响内容3 由英文 括起来的一个单词 例如4 在XHTML中大部分的标签是成对出现的 第一个成为 起始 标签 第二个叫做 结束标签 结束标签比起始标签多一个 例如5 标签之间相互嵌套来定义网页中文字图片的板式 但是先后顺序必须一致 6 两个标签之间定义的就是排版的内容 7 html标签区分大小写 xhtml标签与属性必须小写 9 Meta标签 什么叫Meta标签 1 meta是html语言head区的一个辅助性标签 2 也许你认为这些代码可有可无 其实如果你能够用好meta标签 会给你带来意想不到的效果 例如加入关键字会自动被大型搜索网站自动搜集 可以设定页面格式及刷新等等 3 meta标签的组成meta标签共有两个属性 它们分别是http equiv属性和name属性 不同的属性又有不同的参数值 这些不同的参数值就实现了不同的网页功能 10 Meta标签 1 name属性name属性主要用于描述网页 与之对应的属性值为content content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的 meta标签的name属性语法格式是 metaname 参数 content 具体的参数值 其中name属性主要有以下几种参数 11 Meta标签 A Keywords 关键字 说明 keywords用来告诉搜索引擎你网页的关键字是什么 举例 metaname keywords content science education culture politics ecnomics relationships entertaiment human B description 网站内容描述 说明 description用来告诉搜索引擎你的网站主要内容 举例 metaname description content Thispageisaboutthemeaningofscience education culture 12 Meta标签 C robots 机器人向导 说明 robots用来告诉搜索机器人哪些页面需要索引 哪些页面不需要索引 content的参数有all none index noindex follow nofollow 默认是all 举例 metaname robots content none D author 作者 说明 标注网页的作者举例 metaname author content root root 13 Meta标签 2 http equiv属性http equiv顾名思义 相当于http的文件头作用 它可以向浏览器传回一些有用的信息 以帮助正确和精确地显示网页内容 与之对应的属性值为content content中的内容其实就是各个参数的变量值 meat标签的http equiv属性语法格式是 metahttp equiv 参数 content 参数变量值 其中http equiv属性主要有以下几种参数 14 Meta标签 A Expires 期限 说明 可以用于设定网页的到期时间 一旦网页过期 必须到服务器上重新传输 用法 metahttp equiv expires content Fri 12Jan200118 18 18GMT 注意 必须使用GMT的时间格式 B Pragma cache模式 说明 禁止浏览器从本地计算机的缓存中访问页面内容 用法 metahttp equiv Pragma content no cache 注意 这样设定 访问者将无法脱机浏览 15 Meta标签 C Refresh 刷新 说明 自动刷新并指向新页面 用法 metahttp equiv Refresh content 2 URL 注意 其中的2是指停留2秒钟后自动刷新到URL网址 D Set Cookie cookie设定 说明 如果网页过期 那么存盘的cookie将被删除 用法 metahttp equiv Set Cookie content cookievalue xxx expires Friday 12 Jan 200118 18 18GMT path 注意 必须使用GMT的时间格式 16 Meta标签 E Window target 显示窗口的设定 说明 强制页面在当前窗口以独立页面显示 用法 metahttp equiv Window target content top 注意 用来防止别人在框架里调用自己的页面 F content Type 显示字符集的设定 说明 设定页面使用的字符集 用法 metahttp equiv content Type content text html charset gb2312 17 Meta标签功能 帮助主页被各大搜索引擎登录 定义页面的使用语言 自动刷新并指向新的页面 实现网页转换时的动画效果 网页定级评价 控制页面缓冲 控制网页显示的窗口 18 XHTML与HTML的重要区别 XHTML与HTML的重要区别 代码规范 1 在XHTML中标记名称必须小写2 在XHTML中属性名称必须小写3 在XHTML中标记必须严格严格嵌套4 在XHTML中标记必须封闭5 在XHTML中 即使是空元素的标记也必须封闭6 在XHTML中属性值用双引号括起来7 在XHTML中属性值必须使用完整形式8 在XHTML中 应该区分 内容标记 与 形式标记 9 在XHTML1 0中 别用name用id name属性是不赞成使用的 在以后的XHTML版本中将被删除 19 XHTML语法注意事项 1 为图片添加alt属性为所有图片添加alt属性 alt属性指定了当图片不能显示的时候就显示供替换文本 这样做对正常用户可有可无 但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的 只有添加了alt属性 代码才会被W3C正确性校验通过 注意的是我们要添加有意义的alt属性 像下面这样的写法毫无意义 正确的写法 20 XHTML语法注意事项 2 给所有属性值加引号在HTML中 你可以不需要给属性值加引号 但是在XHTML中 它们必须被加引号 还必须用空格分开属性 例 这也是不正确的3 关闭所有的标签在XHTML中 每一个打开的标签都必须关闭 空标签也要关闭 在标签尾部使用一个正斜杠 来关闭它们自己 例如 4 使用页面注释XHTML中使用作为页面注释 其示例代码如下 说明 在页面相应的位置使用注释 可以使文档结构更加清晰 21 XHTML开发环境 XHTML编写环境和测试方法1 记事本 1 打开记事本文件 编写HTML文件 保存为后缀为html的文件 2 双击打开该文件 即可在浏览器中查看2 Dreamweaver 1 启动Dreamweaver软件 新建HTML文件 在代码视图下编写HTML文件 保存 2 F12或是选择菜单预览 即可在浏览器中查看 22 X HTML标签 一 1 规范的标记方法为 受影响内容2 html3 head4 title5 body主要属性 bgcolor 背景颜色background 背景图片text 文字颜色link 设置链接文字颜色margin 边距 23 一 段落段落标签是处理文字时常用到的标签 成对出现的标签 见ch02 2 1 02 html文档 二 换行单标签例 见ch02 2 1 03 html文档 使用段落标记后的效果 在段落内部强制换行 2 1文本排版 4 6 2020 三 标题标题标签由6个级别从到 为最大标题 为最小标题 成对出现的标签 例 见ch02 2 1 04 html文档属性 align 值 right center left 段落与标题的效果 2 1 2设置标题 25 四 居中对齐例 见ch02 2 1 05 html文档 居中显示 2 1 3使文字水平居中 4 6 2020 2 1 4设置文字段落的缩进 五 向右缩进五个字符例 见ch02 2 1 06 html文档 缩进显示 27 六 预排版把预先排版好的格式保留下来 成对标签 七 水平线在页面中插入一条水平标尺线 使文字分隔开 单标签 主要属性 Width 宽度Color 颜色Align 对齐方式Noshade 去掉水平线的阴影 XHTML常用标签 文本排版 4 6 2020 八 文字标签 成对标签 用于设置文字的大小 字体 字型 颜色 字号等 常用属性如下 size 设置文字大小 取值范围 1 7 6 6face 设置字体 如 黑体 宋体 TimesNewRomancolor 设置文字颜色 如 000000 black 文字列表的主要作用是有序地编排一些信息资源 使其结构化和条理化 并以列表的样式显示出来 以便浏览者能更加快捷地获得相应信息 HTML中 文字列表主要分为无序列表 有序列表 定义列表三种 第一种每个列表项的前面有一个圆点符号 第二种则对每个列表项依次编号 第三种用于关键词的解释说明 2 2文字列表 项目列表使用的一对标记是 其中每一个列表项使用 其结构如下所示 第1项第2项第3项 2 2 1建立无序列表 无序列表 有序列表和无序列表的使用方法基本相同 它使用标记 每一个列表项前使用 每个项目都有前后顺序之分 多数用数字表示 其结构如下所示 第1项第2项第3项 2 2 2建立有序列表 有序列表 4 6 2020 2 2 3建立定义列表 定义列表是一列事物以及其相关的解释 定义义列表的开始标签是 每个被解释的事物的开始标签为 每个解释的内容的开始标签是 1 该元素用于定义一个释义列表的开始与结束 2 该元素用来在释义列表中创建一个上层项目 3 该元素用来在释义列表中创建一个上层项目 通过上面几个实例的应用 用户对文字的排版已有了一个基本认识 到目前为止 都是通过HTML标记对文字进行编排 但版面编辑并不仅是如此 还可以利用一些HTML属性更加灵活地编排网页中的文字 在大多数HTML标记中都可以加入属性控制 属性的作用是帮助HTML标记进一步控制HTML文件的内容 如内容的对齐方式 文字的大小 字体 颜色 网页的背景样式 图片的插入等 2 3HTML标记与HTML属性 上一节中介绍过使用标记可以使文本水平居中 若希望右对齐 可以使用HTML的align属性 2 3 1控制段落的水平位置 段落对齐方式 HTML中 不同的标记会有各自不同的属性 例如在前面曾介绍过的标记 使用它的属性就可以控制网页的背景以及文字字体的颜色 例如在上面的代码中 将一行改为 2 3 2设置背景颜色 通过标记的属性 使用HTML标记和属性还可以设置文字的样式 2 3 3文字的特殊样式 设置字体样式 除了可以设置文字的样式外 还可以使用标记设置字体相关的属性 标记有3个主要属性 分别用于设置文字的字体 大小和颜色 2 3 4文字的字体大小和颜色 使用标记设置字体 大小和颜色 前面介绍了HTML的标记和属性 但HTML样式标记和属性是有很大局限性的 前面介绍了很多HTML标记和HTML属性 目的是使读者更深入地理解HTML的原理 而实际上有一些标记现在已经过时了 并不鼓励用户使用 因为有更好的 更科学的方法已经出现了 这种更好 更科学的方法就是使用CSS来控制网页的样式 在互联网发展的初期 各种规范还远没有像今天这样完善和普及 因此当时为了更容易被大家和软件厂商所接受 网页主要是由HTML来完成的 这样写起来更简单 一个网页的两个方面 结构 和 表现 都由HTML来承担 因此HTML标记就由两类构成 负责定义网页结构的标记和负责定义网页表现形式的标记 例如 标记用来定义段落 这就是结构标记 而标记用于定义网页元素的字体 这就是形式标记 2 4HTML标记和属性的局限性 现在 网页的功能已不再单纯地传播一些信息 它还包括传播大量的专业技术知识 如数学 物理和化学知识等 HTML中有许多特殊符号 可以用来实现在网页上显示数学公式 化学方程式等特殊字符 2 5特殊文字符号 在网页中使用特殊符号 运算式 图片是网页中不可缺少的元素 巧妙地在网页中使用图片可以为网页增色不少 这里首先介绍在网页中常用的3种图片格式 然后再介绍如何在网页中插入图片 以及设置图片的样式和插入的位置 通过对本章的学习 读者可以制作简单的图文网页 并根据自己的喜好制作出不同的图片效果 在本章中 我们将事先准备好的图像插入网页中 并使它按照我们需要的格式显示 而在实际的工作中 需要的图像可能并不存在 或者并不适合直接放入网页 因此网页设计师必须要掌握一定的图片处理和实践的能力 在本书后续章节将对网页设计师所需的美术方面的技能进行简要介绍 从而让用户掌握一定的图像和动画的设计 加工 处理能力 以更好地掌握网页设计的综合能力 2 6使用图像 Web页中通常使用的图像文件有JPEG GIF PNG共3种格式 但大多数浏览器只支持JPEG GIF两种图像格式 因为要保证浏览者下载网页的速度 所以网站设计者也常使用JPEG和GIF这两种压缩格式的图像 1 GIF文件2 JPEG文件3 PNG文件 2 6 1网页中的图像格式 在网页上使用图片 对于视觉效果而言 能使网页充满生机 并且直观且巧妙地表达出网页的主题 这是仅靠文字很难达到的效果 一个精美的图片网页不但能引起浏览者对网页浏览的兴趣 而且在很多时候要通过图片以及相关颜色的配合来做出本网站的网页风格 2 6 2简单案例 在网页中使用图片 对于路径信息的说明 通常分为以下两种情况 1 一种称为相对路径 也就是从自己的位置出发 依次说明到达目标文件的路径 这就好像如果班主任要找本班的一名学生 只需直接说名字即可 而校长要找到一名学生 就还要说明年级和班级 2 另一种称为绝对路径 也就是先指明最高级的层次 然后依次向下说明 例如要找外校的一名学生 就无法从本校为起点找到他 因此就可以说 八一中学3年4班的张伟 这就是绝对路径的概念 2 6 3文件路径 文件系统结构示意图 每一个图像都有一定的尺寸 在Windows中可以方便地查看一个图像文件的尺寸 在 我的电脑 中找到图像文件 然后把鼠标指针移动到图像文件上 停留几秒钟后 就会出现一个提示框 说明图像文件的尺寸 尺寸 250 250 就表示该图像的宽度和高度都是250像素 在HTML中 可以设定图像的显示大小 通常情况下都按照原本的大小显示 当然也可以任意设置不同于原本尺寸的显示大小 2 7设置图片的尺寸 在Windows中查看图像的尺寸 文件系统结构示意图 由于一些原因 图像可能无法正常显示 比如网络速度太慢 浏览器版本过低等 因此应该为图像设置一个替换文本 用于图像无法显示的时候告诉浏览者该图片的内容 2 8设置图像的替换文本 显示替换文本 上一节中介绍了如何使用Dreamweaver可视化的方法制作网页 实际上Dreamweaver也提供了方便的代码编写功能 前面曾经谈到 页面在浏览器中的最终显示效果完全是由HTML代码决定的 Dreamweaver只是帮助用户方便地插入或者生成必要的代码 在实际工作中 还是经常会遇到通过可视化的方式生成的代码并不能获得最佳效果的情况 这时就需要设计师对代码进行手工调整 这个工作可以在Dreamweaver文档窗口的 代码 视图中完成 在 代码 视图中 Dreamweaver也提供了很多方便的功能 可以帮助用户更高效地完成代码的输入和编辑操作 2 10利用Dreamweaver代码视图提高效率 在HTML以及本书后面要介绍的CSS中 都有很多种标记 属性和属性值 都是英文单词 因此设计师要把繁多的标记 属性和属性值记清楚是很不容易的 而一旦拼写错误 就无法得到正确的效果了 为此 Dreamweaver提供了很方便的代码提示功能 可以大大减少设计者的记忆量 也可以尽可能避免拼写错误 2 10 1代码提示 代码提示功能 代码折叠是另一项Dreamweaver提供的辅助手段 当页面非常复杂的时候 代码量就会很大 这时如果分析代码就会感到很混乱 代码折叠的功能就是可以暂时把某些部分的代码收缩隐藏起来 便于设计师分析和编辑代码 2 10 2代码折叠 选中一些代码 将代码折叠起来 文档窗口中有3种视图 其中 拆分 视图就是把整个窗口分为左右两半 左面显示代码 右面显示设计视图 2 10 3拆分视图与代码快速定位 使用 拆分 视图对代码进行快速定位 在制作页面是表格起到布局定位的作用 当然也可以用来制作数据表 4 1使用表格 建立一个最基本的表格 必须包含一组标记 一组标记以及一组标记 这也是最简单的单元格表格 标记的作用是定义一个表格