html 基本结构

（1）HTML：是使用特殊标记来描述文档结构和表现形式的一种语言。可以用任何一种文本编译起来编辑HTML文件。

（2）HTML基本结构

 <html>

 <head>

 <title>HTML基本结构</title>

 </head>

 <body>

 HTML是使用特殊标记来描述文档结构和表现形式的一种语言。

 </body>

 </html>



 将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm或者.html即可，然后再所在的目录下 就可看到一个IE的图标，名字就是你所存的文件名称。

 <html>…………</html> ：这是声明HTML文件的语法格式，每一个HTML文件，都必须以<HTML>开头，以</HTML>结束

 <head>…………</head> ：这是文件头声明的语法格式。在这之内的所有文字都属于文件的文件头，并不属于文件本体

 <title>…………</title> ：这是声明文件标题的语法格式。在这之中写下的所有内容，都将写在网页最上面的标题栏中。

 <body>…………</body> ：这是声明文件主体的语法格式。在者之间写下的内容都是文件的主体，也就是说将会被显示在客户区之中。



 注意：几乎每一种HTML语言的语法都是以<>开头，以</>结束。在编辑HTML语言过程中，也可以使用注释。

 语法格式为：<!文件注释->。就好像C语言中的 /* …… …… */ 一样，中间的内容只是解释说明，并不被编译器所编译。

（3）HTML语言的基本单位

 1.长度单位：用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性，同时也可以用来定义这些对象在页面

 上的位置等属性，用来描述页面上可能遇到的各种长度。

 表示方法：绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每个点，百分比代表

 的是相对于客户区的多少。下面我们就以水平线的宽度为例，说明这两种表示方法。



 <html>

 <head>

 <title>HTML语言的长度表示</title>

 </head>

 <body>

 HTML是使用特殊标记来描述文档结构和表现形式的一种语言。

 <hr width="500"> <!绝对长度的声明>

 <hr width="50%"> <!相对长度的声明>

 </body>

 </html>

 改变网页的大小，就会看到这两者表示长度方法的不同。

 其中 <hr> 标记是在页面上建立水平线的标记。width是水平线元素中的一种属性，用来表示水平线的宽度。这里

 width="500"即表示这个水平线的宽度是500像素；width="50%"即表示水平线占据客户区的总宽度的50%。

 2. 颜色单位 : 和长度单位一样，颜色单位也是描述页面表现形式的一种很重要的的数据类型。

 颜色单位有三种表示方法：16进制颜色代码、10进制RGB码、直接颜色名称。这三种表示方法不同，但是效果却是一样的。

<html>

 <head>

 <title>HTML语言中颜色的不同表示方法</title>

 </head>

 <body>

 静夜思 <!红色>

 窗前明月光 <!绿色>

 疑是地上霜 <!蓝色>

 举头望明月 <!黄色>

 低头思故乡<!栗色>

 </body>

</html>
 注意：本文件在保存时请选择 Unicode 字符型进行保存。

 16进制颜色代码，语法格式： #RRGGBB 。16进制颜色代码之前必须有一个“#”号，这种颜色代码是由三部分组成的，其

 中前两位代表红色，中间两位代表绿色，后两位代表蓝色。不同的取值代表不同的颜色，他们的取值范围是00--FF。

 10进制RGB码，语法格式： RGB(RRR,GGG,BBB) 。在这种表示法中，后面三个参数分别是红色、绿色、蓝色，他们的取值范

 围是0--255。以上两种表达方式可以相互转换，标准是16进制与10进制的相互转换。

 直接颜色名称，可以在代码中直接写出颜色的英文名称。

 以上三种表示方法的效果相同，一般16进制颜色代码的表示方法比较常用。

3. URL路径 : 是一种互联网地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服务器(Server)里文件的完整路径和文件名称等信息。在HTML中，URL路径分为两种形式：绝对路经和相对路径。



 1.绝对路径：

 绝对路径是将服务器上磁盘驱动器名称和完整的伦够写出来，同时也会表现出磁盘上的目录结构。

 语法格式： <scheme>:<scheme_dependent_information>

 其中，<scheme>是某一种传输协议，而 <scheme_dependent_information>则是连接的位置信息。

 如：

 <a href="http://www.frontfree.net">

 <a href="file:///D:/test/html.htm">

 a是一个标签，添加链接信息<a href="链接网址">

2. 相对路径：

 相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。

 语法格式： 相对关系/部分路径/文件名

 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。

 <1>相对文档：

 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“../”表示上一级目录，没有“../”表示当前目录。

 例如：

 当前文档的路径是：test/project1/index.htm 。我们要找test目录下的html.htm 。而当前的目录是project1，我们要回到上一级目录中，所以路径是“../html.htm”。



 <2>相对根目录：

 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个字符是“/”，这个符号表示这个路径是一个相对于根目录的表达式。

 例如：

 <a href="/test/html.htm">

（3）html文档中head部分的基本使用方法

 head这一部分是由标记<head>开始，以标记</head>结束，是html文档的首要部分。下面我们看一下head部分所包含的元素：

元素


描述

title


文档标题

meta


描述非html标准的一些文档信息

link


