1. 首页
  2. 代码片断库
  3. HTML
全部数据
text
javascript
php
markdown
sh
java
python
html
csharp
css
sql
c_cpp
PHP
ruby
xml
scss
json
swift
JavaScript
typescript
vbscript
powershell
CSS
apache_conf
ActionScript 3
r
ini
HTML
golang

HTML Google Hosted JQuery和JQueryUI链接

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/cupertino/jquery-ui.css" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

HTML xFolk

<div class="xfolkentry">
  <h2><a class="taggedlink" href="http://article.url/" title="Article Title">Article Title</a></h2>
  <ul class="meta">
    <li>Tag01</li>
    <li>Tag02</li>
    <li>Tag03</li>
  </ul>
  <p class="description">description</p>
</div>

HTML 元刷新

<meta http-equiv="refresh" content="30;URL=core1.htm">

HTML IE条件评论

<!--[if IE]>
	IE Conditional Comment: Internet Explorer
<![endif]-->


<!--[if !IE]><!-->
	IE Conditional Comment: NOT Internet Explorer
<!-- <![endif]-->


<!--[if IE 5.0]>
	IE Conditional Comment: Internet Explorer 5.0 only
<![endif]-->


<!--[if lt IE 6]>
	IE Conditional Comment: Internet Explorer 5.x
<![endif]-->


<!--[if IE 5.5]>
	IE Conditional Comment: Internet Explorer 5.5 only
<![endif]-->


<!--[if lte IE 6]>
	IE Conditional Comment: Internet Explorer 6 and below
<![endif]-->


<!--[if lt IE 7]>
	IE Conditional Comment: Internet Explorer 6 and below
<![endif]-->


<!--[if IE 6]>
	IE Conditional Comment: Internet Explorer 6 only
<![endif]-->


<!--[if gte IE 7]>
	IE Conditional Comment: Internet Explorer 7 and above
<![endif]-->

HTML AS3：使用HTML和JavaScript将文本发送到Flash

<!--
/*******************************
This Code Goes inside your FLA
*******************************/
import flash.external.ExternalInterface;
import flash.events.Event;

ExternalInterface.addCallback("sendTextToFlash", getTextFromJavaScript);
function getTextFromJavaScript(str:String):void {
	textTxt.appendText(str);
}

var textTxt:TextField = new TextField();
	textTxt.x = 0;
	textTxt.y = 0;
	addChild(textTxt);
-->
<!--
/*******************************
THis Lives in your HTML FILE
*******************************/
-->
<html>
<head>
<!-- Flash swfObject v1.5 -->
<script type="text/javascript" src="./js/swfobject.js"></script>
<!-- Flash swfObject v1.5 -->
<!-- Send Text to Flash -->
<script language="JavaScript">
function getFlashMovie(movieName) {
	var isIE = navigator.appName.indexOf("Microsoft") != -1;
	return (isIE) ? window[movieName] : document[movieName];
}
function collectText(string) {
	var text = string;
	getFlashMovie("NAME_OF_FLASH_BLOCK").sendTextToFlash(text);
}
</script>
<!-- Send Text to Flash -->
</head>
<body onload="javascript:collectText(document.getElementById('welcome').innerHTML);">
<p id="welcome">Ut urna lorem, sodales in, iaculis, vel heicula eu, magna. Donec ultricies toror t</p>
<!-- Media Player starts -->
<div id="media_player">
	<a href="http://www.adobe.com/go/getflash/" target="_blank"> Please Upgrade to Flash 9.0</a>
</div>
<script type="text/javascript">
	// <![CDATA[
	var so = new SWFObject("FLASHMOVIE.swf", "NAME_OF_FLASH_BLOCK", "700", "370", "9.0", "#ffffff");
	so.write("media_player");
	// ]]>
</script>
<!-- Media Player ends -->
</body>
</html>

HTML 如何在以前的（IE7，IE5）渲染模式中设置IE8以实现向后兼容性

/* -- send as http header too -- */
// in PHP
header('X-UA-Compatible:IE=7');

<meta http-equiv="X-UA-Compatible" content="IE=7">

<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a">   <!-- IE5 mode -->

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=8" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
  <!-- Choose IE7 mode -->
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>

HTML 没有javascript的图像翻转（）

The image contains the two states for the rollover (hover or normal) like we will do using a background image with CSS.

We need to wrap the image in a <span> element with the following styles:
   display: block;
   width: "same as visible area of each state (normal or hover) of the image";
   height: "same as visible area of each state of the image";
   overflow: hidden;
   position: relative; // IE needs it

The <img> element is wrapped by an <a> element. We need the following styles to the a:hover:
   position: relative;
   top:  "negative position same as height of the image visible area"

HTML code:
   <span class="img-rollover"><a href="#"><img src="image.gif" alt="" /></a></span>

