HTML标签详解与应用实例-优快云博客

本文深入探讨HTML中常用标签的使用方法与实例演示，包括头部标签、主体内容标签、样式与布局、对齐方式、图片插入、表格、表单、框架等。详细解释各标签的功能、属性及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html索引

1.表格——<table><tr><th><td> 5

2.表单控件——<inputtype=“text/password/checkbox/file....”> 7

3.表单按钮——<inputttpye=“submit/image/reset/button....”value="提交"> 7

Body体里面的标签——框架标记 12

Head中常用的标签

根据HTML标准，仅有几个标签在HTML的头部分是合法的。它们是：<base>,<link>,<meta>,<title>,<style>和<script>。

<head>

<basehref="http://www.w3school.com.cn/i/"/>

<basetarget="_blank"/>----<base>标签为页面上的所有链接规定默认地址或默认目标。

<title>XHTMLTagReference</title>

<metahttp-equiv=“content-type”content=“text/html;charset=gb2312”>

<metahttp-equiv=“refresh”content=“3;url=http://www.foo.com”>

<metaname="keywords"content="yourkeywords">

<metaname="description"content="yourdescription">

<metahttp-equiv="expires"content="0">
<metahttp-equiv="pragma"content="no-cache">

<metaname="generator|author|copyright"content="…..">

</head>

Body体上的标签

<bodybgcolor=“#”-背景色background="img_url"--背景图片>

</body>

Body体里面的标签

1.锚点标签

链接式：<ahref="http://www.w3school.com.cn/"target="_blank">VisitW3School!</a>

上面这行代码显示为：VisitW3School

使用Target属性，你可以定义被链接的文档在何处显示。

创建指向相同文档中“有用的提示”部分的链接：

<ahref="#tips">VisittheUsefulTipsSection</a>

锚点式：<aname="tips">UsefulTipsSection</a>

name属性用于创建HTML内部的书签。

2.分割线

<hrsize=“pixels”align=“align”width=“pixels”color=“#”noshade>

Size高度

Align对齐方式，可以取left或right

Noshade无阴影效果

颜色

Eg.<hrnoshadecolor=“#ff00ff”width=“600”size=“8”align=“left”>

3.标题字体

<h#>Thisisaheading</h#>

按标题级别用黑体字显示标题内容

4.字体设置

<fontsize="2"face="Verdana"color="red">Thisisaparagraph.</font>

字体，大小，颜色

5.设置文字显示

<fontcolor="red"size="5"><b>红色的字哦，大小是5</b></font>

<br>

<fontcolor="#0000ff"size=2"><i>蓝色的字哦，大小是2</i></font>

<br>

<fontsize=6>

<br>

<br>

<br>

<br>

<br>

数组下标<sub>5</sub>

<br>

次方<sup>3</sup>

</font>

6.特殊字符

空格® 注册商标

7.文字布局

<html>

<body>

<p>话说乾隆年间，有个小朋友...</p>

<div>这个小朋友的名字叫做辽阔草原</div>

<ul>

<li>来历一：他爸爸起的

<litype="circle">来历二：瞎编的

<litype="square">来历三：呵呵，为什么要告诉你

</ul>

<ol>

<li>来历一：他爸爸起的

<li>来历二：瞎编的

<li>来历三：呵呵，为什么要告诉你

</ol>

我换行！我自动换行！我换行！我自动换行！

<br>

<nobr>我就不换行！就不换行！</nobr>

<pre>

我很厉害的，我是马洪涛

嘿嘿

啦啦

</pre>

</body>

</html>

8.对齐方式

<h1align="center">中间中间</h1>

<divalign="center">div中间，如果加上表格就看得更清楚喽</div>

9.图片插入运行截图如上面

滔滔<imgsrc="images/01.jpg"alt="有01,我是不会显示出来的"width=200border="3"valign=bottom>

<imgsrc="images/01.jpg"alt="有01,我是不会显示出来的"width=200border="5"valign=bottom>345234

<br>

<imgsrc="images/5656.jpg"alt="哪里有这张图片嘛！"border="8">

Body体里面的标签——表格

1.表格——<table><tr><th><td>

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<tableborder="1">

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：

row1,cell1	row1,cell2
row2,cell1	row2,cell2

2.table的属性

bgcolor，border，bordercolorlight，bordercolordark，cellspacing，cellpadding，width，height。

3.表格分列——水平分列和竖直分列

<tdrowspan=“”colspan=“”bgcolor=“”>…</td>（跨行跨列）

<body>

<tablewidth="768"align="center"border="2">

<tr>

<tdwidth="30%"align="center">编号</td>

