当前位置：文档之家 › 常用的HTML标签和属性解释

常用的HTML标签和属性解释

  • 格式：doc
  • 大小：54.50 KB
  • 文档页数：18

常用的HTML标签和属性解释 基本结构标签: ,表示该文件为HTML文件 ,包含文件的标题,使用的脚本,样式定义等 ---,包含文件的标题,标题出现在浏览器标题栏中 ,的结束标志 ,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示. ,的结束标志 ,的结束标志 其它主要标签,以下所有标志用在中: ,链接标志,"…"为链接的文件地址 ,显示图片标志,"…"为图片的地址 ,换行标志 ,分段标志 ,采用黑体字 ,采用斜体字 ,水平画线 ,定义表格,HTML中重要的标志 ,定义表格的行,用在中 ,定义表格的单元格,用在中 ,字体样式标志 属性: 属性是用来修饰标志的,属性放在开始标志内. 例:属性bgcolor="BLACK"表示背景色为黑色. 引用属性的例子: 表示页面背景色为黑色; 表示表格背景色为黑色. 常用属性: 对齐属性,范围属性: ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度. ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度. ALIGN=RIGHT,右对齐. 色彩属性: COLOR=#RRGGBB,前景色,参考色彩对照表. BGCOLOR=#RRGGBB,背景色. 表示绝对居中. 表格标识的开始和结束. 属性: cellpadding=数值单位是像素,定义表元内距 cellspacing=数值单位是像素,定义表元间距 border=数值单位是像素,定义表格边框宽度 width=数值单位是像素或窗口百分比,定义表格宽度 background=图片链接地址,定义表格背景图 表格中一个表格行的开始和结束; 表格中行内一个单元格的开始和结束 属性: Colspan="",单元格跨越多列; Rowspan="",单元格跨越多行; Width="";定义表格宽度 Height="";定义表格高度 Align="";对齐方式 Valign=""; Border="",边框宽度; Bgcolor="",背景色; Bordercolor="",边框颜色; Bordercolorlight="",边框明亮面的颜色; Bordercolordark="",边框暗淡面的颜色; Cellpadding="",内容与边框的距离(默认为2); Cellspacing="",单元格间的距离(默认为2);

,分段标志 ,采用黑体字 ,采用斜体字

强制换行 文本标识的开始和结束 属性: face=字体 color=颜色 加粗文字标识的开始和结束 属性: style=font-size:40pt;,用样式表方式控制字体大小,这里是40点

段落标识, 空格符, 贴图标识 属性: src=../../图片链接地址,贴图标识必备属性 style=filter:Alpha(opacity=100,style=2); filter:样式表滤镜; Alpha:透明滤镜, opacity:不透明度100(0~100); style:样式2(0~3), rules="none"不显示内框" 多媒体文件标识 属性: SRC="../../FILENAME", 设定音乐文件的路径,文件类型除了可以播放.rm;.mp3;.wav等音频,还可播放.swf和.mov等视频. AUTOSTART=TRUE/FALSE, 是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为FALSE LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止. STARTIME="分:秒", 设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20 VOLUME=0-100, 设定音量的大小.如果没设定的话,就用系统的音量. WIDTH,HEIGHT, 设定控制面板的大小,都设为0可隐藏播放器 HIDDEN=TRUE, 隐藏控制面板 CONTROLS=CONSOLE/SMALLCONSOLE, 设定控制面板的样子, ,背景音乐标识,只能用于.wav和.mp3格式. 属性: LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止. 表单标签: 表格标识的开始和结束,表单的内容都放在这里. 下边的标签放在表单内: 下拉选择框 属性: Multiple,多选 ,大量文字输入的编辑块 属性: Cols="",行; Rows="",列; ,文本框 ,密码框 ,提交按扭 ,复选框 ,单选框 ,重置按扭 ,图片按扭 ,隐藏域 ,按扭 ,浏览文件 公共属性: Name=""; Value="" Size="" 框架标签: ...,定义框架. ,放在框架标签内,定义每个框架的内容. 属性: Cols="" Rows="" Frameborder="" Framespacing="" src="" Scrolling="",滚动条(No,Yes); Noresize,框加大小不可变; Marginhight="",高度空余空间; Marginwidth="",宽度空余空间; Target="",目标框架. 其他标签: ,背景音乐; Src="" Loop="",循环次数; ,媒体播放块; Src="" Loop="",循环次数; ,滚动部分; 属性: Bgcolor="" Behavior,设置或获取文本如何在字幕中滚动. Direction="",滚动方向; Height="" Width="" Loop="",环次数; scrollAmount="",设置或获取介于每个字幕绘制序列之间的文本滚动像素数. scrollDelay="",设置或获取字幕滚动的速度. scrollHeight="",获取对象的滚动高度; scrollLeft="",设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离. scrollTop="",设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离. trueSpeed="",设置或获取字幕的位置是否使用scrollDelay和scrollAmount属性计算,已过的实际时间来自于时钟计时. ,注释标记,在""之间的内容将不在浏览器中显示. -- 基本标签: ,创建一个HTML文档; ,设置文档标题和其它在网页中不显示的信息; ,设置文档的标题; ,最大的标题; ,预先格式化文本; ,下划线 ,黑体字; ,斜体字; ,打字机风格的字体; ,引用,通常是斜体; ,强调文本(通常是斜体加黑体); ,加重文本(通常是斜体加黑体); ,设置字体大小从1到7,颜色使用名字或RGB的十六进制值; ,基准字体标记; ,字体加大; ,字体缩小; ,加删除线;

