HTML基础知识_第1页
HTML基础知识_第2页
HTML基础知识_第3页
HTML基础知识_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTM标记语言也不例外，同样需要遵从一定的规范。接下来将具体讲解HTML：档的基本格式。HTML：档的基本格式主要包括 !DOCTYPE档类型声明、html根标记、head头部标记、body主体标记， 具体介绍如下：(1) !DOCTYPE：#记!DOCTYPE标记位于文档的最前面， 用于向浏览器说明当前文档使用哪种HTML或XHTML(可扩展超文本标记语言)标准规范，必需在开头处使用!DOCTYPE标记为所有的XHTMLC档指定XHTM版本和类型，只有这样浏览器才能将该网页作为有效的XHTMLt档，并按指

2、定的文档类型进行解析。(2) html/html 标记html标记位于!DOCTYPE标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，html标记标志着HTML：档的开始，/html标记标志着HTML：档的结束，在它们之间的是文档的头部和主体内容。在html之后有一串代码“ xmlns="" "用于声明XHTM铳一的默认命名空间。(3) head/head 标记head标记用于定义HTML：档的头部信息，也称为头部标记，紧跟在html标记之后，主要用来封装其他位于文档头部的标记，例如 title 、meta、link及style等，用来描述文档的标

3、题、作者以及和其他文档的关系等。一个HTML：档只能含有一对head标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。(4) body/body 标记body标记用于定义HTML：档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于body标记内，body标记中的信息才是最终展示给用户看的。一个HTML：档只能含有一对 body标记，且body标记必'须在html标记内，位于head头部标记之后，与 head标记是并列关系。在HTML(面中，带有" ”符号的元素被称为 HTM标记，如上面提到的html、head、body都是

4、HTM标记。 所谓标记就是放在“ ”标记符中表示某个功能的编码命令，也称为HTM标签或HTM沅素，本书统一称作 HTM标记。为了方便学习和理解，通常将HTM标记分为两大类，分别是“双标记”与“单标记”。(1)双标记双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：该语法中“标记名 ”表示该标记的作用开始，一般称为“开始标记( start tag ) ”，“ /标记名 ”表示该 标记的作用结束，一般称为“结束标记( end tag ) ”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。(2)单标记单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记

5、。其基本语法格式如下：一篇结构清晰的文章通常都有标题和段落，HTML页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的标记。(1)标题标记为了使网页更具有语义化，经常会在页面中用到标题标记，HTML!供了 6个等级的标题，即h1、h2、h3、h4、h5和h6,从h1到h6重要性递减。其基本语法格式如下：hn align="对齐方式"标题文本/hn该语法中n的取值为1到6, align属性为可选属性，用于指定标题的对齐方式，下面来演示标题标记的使用。(2)段落标记在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若

