首页 > web前端 > html教程 > HTML文档 html,html5,css,css3_html/css_WEB-ITnose

HTML文档 html,html5,css,css3_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:47:09
原创
1949 人浏览过

HTML 各种标签及简单应用:

http://www.w3school.com.cn
登录后复制

 1 <p><p> 2 <br/> 3 <hr/>横线  4 <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">   保留了标签内的空格和换行 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/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" / alt="HTML文档 html,html5,css,css3_html/css_WEB-ITnose" >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等标签及事件

  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.w3school.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>声音104 <video></video>视频105 106 事件107 <input type=”email url  number range color “/>108 <body onload="load()">109 onblur110 onfocus 当元素失去焦点111 onchange 112 onselect113 onsubmit     提交表单时114 onclick115 onbclick  双击116  117 http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布
登录后复制

CSS各种属性及应用;

 1 body { 2      3 } 4  5 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响: 6 body  7   { 8   background-image:url(/i/eg_bg_02.gif); 9   background-repeat:no-repeat;10   background-attachment:fixed11   }12 p {text-indent: -5em; padding-left: 5em;}首行缩进13 justify 水平对齐  text-align 14 a {text-decoration: none;}格式下划线取消啥的15 16 a:link {color:#FF0000;}        /* 未被访问的链接 */17 a:visited {color:#00FF00;}    /* 已被访问的链接 */18 a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */19 a:active {color:#0000FF;}    /* 正在被点击的链接 */20  21 ?    Serif 字体22 ?    Sans-serif 字体23 ?    Monospace 字体24 ?    Cursive 字体25 ?    Fantasy 字体26 border-style:dotted solid double dashed; 27 上边框是点状28 右边框是实线29 下边框是双线30 左边框是虚线31 body {font-family: sans-serif;}---字体32 33 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。34 35 ul {list-style-type : square}36 ul li {list-style-image : url(xxx.gif)}37 li {list-style : url(example.gif) square inside}列表样式38 img[alt] {border: 5px solid red;} 带有 alt 属性的图像应用样式39 40 *[lang|="en"] {color: red;}41 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素42   43 ul44 {45 list-style-type:none;46 margin:0;47 padding:0;48 }49 li50 {51 display:inline;         52 }                                ---块
登录后复制

CSS3

  1 border-radius:25px;  2 -moz-border-radius:25px; /* 老的 Firefox */  3  加圆角  4   5 box-shadow: 10px 10px 5px #888888;         加阴影 11 div 12 { 13 border:15px solid transparent; 14 width:300px; 15 padding:10px 20px; 16 } 17  18 #round 19 { 20 -moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */ 21 -webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */ 22 -o-border-image:url(/i/border.png) 30 30 round;        /* Opera */ 23 border-image:url(/i/border.png) 30 30 round; 24 } 25  26 #stretch 27 { 28 -moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */ 29 -webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */ 30 -o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */ 31 border-image:url(/i/border.png) 30 30 stretch; 32 } 33 </style> 34 </head> 35 <body> 36  37 <div id="round">在这里,图片铺满整个边框。</div> 38 <br> 39 <div id="stretch">在这里,图片被拉伸以填充该区域。</div>42  43 background-size:63px 100px;   背景图片缩小 44  45 background-position:left; 46 background-origin:border-box; 47 background-origin:content-box;    背景定位 48 background-clip:content-box;   颜色背景定位 49 div.boxx 50 { 51 box-sizing:border-box; 52   53 width:50%; 54 border:1em solid red; 55 float:left; 56 } 59 text-shadow: 5px 5px 5px #FF0000; 文本阴影 60  61 允许对长单词进行拆分,并换行到下一行: 62 p {word-wrap:break-word;} 63  64 font-family:myFirstFont; 定义字体 65 font-weight:bold;  66  67 transform:rotate(9deg);   旋转   68 transform:translate(50px,100px);  移动 69 transform:scale(2,4); 横着放大2倍  竖着放大4倍 70 transform: skew(30deg,20deg);   水平旋转 垂直旋转 71  72 transform-origin:20% 80%;  定位 73   74 transition:width  10s; 75 div:hover 76 { 77 width:1000px; 78 }   渐变效果 79  80  81 .newspaper 82 { 83 -moz-column-count:3; /* Firefox */ 84 -webkit-column-count:3; /* Safari and Chrome */ 85 column-count:3; 86 }                                  三列 87 规定列之间 40 像素的间隔: 88 div 89 { 90 -moz-column-gap:40px;        /* Firefox */ 91 -webkit-column-gap:40px;    /* Safari 和 Chrome */ 92 column-gap:40px; 93 } 94 规定列之间的宽度、样式和颜色规则: 95 div 96 { 97 -moz-column-rule:3px outset #ff0000;    /* Firefox */ 98 -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */ 99 column-rule:3px outset #ff0000;100 }        101 column-span:all;  横跨所有列102 103 104 规定 div 元素可由用户调整大小:105 div106 {107 resize:both;108 overflow:auto;109 }110 111 text-shadow: 5px 5px 5px #FF0000;  水平阴影、垂直阴影、模糊距离,以及阴影的颜色:112 允许对长单词进行拆分,并换行到下一行:113 p {word-wrap:break-word;}
登录后复制

学习心得,可供参考;

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板