html讲座.ppt

HTML讲座 哈尔滨华夏计算机职业技术学院网络传媒系教师 刘景玮 HTML入门 HTML英语意思是 HypertextMarkedLanguage 即超文本标记语言 是一种用来制作超文本文档的简单标记语言 用HTML编写的超文本文档称为HTML文档 它能独立于各种操作系统平台 如UNIX WINDOWS等 使用HTML语言描述的文件 需要通过WWW浏览器显示出效果 HTML的基本结构 超文本文档分文档头和文档体两部分 在文档头里 对这个文档进行了一些必要的定义 文档体中才是要显示的各种文档信息 头部信息文档主体 正文部分 HTML 页面布局HTML的基本结构与文字设计 1 某些标记称为 单标签 因为它只需单独使用就能完整地表达意思 这类标记的语法是 最常用的单标签是 它表示换行 2 双标签如 第一 HTML的基本结构 其中在最外层 表示这对标记间的内容是HTML文档 我们还会看到一些Hompage省略标记 因为 html或 htm文件被Web浏览器默认为是HTML文档 之间包括文档的头部信息 如文档总标题等 若不需头部信息则可省略此标记 标记一般不省略 表示正文内容的开始 HTML的基本结构 下面是一个最基本的超文本文档的源代码 一个简单的HTML示例欢迎光临我的主页这是我第一次做主页 无论怎么样 我都会努力做好 头部信息 主体部分 HTML的基本结构 效果如图 页面布局与文字设计 页面布局与文字设计 代码如下 字体样式白居易白居易 772 846年 字乐天 晚居香山 自号香山居士 原籍太原 白居易是唐代新乐府运动的倡导者 是中国文学史上堪与屈原 李白 杜甫并列的第一流大诗人 白居易出身于小官僚家庭 大约在贞元三年 787年 的年初 十六岁的白居易带着自己的诗稿 到了京都长安 老诗人顾况看到这位不速之客的姓名有 居易 二字 便很恢谐地说 长安米贵 居住不易 及披卷读到 赋得古原草送别 中的 离离原上草 一岁一枯荣 野火烧不尽 春风吹又生 时 不禁大为惊奇 拍案称绝 马上改变语气 郑重地说 能写出这样好的诗句 居 下去是不难的 刚才我是同你开开玩笑罢了 从此 白居易的诗名大振 白居易生活的时代 主要是建中 元和 长庆时期 公元781 824年 是唐朝走向衰败的极端苦难动荡的时代 白居易是继杜甫之后 我国伟大的现实主义诗人 他的贡献是在总结我国自 诗经 以来现实主义诗歌创作经验的基础上 建立了现实主义的诗歌理论 掀起了一个波澜壮阔的现实主义的诗歌运动 新乐府运动 创作了大量优秀的现实主义诗篇 页面布局与文字设计 标题 第一级标题 第二级标题 第三级标题 第四级标题 第五级标题 第六级标题 页面布局与文字设计 例 结果 标题示例这是一行普通文字 H1 一级标题 H2 二级标题 H3 三级标题 H4 四级标题 H5 五级标题 H6 六级标题 页面布局与文字设计 换行例 结果 换行示例登鹳雀楼白日依山尽 黄河入海流 欲穷千里目 更上一层楼 页面布局与文字设计 段落标签例 结果 段落标签浣溪沙一曲新词酒一杯 去年天气旧亭台 夕阳西下几时回 无可奈何花落去 似曾相识燕归来 小园香径几徘徊 页面布局与文字设计 字体的大小设置例 结果 字号大小这是size 7的字体这是size 6的字体这是size 5的字体这是size 4的字体这是size 3的字体这是size 2的字体这是size 1的字体这是size 1的字体 页面布局与文字设计 文字的字体与样式例 结果 字体欢迎光临欢迎光临欢迎光临欢迎光临Welcommyhomepage Welcommyhomepage 页面布局与文字设计 样式粗体斜体加下划线打字机字体大型字体小型字体闪烁效果表示强调 一般为斜体表示特别强调 一般为粗体用于引证 举例 一般为斜体 页面布局与文字设计 文字的颜色 例 结果 文字的颜色色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界 页面布局与文字设计 位置控制例 位置控制你好 你好 你好 结果 TABLE表格 表格的基本结构 定义表格 定义标题定义表行定义表头定义表元 表格的具体数据 例 姓名性别年龄王林男25结果 TABLE表格 表格尺寸的设置表格的宽和高以像素为单位 以百分比为单位 边框尺寸边框是用border属性来体现的 它表示表格的边框边厚度和框线 例 定货单苹果香蕉葡萄200公斤200公斤100公斤结果 TABLE表格 单元格间距单元格间距可以使用中的CELLSPACING属性加以调节 例 定货单苹果香蕉葡萄200公斤200公斤100公斤结果 TABLE表格 内容与边线的距离用中的CELLPADDING属用来规定内容与边线之间的距离 例 定货单苹果香蕉葡萄200公斤200公斤100公斤结果 表格中数据的排列方式 表格中数据的排列方式有两种 分别是左右排列和上下排列 左右排列是以ALIGN属性来设置 而上下排列则由VALIGN属性来设置 其中左右排列的位置可分为三种 居左 left 居右 right 和居中 center 而上下排列基本上比较常用的有四种 上齐 top 居中 middle 下齐 bottom 和基线 baseline 左右排列 left center right上下排列 top middle bottom baseline 表格中数据的排列方式 例 左右排列 结果 居左居中居右ABC上下排列 结果 上齐居中下齐基线ABCD 表格的颜色 表格的背景色彩行的背景色彩表元的背景色彩或例 结果 彩电冰箱家电AB 播放音乐 播放背景音乐用浏览器可以播放的音乐格式有 MIDI音乐 WAV音乐 AU mp3格式等 在IE中播放音乐 循环数例 出现控制面板的音乐例 表单 表单在Web网页中用来给访问者填写信息 从而能获得用户信息 使网页具有交互的功能 1 标志对用来创建一个表单 也即定义表单的开始和结束位置 在标志对之间的一切都属于表单的内容 表单 2 标志用来定义一个用户输入区 用户可在其中输入信息 此标志必须放在标志对之间 标志中共提供了八种类型的输入区域 具体是哪一种类型由type属性来决定 表单 表单 表单 3 标志对用来创建一个下拉列表框或可以复选的列表框 此标志对用于标志对之间 具有multiple name和size属性 multiple属性不用赋值 直接加入标志中即可使用 加入了此属性后列表框就成了可多选的了name属性给每一个输入区域一个名字 size属性用来设置列表的高度 缺省时值为1 表单 标志用来指定列表框中的一个选项 它放在标志对之间 例1 请选择最喜欢的男歌星 刘德华张学友郭富城黎明 表单 例2 请选择最喜欢的女歌星 张曼玉王菲田震那英 表单 4 用来创建一个可以输入多行的文本框 此标志对用于标志对之间 具有name cols和rows属性 cols和rows属性分别用来设置文本框的列数和行数 这里列