HTML标签及效果大全

<head>

<!--

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 框架//ZH" "http://www.w3. org/TR/html4/frameset.dtd"> “框架集”文件类型描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 严格//ZH" "http://www.w3. org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 过渡//ZH" "[6]">

HTML与XHTML都有三种标准风格：第一种称为过渡型(transitional),它允许使用废弃标记。

第二种称为严格型(strict),它禁止使用任何废弃的标记。

第三种是框架型(frameset),它允许使用废弃的标记和框架

-->

<title>html基本标签</title>

<!--

使用<meta>标签

（1）描述文档类型和字符编码

（2）描述搜索关键字和描述

-->

<!--浏览器图标

<!--让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。

<!--指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。

注意：必须使用GMT的时间格式(Wed, 26 Feb 1997 08:21:57 GMT)，或直接设为0(数字表示多少时间后过期)。

<!--blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果

<!--Duration表示滤镜特效的持续时间(单位：秒),Transition滤镜类型。表示使用哪种特效，取值为0-23

<!--name和http-equiv的区别

HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。

name是描述网页的，对应于Content（网页内容），以便于搜索引擎机器人查找、分类

（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。

-->

</head>

body的背景颜色为white 文本颜色为green 超链接颜色为black 已点击过的超链接颜色为red 点击中的超链接颜色为yellow

html标记大全参考手册

总类（所有html文件都有的）

文件类型: html（放在档案的开头与结尾）

文件主题: title （必须放在「文头」区块内）

文头: head（描述性资料，像是「<主题」）

文体: body（文件本体）

******************结构性定义（由浏览器控制的显示风格） ******************

标题 <H?></H?> （从1到6，有六层选择）

标题的对齐：align=left(左对齐)|center(右对齐)|right(居中对齐)

<div style="width:200px;height:200px;background:red">这是个层高度200px,宽度200px,背景色red</div>

层的对齐方式有left:左对齐，right：右对齐，center：居中对齐，justify：两端对齐</DIV>

引文区块

引文区块blockquote：之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间

请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。（通常会内缩）

</blockquote>

强调标签em：em标签 （通常会以斜体显示）

特别强调标签strong： strong标签 （通常会以加粗显示）

引文标签cite： <cite>cite标签：通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题</cite> （通常会以斜体显示）

码标签code： <code>code标签:用于表示计算机源代码或者其他机器可以阅读的文本内容</code> （显示原始码之用）

样本标签samp：

<samp>

标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。

标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签

</samp>

键盘输入kbd:键入 <kbd>quit</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单。正如你已经猜到的，它用来表示文本是从键盘上键入的。

览器通常用等宽字体来显示该标签中包含的文本。

变数标签var： <var>这是个变量</var>

定义标签dfn： <dfn>（有些浏览器不提供） </dfn>

地址标签address： <address>这是地址标签，自动换行了</address>

大字big： <big>字体加大</big>

小字small： 字体变细

******************与外观相关的标签（作者自订的表现方式） ******************

加粗标签b： 字体加粗

斜体标签i： 字体为斜体

下划线标签u： 加了下划线的（尚有些浏览器不提供）

贯穿线标签s： <s>贯穿线效果（尚有些浏览器不提供） </s>

下标标签sub： 我是下标

上标标签sup： 我是上标

打字机体标签tt： <tt>打印机体，用单空格字型显示（无论字体间有多少个空格，都只显示一个） </tt>

预定格式标签pre： <pre>保留文件中空格的大小</pre>

预定格式的宽度: <pre width="200px">以字元计算 </pre>

居中对齐标签center: <center>文字和图片都在浏览器中间显示</center>

闪耀标签blink: <blink>你会看见我像天上的星星一样，一闪一闪的。火狐浏览器支持，IE貌似不支持</blink>

字体大小标签：

1号字体

2号字体

3号字体

4号字体

5号字体

6号字体

7号字体

电子邮箱标签address：<address>qfxsxhfy@126.com</address>

<legend>这是个fieldset</legend>

**************

</fieldset>

****************** 连结与图形 ******************

超链接标签a： <a href="http://www.hao123.com">点我去hao123</a>

连结到锚点 <a href="url#***"></a>（如果锚点在另一个档案）

<a href="#hehe" >点我到最后的hehe</a> （如果锚点目前的档案）

连结到目的视框:

<a href="http://www.hao123.com" target="_self(默认。在相同的框架中打开被链接文档。)|_blank(在新窗口中打开被链接文档)

|_parent(在父框架集中打开被链接文档)|_top(在整个窗口中打开被链接文档)|framename(在指定的框架中打开被链接文档)"></a>

设定锚点: <a name="***">设定锚点通过a标签的name</a>

图形标签img： <img src="15.jpg" title="苹果" alt="苹果" width="100px" height="100px" />

取代文字 alt：如果没有办法显示图形则显示此文字

点选图usemap(点击这张图片，跳到map名为mymap指定的地方):

地图（描述地图）标签map:

</map>

段落标（区域）签area：<area shape="rect" coords=",,,," href="http://www.hao123.com|nohref" />

shape：圆形circ或circle，多边形poly或polygon，矩形rect或rectangle

coords：属性定义了客户端图像映射中对鼠标敏感的区域的坐标，格式为x1,y1,x2,y2,x3,y3

