[轉職軟體工程師、自學程式語言]什麼是 Web Development and HTML ? 第三章 : HTML ?

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/

我們今天講的主題是, 什麼是 Web Development and HTML ?,大綱如下


第一章 : Internet 是如何工作 ?

第二章 : Web Development ?

第三章 : HTML ?


 


 


第三章 : HTML ?

 

❶ Block vs. Inline Elements

❷ Div & Span Elements

❸ Lists

❹ Links & Attributes

 Tables

❻ Forms

❼ Form Validation

❽ Exercise

❾ Project: Idea Generation


部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


 

 

❹ Links & Attributes

Attributes 可以幫助   Browser 知道這   link 的某一些屬性要怎樣設定

常用到的 elements 有 link 和 img

image

href : 連結資源的 URL。

src : 可嵌入內容的網址。

alt : 在圖像無法顯示的情況下,顯示代替文本。

其他可詳閱 MDN HTML attribute reference : https://developer.mozilla.org/zh-TW/docs/Web/HTML/Attributes


 部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


 


❺ Tables

它是一個 Block Elements,有時候網頁需要表格資料的形式,簡單的表格就可以利用<table>,<tr>,<td>,<th>來建立,它會自動調整表格的大小依照你的文字長短,在還沒控制它的其他樣式之前。

 

<tr>:表格行元素。HTML<tr>元素定義在一個表中單元的行。然後可以使用<td>(數據單元格)和<th>(標題單元格)元素的混合來建立行的單元格。

<td>:表格數據單元格元素。HTML<td>元素定義了包含數據的表的一個單元格。它參與表模型。

<th>:HTML<th>元素的細胞定義為一組的表格單元格的報頭。該組的確切性質由scope和headers屬性定義。

image16.png

 

image17.png

其他可詳閱 MDN HTML table : https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/table

 

 部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


 


❻ Forms

<form>:HTML <form> 元素表示提交訊息的區塊,此區塊含有許多可互動的控制項。

 

主要是可以讓你跟你的   server   做   interaction   的一個工具,什麼時候會用到呢?

比如說你要   GET   一個   resouce one page,你希望你到的   page   是   follow   你的   queries   的,例如說英文版還是中文版

也有可能是你在做   PUT 或   POST   的時候

PUT   ,是要跟   server   說你要   PUT   什麼東西,妳要加什麼   resouce   進去

POST,是要跟   server   說你改了什麼東西

常見的例子就是做   User Login,那就是要做一個   POST,你要跟它講說你的帳號密碼是什麼,server才知道來去處理

 

image

image

Method是說當你今天這個form的button按下去之後,browser會把form裡面的東西送到action的那個url連結上面,然後用的method是用你所寫的GET、PUT、POST來送 (見上圖)


image

image

加一個placeholder,可以給你的user一個hint,例如讓他知道要輸入什麼東西,帳號要打email address,密碼是要8個字元 (見上圖)


image

action的那個url連結的網址用https://,你在傳送時才不會被監視,被有心人士拿到資料。


 部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


第一章 : Internet 是如何工作 ?

第二章 : Web Development ?

第三章 : HTML ?


痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog

隨意窩 : https://blog.xuite.net/warlimit/blog

Blogspot : https://warlimit.blogspot.com/

如果您喜歡我的文章,請幫我在下方拍手區按圓圈圈裡的拍手圖案5次!
我將得到 Likecoin 的回饋:)

回饋由 Likecoin 基金會出資,您只要註冊/登入帳號(fb、google帳號都可以註冊,不超過1分鐘),按五次左鍵,可以贊助我的文章且完全不會花到錢!若願意成為讚賞公民那是十分感激。
支持創作,正向交流:)

留言

這個網誌中的熱門文章

如何開始 Podcast 製作教學 5大步驟 ! 不需任何成本方法

[Udemy推薦課程] Day 2 The Web Developer Bootcamp 2021 [轉職軟體工程師,自學程式語言]

2021年一夜致富,市值60億美元, 什麼是以太坊經典 ETC