HTML常用标签大全及html标签的特点

 更新时间:2015年12月16日 00:37  点击:1580

首先要知道html标签的一些特点:

1.类似“<关键字>”这样由尖括号包关键字组成,例如<html>,<div>……

2.一般是成对出现的,由开始标签类似“<div>元素内容</div>”,左边标签一边叫开始标签,右边</ >叫结束标签,有始有终,除了一些个别是单闭合标签的

先记一些个别例外的单闭合标签,例如:

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

下面按不同效果将标签进行分类:

1.字体效果

<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)

2.区断标记

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

3.链接

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

4.图像/音乐

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

5.表格

<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> 设定表格亮边框的颜色      

6.分割窗口

<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> 用于列出一段程序代码      

[!--infotagslink--]

相关文章

  • PHP清除指定html标签实例代码

    在php中系统为我们内置了一个html标签清除函数strip_tags它删除的是所有字符串了,如果我们只要删除指定的就没有办法了,下面我就来给大家整理了一个站长写的自定义删除h...2016-11-25
  • Php中过滤表单提交的html标签

    我们做的简单评论功能会发现有提交很多的html标签了这些标签会导致页面有一些外连了,下面我们一起来看在Php中过滤表单提交的html标签方法。 近评论中有一些机器人...2016-11-25
  • php去除字符串中的HTML标签技巧

    在php中要去除字符串中的HTML标签方法有很多种了,最常用的就是使用strip_tags函数一并去了,只保留字符了,还在就是有选择性的去除了这里要用正则表达式了。 例1 p...2016-11-25
  • php把html标签转换成合法html代码程序

    代码如下 复制代码 function ihtmlspecialchars($string) { if(is_array($string)) { foreach($string as $key => $val) { $stri...2016-11-25
  • php 正则清除HTML标签但保留其中一部分标签

    php自带了很多函数可以直接过滤所有html标签了,但时我们是希望清除指定的html标签再保留另外一些html标签了,下面给各位整理了一个例子。 很多时候我们正则清除HTML...2016-11-25
  • php过滤所有html标签的几种方法

    //用正则过滤html标签 代码如下 复制代码 $html_body ="<a href='#'>www.111cn.net</a>"; preg_replace("/(</?)(w+)([^>]*>)/e", ...2016-11-25
  • php 过滤html标签多种方法

    方法一 <?php 代码如下 复制代码 echo strip_tags("hello <b>world!</b>"); strip_tags --- 去除字串中的html和php标签 语法 : string...2016-11-25
  • php正则过滤指定html标签示例

    我们要过滤html标签或字符串中指定的html标签我们可以利用php正则来实现,下面的三个例子我们一起来看看吧。 1.正则过滤指定标签 代码如下 复制代码 ...2016-11-25
  • php 过滤html标签的函数代码

    本文章提供四款过滤html标签的函数代码,方法一最简单的利用了php自带函数strip_tags来过滤所有的html标签,方法二利用了正则表达式来过滤html标签,方法三是清除HTML标签...2016-11-25
  • php去除字符串中的HTML标签方法总结

    php去除字符串中的HTML标签方法有很多的今天在做一个采集小功能时发现了有N种方法,下面我为各位整理一下有原创的也有整理的,希望对大家有帮助。 先来看自己的写法...2016-11-25
  • PHP去除回车换行符与敏感html标签

    我们经常会在提交表单时发现数据库中有一些看不到的回车换行了,这样如果js调用就会出问题,下面我来介绍在php过滤回车换行方法。 在unix世界换行就用/n来代替,但是wi...2016-11-25
  • php 清空字符串中的HTML标签

    要过滤字符串中所有的html标签有两种方法一种是我们自己写一个函数,用正则过滤,一个是用php自带函数strip_tags哦。 function clear_html_label($html) { $se...2016-11-25
  • php正则表达式过滤html标签属性

    过滤html标签在php中可以有内置的函数了,但它过滤的太干净了,我们就整理了一下些利用正则来过滤指定html标签的例子,具体如下所示。 采集的时候有时候需要过滤掉多余...2016-11-25
  • PHP:过滤html标签的函数

    过滤html标签在php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子。 php过滤html的函数: strip_tags(string)...2016-11-25
  • php截取html字符串自动补全html标签

    文章来总结一下关于利用php截取html字符串自动补全html标签,实际开发中会经常碰到,很多人直接先strip_tags过滤掉html标签,但是就只剩下纯文本了,可读性非常差,下面是一个...2016-11-25
  • 查找html中有id属性的html标签正则表达式

    本文章来给大家介绍查找html中有id属性的html标签正则表达式,有需要了解的朋友可进入参考。 查找html中有id属性的标签,说具体点就是尖括号<>中还有id=""的html标签...2016-11-25
  • php 过滤所有html标签

    首先我们推荐filter_sanitize_string ,filter_sanitize_string 过滤器去除或编码不需要的字符。 这个过滤器删除那些对应用程序有潜在危害的数据。它用于去除标签以及...2016-11-25
  • php 常用正则表达式 邮箱 用户名 密码 ip html标签

    用户名 /^[a-z0-9_-]{3,16}$/ 密码 /^[a-z0-9_-]{6,18}$/ 十六进制值 /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ 电子邮箱 /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ URL...2016-11-25
  • php 过滤非法字符 与过滤html js css a等html标签代码

    <form name="form1" method="post" action=""> <textarea name="content" cols="50" rows="10"></textarea> 内容 <input type="submit" name="Submit" val...2016-11-25
  • Andriod中TextView加载Html标签和加载带图片的标签

    下面我们来看一篇关于Andriod中TextView加载Html标签和加载带图片的标签的例子,希望这个例子能够为各位朋友带来帮助。 一、加载Html代码 String html="<a href=\"...2016-10-02