文字與圖片 Yen-Cheng Chen IM, NCNU 例子與練習: http://w3schools.com/html/html_examples.asp
區塊元素 與 行內元素 區塊元素(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,…
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>
標題文字<hx> h1, h2, h3, h4, h5, h6 <h1>This is heading 1</h1> 線上練習: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_headings
建立段落(p, blockquote) <p> <blockquote> <p>使用p元素來建立…</p> <blockquote> <h3>區塊元素</h3> <p>瀏覽器在遇到區塊元素(例如指定段落的p元素)的時候，會保留一塊長方形…</p> … </blockquote>
預先格式化的文字<pre> 使用 顯示一個空白字元 使用<pre>, 完全依照原始檔空白及換行顯示 不建議使用 使用 顯示一個空白字元 使用<pre>, 完全依照原始檔空白及換行顯示
項目列表(List) Unordered list 巢狀列表 <ul> <li> XHTML規範的版本 : <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> …
Ordered List <ol> <li>XHTML 1.0</li> <ol start="5">
定義列表 <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>
換行<br /> 與 水平線<hr /> HTML<br /><br />XHTML<br /> CSS<br /><br /> <hr /> <hr />網頁設計所需要的技術 <hr />HTML <hr />XHTML<hr />CSS<hr />
表示語意的文字元素 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
指定外觀的文字元素 不建議使用 <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>
一般用途元素 區塊元素 <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>
特殊字元 http://www.w3schools.com/tags/ref_entities.asp
Deprecated Tags and Attributes (不建議使用)
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>
<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>
Semantic Elements Semantic Elements: Elements with a meaning http://www.w3schools.com/html/html5_semantic_elements.asp Semantic Elements: Elements with a meaning <div id="content"> <div id="header">…</div> <div id="nav">…</div> … <div id="footer">…</div> </div>
HTML5 Semantic Elements Tag Description <article> an article <aside> content aside from the page content <details> additional details that the user can view or hide <figcaption> a caption for a <figure> element <figure> self-contained content (illustrations, diagrams, photos, code listings) <footer> a footer for a document or section <header> a header for a document or section <main> the main content of a document <mark> marked/highlighted text <nav> navigation links <section> a section in a document <summary> a visible heading for a <details> element <time> a date/time
圖片( Image)
<img src="…" alt="…" … /> <img src="fish.jpg" alt="大魚" /> 屬性 src alt width height title usemap ismap longdesc
<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" />