Download presentation
Presentation is loading. Please wait.
1
文字與圖片
2
區塊元素 與 行內元素 區塊元素(block-level) 行內元素(inline) 保留矩形區塊，換行重新開始
h1, h2, h3, h4, h5, h6 div, p, pre hr blockquote, address, ol, ul, li dl, dt, dd 行內元素(inline) span, b, i, u, font, sub, sup, br,…
3
Example <h1>Heading 1</h1> <p>The first paragraph is here.</p><hr /> <p>The second paragraph is here. There is a span area <span style="color:red">red area</span>. E = m<i>c</i><sup>2</sup></p>
4
標題文字<hx> h1, h2, h3, h4, h5, h6
ex3-2.html
5
建立段落(p, blockquote) <p> <blockquote>
<p>使用p元素來建立…</p> <blockquote> <h3>區塊元素</h3> <p>瀏覽器在遇到區塊元素(例如指定段落的p元素)的時候，會保留一塊長方形…</p> … </blockquote>
6
預先格式化的文字<pre> 使用 顯示一個空白字元 使用<pre>, 完全依照原始檔空白及換行顯示
7
3-3 項目列表 Unordered list 巢狀列表 <ul> <li> XHTML規範的版本 :
ex3-5.html Unordered list <ul> <li>XHTML 1.0</li> <li>XHTML 1.1</li> <li>XHTML 2.0</li> </ul> 巢狀列表 <ul> <li> XHTML規範的版本 : <li>XHTML 1.0</li> <li>XHTML 1.1</li> <li>XHTML 2.0</li> </ul> </li> …
8
Ordered List <ol> <li>XHTML 1.0</li>
<ol start="5">
9
定義列表 <dl> <dt>HTML</dt> <dd>網頁所使用的標記語言</dd> <dt>XHTML</dt> <dd>由HTML與XML整合而成的標記語言</dd> <dt>CSS</dt> <dd>用來改變網頁元素的外觀與樣式</dd> <dt>JavaScript</dt> <dd><h3>用來建立動態的網頁</h3></dd> </dl>
10
換行<br /> 與 水平線<hr />
HTML<br /><br />XHTML<br /> CSS<br /><br /> <hr /> <hr />網頁設計所需要的技術 <hr />HTML <hr />XHTML<hr />CSS<hr />
11
表示語意的文字元素 ex3-8.html <cite>背影</cite>
<code>var i = 1;</code> <var>i</var> <samp>:\></samp> <kbd>EXIT</kbd> <del>李小程</del> <ins>陳大龍</ins> <em>不要</em> <q>今日事今日畢</q> ex3-8.html
12
指定外觀的文字元素 ex3-9.html <b>粗體</b>
<big>比預設的字體稍大</big> <center>這一行顯示置中的文字</center> <i>斜體</i> <small>比預設的字體稍小</small> <strike>加刪除線</strike> πr<sup>2</sup> H<sub>2</sub>SO<sub>4</sub> <tt>電報字體</tt> <u>加底線</u>
13
一般用途元素 區塊元素 <div> 行內元素 <span> <div id="fish">
<h1>捕魚歌</h1> <img src="大魚.jpg" alt="" /> <p>白浪滔滔我不怕，掌起舵兒… </p> </div> 行內元素 <span> <span style="color: #FF0000">紅</span>, <span style="color: #0000FF">藍</span>, <span style="color: #00FF00">綠</span>
14
特殊字元
15
Deprecated Tags and Attributes
(不建議使用)
16
HTML Style HTML Style Attribute
<body style="background-color:yellow">…</body> <p style="font-family:courier new; color:red">…</p> <span style="font-size:20px">…</span> <h1 style="text-align:center">…</h1> <span style="font-weight:bold">…</span> <span style="text-decoration:line-through">…</span>
17
<body style="background-color:#cff">
<h1 style="text-align:center">HTML Style</h1> <p style="font-family:courier new; color:darkblue">In HTML 4, some <span style="font-size:24px">tags and attributes</span> are defined as deprecated. <span style="font-weight:bold">Deprecated</span> means that they will not be supported in future versions of HTML and XHTML. The message is clear: <span style="text-decoration:line-through">Don't</span> Avoid the use of deprecated tags and attributes.</p> </body>
18
圖片( Image)
19
<img src="…" alt="…" … />
<img src="fish.jpg" alt="大魚" /> 屬性 src alt width height title usemap ismap longdesc
20
<img src="yellow.jpg" alt="黃花風鈴" title="暨大黃花風鈴" /><br /> <img src="yellow.jpg" alt="黃花風鈴" width="200" /> <img src="yellow.jpg" alt="黃花風鈴" height="200" /> <img src="yellow.jpg" alt="黃花風鈴" width="200" height="200" />
Similar presentations
