最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 正文

常用的HTML标签及属性

来源:动视网 责编:小OO 时间:2025-09-30 21:03:50
文档

常用的HTML标签及属性

字体效果...标题字(最大)...标题字(最小)...粗体字...粗体字(强调)(同上效果略同)...斜体字...斜体字(强调)...斜体字(表示定义)...底线...底线(表示插入文字)...横线...删除线...删除线(表示删除)...键盘文字...打字体...固定宽度字体(在文件中空白、换行、定位功能有效)...固定宽度字体(不执行标记符号)...固定宽度小字体...字体颜色...最小字体...无限增大区断标记水平线水平线(设定大小)水平线(设定宽度)水平线(设定颜色)(换行)...水域
推荐度:
导读字体效果...标题字(最大)...标题字(最小)...粗体字...粗体字(强调)(同上效果略同)...斜体字...斜体字(强调)...斜体字(表示定义)...底线...底线(表示插入文字)...横线...删除线...删除线(表示删除)...键盘文字...打字体...固定宽度字体(在文件中空白、换行、定位功能有效)...固定宽度字体(不执行标记符号)...固定宽度小字体...字体颜色...最小字体...无限增大区断标记水平线水平线(设定大小)水平线(设定宽度)水平线(设定颜色)(换行)...水域
字体效果 

...

标题字(最大) 

...
标题字(最小) 

...粗体字 

...粗体字(强调) (同上效果略同) 

...斜体字 

...斜体字(强调) 

...斜体字(表示定义) 

...底线 

...底线(表示插入文字) 

...横线 

...删除线 

...删除线(表示删除) 

...键盘文字 

... 打字体 

...固定宽度字体(在文件中空白、换行、定位功能有效) 

