![](\"\/i\/w3school_logo_black.gif\"){kind=logo}
28 <\/div>29 
HTML文檔 html,html5,css,css3_html/css_WEB-ITnose
Jun 24, 2016 am 11:47 AM
HTML various tags and simple applications:
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"> 保留了標簽內(nèi)的空格和換行 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> 內(nèi)邊距 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>實現(xiàn)在一個頁面內(nèi)垂直展示三個頁面內(nèi)容?------網(wǎng)頁32 <frameset rows="25%,50%,25%">33 <frame src="dd.html">34 <frame src="dd.html">35 <frame src="dd.html"> html5不支持了36 </frameset>實現(xiàn)在一個頁面內(nèi)水平展示三個頁面內(nèi)容37 <iframe src=""></iframe>內(nèi)嵌的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" />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 內(nèi)聯(lián) SVG 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 屬性規(guī)定輸入域所屬的一個或多個表單。 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 創(chuàng)建不同的提交按鈕 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）會在輸入域為空時顯示出現(xiàn)，會在輸入域獲得焦點時消失： 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 Various properties and applications;
1 body { 2 3 } 4 5 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對于可視區(qū)是固定的（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 上面這個規(guī)則會選擇 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">在這里，圖片被拉伸以填充該區(qū)域。</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); 旋轉(zhuǎn) 68 transform:translate(50px,100px); 移動 69 transform:scale(2,4); 橫著放大2倍 豎著放大4倍 70 transform: skew(30deg,20deg); 水平旋轉(zhuǎn) 垂直旋轉(zhuǎn) 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 規(guī)定列之間 40 像素的間隔： 88 div 89 { 90 -moz-column-gap:40px; /* Firefox */ 91 -webkit-column-gap:40px; /* Safari 和 Chrome */ 92 column-gap:40px; 93 } 94 規(guī)定列之間的寬度、樣式和顏色規(guī)則： 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 規(guī)定 div 元素可由用戶調(diào)整大小：105 div106 {107 resize:both;108 overflow:auto;109 }110 111 text-shadow: 5px 5px 5px #FF0000; 水平陰影、垂直陰影、模糊距離，以及陰影的顏色：112 允許對長單詞進行拆分，并換行到下一行：113 p {word-wrap:break-word;} Learning experience, you can For reference;
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
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
CSS tutorial for creating loading spinners and animations
Jul 07, 2025 am 12:07 AM
There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.
Handling reconnections and errors with HTML5 Server-Sent Events.
Jul 03, 2025 am 02:28 AM
When using HTML5SSE, the methods to deal with reconnection and errors include: 1. Understand the default reconnection mechanism. EventSource retrys 3 seconds after the connection is interrupted by default. You can customize the interval through the retry field; 2. Listen to the error event to deal with connection failure or parsing errors, distinguish error types and execute corresponding logic, such as network problems relying on automatic reconnection, server errors manually delay reconnection, and authentication failure refresh token; 3. Actively control the reconnection logic, such as manually closing and rebuilding the connection, setting the maximum number of retry times, combining navigator.onLine to judge network status to optimize the retry strategy. These measures can improve application stability and user experience.
Declaring the correct HTML5 doctype for modern pages.
Jul 03, 2025 am 02:35 AM
Doctype is a statement that tells the browser which HTML standard to use to parse the page. Modern web pages only need to be written at the beginning of the HTML file. Its function is to ensure that the browser renders the page in standard mode rather than weird mode, and must be located on the first line, with no spaces or comments in front of it; there is only one correct way to write it, and it is not recommended to use old versions or other variants; other such as charset, viewport, etc. should be placed in part.
Receiving real-time data with HTML5 Server-Sent Events (SSE).
Jul 02, 2025 pm 04:46 PM
Server-SentEvents (SSE) is a lightweight solution provided by HTML5 to push real-time updates to the browser. It realizes one-way communication through long HTTP connections, which is suitable for stock market, notifications and other scenarios. Create EventSource instance and listen for messages when using: consteventSource=newEventSource('/stream'); eventSource.onmessage=function(event){console.log('Received message:',event.data);}; The server needs to set Content-Type to text/event
Getting the user's current location with the HTML5 Geolocation API.
Jul 02, 2025 pm 05:03 PM
When using HTML5Geolocation API to obtain user location, you must first obtain user authorization, and request and explain the purpose at the right time; the basic method is navigator.geolocation.getCurrentPosition(), which contains successful callbacks, wrong callbacks and configuration parameters; common reasons for failure include permission denied, browser not supported, network problems, etc., alternative solutions and clear prompts should be provided. The specific suggestions are as follows: 1. Request permissions when the user operation is triggered, such as clicking the button; 2. Use enableHighAccuracy, timeout, maximumAge and other parameters to optimize the positioning effect; 3. Error handling should distinguish between different errors
Improving SEO with HTML5 semantic markup and Microdata.
Jul 03, 2025 am 01:16 AM
Using HTML5 semantic tags and Microdata can improve SEO because it helps search engines better understand page structure and content meaning. 1. Use HTML5 semantic tags such as,,,, and to clarify the function of page blocks, which helps search engines establish a more accurate page model; 2. Add Microdata structured data to mark specific content, such as article author, release date, product price, etc., so that search engines can identify information types and use them for display of rich media summary; 3. Pay attention to the correct use of tags to avoid confusion, avoid duplicate tags, test the effectiveness of structured data, regularly update to adapt to changes in schema.org, and combine with other SEO means to optimize for long-term.
Running background scripts using HTML5 Web Workers.
Jul 02, 2025 pm 04:47 PM
WebWorkers is a multi-threaded mechanism provided by HTML5, which is used to run scripts in the browser background without blocking the main thread. It allows for tasks such as complex calculations, data processing, etc. while keeping the page responsive. The steps to create and use WebWorker include: 1. Create an external JavaScript file (such as worker.js); 2. Detect browser support on the main page; 3. Instantiate Worker objects; 4. Use postMessage() to send messages; 5. Receive results through onmessage. Its limitations include inability to operate the DOM, limited communication methods, and inconvenient debugging. Applicable scenarios include mathematical calculations, timing tasks, data encryption, image processing, etc. Use We reasonably
JavaScript time object, someone builds an eactexe, faster website on Google Chrome, etc.
Jul 08, 2025 pm 02:27 PM
Hello, JavaScript developers! Welcome to this week's JavaScript news! This week we will focus on: Oracle's trademark dispute with Deno, new JavaScript time objects are supported by browsers, Google Chrome updates, and some powerful developer tools. Let's get started! Oracle's trademark dispute with Deno Oracle's attempt to register a "JavaScript" trademark has caused controversy. Ryan Dahl, the creator of Node.js and Deno, has filed a petition to cancel the trademark, and he believes that JavaScript is an open standard and should not be used by Oracle
