1. 首页
  2. 代码片断库
  3. XHTML
全部数据
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

XHTML Joomla 1.5：Templating Snippets

<!------ THis replaces the Traditional <head> information ------>
<?php  
 // no direct access 
 defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" /> 
 <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" /> 
 <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" /> 
 <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/default.css" type="text/css" /> 
</head>

<!------ This is used where dynamic content will be loaded ------>
<jdoc:include type="component" />

<!------ Different Types of Module Styles  ------>

<!-- Normal XHTML -->
<jdoc:include type="modules" name="top" style="xhtml" />

<!-- Wrap a Table around a module  -->
<jdoc:include type="modules" name="top" style="table" />

<!-- Display Each Module Horizontally within a Table -->
<jdoc:include type="modules" name="top" style="horiz" />

<!-- Put 4 DIV's around your content to make rounded corners  -->
<jdoc:include type="modules" name="top" style="rounded" />

<!-- No Divs. Module Title also won't be displayed -->
<jdoc:include type="modules" name="top" style="raw" />

<!-- Debugging -->
<jdoc:include type="modules" name="top" style="outline" />

XHTML 在flash对象上划分

OBJECT-Tag:
<param name="wmode" value="transparent">

EMBED-Tag:
wmode="transparent"

XHTML Flash XHTML有效

<object type="application/x-shockwave-flash" data="fichierflash.swf" width="604" height="20">
<param name="movie" value="fichierflash.swf" />
<param name="wmode" value="transparent" />
<p>Image ou texte alternatif</p>
</object>

XHTML 用于jQuery的XHTML 1.0模板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Title goes here » Site title here</title>

	<!-- Meta Tags -->
	<base href="" />
	<meta name="author" content="#" />
	<meta name="description" content="#" />
	<meta name="copyright" content="#" />
	<meta name="robots" content="#" />
	<meta name="generator" content="#" />
	<meta name="keywords" content="#" />
	<meta http-equiv="expires" content="#" />
	<meta http-equiv="cache-control" content="#" />
	
	<!-- Fav icon -->
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

	<!-- JavaScript setup -->
	<script type="text/javascript">
	/*<![CDATA[*/
	// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
	document.getElementsByTagName('html')[0].className = 'js';
	/*]]>*/
	</script>
	
	<!-- CSS -->
	<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />
	
	<!--[if IE]>
	<link rel="stylesheet" href="/stylesheets/ie-all.css" type="text/css" media="screen, projection" />
	<![endif]-->
	
</head>
<body>
	<div id="container">
	
		<div id="header">
			<h1>Title of page goes here</h1>
			<h2>Subtitle of page goes here</h2>
		</div><!-- end header div -->
		
		<div id="nav">
			<ul class="menu">
				<li><a href="#">Link #1</a></li>
				<li><a href="#">Link #2</a></li>
				<li><a href="#">Link #3</a></li>
			</ul>
			<ul class="breadcrumbs">
				<li><a href="#">Home</a></li>
				<li><a href="#">Sub directory</a></li>
				<li><a href="#">Current page</a></li>
			</ul>
		</div><!-- end nav div -->

		<div id="main">
			<ul class="sidebar">
				<li><a href="#">Sidebar link #1</a></li>
				<li><a href="#">Sidebar link #2</a></li>
			</ul>

			<div id="sub1">
				<h3>Title of content</h3>
				<p>Begin content here</p>
			</div>
			
			<div id="sub2" class="hide">
				<h3>Title of content</h3>
				<p>Begin content here</p>
			</div>
		</div><!-- end main div -->

		<div id="footer">
			<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
		</div><!-- end footer div -->
		
	</div><!-- end container div -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>
	
<!-- place Google Analytics code here -->

</body>
</html>

XHTML xHTML 1.1新文档模板

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta name="author" content="Kerrick Design" />
		<meta name="generator" content="Generator? Kerrick Design hand-codes each website from scratch." />
		
		<link rel="stylesheet" media="screen" href="css/style.css" />
		<link rel="stylesheet" media="print" href="css/print.css" />
		<link rel="shortcut icon" href="favicon.ico" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="lib/script.js"></script>
		
		<meta name="date" content="April 11, 2009" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

