欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML入门 >

网页设计技术之HTML的基本结构说明

 

网页设计技术追溯到上世纪起步阶段时,设计师们是通过HTML语言对网页进行标记来完成网页的制作的。例如,要在某一行要放一段文本,就做一个文本的标记,某一列要放一张图片,就做一个图片标记等。那时用的编辑工具是记事本一类的应用程序,在里面写好了各个标记和内容,然后将记事本文件保存为以.html为扩展名的文件,就制作完成了一个网页。

网页设计技术之HTML的基本结构说明

原始的制作网页的方法

随着技术的不断发展,出现了Dreamweaver这类型的网页编辑器,可以实现所见即所得的网页效果。但是当我们打开DW工作界面,仍然会发现有一个窗口是属于HTML代码的:

网页设计技术之HTML的基本结构说明

DW的HTML代码编辑界面

而实际操作中,也确实有很多效果需要借助代码的力量来实现。所以今天就给大家介绍一下HTML页面的基本结构,为日后书写、修改代码打一个基础。

网页设计技术之HTML的基本结构说明

 

HTML(Hypertext Markup Language),中文意思为超文本标记语言。其中,Hypertext指的是页面中各种内容,包括文本、图片、音频、视频、超链接等;Markup即标记;Language即语言。

网页设计技术之HTML的基本结构说明

 

HTML中的标记大部分是成对出现,例如“<div></div>”,也有个别是以单标记形式出现,例如“<br />”。下图所示代码为一个HTML页面的基本结构:

网页设计技术之HTML的基本结构说明

HTML的基本结构

1、<!doctype html>文档类型声明

doctype是document type的缩写,用来告诉浏览器使用什么样的HTML或XHTML规范来解析网页。它存在于页面的第一行,不区分大小写。在HTML4中,这部分内容会写成:

网页设计技术之HTML的基本结构说明

HTML5以前的doctype

其中DTD规定了使用通用标签语言的网页语法。在HTML4中,必须指定DTD。但是到了HTML5(本文使用的版本为HTML5),遵循“存在即合理”的原则,对规则的要求比较宽松,因此这部分内容可直接简写为:

网页设计技术之HTML的基本结构说明

HTML5中的doctype

2、<html></html>

网页设计技术之HTML的基本结构说明

 

<html></html>标签是HTML页面中所有标签的顶层标签,一个页面有且只有一对该标签,页面中的所有标签和内容都必须放在<html></html>标签对之间。

3、<head></head>头部信息

网页设计技术之HTML的基本结构说明

 

<head></head>标签用于标识HTML的头部区域,<head>和</head>之间的内容都属于头部区域中的内容,主要包括一些网页相关的信息,如网页标题、字符集、网页描述等信息,还可以包括script代码等。这些信息内容不会直接显示在页面上,却在打开网页时首先被加载,将加载运行后的结果作用于网页上。

网页设计技术之HTML的基本结构说明

 

<meta>标签用来定义文档的元数据,使用“名称=值”的形式。一般使用它来描述当前页面的特性,例如文档字符集,即上图中的charset="utf-8"。其中“utf-8”是指一种字符集名称,被称为“万国码”,是一个世界语言的翻译官,有了它,我们可以在HTML页面上写中文、英文、韩文等语言内容。“utf-8”为默认的字符集,这让页面在世界上的几乎所有地区都能正常显示。(在HTML4中,这部分内容会写成<meta http-equiv=“content-type” content=“text/html”; charset=“uft-8”>)。

网页设计技术之HTML的基本结构说明

 

<title></title>用来指定网页文档的标题,例如:<title>欢迎来到我的网站</title>。在预览页面时,标题会显示在网页的标题栏,以及任务栏中(如下图书)。<title></title>的作用,一是设置网页标题,二是用于用搜索引擎检索。因此,标题设置是否合理是很重要的。

网页设计技术之HTML的基本结构说明

 

4、<body></body>页面主体部分

网页设计技术之HTML的基本结构说明

 

<body></body>是放置页面内容的地方,所有需要在浏览器窗口中显示的内容都需要放置在<body></body>标签对之间。例如:

网页设计技术之HTML的基本结构说明

 

5、标签中的属性

网页设计技术之HTML的基本结构说明

 

对应上图,标签中如果有属性的话,其格式为:

网页设计技术之HTML的基本结构说明

标签的格式

6、标签的嵌套关系:标签须成对嵌套,不能交叉嵌套,如下图:

网页设计技术之HTML的基本结构说明

标签的嵌套关系

以上是HTML的基本结构及说明,如有文章中没有说清楚的地方,欢迎大家留言交流^_^

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h50924.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-10-06 22:39 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。