[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僅佔用必要的寬度。

31.png​

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


➤ - div & span

<div>
HTML <div> 元素（或是 HTML 文件 Block Elements）是本質上不特別代表任何東西的通用内容流容器。它可以成為樣式化用途（使用 class 或 id 屬性）、或是共享如 lang 同一個屬性的元素集合。它應該在沒有其他適合的語義元素（例如<article> 或 <nav> ）可用時才用。

33.png​

32.png​


<span>
HTML <span> 元素是短語内容的通用 Inline Elements，並没有任何特殊語義。可以使用它来编组元素以達到某種樣式意圖（通過使用 class 或者 id 属性），或者這些元素有著共同的属性，比如 lang。應該在没有其他合適的語義元素時才使用它。<span> 与 <div> 元素很相似，但 <div> 是一個 Block Elements 而 <span> 則是 Inline Elements .

36.png​

34.png​

35.png​

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


➤ - hr & br

<hr>
HTML 的 <hr> 元素代表在段落層級的焦點轉換（如故事中的場景轉換或某個小節裡的主題移轉）。在之前的 HTML 版本，它代表著一條水平標線。在視覺瀏覽器裡，它現在可能還是以水平標線的型式呈現；但它已經被重新定義為一個語義上的用詞，而不是呈現上的。

36.png​

37.png​


<br>
HTML <br> 元素會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。

40.png​

39.png​

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


➤ - sup & sub

<sup>
HTML <sup> 元素定義了一個文本區域，出於排版的原因，與主要的文本相比，應該展示得更高並且更小。 簡單來說就是上標。

41.png​

42.png​


<sub>

HTML 子文稿元素（<sub>）指定了內聯文字，僅出於排版原因應顯示為子文稿子腳本通常使用較小的文本以較低的基線呈現。簡單來說就是下標。

43.png​

44.png​

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


➤ - em & strong

<em>
HTML 著重元素 (<em>) 標記出需要用戶著重閱讀的內容， <em> 元素是可以嵌套的，嵌套層次越深，則其包含的內容被認定為越需要著重閱讀。 簡單來說就是斜體。

49.png​

48.png​


<strong>
Strong 元素 (<strong>)表示文本十分重要，一般用粗体显示。簡單來說就是粗體。

50.png​

51.png​

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


➤ HTML 符號實體代碼的清晰快速參考 (很多，上網自己google就可以了)

Entity Code - A Clear and Quick Reference to HTML Entities Codes

HTML Arrow Symbols, Entities and Codes — Toptal Designers

HTML Math Entities (wikimass.com)

46.png​

45.png​

47.png​

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


➤ - header & footer

➤ - main & nav

2020100823422993.jpg​

Header and footer elements

“頁眉”和“頁腳”屬於/指代它們所包含的元素，即它們的父元素。

如圖，header是整個頁面的header，footer也是，絕對正確。在這種設置中，標題通常可以包含帶有網站導航菜單的“導航”元素。這是我們將在本課程中為我們的頁面採用的那種安排。

讓我們考慮一個包含多篇文章的頁面（圖中只顯示了一篇），例如博客中的帖子頁面。每篇文章都可以有自己的頁眉和頁腳。頁眉可以包含文章的標題和作者，頁腳可以包含與文章相關的鏈接、作者的聯繫信息或其他內容。在這種情況下，標題將是父文章元素的標題，而不是整個頁面的標題。

因此，多個頁眉和頁腳元素可以共存於一個頁面中，每個元素都與其父元素相關。對於所有元素，只有在與您的頁面真正相關時才應該使用多個頁眉和頁腳。越少越好，簡單越好。你寫的每一個代碼，日後都可能需要維護或編輯，越簡單，越容易維護。


Article

article 元素的語義與這樣一個事實有關，即文章旨在作為獨立的“可重用”元素。

“article 元素代表文檔、頁面、應用程序或站點中的自包含組合，原則上，可獨立分發或可重用，例如在聯合中。這可以是論壇帖子、雜誌或報紙文章、博客條目、用戶提交的評論、交互式小部件或小工具，或任何其他獨立的內容項目。”

就本課程而言，我們並不真正需要這個元素。


Section

“章節的例子可以是章節、標籤對話框中的各種標籤頁面，或者論文的編號章節。一個網站的主頁可以分成幾個部分，分別是介紹、新聞和聯繫信息。”

“ section元素不是通用容器元素。當一個元素僅用於樣式目的或方便腳本編寫時，鼓勵作者使用 div 元素代替。一般規則是，只有在文檔大綱中明確列出元素的內容時，section 元素才是合適的。”

出於本課程的目的，我們不需要部分元素。


Aside

side 元素標識與頁面主要內容“切線相關”的內容。在印刷品中，例如在期刊或書籍中，這通常可以由側邊框或側邊欄表示。我們來看看官方的定義：

“side 元素代表頁面的一部分，該部分由與side 元素周圍的內容相切相關的內容組成，並且可以被視為與該內容分開。這些部分通常在印刷版式中表示為側邊欄。該元素可用於排版效果，如拉引語或側邊欄、廣告、導航元素組以及其他被認為與頁面主要內容分開的內容。”

通常將網頁或網站中的橫向列或框標記為旁白是合適的。典型的旁邊可能是這些頁面左側的導航側邊欄。我們將在本章的佈局部分討論這些問題。


Nav

導航元素通常包含網站導航鏈接。這些鏈接通常以無序列表 (ul) 的形式構建。

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


➤ 快速縮寫參考資料

Cheat Sheet (emmet.io)

舉個例子:

nav>ul>li
ul>li*5
ul>li.item$@-*5

image​

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

痞客邦 : 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分鐘)，按五次左鍵，可以贊助我的文章且完全不會花到錢！若願意成為讚賞公民那是十分感激。
支持創作，正向交流:)

