程式語法

 <!doctype html>
<html>
 <!--JavaScript -->
<script src="code.js" async></script>

<!--標籤定義了文檔與外部資源的聯繫,常用來引入CSS文件 -->
<link rel="stylesheet" href="style.css">
 
    <head>
        <meta charset="UTF-8">
        <title>HTML5基礎語法</title>
    </head>

<body>
<!--放置頁面包含的LOGO和其它有用的信息,像標語、菜單等 -->
        <header>
            <h1><a href="#">Welcome to my page</a></h1>
        </header>
<!--這個標籤是用來建立菜單導航的 -->
            <nav>
               <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Contact</a></li>
               </ul>
            </nav>
<!--<article>這個標籤用來定義獨立的內容,像那些博客文章、新聞、或者用戶評論內容。  -->
<!--<section>用來分割頁面的不同部分。可以嵌套在在header之前,footer之後。如果需要,它還可以包含任意數量的特殊標記。  -->       
    <section>
            <article>
                <header>
                    <h3><a href="#">Article 1</a></h3>
                </header>
                    <section>
                        <p>Lorem ipsum...</p>
                        <figure>
                            <a href="#"><img src="http://tutorialzine.com/img/featured/633.jpg" width="300" height="165" /></a>
                        </figure> 
                    </section>
            </article>
    </section>
<!--這個標籤指定一個存放與頁面內容無關的元素,可以用來定義邊欄或者其它任何我們能想到的與頁面正文內容無關的內容。  -->
     <aside>
            <h1><a href="#">Aside content</a></h1>
            Lorem ipsum dolor sit amet..
     </aside>
<!--這個標籤用來定義代替在頁面底部的部分,常常用來包含像作者、版權信息、使用政策鏈接、隱私條件等信息。 -->     
            <footer>
                    <address>
                           Contact us at:<br />
                                <a href="www.gazpo.com">Gazpo.com
                   </address>
             </footer>

</body>
</html>

預覽畫面

HTML5基礎語法

Welcome to my page

Article 1

Lorem ipsum...

Aside content

Lorem ipsum dolor sit amet..

Contact us at:
Gazpo.com

gcchiou 發表在 痞客邦 PIXNET 留言(0) 人氣()