XHTML CSS测试页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- BEGIN HEAD -->
<head>
	<title>Sample Page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="Shortcut Icon" href="./favicon.ico" type="image/x-icon" />

	<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen,handheld" />
<!--[if IE]><link rel="stylesheet" href="./css/ie.css" type="text/css" media="all" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="./css/ie6.css" type="text/css" media="all" /><![endif]-->
	<script type="text/javascript" src="./libs/js/jquery-1.3.1.min.js"></script>
</head>
<body id="index">
<div id="container">
	<div id="header">
		<h1>Sample page</h1>
		<h2>Test Your CSS</h2>
	</div>
	<div id="navigation">
		<ul>
			<li>
				<a href="#" title="" class="active">Link</a>
			</li>
			<li>
				<a href="#" title="">Link</a>
			</li>
			<li>
				<a href="#" title="">Link</a>
			</li>
			<li>
				<a href="#" title="">Link</a>
			</li>
			<li id="logout">
				<a href="./logout" title="">Logout</a>
			</li>
		</ul>
	</div>
	<div id="main">
		<div id="messages">
			<p class="notice">This is a notice message</p>
			<p class="warning">This is a warning message</p>
			<p class="error">This is an error message</p>
		</div>
		<div id="content">
			<div id="sample-page">
				<div id="anchor-samples">
					<ul>
						<li><a href="#headers-samples">Headers</a></li>
						<li><a href="#text-samples">Text</a></li>
						<li><a href="#list-samples">List</a></li>
						<li><a href="#table-samples">Table</a></li>
						<li><a href="#form-samples">Form</a></li>
					</ul>
				</div>
				<div id="headers-samples">
					<h1>Header 1</h1>
					<p>This is a paragraph after a Level 1 Header.</p>
					<h2>Header 2</h2>
					<p>This is a paragraph after a Level 2 Header.</p>
					<h3>Header 3</h3>
					<p>This is a paragraph after a Level 3 Header.</p>
					<h4>Header 4</h4>
					<p>This is a paragraph after a Level 4 Header.</p>
					<h5>Header 5</h5>
					<p>This is a paragraph after a Level 5 Header.</p>
					<h6>Header 6</h6>
					<p>This is a paragraph after a Level 6 Header.</p>
				</div>
				<hr />
				<div id="text-samples">
					<p>This is just really long paragraph with some Lorem Ipsum Text.Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p> 
					<blockquote><p>This is a paragraph inside of a blockquote</p></blockquote>
					<address>Address: 1 Simple Way</address>
					<p>This paragraph uses <span>valid</span> <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr>. <strong>Strong markup</strong> is used along with <em>Emphasis on this text</em></p>
					<pre>Preformatted markup                can have a lot of spaces!</pre>
				</div>
				<hr />
				<div id="list-samples">
					<ul>
						<li>Unordered list 01</li>
						<li>Unordered list 02</li>
						<li>Unordered list 03
							<ul>
								<li>Unordered list inside list level 2</li>
								<li>Unordered list inside list level 2
									<ul>
										<li>Unordered list inside list level 3</li>
										<li>Unordered list inside list level 3</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
					<ol>
						<li>Ordered list 01</li>
						<li>Ordered list 02</li>
						<li>Ordered list 03
							<ol>
								<li>Ordered list inside list level 2</li>
								<li>Ordered list inside list level 2
									<ol>
										<li>Ordered list inside list level 3</li>
										<li>Ordered list inside list level 3</li>
									</ol>
								</li>
							</ol>
						</li>
					</ol>
					<dl>
						<dt>Description list title 01</dt>
						<dd>Description list description 01</dd>
						<dt>Description list title 02</dt>
						<dd>Description list description 02</dd>
						<dd>Description list description 03</dd>
					</dl>
				</div>
				<hr />
				<div id="table-samples">
					<table summary="This is a sample table">
						<caption>Sample Table</caption>
						<colgroup>
							<col class="this" />
							<col class="that" />
							<col class="this" />
							<col class="that" />
							<col class="this" />
							<col class="that" />
						</colgroup>
						<thead>
							<tr>
								<th>First</th>
								<th>Second</th>
								<th>Third</th>
								<th>Fourth</th>
								<th>Fifth</th>
								<th>Sixth</th>
							</tr>
						</thead>
						<tfoot>
							<tr>
								<th>First</th>
								<th>Second</th>
								<th>Third</th>
								<th>Fourth</th>
								<th>Fifth</th>
								<th>Sixth</th>
							</tr>
						</tfoot>
						<tbody>
							<tr class="odd">
								<td>Row 1 Column 1</td>
								<td>Row 1 Column 2</td>
								<td>Row 1 Column 3</td>
								<td>Row 1 Column 4</td>
								<td>Row 1 Column 5</td>
								<td>Row 1 Column 6</td>
							</tr>
							<tr class="even">
								<td>Row 2 Column 1</td>
								<td>Row 2 Column 2</td>
								<td>Row 2 Column 3</td>
								<td>Row 2 Column 4</td>
								<td>Row 2 Column 5</td>
								<td>Row 2 Column 6</td>
							</tr>
							<tr class="odd">
								<td>Row 3 Column 1</td>
								<td>Row 3 Column 2</td>
								<td>Row 3 Column 3</td>
								<td>Row 3 Column 4</td>
								<td>Row 3 Column 5</td>
								<td>Row 3 Column 6</td>
							</tr>
							<tr class="even">
								<td>Row 4 Column 1</td>
								<td>Row 4 Column 2</td>
								<td>Row 4 Column 3</td>
								<td>Row 4 Column 4</td>
								<td>Row 4 Column 5</td>
								<td>Row 4 Column 6</td>
							</tr>
							<tr class="odd">
								<td>Row 5 Column 1</td>
								<td>Row 5 Column 2</td>
								<td>Row 5 Column 3</td>
								<td>Row 5 Column 4</td>
								<td>Row 5 Column 5</td>
								<td>Row 5 Column 6</td>
							</tr>
							<tr class="even">
								<td>Row 6 Column 1</td>
								<td>Row 6 Column 2</td>
								<td>Row 6 Column 3</td>
								<td>Row 6 Column 4</td>
								<td>Row 6 Column 5</td>
								<td>Row 6 Column 6</td>
							</tr>
						</tbody>
					</table>
				</div>
				<hr />
				<div id="form-samples">
					<form method="post" action="./">
						<fieldset>
							<legend>Legend</legend>
							<p>
								<label for="text-input">Text Input</label>
								<input id="text-input" name="text-input" type="text" value="Text Input" />
							</p>
							<p>
								<label for="password-input">Password Input</label>
								<input id="password-input" name="password-input" type="password" value="Password Input" />
							</p>
							<p>
								<label for="radio1-input">Radio 1 Input</label>
								<input id="radio1-input" name="radio-input" type="radio" value="1" />
								<label for="radio2-input">Radio 2 Input</label>
								<input id="radio2-input" name="radio-input" type="radio" value="2" />
							</p>
							<p>
								<label for="checkbox1-input">checkbox 1 Input</label>
								<input id="checkbox1-input" name="checkbox1-input" type="checkbox" value="1" />
								<label for="checkbox2-input">checkbox 2 Input</label>
								<input id="checkbox2-input" name="checkbox2-input" type="checkbox" value="2" />
							</p>
							<p>
								<label for="select-input">Select Box</label>
								<select id="select-input" name="select-input">
									<optgroup label="1 thru 3">
										<option value="1">Option 1</option>
										<option value="2">Option 2</option>
										<option value="3">Option 3</option>
									</optgroup>
									<option value="4">Option 4</option>
									<option value="5">Option 5</option>
									<option value="6">Option 6</option>
								</select>
							</p>
							<p>
								<label for="textarea-input">Textarea Input</label>
								<textarea id="textarea-input" name="textarea-input" rows="20" cols="40">This is a textarea.</textarea>
							</p>
							<input type="submit" />
							<input type="reset" />
						</fieldset>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
		<p>Copyright © 2001-2009 One Good Company</p>
	</div>
</div>
</body>
</html>