菜菜菜的前端學習日誌 - Day5

Html Tags

首先先講一下Html Tags大部分由一個 開始Tag 及一個 結束Tag 所組成

例如上一篇所講到的段落Tag
<p>我是一個段落</p>

但是也是有少部分的Tag是沒有的

例如圖片Tag它就沒有結束標籤<img src="Hello.png">
或是輸入框<input type="text">

接下來講一些常用的Html Tags

區塊元素

所謂的區塊元素會讓內容從新的一行開始顯示，它們有這特性是因為他的屬性預設是display:block

DIV

<div></div>可以說是一個能夠將其他元素包起來的"容器"，在網頁製作中被大量的使用

P

<p></p>是定義一個段落

form

<form></form>標籤用於為用戶輸入創建HTML表單，表單內能包含<input type="text"><input type="radio"><input type="checkbox">及<teaxarea></teaxarea>...等元素

ul/ol li

以下為列表元素，可分為無序列表及有序列表

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul為無序列表，列表前方會以粗體圓點標記

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

ol為有序列表，列表前方會以數字標記

h1~h6

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

前一篇有提到是依序定義最大的標題到最小的標題

行內元素

所謂的行內元素會出現在同一行，這特性是因為些屬性預設是display:inline

input

input輸入框有許多種類，而最常見的就是
文字輸入<input type="text">
單選框<input type="radio">
複選框<input type="checkbox">
按鈕<input type="button">...等

a

<a href="URL"></a> 是一個連結的標籤，在 href處輸入要導向的頁面之URL

textarea

<textarea></textarea>定義一個多行的文字輸入區塊

img

<img src="URL">是定義圖片，在 src 處輸入引入圖片的位置

註解

另外Html的註解方式為<!--我是註解-->，註解的內容不會出現在頁面上