CSS code:
   span.img-rollover{
   width: 20px; 
   height: 20px; 
   display: block; 
   overflow: hidden; 
   position: relative;
   }
   span.img-rollover a:hover{
   top: -20px; 
   position: relative;
   }

Demo at http://uninstallme.com/rollover-de-imagenes-en-html-elemento-img-sin-javascript/

HTML HTML5 TextMate代码段

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>${1:${TM_FILENAME/((.+)\..*)?/(?2:$2:Page Title)/}}</title>
	<link rel="stylesheet" type="text/css" media="screen" href="css/master.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	$0
</body>
</html>

HTML 基本水平导航

<ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
</ul>

#nav { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; }
#nav li { float: left; }
#nav {
        width: 100%;
        float: left;
        margin: 0 0 3em 0;
        padding: 0;
        list-style: none;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc; 
}

#nav li a {
           display: block;
           padding: 8px 15px;
           text-decoration: none;
           font-weight: bold;
           color: #069;
           border-right: 1px solid #ccc; 
}

#nav li a:hover {
                color: #c00;
                background-color: #fff; 
}

#nav {
        width: 100%;
        float: left;
        margin: 0 0 3em 0;
        padding: 0;
        list-style: none;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc; 
}
#nav li { float: left; }
#nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        font-weight: bold;
        color: #069;
        border-right: 1px solid #ccc; 
}
#nav li a:hover { color: #c00; background-color: #fff; }

HTML 适合所有人的视频

<!-- first try native HTML5 video playback -->
<video width="640" height="360" controls="controls" autoplay="true">
	<source src="__MY_VIDEO__.ogv" type="video/ogg" />
	<source src="__MY_VIDEO__.mp4" type="video/mp4" />
	<!-- fall back to Flash *do not* include 'classid' so as to be compatible with non-IE browsers -->
	<object width="640" height="380" type="application/x-shockwave-flash" data="__FLASH_PLAYER__.swf" 
		flashvars="autostart=true&file=http://tinyvid.tv/vfe/video_for_everybody.mp4"
	>	<!-- IE compatibility for the above -->
		<param name="movie" value="__FLASH_PLAYER__.swf" />
		<param name="flashvars" value="autostart=true&file=__MY_VIDEO__.mp4" />
		<!-- no Flash? fall back to a QuickTime object iPhone OSv2 will use this file. ensure your MP4 is compatible: <tinyurl.com/qmmss6> IE6 does not allow object-within-object, Flash is the only option. this object tag (with classid) is  hidden from non-IE browsers, as it causes a plugin-install prompt to occur even if the plugin is not needed because it�s been superseded by HTML5 video -->
		<!--[if gt IE 6]>
		<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
			<param name="src" value="__MY_VIDEO__.mp4" />
			<param name="autoplay" value="true" /><!
		[endif]--><!-- the odd line-break above is *required* or QuickTime fallback fails -->
		<!--[if gt IE 6]><!-->
		<!-- that self-closing comment after the conditional tag is the only way to reveal the conditional comment to other browsers that is compatible with serving as XHTML (application/xhtml+xml). a normal closing comment marker would be visible in IE7, and other workarounds cause an XML parser error (comment-in-comment) -->
		<!-- QuickTime height is height+15 to leave room for the controls -->
		<object width="640" height="375" autoplay="true"
			type="video/quicktime" data="__MY_VIDEO__.mp4"
		>	<!-- params for Safari/Chrome compatibility (they ignore the attributes above) -->
			<param name="src" value="__MY_VIDEO__.mp4" />
			<param name="autoplay" value="true" />
		<!--<![endif]-->
		<!-- finally, if all else fails, fall back to a warning message: *always* tell the user *what* it is they can't see�give a title or description -->
			<hr />
			<h3>Video: __TITLE_OF_MY_VIDEO__</h3>
			<p>
				<strong>No video playback capabilities detected.</strong>
				Why not try to download the file instead?<br />
				<a href="__MY_VIDEO__.mp4">MPEG4 / H.264 .mp4
				(Windows / Mac)</a> |
				<a href="__MY_VIDEO__.ogv">Ogg Theora & Vorbis .ogv
				(Linux)</a>
			</p>
			<!-- and try to give them genuinely helpful information to rectify the problem -->
			<p>
				To play the video here in the webpage, please do one of the following:
			</p><ul>
				<li>Upgrade to <a href="http://getfirefox.com">Firefox v3.5</a>,
					or <a href="http://apple.com/safari">Safari v4</a></li>
				<li>Install <a href="http://get.adobe.com/flashplayer/">Adobe Flash Player</a></li>
				<li>Install <a href="http://apple.com/quicktime/download/">Apple QuickTime</a></li>
			</ul>
			<hr />
		<!--[if gt IE 6]><!--></object><!--<![endif]-->
		<!--[if gt IE 6]></object><![endif]-->
	</object>
</video>