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 iPhone图标

<link rel="apple-touch-icon" href="images/iphone-icon.png" />

XHTML 严格模式下的Uesrful xhtml基本启动器模板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--html必须要有xmlns属性，用来告诉浏览器和搜索引擎网页的语言（非网页的编码）;zh-CN是中文简体，zh-HK是繁体，语言属性及<meta>可以让你的网页“搜索引擎友好”-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN" dir="ltr">
  <head>
    <title>中文网页模板-xhtml1-strict</title>
 
    <!--Begin meta部分 http-equiv是常用的属性，此外name/content作为一种开放的属性，相当于键值对-->
    <meta http-equiv="Content-type" content="text/html; charset=utf8" /><!--浏览器接受到response中的网页部分时（区别于response本身的编码），根据charset对内容进行编码解析-->
    <meta http-equiv="Content-Language" content="zh-cn" /><!--TODO:和html中的lang联系-->
    <meta name="keywords" content="HTML, DHTML, CSS, XHTML, JavaScript" />
    <meta name="description" content="中文网页模板最佳xhtml实践" />
    <!--End meta部分-->
 
    <!--Begin 外部样式/css/style的正确引入方式，并采用适当的命名和引入顺序-->
    <link rel="stylesheet" type="text/css" href="templete.css" media="screen" /><!--用link rel而不用src；浏览器都支持的4个link属性-->
    <link rel="stylesheet" type="text/css" href="templete-android.css" media="handheld" /><!--用于手持终端如安卓-->
    <!--End 外部样式/css/style-->
 
    <link href="http://git.oschina.net/assets/favicon-28020a6101d7a4058376a3e5927c64d5.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
 
    <!--Begin 外部脚本/js的正确引入方式，并采用适当的命名和引入顺序；引用库外部地址, 节省你不必要的流量，并且放在最前-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js" charset="utf8"></script>
    <script type="text/javascript" src="templete_utf8.js" charset="utf8"></script>
    <script type="application/x-javascript" src="templete_utf8.text" charset="utf8"></script>
    <!--Begin 外部脚本/js-->
 
    <!--内部样式-->
    <style type="text/css">
    <!--另一种引用外部样式的方法，非html标签而是style标签内容，不推荐使用
    @import url(templete.css);
    -->
 
    </style>
 
    <!--内部js-->
    <script type="text/javascript">
 
    </script>
 
  </head>
 
  <body>
  <!--Begin body内容示例-->
    <div>
      <h2>XHTML 规则概要</h2>
 
      <p>将传统的<span class="html-code">HTML</span>转换为<span class="html-code">XHTML 1.0</span>是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过<span class="html-code">HTML</span>，都不会妨碍你使用<span class="html-code">XHTML</span>。</p>
 
      <ul>
      <li>使用恰当的文档类型声明和命名空间。</li>
      <li>使用<span class="html-code">meta</span>元素声明你的内容类型。</li>
      <li>使用小写字母书写所有的元素和属性。</li>
      <li>为所有的属性值加双引号——为此在js代码中对字符串变量赋值尽量采用单引号。</li>
      <li>为所有的属性分配值。</li>
      <li>关闭所有的标签，如<span class="html-code"><br /></span>、<span class="html-code"><hr /></span>。</li>
      <li>使用空格和斜线关闭空标签。</li>
      <li>不要在注释中写双下划线。</li>
      <li>同时，避免使用已被废弃的 HTML 元素比如 <font>，或者无语义的元素比如 <br />，来模拟其实不存在的逻辑结构。</li>
      <li>确保小于号及和号为 < 和 &</li>
      </ul>
 
      <h3>Unicode 和其他字符集</h3>
 
      <p>XML、XHTML、和HTML 4.0 文档的默认字符集是 Unicode，一个由 Unicode 联盟定义的标准。Unicode 是一套全面的字符集，它为每个字符提供了一个特定的唯一的数字，不论平台、程序和语言。Unicode 也是我们拥有的最接近通用字母表的事物，尽管它并不是一个字母表，而是一套数字映射方案。</p>
      <p>尽管 Unicode 是 web 文档默认的字符集，开发人员依然可以自由地选择更适合他们的其他字符集。比方说，美国和西欧的网站常常使用 ISO-8859-1 (Latin-1) 编码，而中华人民共和国的国家标准是 gb2312。</p>
      <p class="advice">对于程序开发人员而言，建议尽量采用 utf8 格式编码，不管是网页内容还是网页源文件</p>
    </div>
  <!--End body内容示例-->
  </body>
</html>

XHTML tab nav - html

<div id="header">
  <ul>
    <li id="nav-home"><a href="#">Home</a></li>
    <li id="nav-news"><a href="#">News</a></li>
    <li id="nav-products"><a href="#">Products</a></li>
    <li id="nav-about"><a href="#">About</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
  </ul>
</div>

XHTML 基本XHTML模板（M. Hoffmann）

