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 有效的XHTML 1.1严格Flash嵌入

<div>
<object type="application/x-shockwave-flash" data="header.swf" width="700" height="116">
<param name="movie" value="header.swf" />
<img src="header.gif" width="700" height="116" alt="header" />
</object>
</div>

HTML 星级评定

/*             styles for the star rater                */
.star-rating{
	list-style:none;
	margin: 0px;
	padding:0px;
	width: 100px;
	height: 20px;
	position: relative;
	background: url(star_rating.gif) top left repeat-x;		
}
.star-rating li{
	padding:0px;
	margin:0px;
	/*\*/
	float: left;
	/* */
}
.star-rating li a{
	display:block;
	width:20px;
	height: 20px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
}
.star-rating li a:hover{
	background: url(star_rating.gif) left bottom;
	z-index: 1;
	left: 0px;
}
.star-rating a.one-star{
	left: 0px;
}
.star-rating a.one-star:hover{
	width:20px;
}
.star-rating a.two-stars{
	left:20px;
}
.star-rating a.two-stars:hover{
	width: 40px;
}
.star-rating a.three-stars:hover{
	width: 60px;
}
.star-rating a.three-stars{
	left: 40px;
}
.star-rating a.four-stars{
	left: 60px;
}	
.star-rating a.four-stars:hover{
	width: 80px;
}
.star-rating a.five-stars{
	left: 80px;
}
.star-rating a.five-stars:hover{
	width: 100px;
}


<ul class='star-rating'>
  <li><a href='#' title='Rate this 1 star out of 5' class='one-star'>1</a></li>
  <li><a href='#' title='Rate this 2 stars out of 5' class='two-stars'>2</a></li>
  <li><a href='#' title='Rate this 3 stars out of 5' class='three-stars'>3</a></li>
  <li><a href='#' title='Rate this 4 stars out of 5' class='four-stars'>4</a></li>
  <li><a href='#' title='Rate this 5 stars out of 5' class='five-stars'>5</a></li>
</ul>

HTML 启动代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="name" />
  <meta name="publisher" content="name" />
  <meta name="distribution" content="global" />
  <meta name="language" content="en-us" />
  <meta name="revisit-after" content="5 days" />
  <title>Website Page Title Here</title>
  <style type="text/css" media="screen">
	@import url( style.css );
  </style>
  <script type="text/javascript" src="functions.js"></script>
  <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
</head> <!-- close head -->
<body>

</body> <!-- close body -->
</html> <!-- close html -->

HTML Doctype模板

<!-- HTML Doctypes -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

<html lang="en">

<!-- XHTML Doctypes -->

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

HTML css crop

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
	<style type="text/css" media="screen">
	 div.crop {
	   height: 300px;
	   width: 350px;
	   overflow: hidden;
	 }
	 div.crop img {
	   margin: -300px -200px 0 0;
	 }
	</style>
	
</head>

<body>

<div class="crop">
<img src="paper-sculpture-large.jpg" class="crop" alt="Paper Sculpture Large">
</div>

</body>
</html>

HTML HTML5页面结构

<!DOCTYPE HTML>

<html>

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Your Website</title>
</head>

<body>

        <header>
                <nav>
                        <ul>
                                <li>Your menu</li>
                        </ul>
                </nav>
        </header>

        <section>

                <article>
                        <header>
                                <h2>Article title</h2>
                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
                        </header>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </article>

                <article>
                        <header>
                                <h2>Article title</h2>
                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
                        </header>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </article>

        </section>

        <aside>
                <h2>About section</h2>
                <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </aside>

        <footer>
                <p>Copyright 2009 Your name</p>
        </footer>

</body>

</html>

HTML 谷歌Favicon

<img src="http://www.google.com/s2/favicons?domain=simonwillison.net" />

HTML 基本HTML5模板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="description" content="A description about your site" />
	<meta name="keywords" content="keywords, separated, by, comma" />
	<title>Untitled Document</title>
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="stylesheet" href="css/style.css" media="screen" />
	<link rel="stylesheet" href="css/print.css" media="print" />
	<link rel="stylesheet" href="css/mobile.css" media="handheld" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<!--[if IE]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body>
	<section id="header">
		<header>
			<h1><a href="#">Site Title</a></h1>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>
	</section>
	
	<section id="main">
		<article>
			<hgroup>
				<a href="#">
					<h1>Heading Title</h1>
					<h2>Heading Title 2</h2>
				</a>
			</hgroup>
			<p>Article Filler</p>
		</article>
		<aside>
			Sidebar Filler
		</aside>
	</section>
	
	<section id="footer">
		<footer>
			© Copyright Year by Author. All Rights Reserved.
		</footer>
	</section>
	
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'XX-XXXXXXX-XX']);
		_gaq.push(['_trackPageview']);
	
		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
</body>
</html>

HTML 大卷曲报价标记

<blockquote>
	<span class="bqstart">“</span>
              Quote Here<span> </span>
        <span class="bqend">”</span>
</blockquote>

HTML HTML 5入门页面

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset = "utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		<script scr ="script/script.js"></script>
		
	</head>
	
	<body>
	
	<header>

	<nav>

	</nav>
	</header>
	
	<footer>
	</footer>
	
	
	</body>
	</html>