第3讲：HTML语言基础(一)1.ppt

制作图文并茂的“广告”页面 本节目标 会使用HTML的基本结构创建网页 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面 HTML文件的基本结构 HTML文档的结构 使用记事本创建网页 步骤： 1、打开记事本 2、输入HTML代码 3、保存为*.html或*.htm文件，注意格式问题 4、打开网页预览效果 META标签 页面背景色或背景图像 文本相关标签 字体、字号 标题标签H1－H6 FONT标签 特殊符号 行的控制 段落标签P 换行标签BR 字体、字号相关标签 标题标签 H# ... /H# #=1, 2, 3, 4, 5, 6 说明：H1到H6 字体大小依 次递减 字体、字号相关标签 FONT标签 特殊符号 字体、字号相关标签 行的控制相关标签 段落标签P 段(Paragraph) (可以看作是空行) p 换行标签BR 换行 br 图像标签 常见的图片格式介绍 图像标签 图像的基本语法 IMG src=images/adv_2.jpg width=300“ height=150“ alt=明星演唱会开幕 图像标签 图像与文本的对齐方式 IMG align=middle 小结 编写如下图所示效果对应的html代码 文字布局 内容分隔HR标签 项目列表和编号 有序列表OL 无序列表UL 预格式文本PRE标签 如何使用内容分隔HR标签 HR size=5 color=red width=300 如何使用列表 无序列表语法 UL LI列表项内容 /LI …… /UL 有序列表语法 OL LI列表项内容 /LI …… /OL 预格式文本PRE标签 如何使用预格式文本PRE标签 总结 哪个标签中的哪个属性可以改变字体颜色和字号？ 图像与文本的对齐方式有哪几种？ 项目列表和编号有何区别？分别适用什么场合？ END * * Dreamweaver设计与制作/HTML 技术科学系—王萌 第三讲 HTML的基本标签(一) 查看源代码 HTML HEAD TITLE我的第一个网页 /TITLE /HEAD BODY Hello World! /BODY /HTML HTML 网页 HEAD头部部分 BODY主体部分 HTML…/HTML标签标记 HTML 文档的开始和结束 网页标题 网页内容，可以是文本、图像等 这部分包含文本、图像和链接。它包括在 BODY…/BODY 标签内 查看源代码 这部分包括标题和其他说明信息。包括在 HEAD…/HEAD 标签内 演示示例2：如何在记事本里创建网页 使用记事本创建网页 HEAD META http-equiv=Content-Type content=text/html; charset=gb2312 TITLE网页标题/TITLE /HEAD 网页页面中出现乱码，那如何消除乱码使其正常显示？ 使用META标签 简体中文：gb2312 繁体中文：big5 纯英文网页：iso-8859-1 可以避免页面中的乱码 BODY bgcolor=#FFCCFF“ background=back_image.GIF Hello World！ /BODY 为了使页面美丽大方，网页背景要尽量地浅 …… BODY bgcolor=#FFCCFF“ Hello World! /BODY …… 查看源代码 网页背景色彩 网页背景图像 使用了 H2… /H2 换段了 设置了字体的大小和颜色 换行了 特殊符号 …… BODY H1一级标题/H1 H2二级标题/H2 H3三级标题/H3 H4四级标题/H4 H5五级标题/H5 H6六级标题/H6 /BODY …… H1 到 H6 标签用于指定不同级别的标题 查看源代码 FONT size=“+2” color=“red” face=“律书” ... /FONT quot; 引号(“”) copy; 版权号(? ) gt; 大于() lt; 小于() nbsp; 空格 转义码 特殊字符 字体的 大小值 字体的 颜色 字体的 类型 查看源代码 ...... BODY P FONT size=+2 color=red 手机充值、IP卡/电话卡 /FONTBR / 移动nbsp;|nbsp; 100 | nbsp;联通 | nbsp;50/P Copyright copy; 2007 quot;淘宝网quot; All rights. /BODY …… 空格效果 ……. P ali