分享
 
 
 

HTML 基本语法

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

1.标记

1.1一般标记

一般标记是由一个起始标记(Opening Tag)和一个结束标记(Ending Tag)所组成,其语法为:<x>受控文字</x>

其中,x代表标记名称。<x>和</x>就如同一组开关:起始标记<x>为开启(ON)的某种功能,而结束标记</x>(通常为起始标记加上一个斜线/)为关(OFF)功能,受控制的文字信息便放在两标记之间。例如:<i>这是斜体字</i>。

标记之中还可以附加一些属性(Attribute),用来完成某些特殊效果或功能。例如:<x a1="v1",a2="v2",...,an="vn">受控文字</x>

其中,a1,a2,...,an为属性名称,而v1,v2,...,vn则是其所对应的属性值,属性值加不加引号,目前所使用的浏览器都可接受,但依据W3C的新标准,属性值是要加引号的,所以最好养成加引号得习惯。

1.2 空标记

虽然大部分的标记是成双成对出现的,但也有一些是单独存在的。这些单独存在的标记称为空标记(Empty Tags)。其与法为:<x>

同样,空标记也可以附加一些属性(Attribute),用来完成某些特殊效果或功能。如:<x a1="v1",a2="v2",...,an="vn">,例如:<hr>,<br>等。

W3C定义的新标准(XHTML1.0/HTML4.0)建议:空标记应以/结尾,即:<X />

如果附加属性则为:<x a1="v1",a2="v2",...,an="vn" />

目前所使用的浏览器对于空标记后面是否要加/并没有严格要求,即在空标记最后在/和没有加/,不影响其功能。但是如果希望你的文件能满足最新标准,那么最好加上/。

2. HTML标记分类

2.1文件结构标记(Document Structure Tags)

此类标记的目的是用来标示出文件的结构,主要的有:

<html>...</html>:标示html文件的起始和终止。

<head>...</head>:标示出文件标题区。

<body>...</body>:标示出文件主体区

2.2区段格式标记(Block Formatting Tags)

此类标记的主要用途是将HTML文件中得某个区段文字,以特定格式显示,增加文件的可看度。主要的有:

<title>...</title>:文件题目。

<hi>...</hi>:i=1,2,...,6,网页标题。

<hr>:产生水平线。

<br>:强迫换行。

<p>...</p>:文件段落。

<pre>...</pre>:以原始格式显示。

<address>...</address>:标注联络人姓名、电话、地址等信息。

<blockquote>...</blockquote>:区段引用标记。

2.3字符格式标记(Character Formatting Tags)

用来改变HTML文件文字的外观,增加文件的美观程度。主要有:

<b>...</b>:粗体字。

<i>...</i>:斜体字。

<tt>...</tt>:打字体。

<font>...</font>:改变字体设置。

<center>...</center>:居中对齐。

<blink>...</blink>:文字闪烁。

<big>...</big>:加大字号。

<small>...</small>:缩小字号。

<cite>...</cite>:参照。

2.4列表标记(List Tags)

<ul>...</ul>:无编号列表。

<ol>...</ol:有编号列表。

<li>...</li>:列表项目。

<dl>...</dl>:定义式列表。

<dd>...</dd>:定义项目。

<dt>...</dt>:定义项目。

<dir>...</dir>:目录式列表。

<menu>...</menu>:菜单式列表。

2.5链接标记(Anchor Tag)

链接可以说是html超文本文件的命脉,html通过链接标记来整合分散在世界各地的图、文、影、音等信息。此类标记的主要用途为标示超文本文件链接(Hypertext Link),主要有:

<a>...</a>:建立超级链接。

2.6多媒体标记(Multimedia Tag)

此类标记用来显示图像数据。主要有:

<img>:嵌入图像。

<embed>:嵌入多媒体对象。

<bgsound>:背景音乐。

2.7表格标记(Table Tags)

此类标记用制作表格。主要有:

<table>...</table>:定义表格区段。

<caption>...</caption>:表格标题。

<th>...</th>:表头。

<tr>...</tr>:表格列。

<td>...</td>:表格单元格。

2.8表单标记(Form Tags)

此类标记用来制作交互式表单,主要的有:

<Form>...</form>:表明表单区段的开始与结束。

<input>:产生单行文本框、单选按钮、复选框等。

<textarea>...</textarea>:产生多行输入文本框。

<select>...</select>:标明下拉列表的开始与结束。

<option>...</option>:在下拉列表中产生一个选择项目。

HTML标记并没有大小写之分,即<BODY>和<body>是相同的。以下来分别介绍这些标记。

3. 文件结构标记

一个html文件的结构基本上可以分为两部分,一部分称为标题区(Head Section);另一部分称为主体区(Body Section)。文件结构标记就是用来标示出何处属于标题,何处属于主体。

3.1<html>:标示整份文件

用途:标示整篇html文件

说明:一个标准的html文件是一篇以<html>开头,而以</html>结束的文件。即:

<html>

... html文件全文

</html>

3.2<head>:标示出文件标题区

说明:html文件中,由<head>和</head>所夹住的区域称为文件的标题区。通常head区段都内含在html区段之中,即:

<html>

<head>

...... html文件标题区

</head>

.....

</html>

3.3<title>:网页标题

<title>.....</title>是html文件标题区中最重要也是最常用的标记。其他标题区的标记还包括<base>、<isindex>、<link>、<nextid>、<meta>等。

<title>标记的用途是设置网页标题,这个标题会显示在浏览器窗口的标题栏上,不会出现在浏览器的页面(page)文字中。而大部分浏览器的收藏(My Favorites)、书签(BookMark)或历史记录列表(History List)功能,也都是以这个文件的标题作为名称的。

由<title>...</title>所标注的文字并无长度的限制,不过太长的标题,有时可能会被截掉,并且也不容易记忆。

3.4<body>:标示出文件主体区

说明:在html文件中,由<body>...</body>所夹住的区域称为文件的主体区,通常是在<head>区段之后。

3.5<body>标记的属性

backgroud属性:

这个属性可以指定一个图形文件(一般为gif或jpeg),作为背景图案。该图形会像拼瓷砖一样铺成整个网页的底图。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有