<tdwidth="30%"align="center">名称</td>

<tdalign="center">性格</td>

</tr>

<tr>

<tdvalign="top"height="50">1</td>

<tdvalign="middle">小猫咪</td>

<tdvalign="bottom">温顺</td>

</tr>

<tr>

<tdrowspan="2"colspan="2">

<fontsize="5"color="red">我是狮子！</font>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

Body体里面的标签——表单

1.表单标签——get、post

2.表单控件——<inputtype=“text/password/checkbox/file....”>

3.表单按钮——<inputttpye=“submit/image/reset/button....”value="提交">

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（TextFields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

Firstname:

<inputtype="text"name="firstname"/>

<br/>

Lastname:

<inputtype="text"name="lastname"/>

</form>

浏览器显示如下：

窗体顶端

Firstname:
Lastname:

窗体底端

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（RadioButtons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>

<inputtype="radio"name="sex"value="male"/>Male

<br/>

<inputtype="radio"name="sex"value="female"/>Female

</form>

浏览器显示如下：

窗体顶端

Male
Female

窗体底端

注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>

<inputtype="checkbox"name="bike"/>

Ihaveabike

<br/>

<inputtype="checkbox"name="car"/>

Ihaveacar

</form>

浏览器显示如下：

窗体顶端

Ihaveabike
Ihaveacar

窗体底端

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<formname="input"action="html_form_action.asp"method="get">

Username:

<inputtype="text"name="user"/>

<inputtype="submit"value="Submit"/>

</form>

浏览器显示如下：

窗体顶端

Username:

窗体底端

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到"html_form_action.asp"的页面。该页面将显示出输入的结果。

表单例题！

<html>

<metahttp-equiv="content-type"content="text/html;charset=gb2312">

</head>

<body>

<formaction="02.html"method="post">

<fontface="Georgia,TimesNewRoman,Times,serif"size="6"><center>用户注册</center></font>

<tablewidth="750"align="center"border="2"bgcolor="#FFFF00">

<tr>

<td>

<inputtype=textname="username"size="30"maxlength="10">

</td>

</tr>

<tr>

<td>

<inputtype=passwordname="pwd"size="15"maxlength="12">

</td>

</tr>

<tr>

<td>

<inputtype=passwordname="pwd2"size="15"maxlength="12">

</td>

</tr>

<tr>

<td>

<inputtype=radioname="gender"value="male"checked>男

<inputtype=radioname="gender"value="female">女

</td>

</tr>

<tr>

<td>

<inputtype="checkbox"name="interest"value="vc"checked>VC

<inputtype="checkbox"name="interest"value="vb"checked>VB

<inputtype="checkbox"name="interest"value="vfoxpro">VF

<inputtype="checkbox"name="interest"value="vjava">VJ

<br>

<inputtype="checkbox"name="interest"value="bc">BC

<inputtype="checkbox"name="interest"value="cobol">CO

<inputtype="checkbox"name="interest"value="java">JA

<inputtype="checkbox"name="interest"value="delphi">Delphi

</td>

</tr>

<inputtype="hidden"name="interest"value="jsp">

<tr>

<td>

<selectname="province">

<optionvalue=0>--请选择--</option>

<optionvalue=01>小学</option>

<optionvalue=02>初中</option>

<optionvalue=03>高中</option>

<optionvalue=04>本科</option>

<optionvalue=05>硕士</option>

<optionvalue=06>博士</option>

</select>

</td>

</tr>

<tr>

<td>

<textarearows="12"cols="80"name="intro"wrap="hard">请输入您的简历：</textarea>

</td>

</tr>

<tr>

<td>

<inputid="File"name="UpLoadFile"type="file"/>

</td>

</tr>

<tr>

<tdcolspan="2">

<inputtype="submit"value="提交">

<inputtype="reset"value="重置">

<br>

<inputtype="button"value="ok">

<inputtype="image"src="1.png"width=30>

</center>

</td>

</tr>

</table>

</form>

</body>

</html>

Body体里面的标签——框架标记

<framesetrows=“row1,row2…”cols=“col1,col2…”>
<framename=“”src=“”noresize>
<framename=“”src=“”scrolling=“”>
……
</frameset>

<framesetrows="20%,*">

<framename="top"src="Untitled-1.html"noresize>

<framesetcols="20%,*">

<framename="left"src="Untitled-2.html"noresize>

<framename="right"src="1.html">

</frameset>

html常用总结

Head中常用的标签

Body体上的标签

Body体里面的标签

Body体里面的标签——表格

Body体里面的标签——表单

Body体里面的标签——框架标记