Learn Javascript
基本

基本 html 架構

超文本hypertext markup language

<html>
  <head>
    <title>標題</title>
  </head>
  <body>
    內文
  </body>
</html>

標籤(tag)分為

前者有頭有尾,後者只有一個。參考上面範例。單體標籤的例子:<br/>,<hr/>。

示範存檔和開檔。

超連結 - <a>

<a href="http://www.yahoo.com.tw">Yahoo</a> 🏷
<a href="http://www.yahoo.com.tw" target="_blank">Yahoo</a> 🏷
在標籤中的屬性,寫法利用=分隔,可以簡單理解為鍵值對(key value pair)。左邊是鍵(HTML編譯要識別的部分),右邊是值。值要用雙引用括起來。

寄信也是這個<a>標籤

<a href="mailto:me@gmail.com">聯繫</a>

除了移動到某個網頁,也可以移動到本頁的某個地方,但是需要錨點

p 定位：

<a name="hello">xxxxxxx</a>
<a id="hello">xxxxxx</a>
<a href="#hello">移到hello處</a> <!-- 移動--> 🏷

文字排版 - <b>、<i>、<br/>、<hr/>

基本上 HTML 也提供了版面設計,但是比較現代的方式都使用大量 CSS。

粗體

<p>This text is <b>bold</b></p>

斜體

<p>This text i <i>italic</i></p>

粗斜

<p> <b><i>Italic-bold</i></b> </p>
看內容 

<p>This text i <i>italic</i></p>
<p> This text is <b>bold</b> </p>
<p> <b><i>Italic-bold</i></b></p>

斷行

<p>
  Linebreak<br />
  linebreak<br />
  linebreak<br />
</p>

水平線分隔

<hr />
看內容 

Linebreak<br/>
linebreak<br/>
linebreak <!--html_preserve--><span  data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" title="❓為甚麼不斷行">🏷</span><!--/html_preserve-->
linebreak
<hr/>
<p>段落的斷行</p>

有/沒有序號的項目

註解

<!-- Comment -->

📝注意：

看內容 

<ul>注意：
    <li>註解符號不能分隔，例如 -- ></li>
    <li>notepad++ 中如果要打中文, 編碼要選</li>
</ul>
<ol>注意：
    <li>註解符號不能分隔，例如 -- ></li>
    <li>notepad++ 中如果要打中文, 編碼要選</li>
</ol>
<!--html_preserve--><span  data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" title="👏後面有註解，但是不會出現">🏷</span><!--/html_preserve-->
<!-- 
<ol>注意：
    <li>註解符號不能分隔，例如 -- ></li>
    <li>notepad++ 中如果要打中文, 編碼要選</li>
</ol>

 -->

文字區 textarea

原始碼(textarea.html) 
<html>
    <head>
        <title> text formatting in html </title>
    </head>
    <body>
        <p> this text is <b>bold</b> </p>
        <p> this text i <i>italic</i></p>
        <p><b><i>italic-bold</i></b></p>
		
        <p>linebreak<br/>
        linebreak<br/>
        linebreak<br/></p>
        <p>horrizontal line</p><hr/>
        <!-- comment : will no display in browser -->       
    </body>
</html>

插入圖片

<img src="" /> 
<img src="xxx.jpg" title="快顯視窗" />

<img style="width:30px;height:30px" /> 
<img width="30px" height="30px" />

audio

<audio src="song.mp3" controls="controls">
  Your browser does not support the audio element.
</audio>

多個空白(包括 hard breaking)=1 個空白

😒 即使裡面有鍵盤敲進去的「ENTER」或是多個空白。

例如

It                 is
a               dog              .)

描繪的結果仍然是

It is a dog .
前 後