网页制作标签大全
- 格式:doc
- 大小:84.50 KB
- 文档页数:16
1、网页头部标题Index页面标题<title> {dede:global.cfg_webname/} </title>子页页面标题<title> {dede:field.title/}_{dede:global.cfg_webname/} </title>2、导航栏‘首页’项href 的织梦标签<a href=" {dede:global.cfg_webnameurl/} /cms " > //cms 在后台系统设置里面找到3、面包屑导航代码:<span class="fr prp">当前位置:{dede:field name='position'/} </span>4、CSS 引用织梦内部相对路径<link href=" {dede:global.cfg_templets_skin/}/ css/common.css" rel="stylesheet" type="text/css" />其中{dede:global.cfg_templets_skin/}/为织梦定义的内部样式相对路径需添加在相应位置5、img 的相对路径<img src="{dede:global.cfg_templets_skin/}/images/img_banner1.png"alt="实验室搅拌器荣获国家三一产品" />其中dede:global.cfg_templets_skin/}/ 为织梦内部定义的网页中图片的相对路径需添加在每一个图片前面可以在dreamweaver 中用ctrl+ F 然后进行全部替换6、头部、底部制作成单独的页面时的引用语句{dede: include filename="head.html" /}当把页面头部、底部制作成单独的页面时可以把它们添加到别的网页相应位置已达到多次的调用7、导航栏的循环输出与最后一个项目的后面竖线的消除{dede:channel type='top' }<li [field:global name='autoindex' runphp='yes'] if (@me==6){ @me= 'class="lineNone" ';}else{@me='';}[/field:global]><a href="[field:typeurl/]" title="[field:typename/]">[field:typename/]</a>{/dede:channel}其中A{dede:channel type='top' }与{/dede:channel}成对出现用来表示导航条然后进行一次循环输出每一项其中需type = top 表示是顶级导航条B <a href="[field:typeurl/]" title="[field:typename/]">[field:typename/]</a>[field:typeurl/] 表示为每一项导航条索对应的链接位置[field:typename/] 表示为每一项导航条的名字C [field:global name='autoindex' runphp='yes'] if (@me==6){ @me='class="lineNone" ';}else{ @me ='';}[/field:global] 表示为导航条最后一项右边多出一个竖线进行判断然后引用CSS样式linenone 取消竖线8、首页中每一块的显示标签arclist{dede:arclist titlelen=42 row=5 typeid='13' }<!-- row=5 typeid='13'必须写说明调用的位置--> <li> <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a><span class="fr">[[field:pubdate function="MyDate('m-d',@me)"/]] </span> </li>{/dede:arclist}typeid='13' 说明该块所属的导航栏属于哪一项必须填写9、关于客户案例最下面一条信息底部多出一条细线的解决办法代码:{dede:arclist typeid='5' row='2' titlelen = '10' infolen='20'}<li [field:global name='autoindex' runphp='yes']if(@me==2){@me=" class='borderNone'";}else{@me='';}[/field:global]> // 此处为解决多出的一条线的方法<a href="[field:arcurl/]" class="fl" title=""><img src="[field:litpic/]" width="116" height="80" alt="" /></a><p class="fr"> <strong><a href="[field:arcurl/]"> [field:title/]...</a></strong><br />[field:description function='cn_substr(@me,80)'/] // 解决内容的现实字数问题</p><div class="cl"></div></li>{/dede:arclist}10、文章详细页列表页下面的内容分篇效果代码:<div class="dede_pages"><ul class="pagelist">{dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="2"/} </ul><div class="cl"></div></div>【织梦代码】{dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="2"/}CSS样式:.dede_pages{text-align:center;}.dede_pages ul{float:left;padding:12px 0px 12px 16px;}.dede_pages ul li{float:left;font-family:Tahoma;line-height:17px;margin-right:6px;border:1px solid #E9E9E9;padding:2px 4px 2px;}.dede_pages ul li a{float:left;/*padding:2px 4px 2px;*/color:#555;display:block;}.dede_pages ul li a:hover{color:#690;text-decoration:none;/*padding:2px 4px 2px;*/}.dede_pages ul li.thisclass,.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{background-color:#F8F8F8;padding:2px 4px 2px;font-weight:bold;}.dede_pages .pageinfo{/*line-height:21px;padding:12px 10px 12px 16px;*/color:#999;}.dede_pages .pageinfo strong{color:#555;font-weight:normal;margin:0px 2px;}11、文章详细页下面的分篇效果代码:<div class="pages"><p>{dede:prenext get='pre'/}</p> //上一页织梦专用代码<hr/><p>{dede:prenext get='next'/}</p> //下一页织梦专用代码</div>CSS样式代码:.pages { margin:20px 10px;}.pages p{ margin-left:0; font-size:14px;}12、文章列表效果代码:<div class="pagenewsList"><ul>{dede:list pagesize=4 } // pagesize=4 含义是一个页面上出现4条新闻如上所示<li><p><a href="[field:arcurl/]">[field:title/]</a><span class="fr">[[field:pubdate function="MyDate('Y-m-d',@me)"/]]</span></p>//[field:title/] 表示新闻内容span中包含的是新闻右端的时间</li>{/dede:list}</ul><div class="cl"></div></div>CSS样式:.pagenewsList ul li { line-height:30px; border-bottom:1px dotted #666; background:url(../images/icon_pageLeft.png) no-repeat left center; padding-left:18px;} //background 表示的是新闻左端的小图标li 的背景的形式出现.pagenewsList ul li p span{ padding-right:10px;}13、针对栏目“关于我们”是单页面进行如下设置:注意:单页页面高级选项里面只需设置封面模板即可单页里面的内容一般不会改动所以添加在栏目内容(源码)中然后在页面中相应位置调用用代码{dede:field.content/}即可14、建立“在线留言”栏目所需的表单A 登陆后台核心→频道模型→自定义表单→增加新的自定义表单→自定义表单名称→确定B 选中刚才建立的表单管理选框里面的更改添加新字段然后表单提示文字:/字段名称:/数据类型:/默认值: 依次填写最后确定这样建好一个字段仿照上面再次建立别的字段C 建好字段之后点击确定然后里面点击前台预览此时会生成一个页面D 页面生成后点击右上角发布信息会出现所建立的所有字段E 然后查看网页源代码找到整个表单的代码复制到相应的模板的表单位置即可15、网页底部的友情链接的更改把代码<ul><li><a href=" /">河南做网站</a></li><li><a href="/">郑州做网站</a></li> ......... 后面有若干个<li> 。
html标签大全HTML标签大全。
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。
在HTML中,标签是用来定义网页结构和内容的。
本文将介绍一些常用的HTML 标签,以及它们的用法和示例。
1. 文本标签。
`<h1>`~`<h6>`,定义标题,数字表示标题的级别,从大到小依次递减。
`<p>`,定义段落。
`<strong>`,定义加粗文本。
`<em>`,定义斜体文本。
`<u>`,定义下划线文本。
`<br>`,定义换行。
2. 链接标签。
`<a>`,定义超链接,href属性指定链接的地址。
`<img>`,定义图像,src属性指定图片的地址。
3. 列表标签。
`<ul>`,定义无序列表。
`<ol>`,定义有序列表。
`<li>`,定义列表项。
4. 表格标签。
`<table>`,定义表格。
`<tr>`,定义表格行。
`<td>`,定义表格数据单元格。
5. 表单标签。
`<form>`,定义表单,action属性指定表单提交的地址。
`<input>`,定义输入框,type属性指定输入框的类型(文本框、密码框、复选框等)。
`<select>`,定义下拉框。
`<textarea>`,定义多行文本输入框。
`<button>`,定义按钮。
6. 多媒体标签。
`<audio>`,定义音频播放器。
`<video>`,定义视频播放器。
`<iframe>`,定义内联框架,用于嵌入其他网页。
7. 其他标签。
`<div>`,定义文档中的块级元素。
`<span>`,定义文档中的行内元素。
`<meta>`,定义网页的元数据,如字符集、关键词等。
文字排版☞<p>:段落标记1)align属性:对齐。
取值left、center、right☞<br>:强制换行标记☞<hx>:x=1~6,六级标题字体标记1)align属性:同上。
☞<pre>:预排版标记☞<center>:居中标记☞<font>:文字标记1)color属性:文字颜色2)size属性:文字大小3)face属性:文字类型滚动字幕效果☞<marquee>标记1)bgcolor属性:设置滚动字幕背景色【bgcolor=#n】2)direction属性:设置滚动方向。
【取值left/right/up/down 】3)behavior属性:设置滚动方式。
【取值scroll/slide/alternate】4)width属性:设置滚动字幕的宽度【n】5)height属性:设置滚动字幕的高度【n】6)hspace属性:设置水平边距【n】7)vspace属性:设置垂直边距【n】8)scrollamount属性:设置滚动速度。
【一般值为3左右,默认6】9)scrolldelay属性:设置滚动延时。
【默认为0,单位毫秒】10)loop属性:设置滚动次数。
【取值-1为无限循环】11)onmouseover:设置鼠标经过停止滚动,【取值stop()】12)onmouseout:设置鼠标离开开始滚动,【取值start()】☞各参数的含义1)align:是设定活动字幕的位置,除了居左、居中、居右三种位置外,又增加靠上(top)和靠下(bottom)两种位置。
2)bgcolor:用于设定活动字幕的背景颜色,可以使用英文的单词也可以是十六进制数的。
3)direction:用于设定活动字幕的滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。
4)behavior="scroll":表示由一端滚动到另一端;5)behavior="slide":表示由一端快速滑动到另一端,且不再重复;6)behavior=“alternate”表示在两端之间来回滚动。
网页设计中常见HTML标签(红色部份为代码、黑色为注释)HTML:全名是HyperText MarkupLanguage 是一种超文本标识语言,是用来描述WWW上超文本文件的。
基本标签<html></html>创建一个HTML文档<head></head>设置文档标题以及其他不在WEB网页上显示的信息<body></body>设置文档的可见部分注释:起始标签<head>结束标签</head>标题标签<title></title>将文档的题目放在标题栏中注释:标题起始标签<title>标题结束标签</title>文档整体属性<body bgcolor=?>或者<body background=?>设置背景颜色,使用名字或十六进制值或者设置背景图片<body text=?>设置文本文字颜色,使用名字或十六进制值<body link=?>设置链接颜色,使用名字或十六进制值<body vlink=?>设置已使用的链接的颜色,使用名字或十六进制值<body alink=?>设置正在被击中的链接的颜色,使用名字或十六进制值注释:<body bgcolor="bule">或者<body bgcolor=十六进制>注意无引号也可以有引号其他HTML标签也类似文本标签<pre></pre>创建预格式化文本<h1></h1>创建最大的标题<h6></h6>创建最小的标题<b></b>创建黑体字<i></i>创建斜体字<tt></tt>创建打字机风格的字体<cite></cite>创建一个引用,通常是斜体<em></em>加重一个单词(通常是斜体加黑体)<strong></strong>加重一个单词(通常是斜体加黑体)<font size=?></font>设置字体大小,从1到7<font color=?></font>设置字体的颜色,使用名字或十六进制值注释:链接<a href="URL"></a>创建一个超链接<a href="mailto:EMAIL"></a>创建一个自动发送电子邮件的链接<a name="NAME"></a>创建一个位于文档内部的靶位<a href="#NAME"></a>创建一个指向位于文档内部靶位的链接注释:链接起始标签标签<a href="网址或者文件">欢迎光临我的主页(在浏览器中看到的蓝色下划线部份)链接结束标签</a>格式排版<p>创建一个新的段落<p align=?>将段落按左、中、右对齐<br>插入一个回车换行符<blockquote></blockquote>从两边缩进文本<dl></dl>创建一个定义列表<dt>放在每个定义术语词之前<dd>放在每个定义之前<ol></ol>创建一个标有数字的列表<li>夹在上两个中间使用注意无</li><li type=字母> 放在每个数字或字母列表项之前,并加上一个数字或字母<ul></ul>创建一个标有圆点的列表<li>放在每个圆点列表项之前,并加上一个圆点<div align=?>用来排版大块HTML段落的标签,也可用于格式化注释:段落标签<p>段落结束标签</p>段落左对齐属性如:<p align="left">注释:居中对齐center右对齐right 图形元素<img src="name">添加一个图像<img src="name" align=?>排列对齐一个图像:左中右或上中下<img src="name" border=?>设置围绕一个图像的边框的大小<hr>加入一条水平线<hr size=?>设置水平线的大小(高度)<hr width=?>设置水平线的宽度(百分比或绝对像素点)<hr noshade>创建一个没有阴影的水平线注释:图像标签<img border=5 src="ABC.jpg">给图像加边框用于给图片做链接时候才显示,值为0-99图片居中在多数浏览器中应该这样写:<p align=center><ima src="name">表格<table></table>创建一个表格<tr></tr>开始表格中的每一行<td></td>开始一行中的每一个格子也就是列<th></th>设置表格头通常使用黑体居中文字的格子注释:表格属性<table border=#>设置围绕表格的边框的宽度<table cellspacing=#>设置表格格子之间空间的大小<table cellpadding=#>设置表格格子边框与其内部内容之间空间的大小<table width=#or%>设置表格的宽度-用绝对像素值或文档总宽度的百分比<tr align=?>or<td align=?>设置表格格子的水平对齐(左中右)<tr valign=?>or<td valign=?>设置表格格子的垂直对齐(上中下)<td colspan=#>设置一个表格格子应跨占的列数(缺省为1)<td rowspan=#>设置一个表格格子应跨占的行数(缺省为1)<td nowrap>禁止表格格子内的内容自动断行回卷注释:窗框<frameset></frameset>放在一个窗框文档的<body>标签之前,也可以嵌在其他窗框文档中<framesetrows="value,value">定义一个窗框内的行数,可以使用绝对像素值或高度的百分比<framesetcols="value,value">定义一个窗框内的列数,可以使用绝对像素值或宽度的百分比<frame>定义在不支持窗框的浏览器中显示什么提示注释:框架起始标签<frameset>框架结束标签</frameset>窗框属性<frame src="URL">规定窗框内显示什么HTML文档<frame name="name">命名窗框或区域以便别的窗框可以指向它<frame marginwidth=#>定义窗框左右边缘的空白大小,必须大于等于1<frame marginheight=#>定义窗框上下边缘的空白大小,必须大于等于1<frame scrolling=VALUE>设置窗框是否有滚动栏,其值可以是"yes","no","auto",缺省时一般为"auto"<frame noresize>禁止用户调整一个窗框的大小注释:表单对于功能性的表单,一般需要运行一个CGI小程序,HTML仅仅是产生表单的表面样子。
html标签及属性⼤全(⽹页制作必备)总类(所有html⽂件都有的)--------------------------------------------------------------------------------⽂件类型 <html></html> (放在档案的开头与结尾)⽂件主题 <title></title> (必须放在「⽂头」区块内)⽂头 <head></head> (描述性资料,像是「主题」)⽂体 <body></body> (⽂件本体)结构性定义(由浏览器控制的显⽰风格)--------------------------------------------------------------------------------标题 <h?></h?> (?表⽰从1到6,有六层选择)数值越⾼字越⼩标题对齐 <h? align=left|center|right></h?> 左对齐、居中对齐、右对齐区分 <div></div>区分对齐 <div align=left|right|center|justify></div> 左对齐、右对齐、居中对齐、两端对齐引⽂区块 <blockquote></blockquote> (通常会内缩)斜体 <em></em>加粗 <strong></strong>引⽂ <cite></cite> (通常会以斜体显⽰)码 <code></code> (显⽰原始码之⽤)样本 </samp>表⽰⼀段⽤户应该对其没有什么其他解释的⽂本。
段落标记<P>段落标记的对齐属性ALIGN换行标记<BR>不换行标记<NOBR>在<NOBR>标记中强制换行标记<WBR>预格式化标记<PRE>居中标记<CENTER>缩排标记<BLOCKQUOTE>水平线标记<HR>插入水平线<HR>水平线宽度属性WIDTH水平线高度属性SIZE水平线去掉阴影属性NOSHADE水平线颜色属性COLOR水平线排列属性ALIGN忽视html标签标记<PLAINTEXT>忽视html标签标记<XMP>在文字上方标注说明标记<RT>、<RUBY>缩写文本<abbr>首字母缩略词<acronym>指定文字书写方向<bdo>短引用<q>引用文本<cite>定义条款<dfn>文件类型 <HTML></HTML> (放在档案的开头与结尾)文件主题 <TITLE></TITLE> (必须放在「文头」区块内)文头 <HEAD></HEAD> (描述性资料,像是「主题」)文体 <BODY></BODY> (文件本体)------------------------------------------------------------结构性定义(由浏览器控制的显示风格)标题 <H?></H?> (从1到6,有六层选择)3.0 标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?>3.0 区分 <DIV></DIV> 当要在许多段落中设置不同的对齐方式时常使用3.0 区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>引文区块 <BLOCKQUOTE></BLOCKQUOTE> (通常会内缩)强调 <EM></EM> (通常会以斜体显示)特别强调 <STRONG></STRONG> (通常会以加粗显示)引文 <CITE></CITE> (通常会以斜体显示)码 <CODE></CODE> (显示原始码之用)样本 <SAMP></SAMP>键盘输入 <KBD></KBD>变数 <VAR></VAR>定义 <DFN></DFN> (有些浏览器不提供)地址 <ADDRESS></ADDRESS>3.0 大字 <BIG></BIG>3.0 小字 <SMALL></SMALL>------------------------------------------------------------与外观相关的标签加粗 <B></B>斜体 <I></I>3.0 底线 <U></U> (尚有些浏览器不提供)3.0 删除线 <S></S> (尚有些浏览器不提供)3.0 下标 <SUB></SUB>3.0 上标 <SUP></SUP>打字机体 <TT></TT> (用单空格字型显示)预定格式 <PRE></PRE> (保留文件中空格的大小)预定格式的宽度 <PRE WIDTH=?></PRE>(以字元计算)N1.0+ 向中看齐 <CENTER></CENTER> (文字与图片都可以)N1.0 闪耀 <BLINK></BLINK> (有史以来最被嘲弄的标签)N1.0 字体大小 <FONT SIZE=?></FONT>(从1到7)N1.0 改变字体大小 <FONT SIZE=+|-?></FONT>N1.0 基本字体大小 <BASEFONT SIZE=?> (从1到7; 内定为3)N2.0 字体颜色 <FONT COLOR="#$$$$$$"></FONT>--------------------------------------------------------------------------------连结与图形连结 <A HREF="URL"></A>连结到锚点 <A HREF="URL#***"></A>(如果锚点在另一个档案)<A HREF="#***"></A> (如果锚点目前的档案)N2.0 连结到目的视框 <A HREF="URL" TARGET="***"></A>设定锚点 <A ></A>图形 <IMG SRC="URL">图形看齐方式 <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>N1.0 图形看齐方式 <IMG SRC="URL"ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>取代文字 <IMG SRC="URL" ALT="***"> (如果没有办法显示图形则显示此文字)点选图 <IMG SRC="URL" ISMAP> (需要CGI程式)N2.0 点选图 <IMG SRC="URL" USEMAP="URL">N2.0 地图 <MAP ></MAP>(描述地图)N2.0 段落 <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>3.0 大小 <IMG SRC="URL" WIDTH="?" HEIGHT="?">(以pixels为单位)N1.0 图形边缘 <IMG SRC="URL" BORDER=?> (以pixels为单位)N1.0 图形边缘空间 <IMG SRC="URL" HSPACE=? VSPACE=?> (以pixels为单位)N1.0 低解析度图形 <IMG SRC="URL" LOWSRC="URL">N1.1 用户端拉 <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">(使用端自动更新)N2.0 内嵌物件 <EMBED SRC="URL"> (将物件插入页面)N2.0 内嵌物件大小 <EMBED SRC="URL" WIDTH="?" HEIGHT="?">--------------------------------------------------------------------------------分隔段落 <P> (通常是两个return)3.0 段落 <P></P> (新定义成容器型标签)3.0 文字看齐方式 <P ALIGN=LEFT|CENTER|RIGHT></P>换行 <BR> (一个return)N1.0 文字部份看齐方式<BR CLEAR=LEFT|RIGHT|ALL>(与图形合用时)横线 <HR>N1.0 横线对齐 <HR ALIGN=LEFT|RIGHT|CENTER>N1.0 横线厚度 <HR SIZE=?> (以pixels为单位)N1.0 横线宽度 <HR WIDTH=?> (以pixels为单位)N1.0 横线比率宽度 <HR WIDTH=%> (以页宽为100%)N1.0 实线 <HR NOSHADE> (没有立体效果)N1.0 不可换行 <NOBR></NOBR> (不换行)N1.0 可换行处 <WBR> (如果需要,可在此断行)--------------------------------------------------------------------------------列举(可以巢状列举)无次序式列举 <UL><LI></UL> (<LI> 放在每一项前)N1.0 公布式列举 <UL TYPE=DISC|CIRCLE|SQUARE>(定义全部的列举项)<LI TYPE=DISC|CIRCLE|SQUARE>(定义这个及其後的列举项)有次序式列举 <OL><LI></OL> (<LI> 放在每一项前)N1.0 数标型态 <OL TYPE=A|a|I|i|1> (定义全部的列举项)<LI TYPE=A|a|I|i|1> (定义这个及其後的列举项)N1.0 起始数字 <OL value=?> (定义全部的列举项)<LI value=?> (定义这个及其後的列举项)定义式列举 <DL><DT><DD></DL>(<DT>项目, <DD>定义)表单式列举 <MENU><LI></MENU>(<LI> 放在每一项前)目录式列举 <DIR><LI></DIR> (<LI> 放在每一项前)--------------------------------------------------------------------------------背景与颜色3.0 重复排列的背景 <BODY BACKGROUND="URL">N1.1+ 背景颜色 <BODY BGCOLOR="#$$$$$$"> (依序为红、绿、蓝)N1.1+ 文字颜色 <BODY TEXT="#$$$$$$">N1.1+ 连结颜色 <BODY LINK="#$$$$$$">N1.1+ 看过的连结 <BODY VLINK="#$$$$$$">N1.1 使用中的连结 <BODY ALINK="#$$$$$$">--------------------------------------------------------------------------------特殊字元(以下标签需用小写)特别符号 &#?; (其中 ? 代表 ISO 8859-1 的编码)< < > > & & " "注册商标TM ?N1.0+ 注册商标TM ?著作权符号 ?N1.0+ 著作权符号 ?--------------------------------------------------------------------------------表单(通常需要与CGI程式配合)定义表单 <FORM ACTION="URL" METHOD=GET|POST></FORM>N2.0 上传档案 <FORM ENCTYPE="multipart/form-data></FORM>输入栏位 <INPUTTYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">栏位名称 <INPUT >栏位内定值 <INPUT value="***">已选定 <INPUT CHECKED> (适用於checkboxes与 radio boxes)栏位宽度 <INPUT SIZE=?> (以字元数为单位)最长字数 <INPUT MAXLENGTH=?> (以字元数为单位)下拉式选单 <select></select>下拉式选单名称 <select ></select>选单项目数量 <select SIZE=?></select>多选式选单 <select MULTIPLE> (多选)选项 <OPTION>内定选项 <OPTION selectED>文字输入区 <TEXTAREA ROWS=? COLS=?></textarea>输入区名称 <TEXTAREA ></textarea>N2.0 输入区换行方式 <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></textarea>--------------------------------------------------------------------------------表格3.0 定义表格 <TABLE></TABLE>3.0 表格框线 <TABLE BORDER></TABLE> (有或没有)N1.1 表格框线 <TABLE BORDER=?></TABLE>(可以设定数值)N1.1 储存格左右留白 <TABLE CELLSPACING=?>N1.1 储存格上下留白 <TABLE CELLPADDING=?>N1.1 表格宽度 <TABLE WIDTH=?> (以pixels为单位)N1.1 宽度比率 <TABLE WIDTH=%> (页宽为100%)3.0 表格列 <TR></TR>3.0 表格列内容看齐 <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> 3.0 储存格 <TD></TD> (须与列并用)3.0 储存格内容看齐 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> 3.0 不换行 <TD NOWRAP>N3.0 储存格背景颜色 <TD BGCOLOR=#$$$$$$>3.0 储存格横向连接 <TD COLSPAN=?>3.0 储存格纵向连接 <TD ROWSPAN=?>N1.1 储存格宽度 <TD WIDTH=?> (以pixels为单位)N1.1 储存格宽度比率 <TD WIDTH=%> (页宽为100%)3.0 表格标题 <TH></TH> (跟<TD>一样,不过会对中并加粗)3.0 表格标题对齐 <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> 3.0 表格标题不换行 <TH NOWRAP>3.0 表格标题占几栏 <TH COLSPAN=?>3.0 表格标题占几列 <TH ROWSPAN=?>N1.1 表格标题宽度 <TH WIDTH=?> (以pixels为单位)N1.1 表格标题比率宽度<TH WIDTH=%> (页宽为100%)3.0 表格抬头 <CAPTION></CAPTION>3.0 表格抬头看齐 <CAPTION ALIGN=TOP|BOTTOM>(在表格之上/之下)--------------------------------------------------------------------------------视框(定义与控制萤幕上的特定区域)N2.0 视框格式总定义 <FRAMESET></FRAMESET> (取代<BODY>)N2.0 视框行长度分配 <FRAMESET ROWS=,,,></FRAMESET>(pixels 或 %)N2.0 视框行长度分配 <FRAMESET ROWS=*></FRAMESET> (* = 相对大小)N2.0 视框栏宽度分配 <FRAMESET COLS=,,,></FRAMESET>(pixels 或 %)N2.0 视框栏宽度分配 <FRAMESET COLS=*></FRAMESET> (* =相对大小)N2.0 定义个别视框 <FRAME> (定义个别视框)N2.0 个别视框内容 <FRAME SRC="URL">N2.0 个别视框名称 <FRAME |_blank|_self|_parent|_top>N2.0 边缘宽度 <FRAME MARGINWIDTH=?> (「左」与「右」边界)N2.0 边缘高度 <FRAME MARGINHEIGHT=?> (「天顶」与「地底」边界)N2.0 卷动条 <FRAME SCROLLING="YES|NO|AUTO">N2.0 不可改变大小 <FRAME NORESIZE>N2.0 无视框时的内容 <NOFRAMES></NOFRAMES>(如果浏览器不提供视框功能的话)--------------------------------------------------------------------------------杂项说明(浏览器不会显示)档案型态声明 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">3.0 档案型态声明 <!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.0//EN">可搜寻 <ISINDEX> (指示可搜寻的索引项)N1.0 提示 <ISINDEX PROMPT="***"> (要求输入的提示文字)送出搜寻条件 <A HREF="URL?***"></a> (其中的问号不是数字,而是「问号」)基本档案的URL <BASE HREF="URL"> (必须放在「文头」区段内)N2.0 基本视窗名称 <BASE TARGET="***"> (必须放在「文头」区段内)相关性 <LINK REV="***" REL="***" HREF="URL"> (必须放在「文头」区段内)背景资讯 <META> (必须放在「文头」区段内)<table>,<div>,<tr>,<td>,<hr>,<br>一般用这几个标记来进行分块。
<html>、、浏览器的开始<head>、、标记之间文本的是头信息<title>这里面是网页的标题</title></head><body 这里面加主体的属性>eg:如下url=路径的意思<body bgcolor="red">添加背景颜色;<body text>、、非可连接文字色彩<body link>、、可链接文字色彩<body alink>、、正被点击的可链接的文字色彩<body vlink>、、已经点击过的可链接文字的色彩<body backgroud="url">添加背景图片<body topmargin="#" leftmargin="#" >靠在浏览器最左;最上边外面加内容<bgsound src="url">、、添加背景音乐单独出现的:<meta><hr>、、标尺线<hr size="数字">、、标尺线加粗<hr width="数字">、、标尺线加宽<hr align="left\right\默认的center">、、标尺线对齐<hr color="颜色">、、给标尺线改色<img><img src="图像的url" alt="没有显示图片时,在图片位置显示文字"> <img align="top上\middle中\bottom 下">、、图像和文字的对齐<img vspace 垂直="数字" hspace 水平="数字">、、图像边框补白<img width 宽度="数字" height 高度="数字">、、图像的高宽<br>、、换行<nobr></nobr>、、不换行不单独出现的:<b>文字</b>==<strong></strong>、、bold的意思,字体变粗<p>文字</p>、、分段<i>文字</i>==<em></em>、、斜体<u>文字</u>、、下划线<sup>文字</sup>、、字体上标<sub>文字</sub>、、字体下标<s>文字</s>、、字体被划线<a href="url">文字</a>、、去另外个网页的超链接<a href="../url">文字</a>、、去上级的超链接<a href="../../url">文字</a>、、去上上级的超链接<a href="#name">文字</a>、、想去的位置<a name="name">文字</a>、、标记页面的某个位置<a href="url#name">文字</a>、、跳到另一个页面的某个地方<a name="name">文字</a>、、另一个页面的某个位置<a href="网址url"><img src="图片文件的url"></a>、、通过图片到网址的超链接<a href="音频文件url">文字</a>、、跳到音频<a href="视频文件url">文字</a>、、跳到视频<a href="mailto:邮箱">文字</a>、、跳到邮箱<a href="url" target="_blank">文字</a> 、、开新窗口浏览页面<h#>文字</h#>#1最大,#6最小、、标题字体<font size="#">文字</font>#7最大,#1最小、、字体大小<font color="颜色">文字</font>、、字体颜色<hn align="#">n=1~6\#==left 左,center 中,right 右</hn>、、文字对齐<center>文字</center>、、标题文字居中<div align="#">#==left 左,center 中,right 右,</div>、、文字分区显示<ul>、、无序默认,实心圆点做列表符<li><li></ul><ol>、、有序默认,阿拉伯数字做列表符<li><li></ol><dl>、、定义列表<dt>、、排头<dd>、、排尾</dl><ul>、、无序但可以制定列表符<li type="disk">、、实心圆<li type="circle">、、空心圆<li type="square">、、实心方格</ul><ol start="数字">、、从"数字"开始,的起始值<pre>自己排版的函数</pre><table>无表格</table><table border>有表格</table><caption>表格标题</caption><tr>表格的这一行</tr><th>加粗</th><th align=left>左对齐</th><th align=right>右对齐</th><th align=center>中间对齐</th><th valign="top 上\middle 中\bottom 下">垂直对齐</th><td>不加粗</td><th colspan="你要跨的"列"数"></th><th rowspan="你要跨的"行"数"></th><table border="数字"></table>、、给表格加外边框<table border cellspacing="数字"></table>、、给单元格加间距<table border cellpadding="数字"></table>、、单元格内部空白<table align="left 左\center 中\right 右" border>表格在页面的哪个部位</table> <th bgcolor="颜色">给表格背景加颜色</th><table border bordercolor="颜色">表格边框加色彩</table></body></html>。
HTML空格 1. <title> </title>标题标注2.<a>连接标注基本语法:<a href="index.html" name="hello" target="_top">target指在连接的内容再名为_top的框架内显示(1)外部连接:href表示要连接的文件名(2)内部连接: href表示要连接的描点名3.<br>换行标注4.<hr>插入一条水平线5.<pre></pre>令文件按照原始码的排列方式显示6. <center></ center >居中7.< img>图片标记基本语法: <img src="images/top.jpg" >Src指图片的位置8.<table></table>表格标记(1)<tr></tr>行标记(2)<td></td>列标记9. <frameset>< /frameset >框架标记(1)<frameset rows="150,*"> rows横向切成两个部分,上面占150,其他全部为下面的内容(2) <frameset cols="100,*"> cols再竖切成2个部分,左边占100,其他为右边10.< frame >只是设定某一个框窗内的参数属性的标记基本语法: <frame name="menuframe" src="1.html">name框架名src框架内的内容11. <font></font>字形标记设置字体大小颜色12.< span></span>13.<from></from>表单标记基本语法: <form action="login.html" method="get" name="regeditform" >action提交到login.html页面, method分为get(小量资料1kb)和post(大量资料)14.<input>1. <input type="text">输入方式为Text,能产生一单行文字盒,上限为255 字元。
网页制作标记大全1、页面标题标记<title><title>标记用于定义页面的标题,是成对标记,位于<head>标记之间。
2、辅助标记<meta>标记用于定义页面的相关信息,为非成对标记,位于<head>标记之间。
使用<meta>标记可以描述页面的作者、摘要、关键词、版权、自动刷新等页面信息。
<meta>标记语句格式如下<meta http-equiv=”??” content=”??”>其中http-equiv 属性值可以是refresh (页面刷新)、reply-to(页面回复信息)、keywords (页面关键字)、content-type (页面内容格式)、author(页面作者)、description(页面内容摘要)、copyright(页面版权信息)等。
3、正文标记<body><body>标记用于定义正文内容的开始,</body>用于定义正文内容的结束。
在<body>...</body>之间的内容即为页面的主体内容。
使用<body>标记的各种属性可以定义页面主体内容的不同表达效果,<body>标记的主要属性如下:Bgcolor:定义网页的背景色Background:定义网页的背景图像4、文本格式标记1.段落标记<p><p>标记用于划分段落,控制文本的位置。
<p>是成对标记,用于定义内容从新的一行开始,并与上段之间有一个空行。
可使用<p>标记的align属性定义新开始的一行内容在页面中的对齐位置,属性值可以是left(左对齐)、center(居中对齐)或者right(右对齐)。
2.标题标记<hi><hi>标记用于定义段落标题的大小级数。
目录一、HTML标签 (1)(一)title标签示例 (1)(二)标题标签示例 (1)(三)段落p标签 (2)(四)换行标签示例 (3)(五)水平分割线标签示例 (3)(六)超链接标签示例 (4)(七)图像接标签示例 (4)(八)无序列表标签示例 (5)(九)有序列表标签示例 (6)(十)定义列表标签示例 (7)(十一)表格标签示例 (7)(十二)表单标签示例 (8)二、CSS样式 (12)(一)CSS基本语法 (12)一、HTML标签(一)title标签示例<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>title标签示例</title></head><body>title标签示例</body></html>(二)标题标签示例<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>标题标签</title></head><body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body></html>(三)段落p标签<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>段落p标签</title></head><body><p>段落元素由p 标签定义。
<!> 跑马灯<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>设定卷动时间<marquee onmouseover="this.stop()">...</marquee>鼠标经过上面时停止滚动<marquee onmouseover="this.start()">...</marquee>鼠标离开时开始滚动<!>字体效果<h1>...</h1>标题字(最大)<h6>...</h6>标题字(最小)<b>...</b>粗体字<strong>...</strong>粗体字(强调) (同上效果略同)<i>...</i>斜体字<em>...</em>斜体字(强调)<dfn>...</dfn>斜体字(表示定义)<u>...</u>底线<ins>...</ins>底线(表示插入文字)<strike>...</strike>横线<s>...</s>删除线<del>...</del>删除线(表示删除)<kbd>...</kbd>键盘文字<tt>...</tt> 打字体<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)<plaintext>...</plaintext>固定宽度字体(不执行标记符号)<listing>...</listing> 固定宽度小字体<font color=00ff00>...</font>字体颜色<font size=1>...</font>最小字体<font style =’font-size:100 px’>...</font>无限增大区断标记<hr>水平线<hr size=’9’>水平线(设定大小)<hr width=’80%’>水平线(设定宽度)<hr color=’ff0000’>水平线(设定颜色)<br>(换行)<nobr>...</nobr>水域(不换行)<p>...</p>水域(段落)<center>...</center>置中<!>连结格式<base href=位址>(预设好连结路径)<a href=位址></a>外部连结<a href=位址target=’_blank’></a>外部连结(另开新视窗)<a href=位址target=’_top’></a>外部连结(全视窗连结)<a href=位址target=’页框名’></a>外部连结(在指定页框连结)<!>贴图/音乐<img src=图片位址>贴图<img src=图片位址width=’180’>设定图片宽度<img src=图片位址height=’30’>设定图片高度<img src=图片位址alt=’提示文字’>设定图片提示文字<img src=图片位址’border=’1’>设定图片边框<bgsound src=MID音乐档位址>背景音乐设定<!>表格语法<table aling=left>...</table>表格位置,置左<table aling=center>...</table>表格位置,置中<table background=图片路径>...</table>背景图片的URL=就是路径网址<table border=边框大小>...</table>设定表格边框大小(使用数字)<table bgcolor=颜色码>...</table>设定表格的背景颜色<table borderclor=颜色码>...</table>设定表格边框的颜色<table borderclordark=颜色码>...</table>设定表格暗边框的颜色<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)<table cols=参数>...</table>指定表格的栏数<table frame=参数>...</table>设定表格外框线的显示方式<table width=宽度>...</table>指定表格的宽度大小(使用数字)<table height=高度>...</table>指定表格的高度大小(使用数字)<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)分割视窗<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整<frameset cols="20%,*">分割左右两个框架<frameset cols="20%,*,20%">分割左中右三个框架<分割上下两个框架<frameset rows="20%,*,20%">分割上中下三个框架属性:cols垂直切割窗口(如左右分割两个窗口)接受整数值,百分数,*(*代表占用余下空间)数值的个数代表分成的部分数目,要以逗号分隔。
例:cols="30,*,50%"可以切成三个视窗,第一部分是30像素(pixels)为绝对分割,第二部分是当分配完第一和第三视图后剩下的空间,第三部分则占整个窗口的50%宽度,为相对分割。
rows就是横向切割,将窗口上下分开,数值设置同上。
以上两属性尽量不要在同一个<frameset>标记中,因为王井(netscape)不支持,尽量采用多重分割。
frameborder 设置框架的边框,其值有0不要边框,1要边框。
border 设置框架边框厚度framespacing 表示框架与框架间保留空白的距离frame 元素(单标签)语法格式:<frame name="" src="url" scrolling="yes/no" noresize>属性:name 框架名称,指定框架来做连接的目标窗口。
src 框架中要显示的网页文当url地址,每个个框架要对应一个html文挡。
scrolling 是否显示滚动条,yes/no,auto是自动。
noresize 设置不让使用者改变这个框架的大小,noframe元素指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息语法格式:<noframe>......</noframe>表单<form></form>语法格式:<form action="url" method="get/post">....<input type=submit><input type=reset></form>method有两种提交方式get,postaction 是指明处理该表单的程序位置,这样表单所填的资料才能传给cgi做处里,可设定此参数为action="mailto:lwr8494@" 这样此表单所填的资料将会发送到这个邮箱地址。