HTML和超链接

HTML和超链接LearningHTML&CSS第一章CompanyLogo课程要求与目标了解Internet了解HTML语言的特点掌握HTML的文档结构熟悉Dreamweaver界面掌握HTML常用标签掌握超链接CompanyLogoHTML概述HTML英语的意思是：HypertextMarkedLanguage，即超文本标记语言。是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTNL就是一直被作为WorldWideWeb的信息表示语言，用于描述Homepage的格式设计和它于的连结信息。使用HTML语言描述的文件，需要通过超文本所谓超文本，应为它可以加入图片、声音、动画、影视等内容，应为它可以从一个文件跳转到另一个文件，与世界各地主机的文件链接。通过HTML可以表现出丰富多彩的设置风格图片调用：imgsrc=“文件名”文字格式：fontsize=“+5”color=“00FFFF”文字/font通过HTML可以实现页面之间的跳转页面跳转：ahref=“文件路径/文件名”/a通过HTML可以展现多媒体的效果声频：embedsrc=“音乐文件名”autostart=“true”/a视频：embedsrc=“视频文件名”autostart=“true”/a上面我们在示例超文本特征的同时，采用了一些我们在制作超文本文件时需要用到的一些标签，所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“标签名称属性”来表示。有关标签详细的内容参见下一页CompanyLogoHTML文档基本结构标签名属性1=属性值1属性2=属性值2……标签、属性不区分大小写。HTMLHEADTITLE学习HTML/TITLE/HEADBODY欢迎来到HTML世界/BODY/HTMLHTML网页头部部分主体部分HTML…/HTML标签标记HTML文档的开始和结束这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内这部分包含文本、图像和链接。它包括在BODY…/BODY标签内CompanyLogo编辑器和浏览器HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=“LAVENDER”H1欢迎来到HTML世界/H1/BODY/HTMLHTML代码在编辑器中编写HTML代码浏览器显示HTML文档/页面CompanyLogo标题HTMLHEADTITLE动物世界/TITLE/HEADBODYH1从大自然获得灵感/H1H2从大自然获得灵感/H2H3从大自然获得灵感/H3H4从大自然获得灵感/H4H5从大自然获得灵感/H5H6从大自然获得灵感/H6/BODY/HTMLH1到H6标签用于指定不同级别的标题CompanyLogo段落标签HTMLHEADTITLE诗词学习/TITLE/HEADBODYP我是第一段/PP我是第二段/PPalign=left左对齐显示PPalign=center居中显示PPalign=right右对齐显示P/BODY/HTMLP/PP…/P标签用于标记段落CompanyLogo换行符HTMLHEADTITLE诗词学习/TITLE/HEADBODYBR我是第一行BR我是第二行P我是第一段/PP我是第二段/P/BODY/HTMLBRCompanyLogoPre标签HTMLHEADTITLE诗词学习/TITLE/HEADBODYH1静夜思/H1PRE床前明月光疑是地上霜举头望明月低头思故乡/PRE/BODYHTMLPRE标签用于显示具有预先定义格式的文本（如HTML文档中所示）CompanyLogo11字符格式化标签HTMLHEADTITLE学习HTML/TITLE/HEADBODYPB这很有趣/BBRBRI足球是最令人喜爱的运动之一。/IBRBRU信息技术是发展的关键。/UBRBR水的分子式是HSUB2/SUBO。BRBR3SUP2/SUP等于9。BRBR/P/BODY/HTML此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等CompanyLogo12列表：无序列表…BODYH1星期中的每一天/H1ULLI星期日LI星期一LI星期二LI星期三LI星期四LI星期五LI星期六/UL/BODY…无序列表也称为“项目列表”CompanyLogo13列表：有序列表13…BODYH1星期中的每一天/H1OLLI星期日LI星期一LI星期二LI星期三LI星期四LI星期五LI星期六/OL/BODY…有序列表的属性LITYPE=ILITYPE=iLITYPE=ALITYPE=aOLSTART=n在有序列表中，列表项以自动生成的顺序显示CompanyLogo14列表：自定义列表14dldt，万维网dtURLddUniformResourseLocations，统一资源定位符dtHTTPddHyperTextMark-upLanguage，超文本标记语言/dl在有序列表中，列表项以自动生成的顺序显示CompanyLogo15使用文字和属性15HTMLHEADTITLE动物世界/TITLE/HEADBODYH1了解有关动物的更多信息/H1PFONTSIZE=5COLOR=BLUEFACE=Arial斑马的特性/FONTP没有任何两匹斑马FONTCOLOR=REDSIZE=3的斑纹是完全一样的，/FONT因此每匹斑马都是独一无二的/BODY/HTMLFONTSIZE=5COLOR=BLUEFACE=Arial可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从1到7可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本FONT元素及其相关属性（如SIZE、COLOR和FACE）可用于控制网页上文本的显示CompanyLogo16插入图片（1）16IMG标签用于在HTML文档中插入图像。IMG标签的两个常用属性是SRC和ALIGN。SRC属性用于指定要插入的图像位置。ALIGN属性用于指定图像相对于文本的对齐方式。HTMLHEADTITLE动物世界/TITLE/HEADH1FONTSIZE=3COLOR=FORESTGREENB让我们看看这些可爱的动物/B/FONT/H1BODYPIMGALIGN=BOTTOMSRC=Animal.jpg底部对齐/PPIMGALIGN=TOPSRC=Animal.jpg顶部对齐/PPIMGALIGN=MIDDLESRC=Animal.jpg居中对齐/P/BODY/HTMLCompanyLogo插入特殊符号（1）某些字符在HTML中具有特殊意义，如小于号()定义HTML标签的开始字符实体用于在HTML文档中插入特殊字符，如版权号，注册商标等插入特殊字符需要用HTML字符实体®©空格；特殊字符字符实体大于号()>小于号()<引号(“)"®®©©&号&CompanyLogo18使用水平线HTMLHEADTITLE动物世界/TITLE/HEADBODYH3老虎的夜间视觉/H3HRnoshadesize=5align=centerwidth=50%HRsize=15align=leftwidth=80%HRP老虎的夜视能力优于人类的夜视能力五倍以上/BODY/HTMLHR标签属性alignWidthSizeNoshadeHR标签用于在页面上绘制水平线CompanyLogo添加多媒体元素利用marquee标签可以让文字在网页上动态滚动。方向：marqueedirection=#。#可以是：left、right方式：marqueebehavior=#。#可以是scroll、slide、alternate循环：marqueeloop=#。#代表次数速度：scrollamount=#。指滚动速度。延时：scrolldelay=#。指文字滚动间隔。scrolldelay值是毫秒。使用bgsound标签来给网页设置背景音乐。bgsoundsrc=”jy001.mid”loop=3CompanyLogo总结HTML文档是包含标记标签的文本文件，这些标签告诉Web浏览器如何显示页面HTML标签不区分大小写标签具有属性，属性进一步描述网页上HTML元素的附加信息HTML文档分为head、body部分，他们并列位于HTML标签内Meta用于提供有关页面的信息，搜索引擎通常会用到这些标签Dreamweaver是一种强大的Web编辑工具，可以灵活和创建页面在Dreamweaver中设计网站的第一步是“定义站点”HTML基本标签：h1…h6、p、br、pre、font、img插入图片：img,插入特殊符号，插入横线hr让文字滚动：marquee添加多媒体使用：embed实验任务课件用HTML表现CompanyLogo