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>加引號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>標(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>無序列表 左邊有黑原點 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 顯示坐標(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 - 選取時間（小時和分鐘） 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）。當(dāng)提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。 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> 標(biāo)簽 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 標(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)元素失去焦點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;} /* 鼠標(biāo)指針移動到鏈接上 */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 設(shè)置為 pre-wrap，那么該元素中的文本會保留空白符序列，但是文本行會正常地換行。如果設(shè)置為這個值，源文本中的行分隔符以及生成的行分隔符也會保留。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 屬性的圖像應(yīng)用樣式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)整大?。?05 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)
How to use the CSS backdrop-filter property?
Aug 02, 2025 pm 12:11 PM
Backdrop-filter is used to apply visual effects to the content behind the elements. 1. Use backdrop-filter:blur(10px) and other syntax to achieve the frosted glass effect; 2. Supports multiple filter functions such as blur, brightness, contrast, etc. and can be superimposed; 3. It is often used in glass card design, and it is necessary to ensure that the elements overlap with the background; 4. Modern browsers have good support, and @supports can be used to provide downgrade solutions; 5. Avoid excessive blur values and frequent redrawing to optimize performance. This attribute only takes effect when there is content behind the elements.
What are user agent stylesheets?
Jul 31, 2025 am 10:35 AM
User agent stylesheets are the default CSS styles that browsers automatically apply to ensure that HTML elements that have not added custom styles are still basic readable. They affect the initial appearance of the page, but there are differences between browsers, which may lead to inconsistent display. Developers often solve this problem by resetting or standardizing styles. Use the Developer Tools' Compute or Style panel to view the default styles. Common coverage operations include clearing inner and outer margins, modifying link underscores, adjusting title sizes and unifying button styles. Understanding user agent styles can help improve cross-browser consistency and enable precise layout control.
Defining custom vocabularies using HTML5 Schema.org markup.
Jul 31, 2025 am 10:50 AM
The Schema.org tag helps search engines understand the structured data format of web page content through semantic tags (such as item scope, item type, itemprop); it can be used to define custom vocabulary, methods include extending existing types or using additionalType to introduce new types; in actual applications, keeping the structure clear, using official attributes first, testing code validity, and ensuring that custom types are accessible; precautions include accepting partial support, avoiding spelling errors, and choosing a suitable format such as JSON-LD.
How to create a bouncing animation with CSS?
Aug 02, 2025 am 05:44 AM
Define@keyframesbouncewith0%,100%attranslateY(0)and50%attranslateY(-20px)tocreateabasicbounce.2.Applytheanimationtoanelementusinganimation:bounce0.6sease-in-outinfiniteforsmooth,continuousmotion.3.Forrealism,use@keyframesrealistic-bouncewithscale(1.1
How to overlap elements in CSS?
Jul 30, 2025 am 05:43 AM
To achieve CSS element overlap, you need to use positioning and z-index attributes. 1. Use position and z-index: Set elements to non-static positioning (such as absolute, relative, etc.), and control the stacking order through z-index, the larger the value, the higher the value. 2. Common positioning methods: absolute is used for precise layout, relative is used for relatively offset and overlap adjacent elements, fixed or sticky is used for fixed positioning of suspended layers. 3. Actual example: By setting the parent container position:relative, child element position:absolute and different z-index, the card overlap effect can be achieved.
how to center a div css
Jul 30, 2025 am 05:34 AM
Tocenteradivhorizontally,setawidthandusemargin:0auto.2.Forhorizontalandverticalcentering,useFlexboxwithjustify-content:centerandalign-items:center.3.Alternatively,useCSSGridwithplace-items:center.4.Forolderbrowsers,useabsolutepositioningwithtop:50%,l
How does the HTML5 parser handle errors?
Aug 02, 2025 am 07:51 AM
HTML5parsershandlemalformedHTMLbyfollowingadeterministicalgorithmtoensureconsistentandrobustrendering.1.Formismatchedorunclosedtags,theparserautomaticallyclosestagsandadjustsnestingbasedoncontext,suchasclosingabeforeaandreopeningitafterward.2.Withimp
How to create an ordered list in HTML5?
Jul 30, 2025 am 05:23 AM
Creating an ordered list in HTML5 requires use and tags. 1. Use the ordered list to define the ordered list, and use it to represent each item internally. 2. You can specify the starting number through the start attribute, 3. Set the number type such as numerals, letters or Roman numerals through the type attribute. 4. It is recommended to use CSS' list-style-type or custom counter to achieve more flexible style control to separate structures and styles.