描述当前文档与其他文档之间的连接关系

base


定义体试时默认的外部资源

script


脚本程序内容

style


样式表内容

title：

title包含的内容将会被显示在浏览器窗口的标题栏中。给自己的网页起一个适当的名字，可以体现出一些自己的个性。

语法格式：

<title> …… …… </title>

在省略号处加入的文字或符号，都将显示在浏览器的标题栏中。

meta：

meta元素提供的信息是用户不可见的。下面是meta的几种用法：

定义搜索关键字：

这里介绍两种基本的用法：

<meta name="keywords" content（内容）="html,css,javascript">

<meta name="description"(描述，描写) content="网页制作">

这样一来，在你的网页中就会体现出这样的信息。但是这些信息是不可见的，只是提供给那些搜索引擎使用。

浏览器一般为了节约时间，都在本地硬盘上保存一个网上的文件作为临时版本。在用户下次打开这个网页的时候，浏览器将会直接调用硬盘上的这个版本，而不是网上的。如果想让浏览者每次打开网页的时候都是看到的最新版本，那么就在网页上加上这一句吧！

<meta http-equiv="content-type" content="text/html;charset="GB2312">

我们可以通过这样的语句设定语言的编码方式。这样，浏览器就可以为我们正确的选择语言，不需要我们来选取。上面的例子显示的就是简体中文，如果想要显示繁体中文，将GB3212替换为BIG5就可以了。

刷新页面

<meta http-equiv="refresh"content="60",URL="new.htm">

这样的语句可以让我们的浏览器按照content属性中制定的时间来跳转到URL属性中设定的URL地址。上面的例子就是在打开页面60秒后调用一个新的页面new.htm。如果没有能够找到new.htm，浏览器就执行刷新本页的操作。这也是大多数聊天室的设定方法。

link：

这个元素用来指定当前文档和其他文档之间的联接关系。

语法格式：

<link rel="描述" href="URL地址">
rel说明两个文档之间的关系；href说明目标文档名。以下是一个指定外联样式表文件的例子

<link rel="stylesheet" href="style.css">

关于css层叠样式表，请查阅有关资料。

base：

用于定义文档提交是默认的外部资源。

语法格式：

<base href="原始地址" target="目标窗口名称">

href指定文档中链接到的所有文件默认的URL地址。在这里指定href的属性，所有的相对路径的前面都会加上href属性中的值。

target指定文档中所有链接的默认打开窗口。最常见的应用是在框架页(frame)中。我们要把Menu框架中的联接显示到content框架中，就可以在Menu的网页中加上<basetarget="content">。这样，就省去了在Menu网页上所有链接的<a>属性上加上target属性了。

script：

标记用来在页面中加入脚本程序。

语法格式：

<script language="脚本语言"> …… …… </script>

在language中一定要指定脚本语言的种类。如VBScript等。

style：

用来指定当前文档的css层叠样式表。css对于网页的字体样式、背景、边界等都有很大的应用。详细部分请大家参阅css有关内容。

（4）html语言中的body的部分用法。

 body是一个网页代码的绝对主要部分。body是由<body>开始，由</body>结束。下面我们看一下body部分的元素：

元素


描述

bgcolor


背景色

background


背景图案

text


文本颜色

link


链接文字颜色

alink


活动链接文字颜色

vlink


已访问链接文字颜色

leftmargin


页面左侧的留白距离

topmargin


页面顶部的留白距离

bgcolor:

bgcolor用于指定页面的背景颜色。

语法格式：

<body bgcolor="颜色值">

background:

background属性用于指定页面的背景图案。

语法格式：

<body background="URL">

下面介绍几种文字的属性，可以改变文字的颜色,以及在页面上留出空白：

text link alink vlink leftmargin topmargin

他们的作用分别是：非链接文字的颜色；可连接文字的颜色；正被点击的可链接文字的颜色；已被点击的可链接的文字的颜色；页面左侧的留白；页面顶部的留白。

语法格式：

<body text="color" link="color" alink="color" vlink="color">

<body leftmargin="value" topmargin="value">

示例：

<html>

<head>

<title>body元素示例</title>

</head>

<body bgcolor="#ff0000" text="#ffff00" leftmargin="100">

这里显示body的示例。

</body>

</html>

说明：对于link这样的属性，大多数html的页面已经不使用这样的用法了。现在多数是在head中加入相应的代码。要达到的效果是鼠标放到有链接的字体上时，字体变色，点击后字体变为灰色。具体方法如下：

A:link {color:#00007f;}
A:visited {color:#65038e;}
A:active {color:#ff0000;}
A:hover {color:#ff0000;}

将这段代码加入到head中，在body中加入有链接的文字，就可以看出效果了。这一部分是属于css中的知识。在body中加入有链接的文字：在Dreamweaver中，选定文字后，在下面的Properties中的link中加入想要链接到的页面的地址。在FrontPage中，选定文字后，点击右键就会有相应的选项。
————————————————
版权声明：本文为CSDN博主「yefei123123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yefei123123/article/details/80986328

posted on 2022-02-21 17:30 属于我的梦，明明还在阅读(404) 评论(0) 编辑收藏举报

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