img属性：border,width,height,hspace,vspace 以px为单位

内嵌物件标签embed：ed可以用来插入各种媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等

embed属性：

自动播放：autostart=true|false

循环播放语法：loop=正整数|true|false

面板显示：hidden=true|flase

开始时间(该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放)：starttime=mm:ss（分：秒）

容器属性：height=# width=#

容器单位：units=pixels、en

console：一般正常面板；

smallconsole：较小的面板；

playbutton：只显示播放按钮；

pausebutton：只显示暂停按钮；

stopbutton：只显示停止按钮；

volumelever：只显示音量调节按钮。

对象名称：name="" title=""

前景色和背景色（第一个值为前景色，第二个值为背景色，中间用 | 隔开）：palette=color|color

***********************分隔********************************

段落标签p：我是一个段楼，前后有空行的

换行标签br：

文字部份对齐方式（与图形合用时）:

横线hr：<hr>

横线对齐方式属性：align="left|right|center"

横线厚度属性：size="?px"

横线宽度或比率宽度属性：width="?px|?%"

实线（没有立体效果） <hr noshade>

不可换行标签nobr:

**********************************

***********************列举、列表********************************

无次序式列举：ul-li

<ul>

</ul>

公布式列举:type="disc|circle|square"

<li type="circle">type="circle"</li>

<li type="square">type="square"</li>

</ul>

有次序式列举ol=li

<ol>

</ol>

数标型态TYPE=A|a|I|i|1

</ol>

起始数字

<ol>

</ol>

定义式列举,主要用于图文混排dl-dt-dd

<dl>

</dl>

表单式列举：menu-li

<menu>

</menu>

目录式列举：dir-li

<dir>

</dir>

*******************表单*******************

定义表单form：如果有文档上传加属性enctype="multipart/form-data",文本框只读用属性readonly="readonly"

普通文本框text：<input type="text" name="uname" value="张三" size="20" maxlength="16"/>

密码框password：<input type="password" name="pwd" value="abc"/>

单选框radio:<input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女 name相同表示属于同一组,checked="checked"表示选中

多项框checkbox：<input type="checkbox" name="interest" value="1" />看书 <input type="checkbox" name="interest" value="2" />打球 <input type="checkbox" name="interest" value="3" />旅游

文件选择框：<input type="file" name="filename" />

隐藏框hidden：<input type="hidden" name="id" />被隐藏了

日期选择框：<input type="date" name="date" />

颜色选择框：<input type="color" name="color">

数量选择框：<input type="number" name="num">

月份选择框：<input type="month" name="month" />

周次选择框：<input type="week" name="week">

<label for="uname">点我光标定位到右边文本框：</label><input type="text" name="uname" id="uname" size="20" maxlength="16"/>

提交按钮submit：<input type="submit" value="提交" />

普通按钮button：<input type="button" value="修改" />

重置按钮reset：<input type="reset" value="重置" />

下拉菜单select: (多选加属性 multiple) 选中用属性selected="selected"

</select>

文本域textarea：输入区换行方式 wrap="off|virtual|physical"

</form>

*******************表格*******************

表格属性：

border：表格标签

cellspacing：单元格与单元格之间的距离

cellpadding：单元格内容与单元格之间的距离

table tr td的对齐方式:

水平：align="left|right|center"

垂直：valign="top|middle|bottom"

td不换行属性: nowrap="nowrap"

背景色属性：bgcolor=""

合并列：colspan="数量"

合并行：rowspan="数量"

<caption>XXXXXXXXXXXXXXXX</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tbody>

<tfoot>

<th colspan="2">XXXXXXXXXXXXXXXXXXX</th>

</tfoot>

</table>

*******************框架*******************

***************************

</body>

</html>

HTML标签及效果大全相关推荐

织梦dede所有标签调用方法大全
2019独角兽企业重金招聘Python工程师标准>>> 织梦dede所有标签调用方法大全!非常实用! 关键描述调用标签: <meta name="keywords&q ...
基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
JS实现标签页效果(配合css)不同标签下对应不同div
显示页面tab.jsp <%@ page language = "java" import = "java.util.*" pageEnc ...
php标签调用,phpcms栏目标签调用代码大全
phpcms栏目标签调用代码大全 $CATEGORY[$catid][catid] 栏目id $CATEGORY[$catid][module] 栏目所在的模块 $CATEGORY[$catid][t ...
仅使用HTML和CSS实现的标签云效果
标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用.通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小. 来源于TagCrowd.com 我们 ...
用css和jquery实现标签页效果（一）
用css和jQuery实现一个简单的标签页效果,用css实现斜边导航的效果,除了ie6其他的浏览器都支持, 其效果如下 css样式: <style type="text/css ...
3D标签云效果的实现
一．关于3D标签云 TagCloudView是一个完全基于Android ViewGroup编写的控件,支持将一组View展示为一个3D标签云,并支持全方向滚动. GitHub中的链接地址:https ...
超酷的javascript文字云/标签云效果 - D3 Cloud
日期:2012-10-11 来源:GBin1.com 在线演示如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于 ...
实现JS标签切换效果【CSS图片切换】
运行代码尝试,我把整篇的CSS文件内容都弄上来了,难得去找具体内容了,反正能得到效果就可以了. 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

HTML标签及效果大全

HTML标签及效果大全相关推荐

最新文章

热门文章