...</plaintext>固定宽度字体(不执行标记符号)&nbsp;<p><listing>...</listing> 固定宽度小字体&nbsp;<p><font color=00ff00>...</font>字体颜色&nbsp;<p><font size=1>...</font>最小字体&nbsp;<p><font style =’font-size:100&nbsp;px’>...</font>无限增大&nbsp;<p>区断标记&nbsp;<p><hr>水平线&nbsp;<p><hr size=’9’>水平线(设定大小)&nbsp;<p><hr width=’80%’>水平线(设定宽度)&nbsp;<p><hr color=’ff0000’>水平线(设定颜色)&nbsp;<p><br>(换行)&nbsp;<p><nobr>...</nobr>水域(不换行)&nbsp;<p>...</p>水域(段落)&nbsp;<p><center>...</center>置中&nbsp;<p>连结格式&nbsp;<p><base href=位址>(预设好连结路径)&nbsp;<p><a href=位址></a>外部连结&nbsp;<p><a href=位址&nbsp;target=’_blank’></a>外部连结(另开新视窗)&nbsp;<p><a href=位址&nbsp;target=’_top’></a>外部连结(全视窗连结)&nbsp;<p><a href=位址&nbsp;target=’页框名’></a>外部连结(在指定页框连结)&nbsp;<p>表格语法&nbsp;<p><table aling=left>...</table>表格位置,置左&nbsp;<p><table aling=center>...</table>表格位置,置中&nbsp;<p><table background=图片路径>...</table>背景图片的URL=就是路径网址&nbsp;<p><table border=边框大小>...</table>设定表格边框大小(使用数字)&nbsp;<p><table bgcolor=颜色码>...</table>设定表格的背景颜色&nbsp;<p><table borderclor=颜色码>...</table>设定表格边框的颜色&nbsp;<p><table borderclordark=颜色码>...</table>设定表格暗边框的颜色&nbsp;<p><table borderclorlight=颜色码>...</table>设定表格亮边框的颜色&nbsp;<p><table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)&nbsp;<p><table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)&nbsp;<p><table cols=参数>...</table>指定表格的栏数&nbsp;<p><table frame=参数>...</table>设定表格外框线的显示方式&nbsp;<p><table width=宽度>...</table>指定表格的宽度大小(使用数字)&nbsp;<p><table height=高度>...</table>指定表格的高度大小(使用数字)&nbsp;<p><td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)&nbsp;<p><td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)&nbsp;<p>分割视窗&nbsp;<p><frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整&nbsp;<p><frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整&nbsp;<p><frameset cols="20%,*">分割左右两个框架&nbsp;<p><frameset cols="20%,*,20%">分割左中右三个框架&nbsp;<p><分割上下两个框架&nbsp;<p><frameset rows="20%,*,20%">分割上中下三个框架&nbsp;<p>属性:&nbsp;<p>cols&nbsp;垂直切割窗口(如左右分割两个窗口)接受整数值,百分数,*(*代表占用余下空间)数值的个数代表分成的部分数目,要以逗号分隔。例:cols="30,*,50%"可以&nbsp;切成三个视窗,第一部分是30像素(pixels)为绝对分割,第二部分是当分配完第一和第三视图后剩下的空间,第三部分则占整个窗口的50%宽度,为相对分割。&nbsp;<p>rows&nbsp;就是横向切割,将窗口上下分开,数值设置同上。&nbsp;<p>以上两属性尽量不要在同一个<frameset>标记中,因为王井(netscape)不支持,尽量采用多重分割。&nbsp;<p>frameborder&nbsp;设置框架的边框,其值有0不要边框,1要边框。&nbsp;<p>border&nbsp;设置框架边框厚度&nbsp;<p>framespacing&nbsp;表示框架与框架间保留空白的距离&nbsp;<p>frame&nbsp;元素(单标签)&nbsp;<p>语法格式:&nbsp;<p><frame name="" src="url" scrolling="yes/no" noresize><p>属性:&nbsp;<p>name&nbsp;框架名称,指定框架来做连接的目标窗口。&nbsp;<p>src&nbsp;框架中要显示的网页文当url地址,每个个框架要对应一个html文挡。&nbsp;<p>scrolling&nbsp;是否显示滚动条,yes/no,auto是自动。&nbsp;<p>noresize&nbsp;设置不让使用者改变这个框架的大小,&nbsp;<p>noframe元素&nbsp;<p>指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息&nbsp;<p>语法格式:&nbsp;<p><noframe><p>......&nbsp;<p></noframe><p>表单<form></form> <p>语法格式:&nbsp;<p><form action="url" method="get/post"><p>....&nbsp;<p><input type=submit><input type=reset><p></form><p>method有两种提交方式get,post&nbsp;<p>action&nbsp;是指明处理该表单的程序位置,这样表单所填的资料才能传给cgi做处里,可设定此参数为action="mailto:lwr8494@163.com"&nbsp;这样此表单所填的资料将会发送到这个邮箱地址。&nbsp;<p>method&nbsp;是指传送信息给cgi等网络程序的方式。可选post方法,&nbsp;get方法,post方法容许传送大量信息。get方法只接受低于1k的信息。&nbsp;<p>申请表单用的是post搜索引擎用的是get&nbsp;<p>&nbsp;注解&nbsp;<p><A HREF TARGET> 指定超连结的分割视窗&nbsp;<p><A HREF=#锚的名称> 指定锚名称的超连结&nbsp;<p><A HREF> 指定超连结&nbsp;<p><A NAME=锚的名称> 被连结点的名称&nbsp;<p><ADDRESS>....</ADDRESS> 用来显示电子邮箱地址&nbsp;<p><B> 粗体字&nbsp;<p><BASE TARGET> 指定超连结的分割视窗&nbsp;<p><BASEFONT SIZE> 更改预设字形大小&nbsp;<p><BGSOUND SRC> 加入背景音乐&nbsp;<p><BIG> 显示大字体&nbsp;<p><BLINK> 闪烁的文字&nbsp;<p><BODY TEXT LINK VLINK> 设定文字颜色&nbsp;<p><BODY> 显示本文&nbsp;<p><BR> 换行&nbsp;<p><CAPTION ALIGN> 设定表格标题位置&nbsp;<p><CAPTION>...</CAPTION> 为表格加上标题&nbsp;<p><CENTER> 向中对齐&nbsp;<p><CITE>...<CITE> 用於引经据典的文字&nbsp;<p><CODE>...</CODE> 用於列出一段程式码&nbsp;<p><COMMENT>...</COMMENT> 加上注解&nbsp;<p><DD> 设定定义列表的项目解说&nbsp;<p><DFN>...</DFN> 显示"定义"文字&nbsp;<p><DIR>...</DIR> 列表文字标签&nbsp;<p><DL>...</DL> 设定定义列表的标签&nbsp;<p><DT> 设定定义列表的项目&nbsp;<p><EM> 强调之用&nbsp;<p><FONT FACE> 任意指定所用的字形&nbsp;<p><FONT SIZE> 设定字体大小&nbsp;<p><FORM ACTION> 设定户动式表单的处理方式&nbsp;<p><FORM METHOD> 设定户动式表单之资料传送方式&nbsp;<p><FRame MARGINHEIGHT> 设定视窗的上下边界&nbsp;<p><FRame MARGINWIDTH> 设定视窗的左右边界&nbsp;<p><FRame NAME> 为分割视窗命名&nbsp;<p><FRame NORESIZE> 锁住分割视窗的大小&nbsp;<p><FRame SCROLLING> 设定分割视窗的卷轴&nbsp;<p><FRame SRC> 将HTML档加入视窗&nbsp;<p><FRameSET COLS> 将视窗分割成左右的子视窗&nbsp;<p><FRameSET ROWS> 将视窗分割成上下的子视窗&nbsp;<p><FRameSET>...</FRameSET> 划分分割视窗&nbsp;<p><H1>~<H6> 设定文字大小&nbsp;<p><HEAD> 标示文件资讯&nbsp;<p><HR> 加上分格线&nbsp;<p><HTML> 文件的开始与结束&nbsp;<p><I> 斜体字&nbsp;<p> 调整图形影像的位置&nbsp;<p> 为你的图形影像加注&nbsp;<p> 加入影片&nbsp;<p> 插入图片并预设图形大小&nbsp;<p> 插入图片并预设图形的左右边界&nbsp;<p> 预载图片功能&nbsp;<p> 设定图片边界&nbsp;<p> 插入图片&nbsp;<p> 插入图片并预设图形的上下边界&nbsp;<p><INPUT TYPE NAME value> 在表单中加入输入栏位&nbsp;<p><ISINDEX> 定义查询用表单&nbsp;<p><KBD>...</KBD> 表示使用者输入文字&nbsp;<p><LI TYPE>...</LI> 列表的项目&nbsp;(&nbsp;可指定符号&nbsp;)&nbsp;<p><MARQUEE> 跑马灯效果&nbsp;<p><MENU>...</MENU> 条列文字标签&nbsp;<p><meta NAME="REFRESH" CONTENT URL> 自动更新文件内容&nbsp;<p><MULTIPLE> 可同时选择多项的列表栏&nbsp;<p><NOFRame> 定义不出现分割视窗的文字&nbsp;<p><OL>...</OL> 有序号的列表&nbsp;<p><OPTION> 定义表单中列表栏的项目&nbsp;<p><P ALIGN> 设定对齐方向&nbsp;<p><P> 分段&nbsp;<p><PERSON>...</PERSON> 显示人名&nbsp;<p><div class="51ds_code" style="position: relative;"><PRE> 使用原有排列&nbsp;<p><SAMP>...</SAMP> 用於引用字&nbsp;<p><select >...</select > 在表单中定义列表栏&nbsp;<p><SMALL> 显示小字体&nbsp;<p><STRIKE> 文字加横线&nbsp;<p><STRONG> 用於加强语气&nbsp;<p><SUB> 下标字&nbsp;<p><SUP> 上标字&nbsp;<p><TABLE BORDER=n> 调整表格的宽线高度&nbsp;<p><TABLE CELLPADDING> 调整资料栏位之边界&nbsp;<p><TABLE CELLSPACING> 调整表格线的宽度&nbsp;<p><TABLE HEIGHT> 调整表格的高度&nbsp;<p><TABLE WIDTH> 调整表格的宽度&nbsp;<p><TABLE>...</TABLE> 产生表格的标签&nbsp;<p><TD ALIGN> 调整表格栏位之左右对齐&nbsp;<p><TD BGCOLOR> 设定表格栏位之背景颜色&nbsp;<p><TD COLSPAN ROWSPAN> 表格栏位的合并&nbsp;<p><TD NOWRAP> 设定表格栏位不换行&nbsp;<p><TD VALIGN> 调整表格栏位之上下对齐&nbsp;<p><TD WIDTH> 调整表格栏位宽度&nbsp;<p><TD>...</TD> 定义表格的资料栏位&nbsp;<p><TEXTAREA NAME ROWS COLS> 表单中加入多少列的文字输入栏&nbsp;<p><TEXTAREA WRAP> 决定文字输入栏是自动否换行&nbsp;<p><TH>...</TH> 定义表格的标头栏位&nbsp;<p><TITLE> 文件标题&nbsp;<p><TR>...</TR> 定义表格美一行&nbsp;<p><TT> 打字机字体&nbsp;<p><U> 文字加底线&nbsp;<p><UL TYPE>...</UL> 无序号的列表&nbsp;(&nbsp;可指定符号&nbsp;)&nbsp;<p><var>...</var> 用於显示变数&nbsp;<p>BlockQuotc文本缩进&nbsp;<p>表示颜色的有三种方式;&nbsp;<p>1,16进制颜色代码&nbsp;<p>语法:#RRGGBB&nbsp;<p>例:<font color="#ff0000">红色</font><p>2,10进制RGB码&nbsp;<p>语法:RGB(RRR,GGG,BBB)&nbsp;<p>例:<font color="rgb(255,000,000)">红色</font><p>3,直接用颜色的英文名称&nbsp;<p>例:<font color="red">红色</font><p><body>.....</body>属性可分为三种:&nbsp;<p>1,背景属性&nbsp;<p>包括:bgcolor,background&nbsp;<p>2,文字属性:&nbsp;<p>包括:text,link,alink,vlink,&nbsp;<p>3,留白属性:&nbsp;<p>其中分为:leftmargin,topmargin&nbsp;<p>.bgcolor背景色&nbsp;<p>语法格式:<body bgcolor="#ff0000"><p>.background背景图案。&nbsp;<p>语法格式:<body background="url"><p>.text文本颜色(非连接文字颜色)&nbsp;<p>.link连接文字颜色(可连接文字颜色)&nbsp;<p>.alink活动连接文字颜色(正被点击的可连接文字的颜色)&nbsp;<p>.vlink已访问连接文字颜色)(已经点击访问过的可连接文字的颜色)&nbsp;<p>语法格式:<body text="color" link="color" alink="color" vlink="color"><p>.leftmargin&nbsp;页面左侧的留白距离&nbsp;<p>.topmargin&nbsp;页面顶部的留白距离&nbsp;<p>语法格式:<body leftmargin="value" topmargin="value"><p>注:value为长度值为数字&nbsp;<p>align&nbsp;属性&nbsp;<p>语法:<h2 align="?">文字</h2><p>其属性有三种:left靠左,center居中,right靠右&nbsp;<p>〈p〉</p>为段落标记,可利用以上属性对整个段落进行设置&nbsp;<p>〈br>为换行标记&nbsp;<p><nobr></nobr>为不换行标记&nbsp;放在文字两边即可&nbsp;<p>例:<body><p><h3>江南逢李龟年</h3><p>歧王宅里寻常见<br><p>催九堂前几度闻<br><p>正是江南好风景<br><p>落花时节又逢君</p><p></body><p>预格式化:&nbsp;<p><pre>......</pre></div> 浏览是效果和编写是效果格式一样&nbsp;<p>列表&nbsp;<p>1无序列表又称符号列表&nbsp;<p>语法格式:&nbsp;<p><ul type="">type的属性可选直disc实心圆点,clrcle空心圆点,square实心方框&nbsp;<p><li>文字</li><p><li>文字</li><p></ul><p>2有序列表&nbsp;<p>语法格式:&nbsp;<p><ol type="?" start"?"><p><li>文字</li><p><li>文字</li><p></ol><p>type的值是编号字符可选的有1...,a...,A...,i...&nbsp;,I...&nbsp;<p>start为起始值例:如果start为3是那么将从3开始,而且必须是数字。&nbsp;<p>3定义列表&nbsp;<p><dl>定义列表标记&nbsp;<p><dt>标示定义条目&nbsp;<p><dd>标示定义内容&nbsp;<p>语法格式:&nbsp;<p><dl><p><dt>文字</dt><p><dd>文字内容</dd><p></dl><p>连接和图像&nbsp;<p>语法格式:&nbsp;<p><a href="url" name="?" target="?" title="?">....</a><p>属性:href&nbsp;连接目标&nbsp;值可以是url地址也可以是连接锚点&nbsp;<p><a href="url">...</a>或者&nbsp;<p><a href="锚点">...</a><p>name&nbsp;连接名称&nbsp;<p>语法格式:<a name="锚点名称">...</a><p>例:<a name="abcdcf">...</a><p>连接到该锚点的连接则应是:&nbsp;<p><a name="#abcdef">....</a><p>target目标窗口语法格式:&nbsp;<p><a href="url"target="_blank|_self|_farent|_top|windowname">....</a><p>-blank打开新窗口&nbsp;<p>_self当前窗口打开&nbsp;<p>一下两个仅在框架叶面中应用&nbsp;<p>_parent当前窗口的父级窗口(上一级)打开&nbsp;<p>_top在最高一级的窗口打开&nbsp;<p>windowname已命名的窗口或框架中打开连接&nbsp;<p>title连接提示&nbsp;<p><a href="http://www.crazytribe.net" title="打开狂人部落的首页">狂人部落</a><p>图像 语法格式:<p>border属性定义图片边框的宽度,默认值为0&nbsp;<p>align属性设置图片旁边文字的位置&nbsp;<p>语法格式:<p>可选值有:&nbsp;<p>top图片和文字顶部对齐&nbsp;<p>middle图片和文字居中对齐&nbsp;<p>bottom图片和文字底边对齐(默认)&nbsp;<p>left图片居左对齐,文字沿图片绕排&nbsp;<p>right图片居右对齐,文字沿图片绕排&nbsp;<p>absmiddle图片对齐到目前文字行绝对&nbsp;<p>absbottom图片对齐到目前文字行绝对底部&nbsp;<p>文字的排版&nbsp;<p>不换行空白标记&nbsp;<p>font元素&nbsp;<p>语法格式:&nbsp;<p><font face="字体名称"&nbsp;size="字体大小"&nbsp;color="字体颜色"><p>字体大小可选值为1——7,默认为3&nbsp;<p>例:〈font&nbsp;face="黑体" size="4" color="#ff00ff">....</font><p>水平线<hr> <p>语法格式:<hr width="宽度"&nbsp;align="对齐方式默认居中center"&nbsp;size="水平线厚度默认为2"&nbsp;color="颜色" noshade><p>noshade无阴影,既实线&nbsp;<p>层〈div>两种元素&nbsp;<p>是块级元素,和段落元素<p>相似,不同的是两个元素之间不会产生两个<p>元素之间的空行,&nbsp;<p>是行内元素,可以定义段落中部分文字的属性&nbsp;<p>语法格式:&nbsp;<p>...<p>align设置层中元素的水平对齐方式&nbsp;<p>stule设置元素应用css规范的属性&nbsp;<p>兼容性比要好一点,最好使用<p>表格语法格式:&nbsp;<p><table width="" bgcolor="" background="" border="" cellspacing="" cellpadding=""><p><tr>...<td>....</td>....</tr><p></table><p>border边框宽度默认值为0,既没有边框&nbsp;<p>cellspacing表格中单元格的边距大小,默认值为两个像素&nbsp;<p>cellpadding表格中单元格之间的间距大小,默认值为两个像素&nbsp;<p>tr元素&nbsp;<p>语法格式:&nbsp;<p><tr align="" bgcolor="">....</tr><p>align属性对齐方式可选值如下:left,center,tight,默认为left&nbsp;<p>bgcolor指定该行的背景颜色&nbsp;<p>td元素&nbsp;<p>语法格式:&nbsp;<p><td width="宽度"&nbsp;height="高度"&nbsp;align="水平对齐方式"&nbsp;valign="垂直对齐方式"&nbsp;bgcolor=""&nbsp;background=""&nbsp;rowspan="单元格的行跨度"&nbsp;colapan="单元格的列跨度">.....</td><p>align属性的可选值有:left,center,right&nbsp;<p>valign属性的可选值有:top,middle,bottom&nbsp;<p>rowspan和colapan跨行和跨列的数量,默认为1&nbsp;<p>input元素&nbsp;语法格式:<p><input type=""><p>type属性的可选值有:&nbsp;<p>text&nbsp;单行文本框&nbsp;<p>属性:name&nbsp;文本框名称&nbsp;<p>value&nbsp;文本框的初始值&nbsp;<p>size&nbsp;文本框的长度&nbsp;<p>maxlength&nbsp;可输入字符串最大的长度&nbsp;<p>radio&nbsp;单选框&nbsp;<p>属性:name&nbsp;单选框名称&nbsp;<p>value&nbsp;内部值&nbsp;<p>checked&nbsp;默认选定&nbsp;<p>checkbox&nbsp;复选框&nbsp;<p>属性:name&nbsp;复选框名称&nbsp;<p>value&nbsp;内部值&nbsp;<p>checked&nbsp;默认选定&nbsp;<p>reset&nbsp;重置按钮&nbsp;<p>submit&nbsp;确定按钮&nbsp;<p>属性:name&nbsp;按钮名称&nbsp;<p>value&nbsp;显示在按钮上的文字&nbsp;<p>password&nbsp;密码框&nbsp;<p>属性与文本框的属性完全相同&nbsp;<p>file&nbsp;文件域&nbsp;<p>属性:name文件域名称&nbsp;<p>size&nbsp;文件域的长度&nbsp;<p>maxlength&nbsp;文件域可接受的字符数量的上限&nbsp;<p>hidden&nbsp;隐藏域&nbsp;<p>属性:name&nbsp;隐藏域名称&nbsp;<p>value&nbsp;内定值&nbsp;<p>image&nbsp;图片域&nbsp;<p>属性:name&nbsp;所要代表的按钮,可以是submit,reset,或其他.&nbsp;<p>src&nbsp;按钮图片的url&nbsp;地址&nbsp;<p>列表框<select><p>语法格式:&nbsp;<p><select><p>.....&nbsp;<p><option>....</option><p>.....&nbsp;<p></select><p>select元素&nbsp;<p>语法格式:<select name="" size=""multiple></select><p>name&nbsp;指定列表框的名字&nbsp;<p>size&nbsp;指定列表框显示列表项的条数,如果指定了该参数,select元素是个列表,否则是一个下拉列表框&nbsp;<p>multiple&nbsp;指定了这个参数,则表示该列表框可选择多项,否则只可选择一项&nbsp;<p>option属性&nbsp;<p>语法格式:<option value="" selected></option><p>value&nbsp;该列表项的值&nbsp;<p>selected&nbsp;如果设定了这个参数,默认为选定这一项&nbsp;<p>多行文本框<textarea> <p><textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea><p>属性:&nbsp;<p>name文本框的名称&nbsp;<p>cols文本框的宽度&nbsp;<p>rows文本框的高度&nbsp;<p>wrap文本框的折行方式可选值有:&nbsp;<p>off不保存换行信息&nbsp;<p>physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出,&nbsp;<p>virtual送出连续成串的字除非使用者按回车。&nbsp;<p>css&nbsp;层叠样式表&nbsp;<p>引入层叠样式表的方法包括:&nbsp;<p>外联式样式表&nbsp;<p>例:<head><p><link rel="stylesheet" href="/css/default.css"><p></head><p><body><p>....&nbsp;<p></body><p></html><p>属性:rel&nbsp;用来说明<link>元素在这里要完成的任务是连接一个的css文件。而href属性给出了所要连接css文件的url地址&nbsp;<p>内嵌式样式表:&nbsp;<p>例:<html><p><head><p><style type="text/css"><p><!--<p>td{font:9pt;color:red}&nbsp;<p>.font105{font:10.5pt;color:blue}&nbsp;<p>--><p></style><p></head><p><body>....</body><p></html><p>元素内定&nbsp;<p>格式:<p style="font-size:10.5pt"><p>导入式样式表&nbsp;<p>〈html><p><head><p><style type="text/css"><p><!--<p>@import&nbsp;url(css/home.css);&nbsp;<p>--><p></style><p><body><p>....&nbsp;<p></body><p></html><p>css的优先级&nbsp;<p>越接近目标的样式定义优先级越高,高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义&nbsp;<p>如果4种样式表对同一元素定义了不同的样式,那么他们的优先级顺序从高到低是,元素内定,内嵌样式表,导入样式表,外联样式表。&nbsp;<p>css结构&nbsp;<p>例:td{font-size:10.5pt;color:#666666}&nbsp;<p>css样式包含两个基础部分,&nbsp;<p>选择符<td>和声明{font-size:10.5pt;color:#666666}&nbsp;<p>声明也有两部分组成:&nbsp;<p>属性font-size,color和值10.5pt,#666666&nbsp;<p>选择符分为6种&nbsp;<p>1元素选择符&nbsp;<p>当页面上多个元素的样式相同时,可以将多个元素放在一起定义,中间以逗号分开&nbsp;例:td,p,li,input,select{font-size:12px;}&nbsp;<p>2class(类)选择符&nbsp;<p>例:〈head><p><title>.....</title><p><style type="text/css"><p><!--<p>.red{font-size:10.5pt;color:#ff0000}&nbsp;<p>--><p></style><p></head><p><body bgcolor="#ffffff"><p><p class="red">士大夫井冈山地方官</p><p>九连环离开计划</p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/wenzhong.js"></script><p></body><p>还有一种方法就是限定可以应用它的页面元素&nbsp;<p>例:〈head><p><title>.....</title><p><style type="text/css"><p><!--<p>h1.red{color:#ff0000}&nbsp;<p>--><p></style><p></head><p><body bgcolor="#ffffff"><p><p class="red">士大夫井冈山地方官</p><p><h1 class="red">九连环离开计划</h1><p></body><p>3&nbsp;id选择符&nbsp;<p>与class选择附类似,只是把'.'换成'#'&nbsp;<p>例:<body><p><head><p><style type="text/css"><p><!--<p>#select{font-size:18px;color:#0000ff}&nbsp;<p>--><p></style><p></head><p><body><p><table width="250" border="1" height="50"><p><tr><p><td align="center" id="select">id选择符</td><p></tr><p></table><p></body><p></html><p>我们看到在调用ID选择附时与CLASS选择附类似,只是将class=""换成了id="",方便页面脚本语言的调用&nbsp;<p>关联选择符&nbsp;<p><body><p><head><p><style type="text/css"><p><!--<p>td&nbsp;p{font-size:18px;color:#0000ff}&nbsp;<p>--><p></style><p></head><p><body><p><table width="250" border="1" height="50"><p><tr><p><td align="center"><p>关联选择符</p></td><p></tr><p></table><p>关联选择符</p><p></body><p></html><p>我们设定了在元素中<td>的元素<p>所包含文字的样式,只有在两个条件都满足是,样式在会起作用,&nbsp;<p>伪类选择符&nbsp;<p>是只能用在css选择符里,而不能用在html代码中的选择符&nbsp;<p>例:&nbsp;<p>〈html><p><head><p><style type="text/css"><p><!--<p>a:link{color:#000000}&nbsp;<p>a:visited{color:#cccccc}&nbsp;<p>a:hover{color:#ff0000}&nbsp;<p>a:active{color:#ooooff}&nbsp;<p>--><p></style><p></head><p><body><p><a href="#">关联选择符</a><p><a href="#">关联选择符</a><p><a href="#">关联选择符</a><p><a href="#">关联选择符</a><p>〈/body><p></html><p>正确的顺序是a:link\\a:visited\\a:hover否则会引起页面上连接颜色混乱&nbsp;<p>伪元素选择符&nbsp;<p>与伪类选择符定义类似,目前被大多数浏览器支持的有两个:首行伪元素(first-line)和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的&nbsp;<p>例:首行&nbsp;<p><html><p><head><p><style><p><!--<p>p:first-line{color:red;font-size:20pt}&nbsp;<p>--><p></style><p></hesd><p><body><p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p><p></body><p></html><p>长度随浏览器窗口大小而改变&nbsp;<p>首字&nbsp;<p><html><p><head><p><style><p><!--<p>p:first-letter{color:red;font-size:50pt;float:left;}&nbsp;<p>--><p></style><p></hesd><p><body><p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p><p></body><p></html><p>以上两种都只能应用于块状元素上&nbsp;<p>css规则&nbsp;<p>1.继承&nbsp;<p>例:<html><p><head><p><style type="text/css"><p><!--<p>td{font-size:12pt}&nbsp;<p>p{color:red}&nbsp;<p>--><p></style><p></hesd><p><body><p><table width="300" border="1" height="150"><p><tr><p><td align="center"><p>css规则</p><p></td><p></table><p></body><p></html><p>为最高级<td>次一级两种css用在一个属性元素上,相同的覆盖,不同的继承,&nbsp;<p>2.组合&nbsp;<p>例:td{font-size:12pt}&nbsp;<p>p1{font-size:12pt}&nbsp;<p>组合后&nbsp;<p>td,.p1{font-size:12pt}&nbsp;<p>3.层叠&nbsp;<p>在样式里定义过后,在表格属性中又定义一次&nbsp;<p><html><p><head><p><style type="text/css"><p><!--<p>red{color:#ff0000&nbsp;limportant}&nbsp;<p>--><p></style><p></hesd><p><body><p><table width="300" border="1" height="150"><p><tr><p><td align="center" style="color:#0000ff" class="red">决撒地方官</td><p></tr><p></table><p></body><p></html><p>css单位&nbsp;<p>分四大类:&nbsp;<p>1&nbsp;长度单位&nbsp;<p>数值可以是整数,小数,正数,负数,0,后加单位(负值不要轻易使用)&nbsp;<p>换算关系:&nbsp;<p>1in(英寸)=6pc(派)&nbsp;<p>1in(英寸)=72pt(磅)&nbsp;<p>1in(英寸)=2.54(厘米)&nbsp;<p>1cm(厘米)=10mm(毫米)&nbsp;<p>1cm(厘米)=0.3937(英寸)&nbsp;<p>1pt(磅)=1/72in(英寸)=0.2478mm(毫米)&nbsp;<p>1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸&nbsp;<p>2&nbsp;百分比单位&nbsp;<p>3&nbsp;颜色单位&nbsp;<p>4&nbsp;url单位<p>div属性<p>color&nbsp;:&nbsp;#999999&nbsp;&nbsp;&nbsp;文字颜色&nbsp;<p>font-family&nbsp;:&nbsp;宋体&nbsp;文字字型&nbsp;<p>font-size&nbsp;:&nbsp;10pt&nbsp;文字大小&nbsp;<p>font-style:itelic&nbsp;文字斜体育<p>font-variant:small-caps&nbsp;小字体<p>letter-spacing&nbsp;:&nbsp;1pt&nbsp;文字间距<p>line-height&nbsp;:&nbsp;200%&nbsp;设定行高<p>font-weight:bold&nbsp;文字粗体<p>vertical-align:sub&nbsp;下标字<p>vertical-align:super&nbsp;上标字<p>text-decoration:line-through&nbsp;加?h除线<p>text-decoration:overline&nbsp;加顶线<p>text-decoration:underline&nbsp;加底线<p>text-decoration:none&nbsp;?h除连接底线<p>text-transform&nbsp;:&nbsp;capitalize&nbsp;首字大写<p>text-transform&nbsp;:&nbsp;uppercase&nbsp;英文大写<p>text-transform&nbsp;:&nbsp;lowercase&nbsp;英文写<p>text-align:right&nbsp;文字*右对齐<p>text-align:left&nbsp;文字*左对齐<p>text-align:center&nbsp;文字置中对齐&nbsp;<p>这些是一些简单的文字效果,可以应用到css的页面中。 <p>背景<p>background-color:black&nbsp;背景颜色&nbsp;<p>背景图片<p>background-attachment&nbsp;:&nbsp;fixed&nbsp;固定背景<p>background-repeat&nbsp;:&nbsp;repeat&nbsp;重复排列-网页预设<p>background-repeat&nbsp;:&nbsp;no-repeat&nbsp;不重复排列<p>background-repeat&nbsp;:&nbsp;repeat-x&nbsp;在x轴重复排列<p>background-repeat&nbsp;:&nbsp;repeat-y&nbsp;在y轴重复排列<p>background-position&nbsp;:&nbsp;90%&nbsp;90%&nbsp;背景图片x与y轴的位置&nbsp; <p>链接<p>A&nbsp;所有超连接<p>A:link&nbsp;超连接文字格式&nbsp;<p>A:visited&nbsp;浏览过的连接文字格式&nbsp;<p>A:active&nbsp;按下连接的格式&nbsp;<p>A:hover&nbsp;鼠标移至连接<p>边框<p>border-top&nbsp;:&nbsp;1px&nbsp;solid&nbsp;black&nbsp;上框&nbsp;<p>border-bottom&nbsp;:&nbsp;1px&nbsp;solid&nbsp;#6699cc&nbsp;下框&nbsp;<p>border-left&nbsp;:&nbsp;1px&nbsp;solid&nbsp;#6699cc&nbsp;左框&nbsp;<p>border-right&nbsp;:&nbsp;1px&nbsp;solid&nbsp;#6699cc&nbsp;右框<p>border:&nbsp;1px&nbsp;solid&nbsp;#6699cc&nbsp;四边框<p>虚线<p><TEXTAREA STYLE="border:1px dashed pink"><p>实线<p><TEXTAREA STYLE="border:1px solid pink"><p><marquee>...</marquee>普通卷动&nbsp;<p><marquee behavior=slide>...</marquee>滑动&nbsp;<p><marquee behavior=scroll>...</marquee>预设卷动&nbsp;<p><marquee behavior=alternate>...</marquee>来回卷动&nbsp;<p><marquee direction=down>...</marquee>向下卷动&nbsp;<p><marquee direction=up>...</marquee>向上卷动&nbsp;<p><marquee direction=right></marquee>向右卷动&nbsp;<p><marquee direction=’left’></marquee>向左卷动&nbsp;<p><marquee loop=2>...</marquee>卷动次数&nbsp;<p><marquee width=180>...</marquee>设定宽度&nbsp;<p><marquee height=30>...</marquee>设定高度&nbsp;<p><marquee bgcolor=FF0000>...</marquee>设定背景颜色&nbsp;<p><marquee scrollamount=30>...</marquee>设定滚动速度&nbsp;<p><marquee scrolldelay=300>...</marquee>设定卷动时间&nbsp;<p><marquee onmouseover="this.stop()">...</marquee>鼠标经过上面时停止滚动&nbsp;<p><marquee onmouseover="this.start()">...</marquee>鼠标离开时开始滚动&nbsp;<p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div> <div class="downbox clearfix"> <div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div> <div class="txt"> <h4>常用的HTML标签及属性</h4> <div class="co">字体效果...标题字(最大)...标题字(最小)...粗体字...粗体字(强调)(同上效果略同)...斜体字...斜体字(强调)...斜体字(表示定义)...底线...底线(表示插入文字)...横线...删除线...删除线(表示删除)...键盘文字...打字体...固定宽度字体(在文件中空白、换行、定位功能有效)...固定宽度字体(不执行标记符号)...固定宽度小字体...字体颜色...最小字体...无限增大区断标记水平线水平线(设定大小)水平线(设定宽度)水平线(设定颜色)(换行)...水域</div> <div class="tj"><b>推荐度:</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div> </div> <div class="btn"> <a href="javascript:;" class="html2word" data-model="article" data-id="rcarddcsc" title="文档下载"> <b>点击下载本文</b> <span>文档为doc格式</span> </a> </div> </div> <script>keji_detail_ga('article_content_bottom');</script> <div class="tvideo_box tvideo_box_tab"> <div class="hd"> <ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul> </div> <div class="bd"> <ul class="ult_jpic clearfix"> <script>get_hot_jiaodian_content('wz_hot_jiaodian',374,'hot',1);</script> </ul> </div> </div> </div> <!--中间文章 end--> <!--右侧专题 star--> <div class="ult_zt"> <script>keji_detail_ga('article_right_top');</script> <div class="ult_ztbox"> <h4>最新推荐</h4> <ul class="tvideo_r_a clearfix"> <script>get_detail_right('wz_right_new',374,'')</script> </ul> </div> <script>keji_detail_ga('article_right_middle');</script> <div class="ult_ztbox"> <h4>猜你喜欢</h4> <ul class="telist_rb clearfix"> <script>get_detail_right('wz_right_love',374,'')</script> </ul> </div> <script>keji_detail_ga('article_right_new_bottom');</script> <div class="ult_ztbox"> <h4>热门推荐</h4> <ul class="tvideo_r_b clearfix"> <script>get_detail_right('wz_right_hot',374,'')</script> </ul> </div> <script>keji_detail_ga('article_right_bottom');</script> </div> <!--右侧专题 end--> <div style="display:none"><a href="https://www.51dongshi.net/wzztf/rcard/rcarddcsc/">专题</a> </div> </div> </div> <script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script> <script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script> <style> #qrcode{padding: 15px;background: #fff;} </style> <div id="qrcode" style="display: none"></div> <script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfrcarddcsc.html");</script> <iframe src="https://hits.51dongshi.net/?biao=ho_article&id=1122838" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe> <script src="https://js.51dongshi.net/js/shHighlighter.js"></script> <link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css"> <script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script> <div style="display:none"><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <!--foot star--> <div class="footer"> <div class="m_box"> <div class="footer_in"> <a href="#" target="_blank">产品服务</a> <a href="#" target="_blank">发展历程</a> <a href="#" target="_blank">企业资讯</a> <a href="#" target="_blank">企业文化</a> <a href="#" target="_blank">关于我们</a> <a href="#" target="_blank">加入我们</a> <a href="#" target="_blank">联系我们</a> <a href="#" target="_blank">网站导航</a> <a href="#" target="_blank">网站律师</a> </div> <ul class="ftrlist"> <li> <a rel="nofollow" href="https://www.itrust.org.cn" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a> </li> <li> <a rel="nofollow" href="https://www.12377.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a> </li> <li> <a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a> </li> <li> <a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a> </li> <li class="last"> <a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p> </a> </li> </ul> <div class="footer_co"> <a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo.png" alt="动视"></a> <p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p> <p> <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a> </p> <p>违法及侵权请联系:TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p> </div> </div> </div> <!--foot end--> <a href="#0" class="cd-top">Top</a> <script type="text/javascript"> $(function(){ var _line=parseInt($(window).height()/3); $(window).scroll(function(){ if ($(window).scrollTop()>100) { $('.edu_top').css({'position':'fixed','top':'0','z-index':'99'}) }else{ $('.edu_top').css({'position':'relative','top':'0'}) } }) }) </script> <script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script> </body> </html>