iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1
自我挑戰組

網頁服務開發之路系列 第 2

HTML & CSS

HTML & CSS

當初學習 HTML 與 CSS,目的是為了給 javascript 一個交代,所以只知道基本的用法。以下為當初蒐集的資源。
大多數的資源都有照著做的流程,對於要接觸 Web是很好的開始。
後來的機會裡面,聽到一個不錯的演講,主題是 HTML Element Prototype,講解了 HTML 裡面的資訊架構與通訊協定,這個坑會後續再補。
關於 CSS 的部分,先列出以下主題,對於 CSS 的實作經驗不多,也是一個需要補的坑。

HyperText Markup Language

學習資源

常用的 Tag

簡單分類tag 的使用時機,在類似的使用時機,會有相似的attr,這些 tag 又可稱為 DOM(document object model)

  1. 架構說明: <head>, <body>...
  2. 排版區: header, nav, h1-h6, footer, section, aside, div, hr, p, br
  3. 多媒體(有其他連結的): a, img
  4. 文字效果:, ol, ul, b, strong, em, i, u, span
  5. 表單(form)通常都有賦於值的意義: input, select, textarea

Cascading Style Sheets

學習資源

樣版

基本介紹

CSS(Cascading Style Sheets,層疊樣式表),用來描述HTML、XML等文件外觀的樣式表,告訴瀏覽器文件中的元素該如何呈現出來。

  1. 籤入在HTML中時用<style>標籤
  2. 透過選擇器(selector)取得HTML element,並透過賦予屬性及值來改變樣式。(屬性: 屬性值;)
  3. 瀏覽器解析HTML成DOM(Document Object Model) Tree並同時解析CSS並套用到對應的元素上
  • 錯誤的語法或無效的設定會直接忽略

Selector

CSS box model

切版

CSS Grid

Sass (Syntactically Awesome StyleSheets)


上一篇
前言
下一篇
學習工具
系列文
網頁服務開發之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言