合集下载

html5标签的作用

html5标签的作用

html5标签的作用HTML5标签是一种用于标记网页结构的语言，它提供了一系列的标签，用于定义网页的不同部分和功能。

这些标签可以使网页结构清晰，易于阅读和维护。

本文将介绍一些常用的HTML5标签及其作用。

一、标题标签HTML5提供了一组用于定义标题的标签，包括h1、h2、h3、h4、h5和h6。

这些标签用于定义不同级别的标题，从h1表示最高级标题，到h6表示最低级标题。

标题标签有助于提供页面结构，并帮助搜索引擎和用户理解页面内容的重要性和层次结构。

二、段落标签HTML5的段落标签用于定义文本的段落结构。

常用的段落标签包括p、pre和blockquote。

p标签用于定义一个段落，pre标签用于定义预格式化文本，blockquote标签用于引用文本。

段落标签有助于提高文本的可读性和可维护性。

三、链接标签HTML5的链接标签用于定义超链接，其中最常用的标签是a标签。

a标签用于创建一个指向其他页面、相同页面的不同部分或外部资源的链接。

a标签具有href属性，用于指定链接的目标地址。

链接标签帮助用户导航到其他页面或位置，并在网页之间创建关联。

HTML5提供了有序列表ol、无序列表ul和定义列表dl三种列表标签。

ol标签用于创建有序列表，ul标签用于创建无序列表，dl标签用于创建定义列表。

列表标签有助于组织和呈现信息，并提供清晰的结构。

五、表格标签HTML5的表格标签用于创建表格结构，其中最常用的标签是table、tr和td。

table标签用于创建表格，tr标签用于创建表格的行，td 标签用于创建表格的单元格。

表格标签可以用于展示结构化的数据，并提供清晰的布局。

六、表单标签HTML5的表单标签用于创建交互式表单，其中最常用的标签是form、input和button。

form标签用于创建表单，input标签用于创建输入字段，button标签用于创建按钮。

表单标签可以用于收集用户输入的数据，并将其提交到服务器进行处理。

html代码编写

html代码编写

HTML代码编写1. 什么是HTML代码HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。

它使用标签和属性来描述网页的结构和内容。

通过编写HTML代码，我们可以创建网页的标题、段落、链接、图像等元素，并对它们进行样式和布局的控制。

2. HTML基本结构HTML代码由标签、元素和属性组成。

标签用于定义元素的开始和结束，元素则包含了标签所描述的内容。

HTML文档的基本结构如下：<!DOCTYPE html><html><head><title>页面标题</title></head><body><!-- 页面内容 --></body></html>•<!DOCTYPE html>声明文档类型为HTML5，以告诉浏览器使用HTML5解析文档。

•<html>标签是HTML文档的根元素。

•<head>标签包含了文档的元数据，如标题、字符编码等。

•<title>标签定义了网页的标题，将显示在浏览器的标题栏或标签页上。

•<body>标签包含了网页的可见内容。

3. 常用HTML标签3.1 标题标签HTML提供了六个级别的标题标签，用于定义不同级别的标题。

例如：<h1>这是一级标题</h1><h2>这是二级标题</h2>...<h6>这是六级标题</h6>3.2 段落标签段落是网页中常见的文本元素，可以使用<p>标签来定义段落。

例如：<p>这是一个段落。

</p>3.3 链接标签链接用于在不同网页之间进行跳转，可以使用<a>标签来创建链接。

例如：<a href="">这是一个链接</a>3.4 图像标签图像可以使用<img>标签来插入到网页中。

