iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
0
Modern Web

ASP.NET MVC5架構說明與Q&A諮詢系統實作系列 第 14

[DAY 14] View(動態網頁基本設計:HTML、CSS、JS)

View 檔案中,通常使用動態網頁設計模式(HTML、CSS、JS)構成,因次我們來了解一下什麼是動態網頁基本架構!(゚∀゚)
網頁能將文本、圖片、音頻、視頻等多元素結合起來,通過CSS,能呈現這些元素預定的外觀;通過JavaScrip腳本,能呈現預定的動作


HTML

  • HyperText Markup Language(超文本標記語言)
  • 一種用於建立網頁的標準語言,組織網頁內容,定義標題、段落、表格
  • tag 的方式告訴瀏覽器資訊該如何呈現
    常見的 tag 有:< h1 >, < h2 >, < p >, < image >, < button > 等等
  • HTML element 和 HTML tag,基本上語意是差不多、可互換的,因為它們只的都是相同的東西(就是上面的例子)
  • HTML Attribute:用來敘述 element 的相關性質
    比較常見的是 Global Attributes,例如:
    class:為 element 指定一個或多個 classname(公司名稱、部門名稱)
    id:為 element 指定唯一一個 id 名稱(員工編號)
    style:element 的一個或多個 CSS 樣式(文字顏色、大小)

https://ithelp.ithome.com.tw/upload/images/20200927/20128969xwz3GOkg65.png

CSS

  • Cascading Style Sheets(階層式樣式表),設置 HTML 樣式的語言,包括針對不同設備和屏幕尺寸的顯示設計,佈局和字體
  • 樣式定義通常保存在外部.css文件中,或是也可以寫在原網頁同個檔案中
  • 以 Property 定義樣式,例如:color(指定文字顏色)、font-size(指定文字大小)、font-family(指定字體)
  • 若單獨寫出來,CSS 內容會包含在 < style > 和 < style > 之間

https://ithelp.ithome.com.tw/upload/images/20200927/20128969bROdJqdnSj.png

JS

  • JavaScript,一種腳本語言,動態的更新內容、控制多媒體、動畫等等,多用於讓使用者與網頁進行互動
  • JS 的內容,會包含在 < script > 和< /script >之間
  • 分號「;」分隔 JS 語句,在每個執行碼末尾添加分號「;」
  • 通常會以 keyword 開頭,例如:
    if ... else:根據條件要執行的語句塊
    for:只要條件為真,就會執行的語句塊
    var:聲明一個變數

https://ithelp.ithome.com.tw/upload/images/20200927/20128969rI4AeQZfdI.jpg


上一篇
[DAY 13] Lambda 是什麼?
下一篇
[DAY 15] View - _Layout / _ViewStart
系列文
ASP.NET MVC5架構說明與Q&A諮詢系統實作30

尚未有邦友留言

立即登入留言