[轉職軟體工程師、自學程式語言]什麼是 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屬性定義。

image​16.png​

 

image​17.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大步驟 ! 不需任何成本方法

圖片
  部落格轉移，給讀者更好的閱讀體驗， 本文網址 :   https://pse.is/3klspx   如何開始 Podcast 製作教學 5大步驟 ! 如果您正在尋找指導您 如何開始 Podcast 的指南 ，那麼您絕對來對地方了…… 開始播客並不難，但您需要執行許多步驟才能啟動播客。 在本 Podcast 製作教學 中，我們將引導您完成該過程的每一步： 選擇主題和名稱 節目和劇集格式 封面藝術創作 前奏和後奏音樂 設備選擇 錄音和編輯 提交給 Apple 播客 (iTunes) 促銷提示 以及更多… 與 Youtube 相比，播客是一個不那麼擁擠和競爭激烈的領域，因此 現在 是開始的最佳時機。 截至 2021 年 6 月，播客數量剛剛超過 175 萬，但博客數量超過 6 億！ 如果你想知道，在過去的幾年裡，我已經幫助成千上萬的人開始播客，並且我自己也在不同的行業開始了一些節目。 想要快速開始播客？註冊 Firstory 、 SoundOn ，上傳您的音頻文件，然後平台會幫你自動提交給各個播放平台 Spotify 、 KKBOX 、 Apple Podcast 、 Google Podcast 、 Pocket Casts 。 讓我們開始吧： 規劃 這是 Podcast 製作教學 的初始（經常被忽視）階段。在您繼續前進之前，您會想在這裡度過大量時間。 隨時拿出筆記本或白板，這樣您就可以像專業人士一樣開始計劃您的播客。 選擇一個主題 您希望您的播客專注於特定主題或細分市場。 嘗試將範圍縮小到您可以在多集（100 多集）中談論的內容，但范圍不會太廣，以至於您不會吸引潛在觀眾。 例如，與其進行“戶外”播客，不如談論遠足——或者更具體的，比如遠足。 隨著您越來越受歡迎，您可以隨時擴展您的主題。 重要提示： 請參閱有關選擇名稱的部分，以確保您不會限制自己。 選擇共同主持人（不一定需要） 您有想要共同主持的朋友、商業夥伴或同事嗎？ 如果您有共同主持人，開始播客會容易得多。 如果你們就某個話題分享自己的觀點，自然會進行更吸引人的對話。讓某人保持正軌也很有幫助。 此外，您可以拆分編輯、推廣等其他任務。 不過也有缺點。 你要確保你們都長期致力於它。它有助於從一開始就設置時間表，這樣您就知道每週什麼時候開...
閱讀完整內容

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

圖片
  部落格轉移，給讀者更好的閱讀體驗，本文網址 :  https://janstockcoin.com/blog/ 今天大綱如下 : ➤ 了解Inline Elements 和 Block Elements ➤ - div & span ➤ - hr & br ➤ - sup & sub ➤ - em & strong ➤ HTML 符號實體代碼 ➤ - header & footer ➤ - main & nav ➤ 快速縮寫 ➤ 了解 Inline Elements 和 Block Elements 接下來，我們介紹兩個新元素，Divs 和 Span，但首先要介紹兩個重要的  Inline Elements 和 Block Elements 。這些術語指的是給定元素如何實際適應文檔中的內容流。 Block Elements : Block Elements始終從新行開始。Block Elements始終佔用可用的全部寬度（盡可能向左和向右伸展）。Block Elements具有頂部和底部邊距，而Inline Elements則沒有。 Inline Elements : Inline Elements不會從新線路上啟動。Inline Elements僅佔用必要的寬度。 ​ 部落格轉移，給讀者更好的閱讀體驗，本文網址 :  https://janstockcoin.com/blog/ ➤ - div & span <div> HTML <div> 元素（或是 HTML 文件  Block Elements ）是本質上不特別代表任何東西的通用内容流容器。它可以成為樣式化用途（使用 class 或 id 屬性）、或是共享如 lang 同一個屬性的元素集合。它應該在沒有其他適合的語義元素（例如<article> 或 <nav> ）可用時才用。 ​ ​ <span> HTML <span> 元素是短語内容的通用   Inline Elements ，並没有任何特殊語義。可以使用...
閱讀完整內容

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

圖片
部落格轉移，給讀者更好的閱讀體驗， 本文網址 :   https://pse.is/3j2ys3 什麼是以太坊經典 ？ 什麼是以太坊經典 ？以太坊經典（ETC）是一個去中心化、基於區塊鏈的開源計算平台，也是一種加密貨幣。它允許開發人員構建和部署智能合約——自主、自動執行的代碼塊，根據預定義的條件觸發某些操作。 ETC 網絡是無需許可的，這意味著任何人都可以加入和執行交易，只要他們擁有兼容的加密錢包。在臭名昭著的 DAO 攻擊之後，由於以太坊社區內的意識形態和技術分裂，它於 2016 年成立。 概括 什麼是以太坊經典 ？以太坊經典 (ETC) 源於以太坊社區中的意識形態和道德裂痕，至今仍引發爭議。2016 年，對運行在以太坊 (ETH) 區塊鏈上的第三方應用程序進行了重大黑客攻擊，導致價值數百萬美元的以太幣或 ETH 被盜。作為回應，以太坊區塊鏈經歷了一次硬分叉，從本質上扭轉了官方分類賬中的黑客行為，並將被盜的 ETH 歸還給其原始所有者。 相比之下，這個分叉的另一個分支保持了包括黑客在內的官方賬本不變——旨在保留一個 100% 不可變的賬本。換句話說，由此產生的兩個區塊鏈只有一個方面不同：一個仍然包含黑客攻擊和被盜 ETH 的記錄，而另一個本質上倒轉時間，就好像黑客從未發生過一樣。編輯後的區塊鏈保留了以太坊 (ETH) 的綽號，而原始/未更改的區塊鏈被稱為以太坊經典 (ETC)。 以太坊經典的起源 區塊鏈經歷硬分叉並將自己分成不同的區塊鏈的原因有很多。有時分叉是技術升級的結果。其他分叉源於社區對擬議協議變更的深刻分歧，最終將項目及其支持者分裂為不可調和的派系。此類協議更改可能來自改進現有功能的前瞻性努力，也可能是對錯誤和黑客攻擊造成的損害的反應。後一個實例導致了以太坊分叉，從而導致了以太坊經典（ETC）區塊鏈的創建。 2016 年，以太坊區塊鏈（稱為The DAO）上的一個應用程序遭到黑客攻擊，導致大約 360 萬個以太幣 (ETH) 被盜——2016年價值約 5000 萬美元——隨後價值數十億美元。為了進一步說明這次黑客攻擊的嚴重性，當時流通的 ETH 大約為 7200 萬個，因此黑客竊取了現有所有 ETH 的 5% 左右。 為了從以太坊的賬本中清除黑客行為並將資金返還給其原始所有者，以太坊核心開發人員選擇實施硬分叉。新創建的賬本逆轉了黑...
閱讀完整內容