第2讲：字体图片

青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素1第二讲HTML基本要素青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素21.HTML的字体（fonts）字体的大小用字体大小属性(size)来设定字体的大小。示例代码如下：pfontsize=2这一段的字体大小的值是2。/font/p示例：htmlheadtitle字体大小fontsize/title/headbodypfontsize=1这段文字的字体大小值为1。/font/ppfontsize=2这段文字的字体大小值为2。/font/ppfontsize=3这段文字的字体大小值为3。/font/ppfontsize=4这段文字的字体大小值为4。/font/ppfontsize=5这段文字的字体大小值为5。/font/ppfontsize=6这段文字的字体大小值为6。/font/ppfontsize=7这段文字的字体大小值为7。/font/p/body/html青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素31.HTML的字体（fonts）字体颜色用颜色属性(color)来设定字体颜色。pfontcolor=#FF0000这一段的字体颜色是红色/font/p示例：htmlheadtitle字体颜色fontcolor/title/headbodyp这段文字用的是缺省的字体颜色。/ppfontcolor=#FF0000这段文字的字体颜色为红色。/font/ppfontcolor=gray这段文字的字体颜色为灰色。/font/ppfontcolor=#33CC00这段文字的字体颜色为绿色。/font/p/body/html青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素41.HTML的字体（fonts）字体风格用face属性来设定字体风格。示例代码如下：pfontfac=arial这一段的字体风格是arial。/font/p示例：htmlheadtitle字体风格fontface/title/headbodyp以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。/ppfontface=arialarialcourierverdana/font/ppfontface=courierarialcourierverdana/font/ppfontface=verdanaarialcourierverdana/font/p/body/html青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素51.HTML的字体（fonts）常用文本格式Tag青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素62.HTML段落段落划分在HTML里用p和/p划分段落。pThisisaparagraph/ppThisisanotherparagraph/p青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素72.HTML段落正文标题这个示例告诉你如何在HTML文件里定义正文标题。HTML用h1到h6这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。h1Thisisaheading/h1h2Thisisaheading/h2h3Thisisaheading/h3h4Thisisaheading/h4h5Thisisaheading/h5h6Thisisaheading/h6青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素82.HTML段落换行通过使用br这个Tag，可以在不新建段落的情况下换行。br没有ClosingTag。用p换行是个坏习惯，正确的是使用br。pThisbrisaparabrgraphwithlinebreaks/p青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素92.HTML段落HTML注释在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。注释可以写在!--和--之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。!--Thisisacomment--青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素103.HTML图片用img这个Tag可以在HTML里面插入图片。最基本的语法如下：imgsrc=“url”url表示图片的路径和文件名。url可以是绝对路径，也可是相对路径图片的格式可以gif、jpg、png等青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素113.HTML图片图片alt属性img中有一个alt属性，英文叫alternatetext。例句如下：imgsrc=../images/html_tutorials/smile.jpgalt=smileface假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容。青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素123.HTML图片示例htmlbodyp将鼠标停留在图片上，你可以看到Alt属性里写的内容。/pimgsrc=../images/logo/blabla_logo.gifalt=站长网站长学院的Logo标志brimgsrc=../images/html_tutorials/frjj01.jpgalt=芙蓉姐姐照片：红配绿一台戏/body/html青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素133.HTML图片图片align属性用align属性，可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。示例：青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素143.HTML图片htmlbodyp图片的上下对齐方式：/ppimgsrc=../images/logo/blabla_logo.gifalign=top对齐方式:top/ppimgsrc=../images/logo/blabla_logo.gifalign=middle对齐方式:middle/ppimgsrc=../images/logo/blabla_logo.gifalign=bottom对齐方式:bottom/pp图片的左右对齐方式：/ppimgsrc=../images/logo/blabla_logo.gifalign=Left对齐方式:left/ppimgsrc=../images/logo/blabla_logo.gifalign=center对齐方式:center/ppimgsrc=../images/logo/blabla_logo.gifalign=right对齐方式:right/p/body/html青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素153.HTML图片图片的大小在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素163.HTML图片htmlbodyp你可以使用Height和Width属性来改变图片的大小。/ppimgsrc=../images/html_tutorials/smile.jpg/ppimgsrc=../images/html_tutorials/smile.jpgwidth=30height=30/ppimgsrc=../images/html_tutorials/smile.jpgwidth=100height=80/ppimgsrc=../images/html_tutorials/smile.jpgwidth=300height=300/p/body/html青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素174.HTML的超链接HTML文件里创建超链接htmlbodypahref=../asdocs/html_tutorials/humor02.html这是一个链接/a/ppahref==_blank站长网站长学院站点链接/a/p/body/html青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素184.HTML的超链接将一个图片作为一个超链接htmlbodyp你可以将一张图片作为一个链接，点击这个图片。ahref=../asdocs/html_tutorials/humor03.htmlimgsrc=../images/html_tutorials/smile.jpg/a/p/body/html青岛职业技术学院管理学院刘春侠E-mail:[e-mail]《HTML标识语言》第二讲HTML基本要素194.HTML的超链接a和href属性HTML用a来表示超链接，英文叫anchor。a可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：ahref=url链接的显示文字/a点击a/a当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。比如链接到admin