HTML常用标签

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

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

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

先记一些个别例外的单闭合标签，例如：
        <meta />  设置页面信息的
        <br />      换行                  
        <hr />      水平线
        <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>    用于列出一段程序代码

html标签的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. FilterControl 显示时间并精确到时分秒的方法

  2. PostgreSQL入门

    这篇文章主要介绍我在最近工作中接触到的数据库PostgreSQL,做个入门记录,以便自己日后回顾. 1.下载安装,安装配置过程可以参考http://blog.chinaunix.net/uid-354 ...

  3. ClientScript.RegisterStartupScript 不起作用

    asp.net webform 使用 ClientScript.RegisterStartupScript 不起作用 form 加上 runat="server",ok

  4. c++ 面试注意的问题

    1.输入数据合法性检查 2.变量命名 3.边界数据的检查 4.函数名,递归的思想[尤其是树.链表] 企业喜欢的人:聪明 努力 基础好 面试时不要主动请求提示,做题要大胆地想,及时与面试官沟通,防止想很 ...

  5. js封装类

    1.闭包函数中定义基类,使用基类定义类方法 ;var Appkit = function() { //定义类 var obj = new Object(); // 定义方法 obj.isWeixin ...

  6. 安装VS2012以后打开office 2007 的任何程序都跳出VS2012配置界面的解决方案

    前两天闲来无事,下载了vs2012,打算学点mvc4的东西,装好以后,问题来了,打开word文档,直接弹出个windows正在配置vs2012的界面,等就等一下吧,结束以后还能正常看,结果谁知道,每次 ...

  7. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  8. [转]hibernateTools工具安装及使用总结（eclipse 3.6）

    转载地址:http://blueblood79.iteye.com/blog/773177 最近项目采用flex+spring+hibernate的框架开发,之前虽说有多年的Java开发经验了,但是一 ...

  9. 上传图片shell绕过过滤的几种方法

    一般网站图片上传功能都对文件进行过滤,防止webshelll写入.但不同的程序对过滤也不一样,如何突破过滤继续上传? 本文总结了七种方法,可以突破! 1.文件头+GIF89a法.(php)//这个很好 ...

  10. CSS选择器、标签，div的位置。

    今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...