搜索
HTML基础1.1HTML的基本概念（WorldWideWeb，万维网）是一种建立在Internet上的、全球性的、交互的、多平台的、分布式的信息资源网络。它采用HTML语言描述超文本（Hypertext）文件。这里所说的超文本文件指的是包含链接关系和多媒体对象的文件。个基本组成部分，分别是URL（UniversalResourceLocators，统一资源定位器）、HTTP(HypertextTransferProtocol，超文本传输协议)和HTML（HypertextLanguag，超文本标记语言）。URL提供在Web上进入资源的统一方法和路径，使得用户所要访问的站点具有唯一性，这就相当于我们每个人只有一个身份证号一样。它说明了链接所指向的每个文件的类型及其准确位置。HTTP是一种网络上传输数据的协议，专门用于传输以超文本（Hypertext）或超媒体（hypermedia）的形式提供的信息。HTML语言是一种文本类、依靠解释的方式执行得标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。要把信息发布到全球，就需要使用能够被大众所接受的语言，也就是使用一种大多数计算机能够识别的出版语言。在上，通常使用的发布语言是HTML，即超文本标记语言。HTML是纯文本类型的语言，所以使用HTML编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器（如Windows系统中的记事本程序）打开它，查看其中的HTML源代码；也可以在用浏览器打开网页时，通过选择“查看”|“源文件”命令，查看网页中的HTML代码。HTML文件可以直接有浏览器解释执行，而无须编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高校的HTML源代码是十分重要的。1.3HTML的基本结构1.3.1HTML文件的编写方法HTML标签一个HTML文件是由一系列的元素和标签组成的。元素是HTML文件的重要组成部分，如title（文件标题）、img(图像)及table（表格）等，元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置。HTML标签分为单独标签和成对标签两种。大多数标签成对出现，它是由首标签和尾标签组成的。首标签的格式为元素名称，尾标签的格式为/元素名称。其完整语法格式如下：元素名称要控制的元素/元素名称成对标签仅对包含在其中的文件部分发生作用，如title和/title标签用于界定标题元素的范围，也就是说，title和/title标签之间的部分是此HTML文件的标题。单独标签的格式为元素名称其作用是在相应的位置插入元素，如br标签便是在该标签所在位置插入一个换行符。说明：在每个HTML标签中，不区分大小写。如HTML、html、Html，其结果都是一样的。在每个HTML标签中，还可以设置一些属性，控制HTML标签所建立的元素。这些属性将位于所建立元素的标签中，基本语法格式如下：元素名称属性1=”值1”属性2=”值2”…因此，在HTML文件中某个元素的完整定义语法如下：元素名称属性1=”值1”属性2=”值2”…元素资料/元素名称说明：HTML语法中，设置各属性所使用的“”””可省略。元素的概念当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称为一个元素。在HTML语法中，每个由HTML标签与文字所形成的元素内，还可以包含另一个元素。因此，整个HTML文件就像是一个大元素包含了许多小元素。在所有的HTML文件中，最外层的元素是由html标签建立的。在html标签所建立的元素中，包含了两个主要的子元素，这两个子元素是由head标签与body标签所建立的。heda标签所建立的元素的内容为文件标题，而body标签所建立的元素内容为文件主体。HTML文件结构下面使用文本（如Windows系统中自带的记事本）编写一个HTML文件。html//文件开始首标签head//文件头metacharset=utf-8//将文件编码格式定为utf-8，如果不写这句活，可以在Notepad++中菜单栏Encoding修改。title文件标题/title//文件标题/head//文件头尾标签body//文件体首标签文件正文/body//文件体尾标签/html//文件开始提示：metacharset=utf-8//将文件编码格式定为utf-8，如果不写这句活，可以在Notepad++中菜单栏Encoding修改。对应中文版为：注意：在利用软件Notepad++编写HTML文件是应选编码方式为UTF-8。但是在编写JavaScript程序时编码方式应选为UTF-8-BOM，因为在选择UTF-8时会出现乱码。截图软件FastStone的使用技巧：在截取软件菜单栏下拉列表时，用FastStone或者QQ截图软件都不能截取成功，但是当你点击某一菜单来下拉列表时，按下键盘上的printscreen键（prtsc键）后，会在FastStone软件中显示截取后的全屏图，然后就可以截取你想要的菜单栏下拉列表了。其中，head与/head之间的部分是HTML文件的文件头部分，用以说明文件的标题和整个文件的一些公共属性。body与/body之间的部分是HTML文件的主体部分，下面介绍的标签，如果不加特别说明，均是嵌套在这一标签中使用的。1.3.2文件开始标签html在任何的一个HTML文件中，最先出现的HTML标签就是html，它用于表示该文件是以超文本标记语言（HTML）编写的。html是成对出现的，首标签html和尾标签/html分别位于文件的最前面和最后面，文件中的所有文件和HTML标签都包含在其中。例如：html文件的全部内容/html该标签不带有任何属性。事实上，现在常用的Web浏览器（如IE）都可以自动识别HTML文件，并不要求有html标签，也不对该标签进行任何操作。但是，为了提高文件的适用性，使编写的HTML文件能适应不断变化的Web浏览器，还是应该养成使用这个标签的习惯。1.3.3文件头部标签head习惯上，把HTML分为文件头和文件主体两个部分。文件主体部分就是在Web浏览器窗口的用户区内看到的内容，而文件头部分用来规定该文件的标题（出现在Web浏览器窗口的标题栏中）和一些属性。head是一个表示网页头部的标签。在由head标签所定义的元素中，并不放置网页的任何内容，而是放置关于HTML文件的信息，也就是说它并不属于HTML文件的主体。它包含文件的标题、编码方式及URL等信息。这些信息大部分是用于提供索引、辨认或其他方面的应用。写在head与/head中间的文本，而且是写在title标签中，表示该网页的名称，并作为窗口的名称显示在这个网页窗口的最上方。如果HTML文件并不需要提供相关信息时，可以省略head标签。1.3.4文件标题标签title网页的名称要写在title和/title之间，并且title标签应包含在head与/head标签之中。HTML文件的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在head标签中使用的主要有title标签。1.3.5文件主体标签bodybody标签是成对出现的。网页中的主体内容应该写在body和/body之间，而body标签包含在html标签里面。1.3.6编写文件的注意事项在编写文件的时候，要注意以下事项：（1）“”和“”是任何标签的开始和结束。。元素的标签要用这对尖括号括起来，并且结束的标签/总是在开始的标签前加一个斜杠“/”。（2）标签与标签之间可以嵌套，如：H2CENTER初始HTML文件/CENTER/H2（3）在源代码中不区分大小写，如以下几种写法都是正确并且相同的标签：HEADheadHead（4）任何回车和空格在源代码中都不起作用。为了代码清晰，建议不同的标签之间回车后编写。（5）HTML标签中可以放置各种属性，如：h2align=”center”HTML初露端倪/h2其中align为属性，center为属性值，元素属性出现在“”内，并且和元素名之间有一个空格分割，属性值可以直接书写，也可以使用“”””。如下面的两种写法都是正确的；h2align=”center”HTML初露端倪/h2h2align=centerHTML初露端倪/h2（6）如果希望在源代码中添加注释，以便于阅读理解，可以以“!--（英文）”开始，以“--!（英文）”结束。如以下代码：!-------------------------------------------------------!!--文件范例：1-2.htm--!!--文件说明：第一个HTML文件--!!-------------------------------------------------------!注释语句只出现在源代码中，而不会在浏览器中显示。1.4编写第一个HTML文件1.4.1HTML文件的编写方法编写HTML文件主要有如下3种方法。1、手工直接编写由于HTML语言编写的文件是标准的ASCII文本文件，所以可以使用任何文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。2、使用可视化软件Microsoft公司的Frontpage、Adobe公司的Dreamweaver和Golive等软件均可以可视化的方式进行网页的编辑制作。3、有Web服务器一方实时动态生成这需要通过后台网页编程来实现，如使用ASP、PHP等脚本语言，一般情况下都需要数据库的配合。1.4.2手工编写页面下面先使用记事本来编写我们的额第一个HTML文件。操作步骤如下：（1）选择“开始”|“程序”|“附件”|“记事本”命令，打开记事本程序。（2）在记事本中直接输入下面的HTML代码。htmlheadtitle简单的HTML文件/title/headbodytext=blueh2align=centerHTML初露端倪/h2hrp让我们一起体验超炫的HTML旅程/p/body/html（3）输入代码后，记事本中显示出代码的内容。（4）选择记事本菜单中的“文件”|“保存”命令，弹出“另存为”对话框。（5）在对话框中选择保存到的文件夹，然后在“保存类型”中选择“所有文件”，在“编码”中选择ANSI，这里将“文件名”设置为1-2.htm，然后单击“保存”按钮。（6）最后关闭记事本，回到保存文件的文件夹，双击1-2.htm文件，可以在浏览器（IE等）中看到最终页面效果。注意：在打开HTML文件是，可以点击“open”选择不同的浏览器来显示页面。如下图：1.4.3使用可视化软件制作页面AdobeDreamweaver1.4.4使用浏览器浏览HTML文件浏览器最核心的功能就是查看我们编写的HTML文件效果以及其他网站页面的源代码。使用IE浏览器浏览HTML的过程：选择“文件”|“打开”命令，然后在弹出的“打开”对话框中单击“浏览”按钮，找到硬盘中存放的网页文件，然后单击“打开”按钮，即可显示出编写的网页效果了。