HTML 入门教程 全方位详解HTML常用标签

2024-02-25 开发教程 HTML 入门教程 匿名 11

HTML 是所有网页制作技术的核心和基础,也是每个网页制作者必须掌握的基本知识,而 html 标签是 html 语言中最基本的单位,是 HTML 最重要的组成部分。

初学者首先要知道 HTML 标签的一些特点:

HTML 标签是与大小写无关的,例如“<BODY>”跟<body>表示的意思是一样的,推荐使用小写。类似“<p>”这样由尖括号包关键字组成,例如:

实例

<P>P 是段落标签,HTML标签不区分大小写</P>
<p>意思是一样的,推荐使用小写。</p>

注:HTML 标签对大小写不敏感,但推荐使用小写!

HTML 标签一般是成对出现的,由开始标签如<h1>,左边标签一般叫开始标签,右边</h1>叫结束标签,有始有终,除了一些个别是单闭合标签的,下面列举 HTML 单闭合标签。

单闭合标签

标签

功能

<br />

插入一个换行简单的换行符

<hr />

定义水平线

<area />

定义图像映射内部的区域

<base />

定义页面中所有链接的默认地址或默认目标

<img />

定义图像

<input />

定义输入控件

<link />

定义文档与外部资源的关系

<meta />

定义关于 HTML 文档的元信息

<basefont />

不建议使用。定义页面中文本的默认字体、颜色或尺寸

<param />

定义对象的参数

<col />

定义表格中一个或多个列的属性值

<frame />

定义框架集的窗口或框架

<embed />

定义外部交互内容或插件

字体效果

标签

功能

<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt>打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing>固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style =font-size:100 px>...</font>无限增大

区断标记

标签

功能

<hr>水平线
<hr size=9>水平线(设定大小)
<hr width=80%>水平线(设定宽度)
<hr color=ff0000>水平线(设定颜色)
<br>(换行)
<nobr>...</nobr>水域(不换行)
<p>...</p>水域(段落)
<center>...</center>置中

链接

标签

功能

<base href=地址>(预设好连结路径)
<a href=地址></a>外部连结
<a href=地址 target=_blank></a>外部连结(另开新窗口)
<a href=地址 target=_top></a>外部连结(全窗口连结)
<a href=地址 target=页框名></a>外部连结(在指定页框连结)

图像/音乐

标签

功能

<img src=图片地址>贴图
<img src=图片地址 width=180>设定图片宽度
<img src=图片地址 height=30>设定图片高度
<img src=图片地址 alt=提示文字>设定图片提示文字
<img src=图片地址 border=1>设定图片边框
<bgsound src=MID音乐文件地址>背景音乐设定

表格

标签

功能

<table align=left>...</table>表格位置,置左
<table align=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

分割窗口

标签

功能

<frameset cols="20%,* ">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,* ">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,* ">分割左右两个框架
<frameset cols="20%,*,20% ">分割左中右三个框架
<frameset rows="20%,*,20% ">分割上中下三个框架
<! - - ... - ->批注
<a href target>指定超级链接的分割窗口
<a href=#锚的名称>指定锚名称的超级链接
<a href>指定超级链接
<a name=锚的名称>被连结点的名称
<address>....</address>用来显示电子邮箱地址
<b>...</b>粗体字
<base target>指定超级链接的分割窗口
<basefont size>更改预设字形大小
<bgsound src>加入背景音乐
<big>显示大字体
<blink>闪烁的文字
<body text link vlink>设定文字颜色
<body>显示本文
<br>换行
<caption align>设定表格标题位置
<caption>...</caption>为表格加上标题
<center>向中对齐
<cite>...<cite>用于引经据典的文字
<code>...</code>用于列出一段程序代码
<comment>...</comment>加上批注
<dd>设定定义列表的项目解说
<dfn>...</dfn>显示"定义 "文字
<dir>...</dir>列表文字卷标
<dl>...</dl>设定定义列表的卷标
<dt>设定定义列表的项目
<em>强调之用
<font face>任意指定所用的字形
<font size>设定字体大小
<form action>设定户动式窗体的处理方式
<form method>设定户动式窗体之资料传送方式
<frame marginheight>设定窗口的上下边界
<frame marginwidth>设定窗口的左右边界
<frame name>为分割窗口命名
<frame noresize>锁住分割窗口的大小
<frame scrolling>设定分割窗口的滚动条
<frame src>将 HTML 文件加入窗口
<frameset cols>将窗口分割成左右的子窗口
<frameset rows>将窗口分割成上下的子窗口
<frameset>...</frameset>划分分割窗口
<h1>~<h6>设定文字大小
<head>...</head>标示文件信息
<hr>加上分网格线
<html>...</html>文件的开始与结束
<i>...</i>斜体字
<img align>调整图形影像的位置
<img alt>为你的图形影像加注
<img dynsrc loop>加入影片
<img height width>插入图片并预设图形大小
<img hspace>插入图片并预设图形的左右边界
<img lowsrc>预载图片功能
<img src border>设定图片边界
<img src>插入图片
<img vspace>插入图片并预设图形的上下边界
<input type name value>在窗体中加入输入字段
<isindex>定义查询用窗体
<kbd>...</kbd>表示使用者输入文字
<li type>...</li>列表的项目 ( 可指定符号 )
<marquee>跑马灯效果
<menu>...</menu>条列文字卷标
<meta name="refresh " content url>自动更新文件内容
<multiple>可同时选择多项的列表栏
<noframe>定义不出现分割窗口的文字
<ol>...</ol>有序号的列表
<option>定义窗体中列表栏的项目
<p align>设定对齐方向
<p>...</p>分段
<person>...</person>显示人名
<pre>使用原有排列
<samp>...</samp>用于引用字
<select>...</select>在窗体中定义列表栏
<small>显示小字体
<strike>文字加横线
<strong>用于加强语气
<sub>...</sub>下标字
<sup>...</sup>上标字
<table border=n>调整表格的宽线高度
<table cellpadding>调整数据域位之边界
<table cellspacing>调整表格线的宽度
<table height>调整表格的高度
<table width>调整表格的宽度
<table>...</table>产生表格的卷标
<td align>调整表格字段之左右对齐
<td bgcolor>设定表格字段之背景颜色
<td colspan rowspan>表格字段的合并
<td nowrap>设定表格字段不换行
<td valign>调整表格字段之上下对齐
<td width>调整表格字段宽度
<td>...</td>定义表格的数据域位
<textarea name rows cols>窗体中加入多少列的文字输入栏
<textarea wrap>决定文字输入栏是自动否换行
<th>...</th>定义表格的标头字段
<title>...</title>文件标题
<tr>...</tr>定义表格美一行
<tt>...</tt>打字机字体
<u>...</u>文字加底线
<ul type>...</ul>无序号的列表 ( 可指定符号 )
<var>...</var>用于显示变量

跑马灯

标签

功能

<marquee>...</marquee>普通卷动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right>...</marquee>向右卷动
<marquee direction=left>...</marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=ff0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定卷动距离
<marquee scrolldelay=300>...</marquee>设定卷动时间