felayman--html4.01入门篇
|
<!doctype html> <html> <head> <title>html4.01标签大全</title> <meta charset="utf-8"/> </head> <body> <!--这里开始学习的时候html4.01,为什么呢？因为现在h5还没有流行起来,原本打算跳过4.01的学习 但是还是学习了,看了网上几乎所有的网站依然是使用html4.01只有少数网站进行了改版为Html5 一、经过长时间的挣扎和摸索，在学习编程的过程中总结了自己的学习方法 1.第一遍学习的时候我会从头到位开始学习，以求了解知识达到入门 2.分类，将所学习的知识点进行分类，达到初步模块的学习 3.模块化,将所学习的知识进行模块划分，可以系统的对所学习的知识进行糅合 4.在各个主流网站查找,看看人家是怎么使用该标签的 2014/3/20
二、html4.01所有的标签说明（剔除已经不赞成使用的） 1.<!----/> 注释（中间的‘\’是转意字符因为我这注释是写在注释内的） 2.<!doctype> 标注该文档的类型 3.<a> 超链接 4.<abbr> 定义缩写 5.<acronym> 定义只取首字母的缩写 6.<address> 定义地址元素 7.<area> 定义图像内部的映射 8.<b> 定义粗体字体 9.<base> 定义基本地址 10.<bdo> 定义文本显示方向 11.<big> 定义大号字体 12.<blockquote> 定义块引用 13.<body> 定义文本开始的定界符 14.<br> 定义换行 15.<button> 定义按钮 16.<caption> 定义表格table的标题 17.<cite> 定义引用 18.<code> 定义文本显示为计算机代码形式 19.<col> 定义表格table的列属性 20.<colgroup> 定义表格列的组属性 21.<dd> 定义你想定义的文本 22.<del> 定义被删除的文本 23.<div> 定义块元素,默认换行 24.<dfn> 定义你想定义的项目 25.<dl> 定义你想定义的列表 26.<dt> 定义你想定义的项目 27.<em> 定义你想强调的文本 28.<fieldset> 定义域结构 29.<form> 定义表单 30.<frame> 定义框架集合的子窗口 31.<frameset> 定义框架集合 32.<h1-h6> 定义不同字体大小 33.<head> 定义头部信息 34.<hr> 定义水平线 35.<html> 定义该html 36.<i> 定义斜体字体 37.<iframe> 定义内联框架 38.<img> 定义图片 39.<kbd> 定义键盘文本 40.<label> 定义标签 41.<leqend> 定义框架集合的标题 42.<li> 定义列表的项目元素 43.<link> 定义style的资源引用 44.<map> 定义图像映射 4.<meta> 定义元信息 46.<noframe> 定义无框架的节 47.<noscript> 定义无脚本的节 48.<object> 定义内嵌对象 49.<ol> 定义有序列表 50.<optgroup> 定义选项组 51.<option> 定义选项 52.<p> 定义段落 53.<param> 定义用于object标签的参数信息 54.<pre> 定义域格式文本信息 55.<q> 定义短的引用 56.<samp> 定义计算机代码样式 57.<script> 定义脚本 58.<select> 定义选择列表 59.<small> 定义小号字体 60.<span> 定义文档中的节,默认不换行 61.<strong> 定义强调文本 62.<style> 定义样式表 63.<sub> 定义下标 64.<sup> 定义上标 65.<table> 定义表格 66.<tbody> 定义表格的主体 67.<td> 定义表格单元 68.<textarea> 定义文本区域 69.<tfoot> 定义表格的页脚 70.<th> 定义表格的页眉 71.<thead> 定义表格的标题 72.<title> 定义整篇文档的标题 73.<tr> 定义表格的行 74.<tt> 定义打印机字体 75.<ul> 定义无序列表 76.<var> 定义变量 77.<input> 定义输入区域 三、html4.01规范中大概就是上述77个标签,而真正需要深入了解也才那么几个， 下面我会逐个去给出每个标签的详细用法以及再各大网站的应用 --> <!-- 1.<!----/> 这个是注释,就是对我们对某个元素或者某段我们写过的代码进行屏蔽的作用,一般用于前期开发的时候很有用,因为代码量大的时候我们很容易忘记,因此会给予一定文本描述,来提示开发者，下列列出几个著名网站对注释的使用 1.CSDN的部分注释内容 <!--header--/> <!--nav--/> </div>--> <!--content--> <!--<dd> 文明上网违法信息举报电话：13552009689 <img src="http://csdnimg.cn/www/images/csdnindex_pic55.gif" alt="" title="" /></dd> --/> 2.淘宝网的部分注释 <!-- END --> <!-- TMS tb-fp/tmall/2.php --/> <!-- TMS fp2012/notice.php --/> <!-- TMS fp2013/activity.php --><!-- 活动区块 --><!-- END --><!-- TMS fp2013/tongji.php --/> 3.网易新闻的部分注释 <!-- css.css start --> <!-- css.css end --> <!-- navtop.html start --> <!-- header.html end --/> 好了,就给出这么多例子,可以看出大部分网站给出注释都是为某一个部分来进行提示说明，如头部，主体内容，尾部，一般是为网站布局进行说明 --> <!-- 2.<!DOCTYPE> 这个就不用说明了,是W3C定的规范,说明该文档的类型以及使用的是哪种规范 --> <!-- 2.<a> 这个是超链接,可以这么说,网络之所以这么强大,就是因为有这个标签的存在，它有两种主要使用方法 常用 1.通过使用 href 属性，创建一个到另外一个文档的链接 2.通过使用 name 或 id 属性，创建一个文档内部的书签 下面给出实例 --> <!--第一种使用方法,当点击该超链接就会跳转到href属性定义的目的连接,可以是本地，远程，图片，文本，音乐，视频--> <a href="日语1301.xls">xls文件</a> <a href="html4.01.doc">doc文件</a> <a href="Kenny G - My Heart Will Go On.mp3">音乐文件</a> <!--因此我们再想起在网上能够下载某个文档,视频,pdf等的时候也就是这么简单--> <!--再说第二种使用方法 作为锚点创建一个文档内部的书签 这个其实非常非常有用,我们再上网的时候会经常遇到 当我们把某个网页下拉到很远的下面的时候,有时候回去的时候只能靠鼠标中间的滚动条来做 非常麻烦,但是有了这个锚点后,我们很轻松就回去到顶部或者底部， 如下面几个网站就是这么做的。 1.2345导航网站 <a id="gotop" href="javascript:;" onClick="top.scrollTo(0,0);clickCount(‘ggfhdb‘);" target="_self" >返回顶部</a> 2.百度图片 <a class="goto-top" href="#" title="返回顶部" style="display:none;"></a> --> <!-- 3.<abbr> 定义缩写，给个简单列子,跟title没什么大区别 不常用 --> <abbr title="我是abbr标签">abbr</abbr> <!-- 4.<acronym> 也是定义缩写,只不过是取首字母跟title没什么大区别 不常用 --> <acronym title="Hello,Wolrd">HW</acronym> <!-- 5.<address> 这个标签只是增强规范,实现上把普通文本编程斜体以便区分 --> <address title="北京市通州区梨园镇城铁旁边">北京市通州区梨园镇城铁旁边</address> <!-- 6.<area> 这个很重要,在一张图片内部做图片映射,跟后面的img、map标签一起说明 常用 --> <!-- 7.<b> 定义粗体 --> <b title="我是粗体字">我是粗体哦</b> <!-- 8.<base> 定义该文档所有超链接打开方式 常用 --> <base target="_blank">所有超链接在没有定义target属性的时候都是以_blank方式打开</base> <!-- 9.<bdo> 设定某个文本的排列方式 不常用可以忽略 1.正向 2.反向 --> <bdo dir="ltr">文本正向排列</bdo> <bdo dir="rtl">文本反向排列</bdo> <!-- 10.<big> 定义大号字体 不常用 --> <big>我是大号字体</big> <!-- 11.<>blockquote> 设定长引用 不常用 可以忽略 --> <blockquote>我是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的引用</blockquote> <!-- 12.<body> 忽略吧 --> <!-- 13.<br> 换行 --> 这里该换行了<br/> <!-- 14.<button> 按钮，常用很常用经常与js交互使用 --> <button tutle="我是一个按钮">我是一个按钮</button> <!-- 15.<caption> 表格的标题 与后面的table一起说明 --> <!-- 16.<cite> 忽略吧 定一个短的引用 --> <cite title="我是一个短的引用">我是一个短的引用</cite> <!-- 17.<code>和<pre> 常用,我们在论坛上发帖的代码能够以代码的形式就指望他和<pre>了 --> <code><pre>public class HelloServlet extends HttpServlet{ public void doGet(HttpServletRequest request,HttpServletResonse)(){ doPost(request,response); } public void doPost(HttpServletRequest request,HttpServletResonse){ PrintWriter out =request.getWriter(); out.println("HelloWorld"); } }</pre></code> <!-- 18.<col> 跟后面的表格table一起说明 --> <!-- 19.<colgrounp>跟后面的表格table一起说明 --> <!-- 20.<dd><dt><dl> 这三个是一起的,是w3c的一种规范，一般用作区分分档的结构 在h5里面会被其他标签取代的 --> <dl> <dt>游戏</dt> <dd>DNF</dd> <dd>CF</dd> <dd>Dota</dd> <dt>公司</dt> <dd>阿里巴巴</dd> <dd>腾讯</dd> <dd>百度</dd> </dl> <!-- 21.<del> 定义删除文本 一般想各种商城上面的价格打几折，原价多少，现价多少一般用 这个标签 如：淘宝上，美团上的 --> <del title="原价100W现价1毛">删除我吧</del> <!-- 22.<div> 定义块节点 没发讲，内容太多,与css一起说明 前台基本全靠他 所有网站源码有一半的标签几乎是它 --> <!-- 23.<dfn> 忽略吧 没什么用 --> <!-- 24.<em> 强调文本 用处不大把普通字体变成斜体，是一种规范 --> <em title="我是强调文本">我是强调文本</em> <!--
25.<fieldset><frame><iframe><frameset> 除了<iframe>其他都忘了吧 学了也没用h5里面都不支持了 如下面的例子,把百度放进了iframe窗口内部 --> <iframe width="800px;height=200px;" src="http://www.baidu.com" ></iframe> <!-- 26.<form> 很重要,与后台交互基本就靠它了.与后面的input一起说明 --> <!-- 27.<h1-h6> 没什么可以说的,就是字体大小的变化 --> <!-- 28.<hr> 水平线 --> <hr/> <!-- 29.<html> 忽略了 --> <!-- 30.<i> 把普通字体变斜体 --> <i title="我是斜体">我是斜体</i> <!-- 31.<img> 很重要的,专门用于放置图片的 --> <img src="257891.jpg"/> <!-- 32.<input> 相当重要一般和<form>一起使用 --> <form action="#" method="post/get"> 按钮:<input type="button"/> 复选框：<input type="checkbox"/> 文件上传按钮：<input type="file"/> 隐藏域：<input type="hidden"/> 图片框：<input type="image"/> 密码框：<input type="password"/> 单选框：<input type="radio"/> 重置框：<input type="reset"/> 提交按钮：<input type="submit"/> 文本域：<input type="text"/> </form> <!-- 33.<ins> 插入文本，就是在普通文本下加入下划线可忽略 --> <ins>插入文本</ins> <!-- 34.<kbd><samp> 没什么用处,也是改变字体样式,有了css可以忽略 --> <!-- 35.<label> 定义一个标签，就是不可编辑的文本域,在h5里面没这个概念一切都可以编辑 --> <label>我是标签</label> <!-- 36.<legend> 忽略,可以不学 --> <!-- 37.<li><ol><ul> 这三个是哥们 一起使用的 水很深,扩展性很强，重点学 --> <ul> <li>苹果</li> <li>橡胶</li> <li>橘子</li> </ul> <ol> <li>篮球</li> <li>足球</li> <li>棒球</li> </ol> <!--- 38.<link> 引入外部资源文件,一般是style --> <!-- 39.<map><area><img>这三个是黄金组合,用于图片的映射 --> <img src="../i/eg_planets.jpg" tppabs="http://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="../example/html/venus.html" tppabs="http://www.w3school.com.cn/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="../example/html/mercur.html" tppabs="http://www.w3school.com.cn/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="../example/html/sun.html" tppabs="http://www.w3school.com.cn/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> <!-- 40.<meta> 很重要 一般用于SEO优化和发送请求头内容 实例如下 <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> --> <!-- 41.<noframes><noscript> 一般是用于特殊说明,用于该标签内的内容是没有脚本和框架集的 --> <!-- 42.<object><param> 当把html学的差不多了,再回头研究这个,是用于对html进行扩展了,如扩展视频,音频,flash --> <!-- 43.<p> 就是一个块元素 --> <p>块元素</p> <!-- 44.<script> 定义脚本 --> <!-- 45.<sub><sup> 就是定义上标和下标 --> 下标<sub>2</sub>上标<sup>2</sup> <!-- 46.<table><tr><td><th><thead><tfoot><tbody>这几个是一起的与表格相关的,其实也是w3c的规范，为了便于区分文档结构 --> <table width="400px"height="400px" border="2px"> <!--定义表格标题--> <thead>我是表格标题</thead> <!--定义表格主体--> <tbody> <!--定义表格行--> <tr> <!--定义表格的列--> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> <td>第1行第4列</td> </tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> <td>第2行第4列</td> </tr> </tbody> <!--定义表格的页脚--> <tfoot>我是页脚</tfoot> </table> <!--整篇文档到这里就算是结束了,这只是记录我的html4.01的入门篇了,下面会好好看看相关知识 把html4.01进行分类学习。 --> </body> </html> |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
