想對html5與microdata 程式碼做個記錄
code1: 簡易程式碼
<!DOCTYPE HTML>
<head>
<meta charset=utf-8>
<title>html5與microdata
</title>
</head>
<body>
<div><h1>文章標題：範例1：簡易html 程式碼</h1>
<p>date:2015-04-01
</p>
<p>Aurhor:王守愚
</p>
<p>Publisher:防水抓漏飛鼠工程
</p>
<p>文章第一段
</p>
<p>文章第一段
</p>
<img src="http://www.leakproof.tw/pic2/logo-防水抓漏.jpg" alt="bird" height="158" width="390">
<img src="http://www.leakproof.tw/pic2/index-管道間抓漏.jpg">
</div>
</body>
</html>
code2:加入css程式碼
<!DOCTYPE HTML>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="test.css" media="all" />
<title>html5與microdata
</title>
</head>
<body>
<div> <h1>文章標題：範例2：加入css 碼</h1>
<p>date:2015-03-08
</p>
<p>Aurhor:王守愚
</p>
<p>Publisher:防水抓漏飛鼠工程
</p>
<p>文章第一段
</p>
<p>文章第二段
</p>
<img src="http://www.leakproof.tw/pic2/logo-防水抓漏.jpg" alt="bird" height="158" width="390">
<img src="http://www.leakproof.tw/pic2/index-管道間抓漏.jpg">
</div>
</body>
</html>
code2-test.css
/* 飛鼠工程 */
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #C63300;
margin:0;
padding: 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: #00DD00;
margin:0;
padding: 0;
}
code3:寫為html5程式碼
<!DOCTYPE HTML>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="test.css" media="all" />
<title>html5與microdata
</title>
</head>
<body>
<article>
<header><h1>文章標題：範例3：調整為html5格式</h1>
<p>Published:
<time datetime="2015-03-08" pubdate>2015-03-08
</time>
</p>
<p> Author:
<a href="https://plus.google.com/107725217595079088583" rel="author">王守愚</a>
Publisher:
<a href="http://plus.google.com/107725217595079088583" rel="publisher">防水抓漏飛鼠工程</a>
</p>
</header>
<section><h2>文章第一段</h2>
<p>文章內文第一段
</p>
</section>
<section><h2>文章第二段</h2>
<p>文章內文第二段
</p>
</section>
<figure>
<picture>
<img src="http://www.leakproof.tw/pic2/logo-防水抓漏.jpg" alt="bird" height="158" width="390">
<img src="http://www.leakproof.tw/pic2/index-管道間抓漏.jpg">
</picture>
<figcaption>圖片說明
</figcaption>
</figure>
</article>
</body>
</html>
code4:改寫為microdata程式碼
<!DOCTYPE HTML>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="test.css" media="all" />
<title>html5與microdata式
</title>
</head>
<body>
<article itemscope itemtype="http://schema.org/Article">
<!-- Title -->
<header>
<h1 itemprop='name'>文章標題：範例4：調整為html5格式</h1>
<p>Published:
<!-- 請注意，此處不是使用time ，而是使用data -->
<data itemprop="datePublished" value="2015-03-08">2015-03-08
</data>
</p>
<p> Author:
<a href="https://plus.google.com/107725217595079088583" rel="author">王守愚</a> Publisher:
<a href="http://plus.google.com/107725217595079088583" rel="publisher">防水抓漏飛鼠工程</a>
</p>
</header>
<section><h2>文章第一段</h2>
<p>文章內文第一段
</p>
</section>
<section><h2>文章第二段</h2>
<p>文章內文第二段
</p>
</section>
<figure>
<picture>
<img src="http://www.leakproof.tw/pic2/logo-防水抓漏.jpg" alt="bird" height="158" width="390">
<img src="http://www.leakproof.tw/pic2/index-管道間抓漏.jpg">
</picture>
<figcaption>圖片說明
</figcaption>
</figure>
</article>
</body>
</html>
