53HTML网页制作

HTML语言目标描述HTML文档的结构使用基本的HTML标签在HTML文档中插入特殊字符在HTML文档中创建超级链接2HTML简介3超文本提供链接到其他页面或同一页面的其他位置的文本标记可以用标签标记页面的不同部分以正确显示语言HTML可用于：•控制页面和内容的外观•发布和检索联机文档•创建联机表单•插入诸如音频剪辑和视频剪辑等对象HTML文档示例4HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=“LAVENDER”H1欢迎来到HTML世界/H1/BODY/HTMLHTML代码浏览器处理代码并进行显示编辑器和浏览器5HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=“LAVENDER”H1欢迎来到HTML世界/H1/BODY/HTMLHTML代码在编辑器中编写HTML代码浏览器显示HTML文档/页面编辑器2-26需要在编辑器中键入源代码示例：DreamWeaverMacromediaDreamweaver是一种专业的HTML编辑器，用于设计、编码、开发网站、网页和强大的Web应用程序。HTML文档结构7HTMLHEADTITLE学习HTML/TITLE/HEADBODY/H1欢迎来到HTML世界/H1/BODY/HTMLHTML网页头部部分主体部分HTML…/HTML标签标记HTML文档的开始和结束这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内这部分包含文本、图像和链接。它包括在BODY…/BODY标签内HTML标签2-28HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=lavenderH1欢迎来到HTML世界/H1/BODY/HTMLBODYBGCOLOR=“green”标签标识BODY元素属性提供有关元素的附加信息值分配给属性的内容META标签2-1META标签是一个特殊的HTML标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等许多搜索引擎都使用META标签信息例如，要将GrahamBrowne指定为作者，则使用以下META标签：9METAname=“作者content=GrahamBrowneMETA标签2-2http-equiv属性可用来代替META标签中的name属性10METAhttp-equiv=expirescontent=Wed,26Feb1997GMT表示有效期：格林尼治标准时间2005年9月12日，星期一14:25:27属性值：具体的过期时间属性名称：网页过期METAhttp-equiv=refreshcontent=“2表示每隔2秒，自动刷新网页演示：自动刷新的例子HTML基本元素标题段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接11标题12HTMLHEADTITLE动物世界/TITLE/HEADBODYH1从大自然获得灵感/H1H2从大自然获得灵感/H2H3从大自然获得灵感/H3H4从大自然获得灵感/H4H5从大自然获得灵感/H5H6从大自然获得灵感/H6/BODY/HTMLH1到H6标签用于指定不同级别的标题段落标签13HTMLHEADTITLE诗词学习/TITLE/HEADBODYP我是第一段/PP我是第二段/PPalign=left左对齐显示PPalign=center居中显示PPalign=right右对齐显示P/BODY/HTMLP/PP…/P标签用于标记段落换行符只要在文本中放入BR标签，就会强制换行14HTMLHEADTITLE诗词学习/TITLE/HEADBODYBR我是第一行BR我是第二行P我是第一段/PP我是第二段/P/BODY/HTMLBRPre标签15HTMLHEADTITLE诗词学习/TITLE/HEADBODYH1静夜思/H1PRE床前明月光疑是地上霜举头望明月低头思故乡/PRE/BODYHTMLPRE标签用于显示具有预先定义格式的文本（如HTML文档中所示）字符格式化标签16HTMLHEADTITLE学习HTML/TITLE/HEADBODYPB这很有趣/BBRBRI足球是最令人喜爱的运动之一。/IBRBRU信息技术是发展的关键。/UBRBR水的分子式是HSUB2/SUBO。BRBR3SUP2/SUP等于9。BRBR/P/BODY/HTML此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等列表简介列表用于按逻辑方式对数据分组17玫瑰花向日葵兰花苹果桔子水仙芒果水果•苹果•芒果•桔子花卉•水仙•兰花•向日葵•玫瑰花列表类型：无序列表18…BODYH1星期中的每一天/H1ULLI星期日LI星期一LI星期二LI星期三LI星期四LI星期五LI星期六/UL/BODY…无序列表也称为“项目列表”列表类型：有序列表有序列表的属性LITYPE=ILITYPE=iLITYPE=ALITYPE=aOLSTART=n19…BODYH1星期中的每一天/H1OLLI星期日LI星期一LI星期二LI星期三LI星期四LI星期五LI星期六/OL/BODY…在有序列表中，列表项以自动生成的顺序显示使用水平线20HTMLHEADTITLE动物世界/TITLE/HEADBODYH3老虎的夜间视觉/H3HRnoshadesize=5align=centerwidth=50%HRsize=15align=leftwidth=80%HRP老虎的夜视能力优于人类的夜视能力五倍以上/BODY/HTMLHR标签属性alignWidthSizeNoshadeHR标签用于在页面上绘制水平线使用字体和属性21HTMLHEADTITLE动物世界/TITLE/HEADBODYH1了解有关动物的更多信息/H1PFONTSIZE=5COLOR=BLUEFACE=Arial斑马的特性/FONTP没有任何两匹斑马FONTCOLOR=REDSIZE=3的斑纹是完全一样的，/FONT因此每匹斑马都是独一无二的/BODY/HTMLFONTSIZE=5COLOR=BLUEFACE=Arial可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从1到7可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本FONT元素及其相关属性（如SIZE、COLOR和FACE）可用于控制网页上文本的显示插入图像2-122IMG标签用于在HTML文档中插入图像。IMG标签的两个常用属性是SRC和ALIGN。SRC属性用于指定要插入的图像位置。ALIGN属性用于指定图像相对于文本的对齐方式。插入图像2-223HTMLHEADTITLE动物世界/TITLE/HEADH1FONTSIZE=3COLOR=FORESTGREENB让我们看看这些可爱的动物/B/FONT/H1BODYPIMGALIGN=BOTTOMSRC=Animal.jpg底部对齐/PPIMGALIGN=TOPSRC=Animal.jpg顶部对齐/PPIMGALIGN=MIDDLESRC=Animal.jpg居中对齐/P/BODY/HTML插入特殊字符2-1某些字符在HTML中具有特殊意义，如小于号()定义HTML标签的开始字符实体用于在HTML文档中插入特殊字符，如版权号，注册商标等通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。24插入特殊字符需要用HTML字符实体®©空格；插入特殊字符2-2特殊字符字符实体大于号()>>小于号()<<引号(“)""®®®©©©&号&&25创建超级链接26HTMLHEADTITLE了解鸟类/TITLE/HEADBODYH1会弹琴的狗狗/H1AHREF=dog.htm单击此处查看/A/BODY/HTML绝对和相对路径名27要链接到另一目录(C:\example)下的页面，可编写AHREF=“..\example\Doc2.htm”或AHREF=“C:\example\Doc2.htm”要链接到同一目录(C:\html)下的页面，可编写AHREF=“Doc3.htm”或AHREF=“C:\html\Doc3.htm”C:\html目录C:\example目录Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名相对路径名链接到同一文档的某个部分2-1锚记标签用于使用户“跳”到文档的某个部分HTML的NAME属性用于创建锚标记为达到这种跳转效果，请在HREF参数中使用该标记28ANAME=“marker”主题名称/AAHREF=“#marker”主题名称/A链接到同一文档的各个部分2-229...BODYAHREF=#Lion狮子/ABRAHREF=#Zebra斑马/ABRAHREF=#Cheetah印度豹/ABRANAME=Lion狮子/AP狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达250公斤。而雌狮则要轻得多，只有180公斤。BRANAME=Zebra斑马/AP没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马......演示:锚链接例子链接到其他文档的特定位置30…P让我们深入了解一些动物BRAHREF=AnimalDetails.htm#Lion狮子/ABRAHREF=AnimalDetails.htm#Zebra斑马/ABRAHREF=AnimalDetails.htm#Zebra印度豹/A…Animals.htm…ANAME=Lion狮子/AP狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达250公斤。而雌狮则要轻得多，只有180公斤。…Animaldetails.htm电子邮件链接用户可从网页发送电子邮件31HTMLHEADTITLE海豚/TITLE/HEADBODYH3充分交流，密切配合/H3BRP据说，海豚的交流模式几乎与人类的一样复杂！BRBRAHREF=mailto:[e-mail]请将您的疑问发送至DavidFernandez/A/BODY/HTML总结2-1HTML标签一般配对使用，不区分大小写标签都具有属性。属性提供关于网页上HTML元素的附加信息META标签放置在网页的标题处以提供关于页面的信息。