![](\"\/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"> 保留了標(biāo)簽內(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>加引號(hào)26 <blockquote></blockquote>長(zhǎng)引用 27 <a href="" targer="_blank"></a> 鏈接在新的窗口打開 28 <a href="mailto:someone@microsoft.com?subject=hh%20again></a>%20 代替空格號(hào)
1 空格 2 <h></h>標(biāo)題 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>無序列表 左邊有黑原點(diǎn) 9 <ol start="50"><li><li></ol>左邊有序號(hào)從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>實(shí)現(xiàn)在一個(gè)頁面內(nèi)垂直展示三個(gè)頁面內(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>實(shí)現(xiàn)在一個(gè)頁面內(nèi)水平展示三個(gè)頁面內(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 移動(dòng)圖片到另一個(gè)盒子里 ---拖放 （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 顯示坐標(biāo)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 - 選取時(shí)間（小時(shí)和分鐘） 14 ? datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間） 15 ? datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間） 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 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。 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 元素的簡(jiǎn)易計(jì)算器：</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 自動(dòng)獲得焦點(diǎn) 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ī)定輸入域所屬的一個(gè)或多個(gè)表單。 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> 標(biāo)簽 71 72 <input type="file" name="img" multiple="multiple" />----選擇文件 73 74 <form action="demo_form.asp" method="get" novalidate="true">讓不驗(yàn)證 75 76 Country code: <input type="text" name="country_code" 77 pattern="[A-z]{3}" title="Three letter country code" /> 插入正則表達(dá)式 78 placeholder 提示（hint）會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn)，會(huì)在輸入域獲得焦點(diǎn)時(shí)消失： 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 標(biāo)簽 96 <embed src="/i/helloworld.swf" /> flash 97 <article></article>標(biāo)記文章 98 <header><section></section></header>頭 99 <nav><a></a></nav>中間放連接100 <footer><address></address></footer>101 <audio src="someaudio.wav">102 您的瀏覽器不支持 audio 標(biāo)簽。103 </audio>聲音104 <video></video>視頻105 106 事件107 <input type=”email url number range color “/>108 <body onload="load()">109 onblur110 onfocus 當(dāng)元素失去焦點(diǎn)111 onchange 112 onselect113 onsubmit 提交表單時(shí)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 屬性防止這種滾動(dòng)。通過這個(gè)屬性，可以聲明圖像相對(duì)于可視區(qū)是固定的（fixed），因此不會(huì)受到滾動(dòng)的影響： 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;}首行縮進(jìn)13 justify 水平對(duì)齊 text-align 14 a {text-decoration: none;}格式下劃線取消啥的15 16 a:link {color:#FF0000;} /* 未被訪問的鏈接 */17 a:visited {color:#00FF00;} /* 已被訪問的鏈接 */18 a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */19 a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */20 21 ? Serif 字體22 ? Sans-serif 字體23 ? Monospace 字體24 ? Cursive 字體25 ? Fantasy 字體26 border-style:dotted solid double dashed; 27 上邊框是點(diǎn)狀28 右邊框是實(shí)線29 下邊框是雙線30 左邊框是虛線31 body {font-family: sans-serif;}---字體32 33 white-space 設(shè)置為 pre-wrap，那么該元素中的文本會(huì)保留空白符序列，但是文本行會(huì)正常地?fù)Q行。如果設(shè)置為這個(gè)值，源文本中的行分隔符以及生成的行分隔符也會(huì)保留。pre-line 與 pre-wrap 相反，會(huì)像正常文本中一樣合并空白符序列，但保留換行符。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 屬性的圖像應(yīng)用樣式39 40 *[lang|="en"] {color: red;}41 上面這個(gè)規(guī)則會(huì)選擇 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">在這里，圖片鋪滿整個(gè)邊框。</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 允許對(duì)長(zhǎng)單詞進(jìn)行拆分，并換行到下一行： 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); 移動(dòng) 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)整大?。?05 div106 {107 resize:both;108 overflow:auto;109 }110 111 text-shadow: 5px 5px 5px #FF0000; 水平陰影、垂直陰影、模糊距離，以及陰影的顏色：112 允許對(duì)長(zhǎng)單詞進(jìn)行拆分，并換行到下一行：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
What is 'render-blocking CSS'?
Jun 24, 2025 am 12:42 AM
CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.
How can you animate an SVG with CSS?
Jun 30, 2025 am 02:06 AM
AnimatingSVGwithCSSispossibleusingkeyframesforbasicanimationsandtransitionsforinteractiveeffects.1.Use@keyframestodefineanimationstagesforpropertieslikescale,opacity,andcolor.2.ApplytheanimationtoSVGelementssuchas,,orviaCSSclasses.3.Forhoverorstate-b
What is Autoprefixer and how does it work?
Jul 02, 2025 am 01:15 AM
Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.
How to control HTML5 video and audio playback using JavaScript?
Jun 24, 2025 am 12:38 AM
To control HTML5 video and audio playback using JavaScript, master the following key operations to achieve basic control. 1. Start or pause play can be achieved through the .play() and .pause() methods, and it is recommended to trigger through user interaction to be compatible with mobile browsers; 2. Control the volume and set the value from 0 to 1 through the volume attribute, and switch by setting the muted attribute to true or false; 3. Jump to a specific time to play, you can use the currentTime attribute, which supports direct assignment or increase or decrease the current time, and it is recommended to add error handling; 4. Listen to the playback status changes can be achieved through events such as play, pause, ended and timeupdate.
What is the scope of a CSS Custom Property?
Jun 25, 2025 am 12:16 AM
The scope of CSS custom properties depends on the context of their declaration, global variables are usually defined in :root, while local variables are defined within a specific selector for componentization and isolation of styles. For example, variables defined in the .card class are only available for elements that match the class and their children. Best practices include: 1. Use: root to define global variables such as topic color; 2. Define local variables inside the component to implement encapsulation; 3. Avoid repeatedly declaring the same variable; 4. Pay attention to the coverage problems that may be caused by selector specificity. Additionally, CSS variables are case sensitive and should be defined before use to avoid errors. If the variable is undefined or the reference fails, the fallback value or default value initial will be used. Debug can be done through the browser developer
What is the conic-gradient() function?
Jul 01, 2025 am 01:16 AM
Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin
What are the three ways to insert CSS into a webpage?
Jun 24, 2025 am 12:36 AM
There are three ways to insert web pages in CSS: 1. Inline styles are suitable for single element modification or debugging, but are not conducive to maintenance and reuse; 2. Internal style sheets are suitable for small projects or test pages, and the current page style is unified but cannot be shared across pages; 3. External style sheets are most recommended, suitable for multi-page projects, centrally manage styles, improve maintenance and loading speed. In actual development, external style sheets are preferred, and the other two methods are considered in special circumstances.
What is the :target pseudo-class and how can it be used?
Jun 22, 2025 am 12:48 AM
CSS's :target pseudo-class is used to style the target element based on the URL fragment identifier. It works by the browser scrolling to the element when the URL contains a # symbol and element id and allows a specific style to be applied to the element via :target. Common use cases include highlighting the page section after navigation, creating tabs or slideshows without JavaScript, and improving accessibility to long pages. Usage tips include ensuring that id is unique, combining transition or animation effects, switching content visibility with display attributes, and considering compatibility with older browsers.
