《HTML基础教程》PPT课件.ppt

第2章 HTML基础 本课教学内容 静态网页制作HTML的常见标签 文字布局 文字设计标签 表格标签链接和图片标签表单标签 文本框 密码框 下拉列表 框架 网页实景图 2 1静态网页制作 一个网站 由许许多多的网页组成 通过地址向服务器发出请求后 接收到可以被浏览器运行解释的文件 由浏览器显示出来 思考题 请大家回忆第一节课当中讲的 从在浏览器地址栏输入URL到显示出网页界面 中间有哪些过程 HTML 超文本标记语言 是构成网页文档的主要语言 一般情况下 网页上看到的文字 图形 动画 声音 表格 链接等元素大部分都是由HTML语言描述的 思考题参考答案 1 客户端 比如 IE FireFox 360 接受用户的输入 如用户名 密码 查询字符串等 2 通过域名服务器DNS获得域名指向的IP地址 3 浏览器得到域名指向的IP后 浏览器会把我们输入的域名转化为HTTP的服务请求 通过这种方式浏览器向服务器发出了请求 应用服务器接收到请求后 使用某种脚本语言访问数据库 查询数据 并获得查询结果 4 数据库向应用服务器中的程序返回结果 5 应用服务器向客户端发送响应信息 返回的一般是动态生成的HTML页面 包括文字信息 图片 flash等 每个文件都要有一个唯一的网址 6 由用户浏览器负责解析HTML代码 显现用户界面 给HTML语言打的广告 一种进行网页设计的语言一种标签式的程序设计语言一种纯文本式的语言一种简单易学的语言一种可以使用文本编辑器进行编辑的语言编辑的文件名后缀是 html 2 1静态网页制作 续 HTML语言的基本组成部分是各种标签 一张生动的网页往往含有大量的标签 使用标签 实际上就是采用一系列指令符号来控制输出的效果 如 是最常使用的控制格式的标签 它表示在网页上换行 2 1静态网页制作 续 HTML有两种类型的标签 一类是单标签 就是一种单标签 它只需要单独一组符号就可以表示完整的功能 另一种是双标签 形如内容 表示将 内容 显示为粗体 这种标签所围绕的内容就是标签作用的作用域 2 1静态网页制作 续 HTML语言对于大小写不敏感 比如马上将要学习的表示HTML文档的标签 也可写做 甚至可以写为 但是一般推荐 自始至终使用同一种书写方式 HTML文件基本结构 标题 浏览器标题 内容主体 网页具体内容 头部信息 用于设置网页相关属性 比如网页标题 缓存等 可以省略 HTML文件基本结构 续 2 2HTML中的常见标签 标题 HTML简介HTML简介HTML简介HTML简介HTML简介HTML简介HTML简介 一般形式为内容 即到 为最大 为最小 运行结果 2 2HTML中的常见标签 换行标签 欢迎学习HTML这会是一种很有趣的体验另一个段落元素 2 2HTML中的常见标签 段落标签 欢迎使用HTML这会是一种很有趣的体验另一个段落元素 2 2HTML中的常见标签 段落标签 为段落标签 一个段落开始由来标记 结束用表示 有一个常用属性align 它用来指明内容显示时的对齐方式 较为常用的有left center right 分别表示左对齐 居中对齐和右对齐 2 2HTML中的常见标签 段落标签 续 学习HTML这会是一种很有趣的体验 右对齐 2 2HTML中的常见标签 水平线段标签 水平标尺标签用于在页面上绘制一条水平线 可借助于下列属性控制水平线 它只有开始标签 没有结束标签 且不包含任何内容 size 水平线的宽度 单位为像素 width 水平线的长 如不设置则默认为页面长度 单位默认为像素 但也可以使用百分制 如width 50 表示长度为页面长度的50 align 水平线的对齐方式 常用的有left center right noshade 线段无阴影属性 无属性值 若设置 则线段为实心线段 color 线段内部的颜色 2 2HTML中的常见标签 水平线段标签 续 欢迎使用HTML我的第一个HTML文档这将会是一种很有趣的体验 2 2HTML中的常见标签 文字设计标签 文字设计标签face 用来设置字体类型 默认为宋体 如 即设置该内容的输出的字体为楷体但是需要注意的是 只有电脑中安装的字体才可以在浏览器中出现相应风格 如果用户没有安装该字体 则会显示默认字体的风格 color 用于设置字体颜色 2 2HTML中的常见标签 文字设计标签 续 文字设计标签常见的设置文字风格的标签有 内容 将内容设置为粗体 内容 将内容设置下划线 内容 将内容设置为斜体 内容 将内容设置为上标 内容 将内容设置为下标 字体颜色标签示例 字符级标签示例Black Olive Teal Red Blue Maroon Navy Gray Lime White Green Purple Silver Yellow 2 2 2列表标签 列表标签分为两种 一种是有序的 一种是无序的 内容 表示它所包围的内容是无序列表标签 即列表中每一项目前不会加上序号 而是会加上 等符号 内容表示有序标签 意义与使用方法和无序列表标签大致相同 不同点为它会在每个列表项前加上数字其中列表的每一项用列表项标示 无序列表 学习HTML星期一星期二星期三星期四星期五 无序列表是一种 项目符号列表 其中的项目都带有项目符号前缀 该列表包含在无序列表标签 内 列表中的每个项目都使用列表项进行标签 关闭标签是可选的 列表的项目符号 方形项目符号实心圆项目符号空心圆项目符号 有序列表 学习HTML星期一星期二星期三星期四星期五 有序列表包含在 标签内 有序列表也显示列表项目 它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号 无序和有序的嵌套 大写罗马数字小写罗马数字大写字母小写字母从第n个值开始编号 学习HTML星期一简介HTML创建列表星期二创建表插入图像星期三星期四星期五 2 3表格标签 编写表格所用到的标签如下 定义表格 表格的所有内容都写在这个标签之内 定义标题 标题会自动出现在整张表格的上方 定义表行 定义表头 包含在之间 表头中的文字会自动变成粗体 定义表元 表格的具体数据 包含在之间 表格标签 以下为制作表格的标签中大多拥有的公共属性 align 水平布局方式 常用属性值有left right center 表示左对齐 右对齐和居中对齐 的该属性表示表格在页面的布局方式 的该属性表示该行和该表元内的内容的布局方式 默认布局方式为左对齐bgcolor 设置背景颜色border 设置边框的宽度 属性值为整数 为0时表格没有边框 默认值为0width 宽度 默认单位为像素 也可以使用百分制单位height 高度 默认单位为像素 也可以使用百分制单位 表格标签 对于整张表格 标签常用的属性有以下几个 bordercolor 表格边框的颜色 默认为黑色cellpadding 表元边框的宽度cellspacing 表元的边框与表格边框之间的宽度 合并单元格 合并单元格必须对标签中的rowspan colspan进行设置 属性值都为整数 默认为1 表示没有合并 这两个属性的意思分别为 从该表元起 该表元在行或者列上占有的单元格数 比如设置某个标签rowspan 2 表示该表元及其下面的表元合并成一个 表格标签 2 4链接和图片标签 链接标签可以使用户链接到另一个页面 它的写法是内容 标签内的内容为链接所显示的内容 可以是文字 空格占位符 图片等 此标签的一个重要属性是 href 它的值表示链接所指向的资源地址 2 4链接和图片标签 图片标签比较重要和常用的标签有以下几个 src 表示图片储存的位置width height border align 作用与前文所提到属性相同alt 当图片未载入或者载入失败时提供的替代性的文字说明 2 4链接和图片标签 使用链接本页的所有内容都讲述关于如何创建到文档的链接单击此处查看文档2 文档2这是文档2 单击文档1中的超链接后将显示本页 返回 2 4链接和图片标签 HTML文档中的图片GIF GraphicsInterchangeFormat 图像 GIF 支持图形渐近透明GIF图像支持动画支持无损压缩JPEG JointPhotographicExpertsGroup 图像 JPG PNG PortableNetworkGraphics 插入图像 插入图像插入图像底部对齐顶部对齐居中对齐 IMG标签用于将图像插入到HTML文档中 可以将IMG标签放置在要显示图像的位置 语法为 其中SRC是属性 而值是指定图像文件位置的URL IMG标签的ALIGN属性可以用于调整图像相对于周围文本的对齐方式 语法为 2 5表单标签 type可以为以下的值 text 文本框 text也为type的默认属性password 密码框radio 单选按钮 可以将多个单选按钮的name属性设置相同 使其成为一组 checked属性可设置默认被选checkbox 复选框 checked属性可设置默认被选 2 5表单标签 reset 重置按钮 按下之后 所有的表单元素内容变为默认值button 普通按钮submit 提交按钮 按下之后 网页会将表单的内容提交给action设定的网页 action的值为空时提交给本页image 图片 但是点击它的效果与提交按钮一样 都会提交表单 2 5表单标签 2 6框架 框架的写法如下 纵向3 7分割框架窗口 无滚动条 本章结束 本章总结静态网页制作HTML中的常见标签表格标签链接和图片标签表单标签框架上机习题 实践环节 设计一个网页 版面布局如左所示 Logo自选信息显示区可以自由发挥需设计框架 纵向和横行分割比例自行确定 放飞心情XXX个人网站 基本信息 爱好专长 理想志向 喜欢歌曲 信息显示区 Logo Title button