HTML基本标签
来源：互联网 发布：中石油国际事业部 知乎 编辑：程序博客网 时间：2024/06/08 06:24
网页效果
网页源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>FORM</title> <h1>文字</h1></head><body bgcolor="#ffe4c4"><FONT size="7" color="">博客01</FONT><h3>开始测试换段落标签</h3><pre>\n其中,ALIGN 是<\p\>标签的属性, 属性有三个参数left,center,right.这三个参数设置段落文字的左, 中, 右位置的对齐方式</pre><p align="right">右对齐</p><p align="center">中间位置</p><p align="left">这里是左对齐</p><h3>测试原样显示标签 pre </h3><pre> hhhhhhhhhhhh hhhhhhhhhhhhh kkkkkkk sbcjwcwj</pre><h3>居中对齐标签</h3><center> 故人西辭黃鶴樓， 煙花三月下揚州。 孤帆遠影碧山盡， 惟見長江天際流。</center><h3>引文标签</h3><blockquote>引文标签可以用来建立一个引文，他特别适合较长文本的引用，引文显示时将会自动右移，左边空出几个格，加以区别。 </blockquote><h3>水平分隔标签</h3><hr size="26"><p>hr size="26" </p><hr width="60%">hr width="60%"<hr width="40%" align="lert"><p> hr width="40%" align="lert"</p><h3>署名标签</h3><p>署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信息。</p><address>这里是署名</address><h3>逻辑类型</h3><pre> em 标签：<em>用于强调的文本，一般显示为斜体字</em> strong标签：<strong> 用于特别强调的文本，显示为粗体字</strong> cite 标签：<cite>用于引证和举例，通常是斜体字</cite> code 标签：<code> 用来指出这是一组代码</code> small 标签：<small>规定文本以小号字显示</small> big 标签：<big>规定文本以大号字显示</big> samp 标签：<samp>显示一段计算机常用的字体，即宽度相等的字体</samp> kbd 标签：<kbd>由用户输入文本，通常显示为较粗的宽体字</kbd> var 标签：<var>用来表示变量，通常显示为斜体字</var> dfn 标签：<dfn>表示一个定义或说明，通常显示为斜体字</dfn> sup 标签：12<sup>2</sup>=144 sub 标签：硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub></pre> <h3>文字格式</h3><font face=黑体 size=6 color="red" >face=黑体 size=6 color="red"</font> </br><font face=隶书 size=+3 color="green">font face=隶书 size=+3 color="green"</font></br><font face=楷体 size=4 color="#ff00ff">font face=楷体 size=4 color="#ff00ff" </br>font face=楷体 size=4 color="#ff00ff"</font> </br><h3>文字的物理类型</h3><font color="#FF0000" size="+2"><b>这些文字是粗体的</b></font><br><br> <i> 这些文字是斜体的</i> <br><br> <u>这些文字带有下划线</u><h1>列表</h1><h3>无序列表</h3><p>无序列表指没有进行编号的列表, 每一个列表项前使用LI。 LI的属性type 有三个选项, 这三个选项都必须小写: disc 实心园，circle 空心园,square 小方块。</p><ul> <li>默认的无序列表加" 实心园" <li type=square> 无序列表square 加方块 <li type=circle> 无序列表circle 加空心园</ul><h3>有序列表</h3> <ol> <li>默认的有序列表 <li>默认的有序列表 <li>默认的有序列表 </ol> <ol type=a start=5> <li> type=a start=5 <li>第2 项 <li>第3 项 <li value= 20> 第4 项 li value= 20 </ol> <ol type= I start=2> <li>type= I start=2 <li>第2 项 <li>第3 项 </ol><h3></h3><h3>嵌套列表</h3><p> 将一个列表嵌入到另一个列表中，作为另一个列表的一部分，叫嵌套列表。 无论是有序列表和无序列表的嵌套，浏览器都可以自动地分成排列。</p><ol type=a> <li> 这是以序号类型a 开头第一行内容</li> <li> 这是以序号类型a 开头第二行内容</li> <ol type=A start=3> <li>这是以序号A 类型C 开头第一行内容</li> <li>这是以序号A 类型C 开头第二行内容</li> <ol type=1 start=51> <li> 这是以序号数字 51开头第一行内容</li> <li> 这是以序号数字 51开头第二行内容</li> <li> 这是以序号数字 51开头第三行内容</li> </ol> <li>这是以序号A 类型C 开头第三行内容</li> </ol> <li> 这是以序号类型a 开头第三行内容</li> </ol><h3>定义性列表 dl dt dd</h3><p> 定义列表的标记也叫描述性列表，定义列表默认为两个层次，第一层为列表项标签DT，第二层为注释项标签DD。 <br> DT和DD标签通常是成对使用的。也可以一个列表项对应于几个解释项，这种方式很少用。 <br>DD默认的注释是显示在另一行中, 当使用dl compact="compact"后,注释项和列表项将显示在同一行。 <br> </p><dl> <dt> WWW：<dd> WWW是(World wide web) 的缩写，也可简写web; <dt> WWW ：<dd> WWW又叫万维网; <dt> WWW ：<dd> internet提供的最常用的服务是WWW; </dl> <h3>目录列表 dir</h3><dir> <li>第一项 <li>第二项 <li>第三项</dir><h3>菜单列表 menu</h3><p>目录列表标签,菜单列表标签, 它们的格式和无序列表是一样的</p><menu> <li type=disc>第一项 type=disc <li type=circle>第二项 type=circle <li type=square> 第三项 type=square</menu><h1>图像</h1><h3>插入普通图像</h3> <IMG src="4.png"><wbr>秋雨无声无息地下着。<BR>飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……<BR>黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。<BR>然而，“ 雨到深秋易作霖，萧萧难会此时心” ，此时，又有谁能听我诉说心中的那份情怀呢？<BR><h3>设定图像与文本之间的距离</h3> <IMG src="4.png" align="left" hspace="20" vspace="20"> 秋雨无声无息地下着。<BR> 飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……<BR> 黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。<BR> 然而，“ 雨到深秋易作霖，萧萧难会此时心” ，此时，又有谁能听我诉说心中的那份情怀呢？<BR> <br> <hr width="90%"><h3>图像大小的设定</h3> <IMG src="4.png" align="center" width="200" height="200"><h3>图像边框的设定</h3> <IMG src="4.png" align="center" width="200" height="200" border="10"><h3>用img标签插入avi文件</h3><p> </p><h1>超链接</h1><h3>书签链接</h3><a ><H2>唐诗欣赏</H2></a><a ><H2>李白</H2></a><A href="#T.2" target="_blank">清平調三首</A><br><A href="#T.1">長干行</A><br><A href="#T.3">月下獨酌</A><HR><BR><BR><H3><a name="T.2">清平調三首</a><A >清平調三首</A> </H3>雲想衣裳花想容，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。<H3><a name="T.1">長干行</a><A >長干行</A> </H3><PRE>妾髮初覆額，<br>折花門前劇。<br>郎騎竹馬來，<br>遶床弄青梅。<br>同居長干里，<br>兩小無嫌猜。<br>十四為君婦，<br>羞顏未嘗開。<br>低頭向暗壁，<br>千喚不一回。<br>十五始展眉，<br>願同塵與灰。<br>常存抱柱信，<br>豈上望夫臺。<br>十六君遠行，<br>瞿塘灩澦堆。<br>五月不可觸，<br>猿鳴天上哀。<br>門前遲行跡，<br>一一生綠苔。<br>苔深不能掃，<br>落葉秋風早。<br>八月蝴蝶來，<br>雙飛西園草。<br>感此傷妾心，<br>坐愁紅顏老。<br>早晚下三巴，<br>預將書報家。<br>相迎不道遠，<br>直至長風沙。 ，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。</PRE><A href="#top">回到顶端</a><BR><BR><H3><a name="T.3">月下獨酌</a><A >月下獨酌</A> </H3><PRE>花間一壺酒，<br>獨酌無相親。<br>舉杯邀明月，<br>對影成三人。<br>月既不解飲，<br>影徒隨我身。<br>暫伴月將影，<br>行樂須及春。<br>我歌月裴回，<br>我舞影零亂。<br>醒時同交歡，<br>醉後各分散。<br>永結無情遊，<br>相期邈雲漢。</PRE> ，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。<h3>绝对路径链接</h3><A HREF="http://www.sina.com.cn" title=" 打开新浪首页"><imgsrc="7.gif/"></A><BR><BR><A HREF="http://www.tsinghua.edu.cn">清 华 大 学</A><BR><BR><A HREF="http://www.pku.edu.cn"> 北 京 大 学</A><BR><BR><A HREF="http://www.shisu.edu.cn" target=_blank>上海外国语学院</A><BR><h3>链接FTP</h3><p><a href=ftp://ftp.pku.edu.cn>北京大学ftp 站点</a></p><h1>表格</h1><h3>简单的表格</h3> <TABLE> <caption>表格标题</caption> <TR > <TD>第1行中的第1列</TD> <TD>第1行中的第2列</TD> <TD>第1行中的第3列</TD> </TR> <tr> <th>第2 行中的第1 列</th> <th>第2 行中的第2 列</th> <th>第2 行中的第3 列</th> </tr> </TABLE> <TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor="#9900FF" width="400" height="160"> <TR> <TH>姓名</TH> <TH>性别</TH> <TH>年龄</TH> <TH>专业</TH> </TR> <TR> <TD>卡卡</TD> <TD>男</TD> <TD>50</TD> <TD>计算机</TD> </TR> </TABLE><h3>表格行的设定</h3><TABLE border=1 align="center" width="80%" height="150"><TR ALIGN="CENTER"><TH>姓 名</TH><TH>性 别</TH><TH>年 龄</TH><TH>专 业</TH></TR><TR ALIGN=CENTER bordercolor="#336600" bgcolor="#C1FFC1"><TD>咚 咚</TD><TD>男</TD><TD>18</TD><TD>学 生</TD></tr><tr align=center height=50 bordercolor=navy bgcolor="#86B8E1" valign=bottombordercolorlight="#E1F0FD" bordercolordark="#002346"><TD>楠 楠</TD> <h3></h3><TD>女</TD> <h3></h3><TD>17</TD><TD>学 生</TD> <h3></h3></TR></TABLE><h3>wrap属性研究</h3><p>测试字符串：</p><p>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</p><p>单元格未设置nowrap 属性的空表：</p><table width="100" border="1" cellspacing="0" cellpadding="0"><tr><td> </td></tr></table><p>加入测试字符串：</p><table width="100" border="1" cellspacing="0" cellpadding="0"><tr><td>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</td></tr></table><p>单元格设置了nowrap 属性，未设置width 属性：</p><table width="100" border="1" cellspacing="0" cellpadding="0"><tr><td nowrap>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</td></tr></table> <p>单元格设置了nowrap 属性，也设置了width 属性：</p><table width="200" border="1" cellspacing="0" cellpadding="0"><tr><td width="120" nowrap>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</td><td> </td></tr></table><h3>跨多行多列的单元格</h3><table border=10 width=80% align="center" height="150"background="9.gif" bordercolorlight="#9999FF"bordercolordark="#9900CC"><TR ALIGN=center><TH colspan=3> 学生基本信息</TH><TH colspan=2>成 绩</TH></TR><TR ALIGN=center><TH>姓 名</TH><TH>性 别</TH><TH>专 业</TH><TH>课 程</TH><TH>分 数</TH></TR><TR ALIGN=center><TD>咚 咚</TD><TD>男</TD><TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD><TD>68</TD></TR><TR ALIGN=center><TD>喃 喃</TD><TD>女</TD><TD>89</TD></TR></table><h3>表格按行分组</h3><table border=3 width=60% align="center" height="150"> <thead bgcolor="#CCFFCC"> <TR ALIGN=center> <TH>姓 名</TH> <TH>性 别</TH> <TH>专 业</TH> </TR> </thead> <tbody bgcolor="#448FBD"> <TR ALIGN=center> <TD>咚 咚</TD><TD>男</TD><TD>计算机</TD> </TR> <TR ALIGN=center> <TD>喃 喃</TD><TD>女</TD><TD>园 林</TD> </TR> </tbody> </table> <h3>表格按列分组</h3><table border=10 width=80% height="160" align="center" bordercolorlight="#CCCCFF"bordercolordark="#9900FF"><tr><th>姓名</th><th>性别</th><th>专业</th><th>分数</th></tr><colgroup span=2 align=center><colgroup align =left><colgroup align=right><tr><td>咚 咚</td><td>男</td><td>计算机</td><td>79</td></tr> <tr><td>喃 喃</td><td>女</td><td>园 林</td><td>90</td></tr><tr><td>依 依</td><td>女</td><td>微波通信</td><td>76<td></tr></table><h3>同时按行列分组</h3><TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF"> <COLGROUP SPAN=2 ALIGN=CENTER> <COLGROUP ALIGN=LEFT> <COLGROUP ALIGN=RIGHT> <THEAD bgcolor="#FFFFCC"> <TR><TH> 姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH> <TR> </THEAD> <TBODY bgcolor="#FFCCFF"> <TR> <TD>咚 咚</TD><TD>男</TD><TD>计算机</TD><TD>85</TD> </TR> <TR> <TD>喃 喃</TD><TD>女</TD><TD>园 林</TD><TD>94</TD> </TR> <TR> <TD>依 依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD> </TR> </TBODY> </TABLE> <h3>表格的标题标签</h3><table border=10 width=80% align="center" height="150"background="4.png" bordercolorlight="#9999FF"bordercolordark="#9900CC"><caption>学生信息表</caption><TR ALIGN=center><TH colspan=3> 学生基本信息</TH><TH colspan=2>成 绩</TH></TR><TR ALIGN=center><TH>姓 名</TH><TH>性 别</TH><TH>专 业</TH><TH>课 程</TH><TH>分 数</TH></TR><TR ALIGN=center><TD>咚 咚</TD><TD>男</TD><TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD><TD>68</TD></TR><TR ALIGN=center><TD>喃 喃</TD><TD>女</TD><TD>89</TD></TR></TABLE><h3>表格嵌套</h3><table width="560" border="3" cellspacing="1" cellpadding="1" align="center"> <tr> <td width="100" height="69"> 网页标志</td> <td colspan="2"><div align="center"> 广告条</div></td> </tr> <tr> <td height="330"> <table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1"> <tr> <td>标题栏</td> </tr> <tr> <td>标题栏</td> </tr> <tr> <td>标题栏</td> </tr> <tr> <td>标题栏</td> </tr> <tr> <td>标题栏</td> </tr> <tr> <td>标题栏</td> </tr> <tr> <td>标题栏</td> </tr> <tr> <td>标题栏</td> </tr> <tr> <td>标题栏</td> </tr> <tr> <td height="90">内容六</td> </tr> </table> </td> <td width="275"> <table width="275" height="325" border=" 3" cellpadding="1" cellspacing="1"> <tr> <td width="263">内容一</td> </tr> <tr> <td>内容二</td> </tr> </table> </td> <td width="163"> <table width="157" height="320" border ="3" cellpadding="1" cellspacing="1" align="center"> <tr> <td width="136" height="94"> 内容三</td> </tr> <tr> <td height="62">内容四</td> </tr> <tr> <td height="160">内容五</td> </tr></table> </td></tr> </table> <h1>网页的动态、多媒体效果</h1><h3>滚动字幕</h3><font face="字体2" size=6 color="#ff0000">滚动字幕</font><br><marquee>啦啦啦~~~我会跑了</marquee><p><marquee height="200" direction="up" hspace="200">啦啦啦~~~我会往上跑了<br>啦啦啦~~~我会往上跑了</marquee><p><marquee direction="right"> 啦啦啦~~~我会往右跑了</marquee><p><marquee height="200" direction="down"><center>啦啦啦~~~我会往下跑了</center></marquee><p><marquee width="500" behavior="alternate">啦啦啦~~~我来回的跑</marquee><p><marquee behavior="slide">啦啦啦~~~我跑到目的地就该休息了</marquee><P><marquee scrollamount="2">啦啦啦~~~我累了，要慢慢的溜达</marquee><P><marquee scrolldelay="300">啦啦啦~~~我累了，我要走走停停</marquee><p><marquee scrollamount="20"> 哈哈~ 都没有我跑得快</marquee><p><marquee><img src="7.gif">啦啦啦~~图片也可以啊</marquee><p><marquee bgcolor="#FFFFCC" width=" 700" vspace="30"><font size="+3"color="#FF0000">啦啦啦~~滚动文字有背景了</font></marquee><h3>插入多媒体文件</h3><embed src="" height=150 width=400 loop="false"></embed><embed src="" width="400" height="500" loop="false"></embed><bgsound src="" loop="3" ></bgsound> <!-不能用><h1>表单的设计</h1><h3>input 控件</h3><pre> <form action="" method="post" target="_parent"> 单行的文本输入区域：<INPUT class=nine name=T1> 普通按钮：<INPUT class=nine name=B1 type=submit value=Submit> 提交按钮：<INPUT class=nine name=B1 type=submit value=Submit> 重置按钮：<INPUT name=B1 type=reset value=Reset> 复选框：你喜欢哪些教程：<INPUT name=C1 type=checkbox value=ON> Html入门 <INPUT CHECKED name=C2 type=checkbox value=ON> 动态 Html <INPUT name=C3 type=checkbox value=ON> ASP 图像来代替Submit 按钮：<INPUT border=0 height=20 name=I2 src="6.gif"type=image width=65> 密码的区域：<INPUT class=nine name=p1 type=password> </P> 单选按钮:你的休闲爱好是什么：<INPUT CHECKED name=R1 type=radio value=V1> 音乐<INPUT name=R1 type=radio value=V2> 体育 <INPUT name=R1 type=radio value=V3>旅游</form> </pre> <a href="#" onClick="window.history.back()"><FONT size=4>返回</FONT></A></SUB> </pre> <h3>下拉列表框</h3> <form action="" method="post"> <p>请选择最喜欢的男歌星: <select name="gx1" size="1"> <option value="ldh">刘德华 <option value="zhxy" selected>张学友 <option value="gfch">郭富城 <option value="lm">黎明 </select> </form> <h3>复选的列表框</h3><form action="" method="post"> <p>请选择最喜欢的女歌星: <select name="gx2" multiple size="4"> <option value="zhmy">张曼玉 <option value="wf" selected>王菲 <option value="tzh">田震 <option value="ny">那英 </select> </form> <h3>多行的文本框</h3><form action="" method="post"> <p>您的意见对我很重要: <textarea name="yj" clos="20" rows="5"> 请将意见输入此区域 </textarea> </form></body></html>
阅读全文
0 0
- html基本标签--框架标签
- HTML 基本标签
- HTML 的基本标签
- 基本的 HTML 标签
- 基本的 HTML 标签
- HTML基本标签
- html 基本标签
- HTML基本标签--表单
- HTML基本标签
- JS-HTML基本标签
- html基本标签
- html基本标签
- 基本的 HTML 标签
- html基本标签大全
- html 基本标签
- html基本标签
- HTML网页基本标签:
- html 基本标签
- CentOS7安装VMware后启动遇到的问题
- ETL技术入门之ETL初认识
- U3D打印菱形
- Ios 获取APP的Launch Image
- POJ 3984(bfs加路径)
- HTML基本标签
- 14、ES6 for...of循环
- 深度函数式神经网络
- discuz X3.4的最新版QQ互联插件配置教程
- 内核中的中断函数request_irq()
- 【安全牛学习笔记】skipfish
- C注释转换至CPP注释
- hdu 5213 Lucky (莫队+容斥)
- webpack使用
