在线
客服

在线客服
尊敬的客户,我们24小时竭诚为您服务 公司总机: 0755-83312037 (32条线)

客服
热线

0755-83312037 (32条线)
7*24小时客服服务热线

?

关注
微信

关注官方微信
TOP

返回
顶部

HTML5代码学习:值得收藏的HTML5代码片段

发布时间:2019-04-13浏览次数:825 <p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">绝对应当收藏的10个实用HTML5代码片段。</font> </td> </tr></tbody></table> <p>HTML5是WEB技术发展的重要的里程碑,对于前端开发来说,如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话,相信大家一定不会拒绝,下面是我们精心收集的10多个HTML5代码片段,相信大家一定喜欢!</p> <h2>HTML5的最简单模板</h2> <p>如果你需要开始一个新的HTML5项目的话,大家肯定会需要一个最简单的模板,这里是一个非常简单并且清晰的HTML5模板,相信大家会喜欢!</p> <pre>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br> &lt;head&gt;<br> &lt;meta charset="utf-8"&gt;<br> &lt;title&gt;Untitled&lt;/title&gt;<br> &lt;!--[if lt IE 9]&gt;<br> &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;<br> &lt;![endif]--&gt;<br> &lt;/head&gt;<br> &lt;body&gt;<br> web的主要内容<br> &lt;/body&gt;<br>&lt;/html&gt;</pre> <h2>表单获取Google地图</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>这里有一段非常简单的代码,通过用户输入地点,获取google地图地点,非常适合生成联系人表单</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;form action="http://maps.google.com/maps" method="get" target="_blank"&gt;<br> &lt;label for="saddr"&gt;输入地点&lt;/label&gt;<br> &lt;input type="text" name="saddr" /&gt;<br> &lt;input type="hidden" name="daddr" <br>value="350 5th Ave New York, NY 10018 (Empire State Building)" /&gt;<br> &lt;input type="submit" value="Get directions" /&gt;<br>&lt;/form&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>Base64编码的1x1大小的空白GIF文件</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>个人不推荐使用这个透明的空白gif,但是即使在2013年,很多人仍旧使用。可能你也喜欢使用这种方式。</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>正则表单式验证电子邮件</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>HTML5中允许使用正则表单式来做输入验证:</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" /&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>正确的嵌入flash</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>如果你经常需要在网页中插入flash的话,这段代码你应该用的上:</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;object type="application/x-shockwave-flash" <br> data="your-flash-file.swf" <br> width="0" height="0"&gt;<br> &lt;param name="movie" value="your-flash-file.swf" /&gt;<br> &lt;param name="quality" value="high"/&gt;<br>&lt;/object&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>视频并且支持flash的fallback</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>另外一个HTML5中最有用的特性是video标签,允许你很方便的嵌入video文件。但是很多老版本的浏览器不支持,所以下面这段代码将会非常有用</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;video width="640" height="360" controls&gt;<br> &lt;source src="__VIDEO__.MP4" type="video/mp4" /&gt;<br> &lt;source src="__VIDEO__.OGV" type="video/ogg" /&gt;<br> &lt;object width="640" height="360" type="application/x-shockwave-flash"<br> data="__FLASH__.SWF"&gt;<br> &lt;param name="movie" value="__FLASH__.SWF" /&gt;<br> &lt;param name="flashvars" value="controlbar=over&amp;amp;<br>image=__POSTER__.JPG&amp;amp;file=__VIDEO__.MP4" /&gt;<br> &lt;img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"<br> title="No video playback capabilities, please download the video below" /&gt;<br> &lt;/object&gt;<br>&lt;/video&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>iPhone call &amp; sms links</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>iphone中苹果介绍了一个非常方便的方式来创建电话和短信链接。代码如下:</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;a href="tel:1-408-555-5555"&gt;1-408-555-5555&lt;/a&gt;<br>&lt;a href="sms:1-408-555-1212"&gt;New SMS Message&lt;/a&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>HTML5的数据自动补齐功能</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>使用datalist元素,HTML5允许使用一组数据来生成自动补齐功能,现在你不需要使用第三方js代码或者类库啦!</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;input name="frameworks" list="frameworks" /&gt; <br> &lt;datalist id="frameworks"&gt;<br> &lt;option value="MooTools"&gt;<br> &lt;option value="Moobile"&gt;<br> &lt;option value="Dojo Toolkit"&gt;<br> &lt;option value="jQuery"&gt;<br> &lt;option value="YUI"&gt;<br>&lt;/datalist&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>可直接下载文件</h2> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;!-- will download as "expenses.pdf" --&gt;<br>&lt;a href="/files/adlafjlxjewfasd89asd8f.pdf" <br>download="expenses.pdf"&gt;Download Your Expense Report&lt;/a&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>Crash老版本浏览器IE6</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>要知道IE6在国内使用量可不小,如果在你的web应用或者网站中不支持IE6的话,加上这段代码吧,相信你的用户都会升级IE6滴,嘿嘿!</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;style&gt;*{position:relative}&lt;/style&gt;&lt;table&gt;&lt;input&gt;&lt;/table&gt;</pre>