html标签属性大全

html标签属性大全

html标签大全一、文字1.标题文字<h#>..........</h#> #=1~6；h1为最大字，h6为最小字2.字体变化<font>..........</font>【1】字体大小<font size=#>..........</font> #=1~7；数字愈大字也愈大【2】指定字型<font face="字体名称">..........</font>【3】文字颜色<font color=#rrggbb>..........</font>rr：表红色（red）色码gg：表绿色（green）色码bb：表蓝色（blue）色码rrggbb也可用6位颜色代码数字3.显示小字体<small>..........</small>4.显示大字体<big>..........</big>5.粗体字<b>..........</b>6.斜体字<i>..........</i>7.打字机字体<tt>..........</tt>8.底线<u>..........</u>9.删除线<strike>..........</strike>10.下标字<sub>..........</sub>11.上标字<sup>..........</sup>12.文字闪烁效果<blink>..........</blink>13.换行（也称回车）<br>14.分段<p>15.文字的对齐方向<p align="#"> #号可为left：表向左对齐（预设值）center：表向中对齐right：表向右对齐P.S.<p align="#">之后的文字都会以所设的对齐方式显示，直到出现另一个<p align="#">改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。

常见HTML标记及含义

常见HTML标记及含义

一、html基础知识二、html结构<html><head><title>网络0801</title></head><body></body></html>基本标记.<p></p> 段落<br> 换行三、head内的标记1、title 标题标记功能：标题控制使用：设置标题格式：<title>标题内容</title>实例：添加一个标题2、base 基底网址标记功能：文档的基本网址，其他为与其相对的网址使用：插入栏/html/文件头/基础格式：<base href="" target="父(_P)" />实例：设置后，在文章中添加一个相对路径和绝对路径4、media 原信息标记功能：提高被搜索引擎搜索到的可能性使用：插入栏/html/文件头/meta【name-搜索引擎http-equiv-设置浏览器检查信息，控制网页精确显示】格式：<meta name="author" content="宋赟中" />（作者）<meta name="keywords" content="网络，计算机学校" />（关键字）<meta name="description" content="忙忙忙忙忙忙忙忙忙忙" />（说明）<meta name="build" content="建设时间"/><meta name="reply-to" content="联系人邮箱"/><meta name="copyright" content="版权说明"/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />（字符集）<meta name=<meta http-equiv="refresh" content="22" />（刷新）<meta http-equiv="windows-target" content="_top" />（强制独立窗口打开）<meta http-equiv="pragma" content="No-cach />（页面不允许缓存）实例：设置后，会提高搜索引擎的命中率四、body标记1、bgcolor 背景色2、background 背景图像3、text 文字颜色4、bgproperties 背景滚动方式fixed 代表固定5、link 默认链接颜色6、alink 鼠标点击时的颜色7、vlink 点击后的颜色8、topmargin 页面上边距9、leftmargin 页面左边距五、注释语句1、 <comment></ comment >2、<!-- -->3、<plaintext> 将原代码显示在浏览器中4、<ruby> ssssssssssss<rt>ddddd</rt></ruby> rt的注释内容出现在ruby上方5、、/* */ css注释六、文本标记1、<h数字></h数字> 标题字标记包含对齐（align）属性2、<strong> </strong> 加粗标记3、<em></em>倾斜4、<s></s> 删除线5、<u></u> 下划线6、< sup ></ sup > 上标7、< sub ></ sub > 下标8、< big ></ big > 大字号7、< small ></ small > 小字号8、<font face="字体" size="字号" color="颜色"> </font> 文字标记9、<p></p> 段落标记具备align属性10、<pre> </pre> 预格式化（使得代码与页面的显示一致）11、<center></center> 居中12、<hr align="对齐" width="宽" size="高" noshade="阴影" color/> 水平线13、<kbd> </kbd> 在浏览器中（如标签后）显示的信息14、<address> </address>在文档中显示作者的信息15、<tt> </tt> 打字字体16、<ul> 项目列表<li type="circle">fdfsdfs</li> 空心圆<li type="disc">fsfsfs </li> 圆<li type="square">kjkjhkhj</li> 方</ul>17、<ol type="1" start="2"> 编号列表，type代表显示什么，start代表从那开始<li>fdfsdfs</li><li>fsfsfs </li></ol></body>18、<dl> 定义列表（产生类似文字说明的效果）<dt>fdfsdfs</dt> 内容<dd>fsfsfs </dd> 说明<dt>kjkjhkhj</dt><dd>hfhfhfhfh</dd></dl>19、<ol> 列表嵌套（选中内容，缩进）<li>dadasd</li><li>adsasdsa<ol><li>dasda</li><li>sdaad</li></ol></li></ol>七、图片标记1、<img src="banner资料.jpg" alt="aaa" width="100" height="200" hspace="2" vspace="1" border="2" align="middle" lowsrc="../images/cpfl_04.gif" longdesc="" />Src 图片文件的路径alt 说明文字width 宽度height 高度hspace 水平边距vspace 垂直边距border 边框宽度align 文字环绕lowsrc 低解析度源文件2、<br clear="left" />代码加到对应前边可以取消环绕3、<img src="../images/未标题-1_03.gif" usemap="#Map" /> 应用区域<map name="Map" id="Map"> 使用热点<area shape="circle" coords="81,54,16" href="#" /> 定义热点区</map>Cords 区域边界href 链接shape（热点类型）circle圆rect 矩形poly 多边形主要用于电子地图和导航条八、链接1、<a href="" target="_parent" name="链接名" title="链接提示文字">fhgfhf</a> href 链接target 打开方式name 连接名title 链接提示文本链接（）2、<a name="mm" id="mm"></a> 锚点链接3、<a href="maileto:**********?subject=意见&cc=***********&bcc=**********">hkhjk</a>Subject 标题cc 抄送bcc 秘抄送九、表格1、基本标记<table width="56%" height="56" border="1" align="center" cellpadding="2" cellspacing="3" bordercolor="#FF00FF" background="file:///C|/Documents and Settings/Administrator/桌面/html/banner资料.jpg" bgcolor="#00FFFF" summary="这是内部资料" > 表格标记<caption align="top"> 标题中华网</caption><tr align="center" valign="middle" bordercolordark="#9900FF" bordercolorlight="#FF0000" > 行标记<th width="50%" height="25">&nbsp;</th> 单元格表头<td width="50%" nowrap="nowrap" bordercolor="#00FFFF" background="html/banner资料.jpg" bgcolor="#FF00FF" >&nbsp;</td> 单元格标记width 宽height 高nowrap 不换行</tr><tr><td height="26">&nbsp;</td><td>&nbsp;</td></tr></table><table width="56%" height="84" border="1" cellpadding="2" cellspacing="3" summary="这是中华网的内部资料"> 表格标记<caption align="top"> 说明中华网</caption><tr> 行标记<th width="36%" height="22">dsds</th> 标题单元格标记<td colspan="2">dsddsd</td> 单元格标记（跨列合并）</tr><tr><td height="22">ds</td> height高<td width="19%">sd</td> width 宽<td width="45%" rowspan="2">dsddsd</td> 单元格标记（跨行合并）</tr><tr><td height="22">ds</td><td>sd</td></tr></table>Width 表格宽度border 边宽cellspacing 间距cellpadding 填充bordercolor 边框颜色background 背景图片bgcolor 背景色bordercolorlight 表格左上单元格右下bordercolordark 表格右下单元格左上frame 外部边框显示样式above（上）below（下）border（全显示）hisdes（上下）lhs（左）rhs（右）void（不显示）vsides（左右）rules 内部边框显示样式all（所有）cols（行）groups（行列间）none（不显示）rows（列）十、表单1、<form action="" method="get">具体表单</form> 表单标记2、<label>aa 标签/单行文本<input name="textfield" type="text" value="" size="2" maxlength="4" /> 文本</label><textarea name="textfield2" cols="2" rows="4" wrap="virtual">mmmmmmmmmm</textarea><input name="textfield3" type="password" value="123" size="2" maxlength="3" />Input（单行）：size 字符个数maxlength 最大长度value 初始值type ：text（单行文本）password（密码文本）file（文件域）radio（单选）checkbox（多选）submit（按钮）image（图像域）hidden（隐藏域）button（无）reset（重设）submit（提交）当选组：其实就是把多个当选按钮放在一个表单内标签：<label></label>对表单内容的说明3、textarea（多行）：cols 个数rows 行数wrap 超过处理多行文本4、<select name="menu1" size="1" multiple="multiple" 菜单名size(列表）multiple(允许多选) onchange="MM_jumpMenu('parent',this,0)"> 如果出现代表跳转<option value="">1</option> 菜单项目value如果是跳转代表超链<option selected="selected">2</option> selected（已选中）<option>3</option></select>跳转和列表的区别：都是菜单，不同的是跳转多了一个超级链接的功能十一、框架1、<frameset rows="400,200" cols="*" framespacing="2" frameborder="yes" border="2" bordercolor="#9900FF"> 框架集<frame src="UntitledFrame-2.html" name="topFrame" frameborder="yes" scrolling="No" noresize="NORESIZE" marginwidth="2" marginheight="2" bordercolor="#FF00FF" id="topFrame" /> 框架<frame src="UntitledFrame-3.html" name="bottomFrame" frameborder="no" scrolling="yes" noresize="noresize" id="bottomFrame" />Frameset：rows（第一行框架的高度，第二行的高度）framespacing 边框高度frameborder 是否有边框border 边框大小bordercolor 边框色Frame：src（文件）scrolling（滚动方式）noresize（不能调整大小）marginwidth （边界宽度）marginheight（边界高度）2、<iframe src="file:///C|/Documents and Settings/Administrator/桌面/Untitled-1.html" width="200" height="200" name="22" align="left" frameborder="1" scrolling="yes" marginheight="2" marginwidth="2"></iframe>Src 原文件width 宽height 高name 名称align 对齐frameborder 边框是否显示scrolling 滚动方式marginheight 边缘宽度marginwidth 边缘高度在做框架时，如果想在框架中显示输入target十二、层<div id="Layer1"></div><style type="text/css"><!--#Layer1 {position:absolute（绝对）/fixed/inherit/relative（相对与其他元素）/static; 定位left:153px; 左坐标top:41px; 顶坐标width:90px; 宽height:82px; 高z-index:1; 层数background-image:url(file:///C|/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/html/ba nner%E8%B5%84%E6%96%99.jpg); 背景图片background-color: #FF00FF; 背景色overflow: scroll; 溢出处理}--></style>十二、CSS（一次套用，多次使用；语法简单；丰富效果）1、定义（外部）.bb（选择符）{ 类font-size（属性）: larger（值）; 声明font-weight: lighter;}Body，h1,h2 { 标签声明内容}#aa { ID声明内容}a:link { 伪标签组声明内容}2、使用（外部）1、附加：<link href="文件路径el="stylesheet" type="text/css" /> 标签类自动生效2、使用：<p class="bb"> hfhfh </p> 类3、套用：<p id="aa">fhfhfhf</p> ID3、定义（内部）<style type="text/css">定义内容</style>或标签中直接使用style属性多个；隔开4、使用（内部）同上如果出现多个定义相同属性，用，隔开5、值时间：1m=1000ms长度：px（像素），pt（点1/72英寸），cm，mm，in（英寸），%颜色：#rrggbb，#rgb，rgb（a，a，a）rgb（a%，a%，a%）url：url（“域名”）6、类型font-family: "宋体"; 字体------类型font-size: 36px; 字号font-style: oblique; 字类型line-height: 20px; 行高font-weight: bolder; 字宽font-variant: normal; 变体text-transform: capitalize; 文本样式color: #000000; 颜色text-decoration: underline overline line-through blink; 大写样式background-attachment: scroll; 附件--------背景background-color: #FF00FF; 背景色background-image: url(html/banner%E8%B5%84%E6%96%99.jpg); 背景文件background-repeat: repeat; 水平位置background-position: left bottom; 垂直位置letter-spacing: 20em; 字母间距------区块text-align: center; 文本对齐text-indent: 2px; 文字缩进vertical-align: baseline; 垂直对齐word-spacing: 10em; 单词间距white-space: nowrap; 空格display: table-row-group; 显示border: 10px 10 10; --------方框margin: 10px; 边界padding: 10px; 填充clear: both; 清楚float: right; 浮动height: 100px; 高width: 100px; 宽border: 20px solid #FF0000 边框（宽度/样式/颜色）-边框list-style-position: outside; 位置----------列表list-style-image: url(html/banner%E8%B5%84%E6%96%99.jpg); 图片list-style-type: square; 类型overflow: scroll; 溢出处理--------定位position: absolute; 类型visibility: visible; 显示z-index: auto; 层数height: 20px; 高width: 20px; 宽left: 10px;top: 10px;right: 10px;bottom: 10px;clip: rect(10px,10px,10px,10px); 裁剪十三、Javascript1、行为原理：先定义一个Javascript函数，在具体对象上应用A、定义<script type="text/JavaScript"> 使用脚本，类型为Javascriptfunction MM_popupMsg(msg) { //v1.0 定义函数，函数名为MM_popupMsg(msg) alert(msg);}</script><a href="#"><img src="html/banner资料.jpg" onclick="MM_popupMsg('本图片禁止下载！')" /></a> 使用函数，时间=“函数名（参数）”。