<!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="de" lang="de">
<head>
<title>Basisvorlage (X)HTML Quellcode</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="copyright" content=" ... " />
<meta name="keywords" content=" ... " />
<meta name="description" content=" ... " />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" media="print" href="druck.css" />
<style type="text/css" media="screen">
@import url( css.css );
</style>
<style type="text/css">#supernav { clear: both; margin: 50px 0; padding: 10px; width: 400px; background: #fff; color: #111; text-align: left;}</style></head>
<body id="start">
<!-- - - - - - - - - - - Seitenwrap - - - - - - - - - - -->
<div id="wrapper">
<!-- - - - - - - - - - - Kopfbereich inkl. H1 und Navigation - - - - - - - - - - -->
<div id="header">
<h1>Lorem ipsum dolor sit amet</h1>
<!-- - - - - - - - - - - Navigation - - - - - - - - - - -->
<ul id="navigation">
<li><a href="#" title="">Lorem</a></li>
<li><a href="#" title="">Ipsum</a></li>
<li><a href="#" title="">Dolor</a></li>
<li><a href="#" title="">Sit amet</a></li>
</ul><!-- Ende Navigation -->
</div><!-- Ende Kopfbereich -->
<div id="content"><!-- - - - - - - - - - - Hauptbereich - - - - - - - - - - -->
<h2>Lorem ipsum dolor sit amet</h2>
<p><a href="#" title="">Lorem ipsum dolor sit amet, consectetuer adipiscing</a> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<h3>Lorem ipsum dolor sit amet</h3>
<blockquote cite=""><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></blockquote>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div><!-- Ende Hauptbereich -->
<div id="sidebar"><!-- - - - - - - - - - - Seitenleiste - - - - - - - - - - -->
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div><!-- Ende Seitenleiste -->
<div id="footer"><!-- - - - - - - - - - - Seitenfuss - - - - - - - - - - -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div><!-- Ende Seitenfuss -->
</div><!-- Ende Seitenwrap -->
<div id="supernav"><h2>Navigation</h2><a href="../index.html">Zur Quelltextübersicht</a></div>
</body>
</html>

XHTML 过渡XHTML示例

<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

XHTML IE 6更新通知

<!--[if IE 6]><div id="update-ie">Please Update Your Browser to the <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">latest version</a> for proper page rendering & to avoid security leaks.</div><![endif]-->

XHTML CSS中的font-size

<style type="text/css">
body{
	font-size:100%;
	line-height:1.125em;
	}
.bodytext p{
	font-size:0.875em;
	}
.sidenote {
	font-size:0.75em;
	}
</style>
<!--[if !IE]>-->
<style type="text/css">
body{
	font-size:16px;
	}
</style>
<!--<[endif]-->

XHTML 有效的flash嵌入

<object
type="application/x-shockwave-flash"
data="flash.swf"
width="750" height="400">
<param name="movie"
value="flash.swf" />
</object>

XHTML 好看且可访问的地址表单字段

<!--# HTML #-->

<fieldset class="bottom-labels">
  <legend>Address</legend>
  <div class="field">
    <label for="street">Street</label>
    <input type="text" id="street" name="street" size="48" />
  </div>
  
  <div class="field left">
    <label for="city">City</label>
    <input type="text" id="city" name="city" size="30" />
  </div>
  
  <div class="field left">
    <label for="state">State</label>
    <input type="text" id="state" name="state" size="2" maxlength="2" />
  </div>
  
  <div class="field left last">
    <label for="zipcode">Zip Code</label>
    <input type="text" id="zipcode" name="zipcode" size="5" maxlength="5" />
  </div>
</fieldset>

<!--# CSS #-->

<style type="text/css">
fieldset, .field {
    margin:0 0 16px;
    }
legend, label {
    display:block;
    margin-bottom:3px;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold;
    color:#333;
    }
input[type=text] {
    padding:3px;
    border:1px solid #999;
    }
input[type=text]:focus {
    position:relative;
    left:-1px; top:-1px;
    margin:0 -2px -2px 0;
    border:2px solid #09f;
    }
.bottom-labels .field {
    position:relative;
    padding-bottom:1.25em;
    margin-bottom:0.5em;
    }
.bottom-labels label {
    position:absolute;
    bottom:0;
    font-size:77%;
    }
.bottom-labels .left {
    float:left;
    margin-right:0.96em;
    }
.bottom-labels .last {
    margin-right:0!important;
    }
</style>

XHTML jQuery简单幻灯片

<!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">

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$('html').addClass('js');
$(document).ready( function() {
setInterval("switchSlide()", 4000);
});
function switchSlide() {
var slide = $("#slideshow .slide:first");
slide.hide();
$("#slideshow").append(slide);
slide.fadeIn(1500);
}
</script>

<style>
#tagline {width:332px; height:27px; overflow:hidden; margin:11px 0 0 0; position:relative; left:0;}  
#slideshow .slide {position: absolute;left:0;}
#slideshow .slide a, #slideshow .slide img{border:none;}
.js #slideshow .slide {display: none;}
</style>

</head>

<body>

<div id="slideshow">
    <div class="slide">
        <a href="#"><img src="img1.png" height="" width="" alt=""></a>
    </div>    
    <div class="slide">
        <a href="#"><img src="img2.png" height="" width="" alt=""></a>
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</body>
</html>