HTML文档 html,html5,css,css3_html/css_WEB-ITnose
css
css3
html5
HTML various tags and simple applications:
http://www.w3school.com.cn
Copy after login
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 代替空格号
Copy after login
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
Copy after login
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" />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 内联 SVGCopy after login
New elementsHTML5 and other tags and events
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 画布Copy after login
CSS Various properties and applications;
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 } ---块Copy after login
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;}Copy after login
Learning experience, you can For reference;
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
How to fix KB5055523 fails to install in Windows 11?
4 weeks ago
By DDD
How to fix KB5055518 fails to install in Windows 10?
4 weeks ago
By DDD
Roblox: Grow A Garden - Complete Mutation Guide
3 weeks ago
By DDD
Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
How to fix KB5055612 fails to install in Windows 10?
3 weeks ago
By DDD
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Java Tutorial
1664
14
1664
14
CakePHP Tutorial
1423
52
1423
52
Laravel Tutorial
1317
25
1317
25
PHP Tutorial
1268
29
1268
29
C# Tutorial
1246
24
1246
24
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
