HTML各种标签及简单应用：
http://www.Vevb.com.cn
1 <p><p> 2 <br/> 3 <hr/>横线 4 <PRe><pre> 保留了标签内的空格和换行 5 <code>Computer code</code> 6 <br /> 7 <kbd>Keyboard input</kbd> 8 <br /> 9 <tt>Teletype text</tt>10 <br />11 <samp>Sample text</samp>12 <br />13 <var>Computer variable</var>14 <br />15 地址<address></address>16 显示缩略词<abbr title="etcetera">etc.</abbr>17 <acronym title="World Wide Web">WWW</acronym>18 19 <del></del>删除 20 <ins></ins>插入 21 <b></b> 加粗 22 <strong></strong >加重语气 23 <i></i>斜体 24 <small></small>小字体 25 <q></q>加引号26 <blockquote></blockquote>长引用 27 <a href="" targer="_blank"></a> 链接在新的窗口打开 28 <a href="mailto:someone@microsoft.com?subject=hh%20again></a>%20 代替空格号
1 空格 2 <h></h>标题 3 <tr><td></td><td></td></tr> 4 <table cellpadding="10"></table> 内边距 5 <table cellspacing="10"></table> 外边距 6 bgcolor="red" background="" 7 <table frame="box“></table> above below hsides(上和下) vsides (左和右) 8 <ul><li></li></ul>无序列表 左边有黑原点 9 <ol start="50"><li><li></ol>左边有序号从50开始 10 <dl><dt></dt><dd></dd><dd><dd></dl>11 <form>12 <input type="text" name="dd"/>13 <input type="checkbox" name="cc" value="male"/>14 <input type="checkbox" name="cc" value="female"/>15 <select name="bb">16 <option value="volvo">volvo</option>17 <option value="f">f</option>18 </select>19 <textarea rows="10" cols="30">20 ddddd21 </textarea >22 <fieldset>23 <legend>ddd</legend>24 </fieldset> 使表单周围有框25 <input type="reset" value="重置"/>重置26 </form>27 <frameset cols="25%,50%,25%">28 <frame src="dd.html">29 <frame src="dd.html">30 <frame src="dd.html">31 </frameset>实现在一个页面内垂直展示三个页面内容—------网页32 <frameset rows="25%,50%,25%">33 <frame src="dd.html">34 <frame src="dd.html">35 <frame src="dd.html"> html5不支持了36 </frameset>实现在一个页面内水平展示三个页面内容37 <iframe src=""></iframe>内嵌的38 <noscript></noscript>里面的显示不支持Js的文本39 <video controls="controls">40 <source src="movie.ogg" type="video/ogg">41 <source src="movie.mp4" type="video/mp4">42 </video>43 44 45
1 <style type="text/css"> 2 #div1, #div2 3 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} 4 </style> 5 <script type="text/javascript"> 6 function allowDrop(ev) 7 { 8 ev.preventDefault(); 9 }10 11 function drag(ev)12 {13 ev.dataTransfer.setData("Text",ev.target.id);14 }15 16 function drop(ev)17 {18 19 var data=ev.dataTransfer.getData("Text");20 ev.target.appendChild(document.getElementById(data));21 }22 </script>23 </head>24 <body>25 26 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">27 <img src="/i/Vevb_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />28 </div>29 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>30 移动图片到另一个盒子里 ---拖放 （event 是固定的变量）31 32 <script type=”text/Javascript”>33 Function d(e)34 {35 X=e.clientX;36 Y=e.clientY;37 Document.getElementById(“cc”).innerHTML=”ddd:(“+x+”,”+y+”)”;38 }39 Function c()40 {41 Document.getElementById(“cc”).innerHTML=””;42 }43 </script>44 <div id=”dd” onmousemove=”d(event)” onmousemove=”c”></div>45 <div id=”cc” ></div>46 显示坐标47 48 画画49 <canvas id=”cc”>50 51 </canvas>52 <script type=”text/javascript”>53 Var cl=document.getElementId(“cc”);54 Var dddd=cl.getContent(“2d”);55 dddd.moveTo(10,10);56 dddd.lineTo(150,50);57 dddd.lineTo(10,50);58 dddd.stroke();59 60 </script>61 62 绘制圆、渐变、把一幅图像放置到画布上63 内联 SVG新元素HTML5<input>等标签及事件
1 • email 2 • url 3 • number 4 • range 5 • Date pickers (date, month, week, time, datetime, datetime-local) 6 • search 7 • color 8 <input type="number" name="points" min="0" max="10" step="3" value="6" /> 9 <input type="range" name="points" min="1" max="10" /> 10 • date - 选取日、月、年 11 • month - 选取月、年 12 • week - 选取周和年 13 • time - 选取时间（小时和分钟） 14 • datetime - 选取时间、日、月、年（UTC 时间） 15 • datetime-local - 选取时间、日、月、年（本地时间） 16 Date: <input type="date" name="user_date" /> 17 18 19 <form action="/example/html5/demo_form.asp" method="get"> 20 Webpage: <input type="url" list="url_list" name="link" /> 21 <datalist id="url_list"> 22 <option label="W3School" value="http://www.Vevb.com.cn" /> 23 <option label="Google" value="http://www.google.com" /> 24 <option label="Microsoft" value="http://www.microsoft.com" /> 25 </datalist> 26 <input type="submit" /> 27 </form> 28 29 30 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。 31 <keygen name="security" /> 32 33 <script type="text/javascript"> 34 function resCalc() 35 { 36 numA=document.getElementById("num_a").value; 37 numB=document.getElementById("num_b").value; 38 document.getElementById("result").value=Number(numA)+Number(numB); 39 } 40 </script> 41 </head> 42 <body> 43 <p>使用 output 元素的简易计算器：</p> 44 <form onsubmit="return false"> 45 <input id="num_a" /> + 46 <input id="num_b" /> = 47 <output id="result" onforminput="resCalc()"></output> 48 </form> 49 User name: <input type="text" name="user_name" autofocus="autofocus" /> 50 自动获得焦点 51 <form action="demo_form.asp" method="get" id="user_form"> 52 First name:<input type="text" name="fname" /> 53 <input type="submit" /> 54 </form> 55 Last name: <input type="text" name="lname" form="user_form" /> 56 form 属性规定输入域所属的一个或多个表单。 57 58 59 <form action="demo_form.asp" method="get" id="user_form"> 60 E-mail: <input type="email" name="userid" /><br /> 61 <input type="submit" value="Submit" /> 62 <br /> 63 <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> 64 <br /> 65 <input type="submit" formnovalidate="true" value="Submit without validation" /> 66 <br /> 67 </form> 68 创建不同的提交按钮 69 70 height 和 width 属性只适用于 image 类型的 <input> 标签 71 72 <input type="file" name="img" multiple="multiple" />----选择文件 73 74 <form action="demo_form.asp" method="get" novalidate="true">让不验证 75 76 Country code: <input type="text" name="country_code" 77 pattern="[A-z]{3}" title="Three letter country code" /> 插入正则表达式 78 placeholder 提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失： 79 80 required="required" （不能为空） 81 84 <canvas id="myCanvas">your browser does not support the canvas tag </canvas> 85 86 <script type="text/javascript"> 87 88 var canvas=document.getElementById('myCanvas'); 89 var ctx=canvas.getContext('2d'); 90 ctx.fillStyle='#FF0000'; 91 ctx.fillRect(0,0,80,100); 92 93 </script> 94 95 标签 96 <embed src="/i/helloworld.swf" /> Flash 97 <article></article>标记文章 98 <header><section></section></header>头 99 <nav><a></a></nav>中间放连接100 <footer><address></address></footer>101 <audio src="someaudio.wav">102 您的浏览器不支持 audio 标签。103 </audio>声音
新闻热点
疑难解答