位置： 台灣

留言

張貼留言

這個網誌中的熱門文章

【線上教學懶人包】台灣紓困4.0申請，勞動部：7月5日前登錄都有效

圖片
  本文網址 :  https://pse.is/3k2s2z 詳細步驟教學詳情請見頁尾 行政院3日通過規模2600億新台幣的紓困4.0，共分三波申請，個人紓困部分新增330萬人，預計共有730萬人受惠。 首波的個人紓困現金已於4日入帳，發放給去年申請過且今年符合資格的民眾，而去年未申請的民眾，今(7)日則開放第二波個人及事業紓困申請及貸款，第三波孩童家庭防疫補貼、勞工紓困貸款將於15日開始申請。 全台第三級警戒再延長，今日是自營工作者及無一定雇主勞工申請生活補貼的首日，導致勞動部網站大塞車，勞動部在臉書喊話，「讓需要的先，晚幾天登錄，網路不塞車，權益不受損」。 據統計，今日至早上6時，網站湧入200萬人次，比原先預計的85萬名申請者多出許多，勞動部表示，如果本身沒有急迫需求，建議可以過幾天再登錄，讓有需要勞工朋友可以先行使用，只要在7月5日前成功上傳，領取補貼的權益都一樣，不會因為晚一點傳帳號登錄而影響! 紓困4.0個人補貼部分，針對無一定雇主勞工，無勞保及非農漁民身分者，補助1至3萬元；藝文工作者、遊覽車、計程車、租賃車司機、導遊、領隊等，每人每月發放1萬元，發放3個月。 事業紓困方面，凡於今年5月至7月營業額減少達50％以上事業，均可申請補貼，依員工數每位4萬元計算，給予一次性營運補貼；另因第三級警戒升級，中央疫情指揮中心命令停業的事業，且給薪未達基本工資者，4萬元補助分成兩部分，1萬元補助事業體或雇主，補貼其營業損失，另外3萬元直接給予受雇員工，再加上就業安定基金加碼1萬元，總計共有4萬元透過雇主轉發直接給勞工。 6月15日起，特別針對全國250萬名國小以下孩童，包含國小學生及學前嬰幼兒，以及國、高中及五專前三年身心障礙學生，每位孩童發放1萬元的「孩童家庭防疫補貼」。 疫情期間為避免臨櫃群聚，相關紓困補助及補貼將陸續撥款匯入民眾帳戶，中央呼籲民眾多加利用線上申請服務，一起來看看線上申請交戰影片吧！ 自營作者或無一定顧主之勞工生活補貼線上登錄說明影片  :  https://www.youtube.com/watch?v=jmH_Q7w-4I8&t=130s 詳情請見 勞工保險局官網 及 「疫情紓困」專區 。 本文網址 :  https://pse.is/3k2s2z ​ ​ ​ ​ ​ ​ 本文網址 :  https://pse.is/3k2s2z
閱讀完整內容

2021年一夜致富，市值 87 億美元，什麼是恆星幣（XLM）

