来源:自学PHP网 时间:2015-04-14 14:51 作者: 阅读:次
[导读] HTML标签1、!DOCTYPE声明位于文档中的最前面的位置,处于 html 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。!DOCTYPEhtmlPUBLIC-//W3C//DTD XHTML 1.0 Strict//ENhttp://ww......
HTML标签 <!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2、<a> 标签可定义锚 _parent _self _top _blank:在一个新的未命名的窗口载入文档 _self:在相同的框架或窗口中载入目标文档 _parent:把文档载入父窗口或包含了超链接引用的框架的框架集 _top:把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 一个锚有两种用法: 通过使用 href 属性,创建一个到另外一个文档的链接 通过使用 name 或 id 属性,创建一个文档内部的书签 (1)创建锚 <ahref="#C4">锚</a> 点击上面的连接,会定位到 <aid="C4">Chapter 4</a>或者<a name="C4">Chapter4</a>的文件 (2)创建电子邮件 <aref="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> 3、<abbr> 注释:在某些浏览器中,当您把鼠标移至缩略词语上时,title 属性可被用来展示表达的完整版本。 4、<acronym> 5、<address> 6、<area> 映射区域 属性 true false 从图像映射排除某个区域。 rectangle circ circle poly polygon 注:coords 属性 <area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。 下面列出了每种形状的适当值: 圆形:shape="circle",coords="x,y,z" 这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),z 是以像素为单位的圆形半径。 多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..." 每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。 多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。 矩形:shape="rectangle",coords="x1,y1,x2,y2" 第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0"是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。 例如 <map name="map"> <area shape="rect" coords="75,75,99,99"nohref="nohref"> <area shape="circ" coords="50,50,25"nohref="nohref"> </map> 注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。 案例: <img src="eg_planets.jpg" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href =" " target ="_blank" alt="Venus" /> </map> 注释:img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。 7、字体样式元素 <tt> 呈现类似打字机或者等宽的文本效果。 <i> 显示斜体文本效果。 <b> 呈现粗体文本效果。 <big> 呈现大号字体效果。 <small> 呈现小号字体效果。 <sub> 标签可定义下标文本 <sup> 可定义上标文本 8、base 元素:基准的url 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。 属性 注释:<base> 标签必须位于 head 元素内部。 案例: head中 <base target="_blank"href="img/">href可以是绝对的url或者相对的url body中 <img src="520.jpg"/> 实际是这样的代码 <img src="./img/520.jpg"/> 9、bdo 元素:文本方向 属性 rtl 案例:逆序输出 <bdo dir="rtl">Here issome Hebrew text</bdo> 10、<blockquote> 标签 11、body标签 12、 <caption> 标签 案例: <table> <caption>我的标题</caption> <tr> <td>100</td> </tr> </table> 13、<col> 标签:表格列的属性 如果您希望在 colgroup 内部为每个列规定不同的属性值时,请使用此元素。如果没有 col 元素,列会从 colgroup 那里继承所有的属性值。 案例 <table border="1"> <colgroup span="3"> <col width="20"></col> <col width="50"></col> <col width="80"></col> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> 属性 left center justify char middle bottom 创建一个有 5 列的<colgroup>。我们分别将第一列和最后一列靠左和靠右对齐,中间的三列居中。 <colgroup> <col align="left" /> <col align="center" span="3" /> <col align="right" /> </colgroup> 14、<dl> :列表 15、<dt> 16、<dd> 案例 <dl> <dt>Coffee</dt> <dd>Black hot drink1</dd> <dd>Black hot drink2</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> 输出: Coffee Blackhot drink1 Blackhot drink2 Milk Whitecold drink 17、<del> :删除线 18、<ins>:下划线 19、fieldset 元素。表单打包 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素 legend 元素可为 fieldset 定义一个标题 案例 <fieldset> <legend>健康信息:</legend> <form> <label>身高:<inputtype="text" /></label> <label>体重:<inputtype="text" /></label> </form> </fieldset> 20、form标签 表单可包含文本域,复选框,单选按钮等等。表单用于向指定的 URL 传递用户数据。
属性 post 发送邮件表单案例 <formaction="http:///someone@w3school.com.cn" method="post"enctype="text/plain"> <input type="text" name="name"value="yourname" size="20"> <input type="submit"value="发送"> <input type="reset"value="重置"> </form> 21、<frameset> 注释:如果您希望验证某个包含框架的页面,请确保DTD 被设置为 "Frameset DTD"。阅读更多有关 XHTML 验证的内容。 重要事项:您不能与<frameset></frameset> 标签一起使用 <body></body>标签。不过,如果您需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中! 属性 1 no atuo 案例: 水平框架 <frameset cols="35%,30%,35%"noresize="noresize" frameborder="0"> <frame src="a.html"> <frame src="b.html"> <frame src="c.html"> <noframes> <body>您的浏览器无法处理框架!</body> </noframes> </frameset> 垂直框架 <framesetrows="35%,30%,35%" noresize="noresize"frameborder="0"> <frame src="a.html"> <frame src="b.html"> <frame src="c.html"> <noframes> <body>您的浏览器无法处理框架!</body> </noframes> </frameset> 混合框架 <html> <framesetrows="50%,50%"> <frame src="a.html"> <framesetcols="25%,75%"> <frame src="b.html"> <frame src="c.html"> </frameset> </html> 导航框架 <html> <frameset cols="120,*"> <frame src="content.html"> <frame src="a.html" name="showframe">
</frameset> </html> content.html <html> <body> <a href ="a.html" target ="showframe">Framea</a><br /> <a href ="b.html" target ="showframe">Frameb</a><br /> <a href ="c.html" target ="showframe">Framec</a> </body> </html> 带锚的框架 <frame src="link.html#C10"> 22 、frameset 框架 属性 % * % * cols和rows作用和用法 <frameset> 标签有一个必需的属性:要么是 rows,要么是 cols,这取决于您的选择,它们定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。 这两个属性都接受用引号括起来并用逗号分开的值列表,这些数值指定了框架的绝对(像素点)或相对(百分比或其余空间)宽度(对列而言),或者绝对或相对高度(对行而言)。这些属性值的数目决定了浏览器将会在文档窗口中显示多少行或列的框架。 与表格一样,浏览器在显示时会尽可能接近给定的框架集尺寸。但是,浏览器不会为了能够容纳下超出边沿的框架集而扩展文档窗口的边界,也不会在指定的框架没有填满整个窗口时用空白区域来填满窗口。相反,浏览器会根据一个框架在行和列中相对于其他框架的大小来分配空间,这样就能够填满整个文档窗口了。(注意到一个主框架文档中没有滚动条了吗?) 23、head 元素
字符编码: <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /> 描述: <meta name="description" content="HTML examples"> 关键字: <meta name="keywords"content="HTML,DHTML, CSS"> 重定向:5秒后 <meta http-equiv="Refresh" content="5;url=../index.htm"tppabs="http://www.w3school.com.cn/"> 24、<hr> 标签可插入一个水平线 left right 设为FALSE:水平线呈现双色凹槽(3D效果) % % 25、iframe 元素:内联框架 比frameset多一个align属性。 案例 <iframesrc="img/520.jpg" ></iframe> 26、img元素 属性 bottom middle left right % % 27、<input> 标签 属性 checkbox file hidden imgage password radio reset submit text
指定input元素的类型,默认是text right top texttop middle baseline bottom absbottom
定义图像之后的文本的排列,仅与type=image配合使用 注释:不能与 type="hidden" 一同使用。 对于图像按钮:定义传递向某个脚本的此域的符号结果 对于复选框和单选按钮:定义 input 元素被点击时的结果。 对于隐藏域、密码域以及文本域:定义元素的默认值。 注释:不能与 type="file" 一同使用。 注释:与 type="checkbox" 和 type="radio" 一同使用时,此元素是必需的。 28、<label> 标签 注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。 显式: <labelfor="SSN">SocialSecurity Number:</label> <inputtype="text" name="SocSecNum" id="SSn" /> <label>Dateof Birth: <input type="text" name="DofB"/></label> 29、<ol> 标签定义了有序列表。 属性 a I i 1 30、<ul> 标签定义了无序列表。 注释:请使用样式来定义列表的类型。 属性 a(ol) I(ol) i(ol) disc(ul) square(ul) circle(ul) 案例
<h4>数字有序列表:</h4> <oltype="A" start="6"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol>
<h4>一个嵌套无序列表:</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶 <ul> <li>中国茶</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul> 32、<meta> 元素:元信息 <meta>标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 注释:<meta> 标签永远位于 head 元素内部。 注释:元数据总是以名称/值的形式被成对传递的。 属性 expires refresh set_cookie description keywords name 属性 name属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。 "keywords"是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。 类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助: <metaname="keywords" content="HTML,ASP,PHP,SQL" 如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。 http-equiv 属性 http-equiv属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。 当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。 使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加: <metahttp-equiv="charset" content="iso-8859-1"> <metahttp-equiv="expires" content="31 Dec 2008"> 这样发送到浏览器的头部就应该包含: content-type:text/html charset:iso-8859-1 expires:31Dec 2007 当然,只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。 content 属性 content属性提供了名称/值对中的值。该值可以是任何有效的字符串。 content属性始终要和name 属性或 http-equiv 属性一起使用。 scheme 属性 scheme属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义 33、noframes :不支持框架的浏览器 注释:如果浏览器有能力处理框架,就不会显示出 frameset 元素中的文本。 重要事项:如果您希望 frameset 添加 <noframes> 标签,就必须报其中的文本包装在 <body></body> 标签中! 34、script标签 35、<noscript> 标签 此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。 注释:如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。 注释:无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做,您应当在注释标签中隐藏脚本。老式的(无法识别 <script> 标签的)浏览器会忽略注释,这样就不会把标签的内容写到页面上,而新式的浏览器则懂得执行这些脚本,即使它们被包围在注释标签中! 案例 <scripttype="text/javascript"> <!-- document.write("如果显示了这段文字,那么您的浏览器支持JavaScript!") //--> </script>
<noscript>NoJavaScript support!</noscript> 36、object:潜入对象 注释:object 元素可位于在 head 元素或 body 元素内部。<object> 与 </object> 之间的文本是替换文本,针对不支持此标签的浏览器。<param>标签可定义用于对象的 run-time 设置。 注释:至于图像,请使用 <img> 标签代替 <object> 标签 属性 right top bottom 有关 classid 属性的详细信息 有关 codebase 属性的详细信息。 有关 codetype 属性的详细信息。 37、select 元素可创建单选或多选菜单。 属性 38、<optgroup> 标签:定义选项组 属性 39、option 元素:下拉列表中的一个选项(一个条目)。 注释:<option> 标签可以在不带有任何属性的情况下使用,但是您通常需要使用value 属性,此属性会指示出被送往服务器的内容。 注释:请与 select 元素配合使用此标签,否则这个标签是没有意义的。 属性 案例: <select> <optgroup label="SwedishCars"> <option value ="volvo"selected="selected">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="GermanCars" disabled="disabled"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> 40、pre 元素:定义预格式化的文本。 <pre>标签的一个常见应用就是用来表示计算机的源代码。 制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。 41、span:行内元素 提示和注释: 提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。 如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。 可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。 可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。 42、<table> 标签:定义表格。 属性 right center 可以通过border=‘0’来显示无边框的表格 % % hsides,lhs,rhs, vsides,box,border cols,all 必须要与border属性配合使用 % 案例: 带标题的表格: <tableborder="6"> <caption>我的标题</caption> <tr> <td>100</td> </tr> <tr> <td>400</td> </tr> </table> 跨列:colspan="2" 跨行:rowspan="2" 43、<tbody> 标签:表格主体(正文)。 虽然您可能想包括一个,甚至会在表格中包括两个或更多个 <tbody> 标签,但是我们建议最好在表格中没有 <tbody> 标签。 在 <tbody> 标签中,只有 <tr> 标签可以定义表格行。并且一旦定义,一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个 <tbody> 跨越到另一个 <tbody> 中。 thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上 HTML 事件 2、键盘事件 3、鼠标事件 属性 HTTP消息状态 2xx: 成功 non-authoritative information 3xx: 重定向
4xx: 客户端错误 5xx: 服务器错误 Internal Server Error
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com