Html 教學

基本版面

  1. 新增 index.html
  2. 建立一個版面
<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
</body>

</html>

html + tag

你可以參照此上課用基本樣版

<!DOCTYPE html lang="zh">
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>基本的版型</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
    <style>
    /* CSS樣式寫在這 */
    </style>
</head>

<body>
    <div>我的基本版型</div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    //js 寫在這
    </script>
</body>

</html>

meta

用於網頁的內容說明與網頁資訊，或者設定瀏覽器選項

p

段落

<p>這是一個段落A</p>
<p>這是一個段落A</p>
<p>這是一個段落A</p>

br

換行

<p>這是一個<br>段落A</p>

h1~h6

標題

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>

a

連結

<a href="http://code.cainplay.com">Cain的部落格</a>
<a href="http://code.cainplay.com" target="_blank">Cain的部落格</a>
<a href="http://code.cainplay.com" target="_self">Cain的部落格</a>

hr

線

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

div

容器

spen

註解

<!-- 這是註解不會顯示在頁面 -->

img

圖片

<img src="https://cainmaila.github.io/css/images/cain.jpg">
<img src="https://cainmaila.github.io/css/images/cain.jpg" width="200px" height="200px">

button

按鈕

<button type="button">Click Me!</button>
<button type="button" disabled >不可使用</button>

results matching ""

    No results matching ""