6、干个段落，而段落的标记就是 p。其基本语法格式如下：p align=" 对齐方式" 段落文本/p该语法中align属性为p标记的可选属性，和标题标记h1h6一样，同样可以使用align属性设置段落文本的对齐方式。制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTM提供了一系列的标记，这些标记通常都写在head标记内，因此被称为头部相关标记。（1） title/title 标记title标记用于定义HTML(面的标题，即给网页取一个名字，必须位于head标记之内。一个HTML：档只能含 有一对title 标记，title 之间的内容将显示

7、在浏览器窗口的标题栏中。其基本语法格式如下：title 网页标题名称/title（2） meta / 标记meta /标记用于定义页面的元信息，可重复出现在head头部标记中，在 HTML3是一个单标记。meta /标记本身不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。<meta name="名称"content="值"/><meta http-equiv=" 名称"content=" 值"

8、/>（3） <link> 标记一个页面往往需要多个外部文件的配合，在<head>中使用<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。其基本语法格式如下：<link rel="stylesheet" type="text/css" href="" />属性常用属性值描述hrefURL指定引用外部文档的地址relstylesheet指定当前文档与引用外部文档 的关系，该属性值通常为 stylesheet , 表示定义一个外部样式表te

9、xt/css引用外部文档的类型为 CSS羊type式表text/javascript引用外部文档的类型为javascript 脚本（4） <style></style> 标记<style>标记用于为HTMLt档定义样式信息，位于<head>头部标记中，其基本语法格式如下：<style 属性="属性彳1” >样式内容</style>在HTM中使用style标记时，常常定义其属性为type,相应的属性值为text/css ,表示使用内嵌式的 CSS羊式。多种多样的文字效果可以使网页变得更加绚丽，为此 字体、字号和颜色

10、。其基本语法格式如下：<font 属性="属性值">文本内容</font><font>标记常用的属性：HTM提供了文本样式标记<font> ,用来控制网页中文本的属性名含义face设置文字的字体，例如微软雅黑、黑体、宋体等size设置文字的大小，可以取 1到7之间的整数值color设置文字的颜色使用HTM制作网页时，如果想让 HTM标记提供更多的信息，例如希望标题文本的字体为“微软雅黑”且居中显示，此时仅仅依靠 HTM标记的默认显示样式已经不能满足需求了，需要使用 式如下：HTM标记的属性加以设置。其基本语法格标记名 属性1=

11、"属性值1"属性2="属性值2"内容</标记名>在上面的语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开，任何标记的属性都有默认值，省略该属性则取默认值。其中align为属性名，center为属性值，表示标题文本居中对齐， 对于标题标记还可以设置文本左对齐或右对齐,对应的属性彳1分别为left和right。如果省略align属性，标题文本则按默认值左对齐显示。题文本<h1><h1 align="center" > 标在网

12、页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到 以特殊的方式显示，常用文本格式化标记如下表所示。HTM中的文本格式化标记，使文字标记显示效果<b></b> 和<strong></strong>文字以粗体方式显示（XHTM推荐使用strong ）<i></i> 和 <em></em>文字以斜体方式显示（XHTM推荐使用em）<s></s> 和 <del></del>文字以加删除线方式显示（XHTML!荐使用del）<u><

13、;/u> 和 <ins></ins>文字以加下划线方式显示（XHTM不赞成使用u）一个引人入胜的网页，往往包含很多图片。合理地使用图文混排，能使枯燥的网页变得丰富多彩。本节将使用“图像标记”，并通过设置其“相对路径”来制作一个图文混排页面，如下图所示。HTM阙页中任何元素的实现都要依靠 HTM标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介 绍图像标记img以及和它相关的属性。其基本语法格式如下：img src="图像 URL” /该语法中src属性用于指定图像文件的路径和文件名，它是 img标记的必需属性。alignmiddle将图像的水平

14、申城和文本的第一行文字对齐. 其怆文字居国便下方属性属性值描述src allURL文本图馀的路径图像不能显示肺的替搀文本true文本鼠示息存时显示的内容widtfi像素(XHTML不支持%页面百分比)设置图像的笼度height忻竟：XHTML不支持先看而百分比)日置图像的高度border数字设置国像边旭的空英vspace像素设置图像顶部和底部的空白(盘直动距)hspace像素设置图像左值和右例的空白(水平边距3left将图像对齐到左边ngMtop.将图像灯齐到右边将图像的顶端和文本的第一行文字对齐,其 他文字居图像下方boltom将图像的底法和文本的第一仃文字对齐.M 但M字居图像下方(1)图

15、像的替换文本属性alt由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时告诉用户1图片的内容。这就需要使用图像的alt属性，接下来通过一个案例来演示alt属性的用法。注意：各浏览器对alt属性的解析不同，本书这里使用的是Firefox ,如果使用其他的浏览器如IE、谷歌等，显示效果可能存在一定的差异。各浏览器对alt属性的解析不同，本书这里使用的是Firefox ,如果使用其他的浏览器如IE、谷歌等，显示效果可能存在一定的差异。多学一招：使用title属性设置提示文字图像标记img有一个和alt属性十分类似的属性ti

16、tle , title 属性用于设置鼠标悬停时图像的提示文字，下面 来演示title属性的使用。(2)图像的宽度、高度属性 width、height通常情况下，如果不给 img 标记设置宽和高，图片就会按照它的原始尺寸显示，当然也可以手动更改图片的 大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。如 果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。(3)图像的边框属性border默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTM属性是不能

17、够实现的。了解了图像的宽度、高度以及边框属性，接下来使用这些属性对图像进行修饰。(4)图像的边距属性vspace和hspace在网页中，由于排版需要，有时候还需要调整图像的边距。HTM中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。(5)图像的对齐属性align图文混排是网页中的常见效果，默认情况下图像的底部会相对于文本的第一行文字对齐，如下图所示。但是在制作网页时经常需要实现图像和文字的环绕效果，例如图像居左文字居右等，这就需要使用图像的对齐属性align。网页中的路径通常分为两种，具体如下：(1)绝对路径绝对路径一般是指带有盘符的路径。例如：“D:HTML+CSS

18、+JavaScript网页制作案例教程 教材案例;或完整的网络地址。例如：“。（2）相对路径相对路径不带有盘符，通常是以HTM网页文件为起点，通过层级关系描述目标图像的位置。例如：<img src="images/" alt="java培训,培训，php培训，网页培训，平面培训，iOS培训机构"/>相对路径的设置分为以下 3种：? 图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如 <img src="" />。? 图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<imgsrc="images/img01/" />。? 图像文件位于html文件的上一级文件夹：在文件名之前加入“./"，如果是上两级，则需要使用“./ ./ ", 以此类推，如 <img src="./" />。（1） GIF格式GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上 GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF只能处理256种颜色。在网页制作中，GIF格式常常用于

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论