中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

HTML教程

全方位详解HTML常用标签(含视频教程)

阅读 (2366)

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


HTML标签是与大小写无关的,例如“主体”<body>跟<BODY>表示的意思是一样的,推荐使用小写。类似“<关键字>”这样由尖括号包关键字组成,例如<html>,<div>……就是HTML标签。HTML标签一般是成对出现的,由开始标签类似“<div>元素内容</div>”,左边标签一边叫开始标签,右边</ >叫结束标签,有始有终,除了一些个别是单闭合标签的,具体请看下面的标签分类说明。


单闭合标签

<meta />设置页面信息的 <param />可为包含它的<object>或<applet>提供参数
<br />换行 <keygen />定义生成密钥
<hr />水平线 <source />为媒介元素(如<video>或<audio>)定义媒介源
<area />图像映秀区域 <col />为表格中一个或多个列定义属性值
<input />表单元素,type不同输入字段拥有不同形式 <frame />定义frameset中的一个特定的窗口(框架)
<link />链接样式表 <embed />定义嵌入的内容,比如插件
<basefont />定义基准字体,html5不支持<basefont>标签,不赞成使用 ...... 

字体效果

<h1>…</h1>标题1(最大)一级级往下字体变小,网页一般从h1~h4,h4之后一般不会用了 <s>…</s>删除线
<h6>…</h6>标题6(最小) <del>…</del>删除线(表示删除)
<b>…</b>粗体字 <kbd>…</kbd>键盘文字
<strong>..</strong>粗体字(强调) <tt>…</tt>打字体
<i>…</i>斜体字 <xmp>…</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<em>…/em>斜体字(强调) <plaintext>…</plaintext>固定宽度字体(不执行标记符号)
<dfn>...</dfn>斜体字(表示定义) <listing>…</listing>固定宽度小字体
<u>…</u>底线 <font color=00ff00>…</font>字体颜色(写成类似color=“#00ff00”也可以)
<ins>...</ins>底线(表示插入文字) <font size=1>…</font>最小字体
<strike>…</strike>横线 <font style=font-size:100 px></font>无限增大(字体大小为100px)


区断标记

<hr />水平线 <nobr>…</nobr>禁止换行,No Break的缩写
<hr size=9 />水平线(设定大小) <p>…</p>段落
<hr width=80% />水平线(设定宽度) <center>…</center>对其包围的文本进行居中设置
<hr color=00ff00 />水平线(设定颜色)   
<br />换行   


链接

<base href=地址>为页面上的所有链接规定默认地址或默认目标 <a  href=地址 target=_top></a>指定超链接目标的 URL(全窗口连接)
<a href=地址></a>指定超链接目标的 URL <a href=地址 target=页框名></a>指定超链接目标的 URL(在指定页框连接)
<a href=地址 target=_blank></a>指定超链接目标的 URL(另开新窗口)   


图像/音乐

<img src=图片地址 />往网页贴图片 <img src=图片地址 border=1 />设定贴的图片边框
<img src=图片地址 width=180 />设定贴的图片宽度 <bgsound src=MID音乐文件地址 />背景音乐设定
<img src=图片地址 height=30 />设定贴的图片高度   


表格

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


分割窗口

<frameset col=”20%”,*>左右分割,将左边框架分割大小为20%,右边框架的大小浏览器会自动调整 <comment>…</comment>加上批注
<frameset rows=”20%,*”>上下分割,将上面框架分割大小为20%,下面框架的大小浏览器会自动调整 <dd>…</dd>设定定义列表的项目描述
<frameset cols=”20%,*”>分割左右两个框架 <dfn>…</dfn>显示"定义"文字
<frameset cols=”20%,*,20%”>分割左中右三个框架 <dir>…</dir>列表文字卷标
<frameset rows=”20%,*,20%”>分割上中下三个框架 <dl>…</dl>设定定义列表的卷标
<!--…-->批注 <dt>...</dt>定义列表中的项目
<a href target>指定超级链接的分割窗口 <em>…</em>强调之用
<a href="#锚的名称>指定锚名称的超级链接 <font face>任意指定所用的字形
<a href>指定超级链接 <font size>设定字体大小
<a name=锚的名称>被连结点的名称 <form action>设定
<address>…</address>用来显示电子邮箱地址   
<b>…</b>粗体字   
<base target>指定超级链接的分割窗口   
<bgsound src>加入背景音乐   
<big>…</big>呈现大号字体效果   
<blink>显示闪烁的字符串或文字(IE不支持)   
<body text link vlink>设定文字颜色   
<body>…</body>显示本文   
<br />换行   
<capition align>设定表格标题位置   
<caption>…</caption>为表格加上标题   
<center>…</center>对包围的文本进行居中处理,html5不支持此标签   
<cite>…<cite>用于引经据典的文字   
<code>…</code>用于列出一段程序代码   
 
跑马灯

标签

功能

<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>设定卷动时间


HTML中的标签和元素的区别

比如<p>这就是一个标签; 

<p>这里是内容</p>这就是一个元素,也就是说元素由一个开始的标签和结束的标签组成,用来包含某些内容; 

这里有一个值得注意的例外,即<br/>本身既是开始标签也是结束标签,但不包含任何内容,所以这只是个标签。 

1. 元素: 
HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。 

2. 标签: 
标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的,如<table></talbe>、<form></form>。当然还有少部分不是成对出现的,如<br>、<hr>等。 

标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。 

3. 属性: 
为HTML元素提供各种附加信息的就是HTML属性,它总是以"属性名=属性值"这种名值对的形式出现,而且属性总是在HTML元素的开始标签中进行定义。 

示例: 

<html> 
     <head> <title>示例标题</title> </head> 
     <body bgcolor="red"> 
             <p>这是示例页面</p> 
     </body> 
</html>

在这个示例中,<p>这是示例页面</p>就是HTML元素,其中“这是示例页面”就是元素的具体内容了。 
<head><title><body>等就是HTML标签,这是标签构成了HTML元素。 <body bgcolor="red">中的bgcolor="red"就是标签的属性,它定义了标签应该如何具体配置。 

总之,元素和标签的区别也不必太在意,实际工作中我们都直接以标签统称。而属性就很容易明白了, 它就是为HTML标签添加各种附加信息或者配置选项的参数。 



HTML常用标签视频教程一


HTML常用标签视频教程二

HTML中的标签和元素的区别

关闭
程序员人生