第2章HTML入门

让IT教学更简单，让IT学习更有效让IT教学更简单，让IT学习更有效让IT教学更简单，让IT学习更有效第二章HTML入门•认识HTML•HTML图像标记•HTML文本控制标记•绝对路径和相对路径让IT教学更简单，让IT学习更有效目录什么是HTMLHTML文本控制标记HTML图像标记阶段案例—制作图文混排页面让IT教学更简单，让IT学习更有效2.1什么是HTML−学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML标记语言也不例外，同样需要遵从一定的规范。−HTML文档的基本格式，其中主要包括!DOCTYPE文档类型声明、html根标记、head头部标记、body主体标记。2.1.1HTML基本文档格式让IT教学更简单，让IT学习更有效2.1什么是HTML−!DOCTYPE标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，如例2-1中使用的是Dreamweaver默认的XHTML1.0过渡型XHTML文档。本书将全部采用XHTML1.0过渡型XHTML文档。−必需在开头处使用!DOCTYPE标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。−!DOCTYPE标记和浏览器的兼容性相关，删除!DOCTYPE，就是把如何展示HTML页面的权利交给浏览器。这时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少种显示效果，这是不被允许的。2.1.1HTML基本文档格式—!DOCTYPE标记让IT教学更简单，让IT学习更有效2.1什么是HTML−html标记位于!DOCTYPE标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，html标记标志着HTML文档的开始，/html标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。−在html之后有一串代码“xmlns=”用于声明XHTML统一的默认命名空间。2.1.1HTML基本文档格式—html标记让IT教学更简单，让IT学习更有效2.1什么是HTML−head标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在html标记之后，主要用来封装其他位于文档头部的标记，例如title、meta、link及style等，用来描述文档的标题、作者以及和其他文档的关系等。关于head内的重要标记将在2.1.4小节具体讲解。−一个HTML文档只能含有一对head标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。2.1.1HTML基本文档格式—head标记让IT教学更简单，让IT学习更有效2.1什么是HTML−body标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于body标记内，body标记中的信息才是最终展示给用户看的。−一个HTML文档只能含有一对body标记，且body标记必须在html标记内，位于head头部标记之后，与head标记是并列关系。2.1.1HTML基本文档格式—body标记让IT教学更简单，让IT学习更有效2.1什么是HTML2.1.2HTML标记在HTML页面中，带有“”符号的元素被称为HTML标记，如上面提到的html、head、body都是HTML标记。所谓标记就是放在“”标记符中表示某个功能的编码命令，也称为HTML标签或HTML元素，本书统一称作HTML标记。让IT教学更简单，让IT学习更有效2.1什么是HTML2.1.2HTML标记—双标记双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：该语法中“标记名”表示该标记的作用开始，一般称为“开始标记（starttag）”，“/标记名”表示该标记的作用结束，一般称为“结束标记（endtag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。标记名内容/标记名让IT教学更简单，让IT学习更有效单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：2.1什么是HTML2.1.2HTML标记—单标记标记名/让IT教学更简单，让IT学习更有效在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。2.1.2HTML标记—注释标记!--注释语句--2.1什么是HTML让IT教学更简单，让IT学习更有效使用HTML制作网页时，如果想让HTML标记提供更多的信息，可以使用HTML标记的属性加以设置。其基本语法格式如下：在上面的语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开。任何标记的属性都有默认值，省略该属性则取默认值。2.1.3标记属性标记名属性1=属性值1属性2=属性值2…内容/标记名2.1什么是HTML让IT教学更简单，让IT学习更有效例如：其中align为属性名，center为属性值，表示标题文本居中对齐，对于标题标记还可以设置文本左对齐或右对齐，对应的属性值分别为left和right。如果省略align属性，标题文本则按默认值左对齐显示，也就是说h1/h1等价于h1align=left/h1。2.1.3标记属性—例子h1align=center标题文本h12.1什么是HTML让IT教学更简单，让IT学习更有效例如：书写HTML页面时，经常会在一对标记之间再定义其他的标记，在HTML中，把这种标记间的包含关系称为标记的嵌套。在嵌套结构中，HTML元素的样式总是遵从“就近原则”，如上面代码中的“传智播客”这几个文字的颜色会遵从最靠近他的font标记，而size属性遵从外层的font标记，对齐属性则遵从最外层的p标记。2.1.3标记属性—标记嵌套palign=centerfontcolor=#979797size=2更行时间：2013年09月28日14时08分来源：fontcolor=blue传智播客/font/font/p2.1什么是HTML让IT教学更简单，让IT学习更有效制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标记，这些标记通常都写在head标记内，因此被称为头部相关标记。2.1.4HTML文档头部相关标记2.1什么是HTML让IT教学更简单，让IT学习更有效title标记用于定义HTML页面的标题，即给网页取一个名字，必须位于head标记之内。一个HTML文档只能含有一对title/title标记，title/title之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：2.1.4HTML文档头部相关标记—title2.1什么是HTMLtitle网页标题名称/title让IT教学更简单，让IT学习更有效meta/标记用于定义页面的元信息，可重复出现在head头部标记中，在HTML中是一个单标记。meta/标记本身不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。2.1.4HTML文档头部相关标记—meta/2.1什么是HTMLmetaname=名称content=值/让IT教学更简单，让IT学习更有效（1）设置网页关键字，例如传智播客官网关键字的设置：其中name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用“,”分隔。2.1.4HTML文档头部相关标记—meta/name=“”2.1什么是HTMLmetaname=keywordscontent=java培训,net培训,PHP培训,C/C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训/让IT教学更简单，让IT学习更有效（2）设置网页描述，例如传智播客官网描述信息的设置：其中name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多。2.1.4HTML文档头部相关标记—meta/name=“”2.1什么是HTMLmetaname=descriptioncontent=IT培训的龙头老大,口碑最好的java培训、.net培训、php培训、C/C++培训,iOS培训，网页设计培训，平面设计培训，UI设计培训机构，问天下java培训、.net培训、php培训、C/C++培训,iOS培训，网页设计培训，平面设计培训，UI设计培训机构谁与争锋?/让IT教学更简单，让IT学习更有效（3）设置网页作者，例如可以为传智播客官网增加作者信息：其中name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息。2.1.4HTML文档头部相关标记—meta/name=“”2.1什么是HTMLmetaname=authorcontent=传智播客网络部/让IT教学更简单，让IT学习更有效在meta标记中使用http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送metahttp-equiv=“Content-Type”content=“text/html”/，通知浏览器发送的文件类型是HTML。2.1.4HTML文档头部相关标记—meta/metahttp-equiv=名称content=值/2.1什么是HTML让IT教学更简单，让IT学习更有效（1）设置字符集，例如传智播客官网字符集的设置：其中http-equiv属性的值为Content-Type，content属性的值为text/html和charset=utf-8，中间用“;”隔开，用于说明当前文档类型为HTML，字符集为utf-8(国际化编码)。utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。2.1.4HTML文档头部相关标记—meta/http-equiv=“”metahttp-equiv=名称content=值/2.1什么是HTML让IT教学更简单，让IT学习更有效（2）设置页面自动刷新与跳转，例如定义某个页面10秒后跳转至传智播客官网：其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。2.1.4HTML文档头部相关标记—meta/http-equiv=“”metahttp-equiv=refreshcontent=10;url=什么是HTML让IT教学更简单，让IT学习更有效一个页面往往需要多个外部文件的配合，在head中使用link标记可引用外部文件，一个页面允许使用多个link标记引用多个外部文件。其基本语法格式如下：2.1.4HTML文档头