圖片
  部落格轉移，給讀者更好的閱讀體驗，本文網址 :  https://janstockcoin.com/blog/ ​ 什麼是恆星？ Stellar加密貨幣是指 Stellar Development Foundation 開發的數字或虛擬貨幣。該組織的貨幣稱為流明，在各種加密貨幣交易所以 XLM 符號進行交易。 Lumens 可由 Stellar 網絡上的交易者使用，Stellar 網絡是一個基於區塊鏈的分佈式賬本網絡，可連接銀行、支付系統和人員，以促進低成本、跨資產的價值轉移，包括支付。 Stellar 試圖通過創建一個分佈式網絡來重新構想貨幣和資產轉移市場，該網絡被描述為從支付軌道到交易所的一切。  因此，雖然回答了“什麼是 Stellar？”這個問題。可能會根據你問的人而改變，這不是技術的錯。正如在 2014 年推出時所做的那樣，Stellar 允許今天的用戶以傳統上屬於支付提供商領域的方式發送資金和資產。 不同之處在於 Stellar 通過激勵分佈式計算機網絡運行通用軟件來實現這些服務。 這個想法是任何使用由 Stellar 提供支持的服務的人都可以將所有東西從傳統貨幣轉移到代表新資產和現有資產的代幣。然後，這些資產可以使用其加密貨幣 lumens (XLM) 在用戶之間（跨境）進行交易，減少摩擦。 通過這種方式，與XRP萊傑（和它的恆星股份相似之處cryptocurrency，XRP），這也意味著提供付款服務供應商和金融機構的協議。 但 Stellar 也試圖將自己定位為一種去中心化的交易所，因為它的分類賬擁有一個有效的內置訂單簿，可以跟踪 Stellar 資產的所有權。  開發人員越來越多地尋求將Stellar 打造成一個以自己的協議發行的資產的市場，其功能允許用戶在結算交易時管理買賣訂單並設置首選資產。 了解恆星幣 加密貨幣是為在稱為區塊鏈的去中心化網絡上交易而開發的數字或虛擬貨幣。這樣做可以確保它們不會像普通貨幣一樣被偽造。這也防止了他們被雙重花費。 與法定貨幣不同，加密貨幣不是由中央銀行發行的，這意味著政府不會干預其交易活動。隨著 2009 年創建的比特幣（包括 lumen）的成功，各種加密貨幣應運而生。 如上所述，流明是 Stellar 的加密貨幣。大約有 225 億枚硬幣在流通，最大供應量為 500 億枚。3 Stellar Foundati
閱讀完整內容

2021年躺著賺錢，比特幣之外的16個最重要的加密貨幣

圖片
本系列文章網址 : 所有加密貨幣分析介紹文章彙整 除比特幣外的 16 種最重要的加密貨幣 比特幣不僅是一個潮流引領者，引領了一波建立在去中心化點對點網絡上的加密貨幣，而且已經成為加密貨幣的事實上的標準，激發了越來越多的追隨者和衍生品。 以太坊等其他虛擬貨幣正被用於為那些無法使用傳統金融產品的人創建去中心化的金融系統。 一些山寨幣獲得認可，因為它們具有比比特幣更新的功能，例如每秒處理更多交易的能力或使用不同的共識算法，如股權證明。 什麼是加密貨幣？可看我另一篇說明講解 (  2021年最熱門的比特幣 Bitcoin，帶你了解加密貨幣的世界   ) 本系列文章網址 : 所有加密貨幣分析介紹文章彙整 1. 以太坊（ETH） $2,541.9 美元 (更新2021.5.29 14:35) ​ 我們名單上的第一個比特幣替代品，以太坊是一個去中心化的軟件平台，它可以構建和運行智能合約和去中心化應用程序（dapps），而無需任何停機、欺詐、控製或第三方乾擾。以太坊背後的目標是創建一套去中心化的金融產品，世界上任何人都可以自由訪問，無論國籍、種族或信仰如何。這一方面使得對某些國家的人的影響更加引人注目，因為那些沒有國家基礎設施和國家身份證明的人可以獲得銀行賬戶、貸款、保險或各種其他金融產品。  以太坊上的應用程序在以太幣上運行，以太幣是其特定於平台的加密令牌。以太就像在以太坊平台上移動的工具，主要是希望在以太坊內開發和運行應用程序的開發人員，或者現在，希望使用以太購買其他數字貨幣的投資者。以太幣於 2015 年推出，目前是市值僅次於比特幣的第二大數字貨幣，儘管它遠遠落後於占主導地位的加密貨幣。截至 2021 年 1 月，以太幣的市值約為比特幣規模的 19%。 2014 年，以太坊推出了以太幣預售，反響熱烈；這有助於迎來首次代幣發行 (ICO) 時代。根據以太坊的說法，它可以被用來“編碼，分散，保護和交易幾乎任何東西。” 繼 2016 年對去中心化自治組織（DAO）的攻擊之後，以太坊分裂為以太坊（ETH）和以太坊經典（ETC）。截至 2021 年 1 月，以太坊 (ETH) 的市值為 1,383 億美元，每個代幣的價值為 1,218.59 美元。 2021 年，以太坊計劃將其共識算法從工作量證明改為股權證明。此舉將使以太坊的網絡能夠以更少的能量和更高的交易速度自行運行。股權證明允許網
閱讀完整內容