iT邦幫忙

html相關文章
共有 893 則文章
鐵人賽 自我挑戰組 DAY 1

技術 Day 01:前言(2022 自我挑戰)

嗨 大家好!我是東尼先生(Tony)。一個有一點點強迫症外加三分鐘熱度的前端工程師。 一、前言 第一次參加鐵人賽,我的心情是既期待又怕受傷害。想參賽的主...

鐵人賽 Modern Web DAY 1

技術 Day 01:前言(2022 主題競賽)

一、前言 早在幾年前,我一直有著經營自己 Blog 的小小願望,但是礙於不知道要寫些什麼主題,這個願望就一直被我藏在心中遲遲未去執行。而在無意間,我得知鐵人賽...

鐵人賽 影片教學 DAY 15

技術 Day15 HTML影像

前言 今天正式進入影像連結,哇~又是連結就是我們昨天說的,但是我們今天其實是要介紹在網頁中插入圖片,而連結就是網頁中一個很重要一個功能沒有學好也就不用寫網頁了~...

鐵人賽 自我挑戰組 DAY 9

技術 Day 9 Side Project : Form Wave 表單波浪字體 (下)

這篇延續上篇的波浪字體繼續進行講解 昨天說到javascript的部分可以從兩個部份來講解 把原本在<label>中的每個字母分開獨立包在<...

鐵人賽 Modern Web DAY 2
手把手web初學者 系列 第 2

技術 手把手從VScode上手

上一篇介紹到安裝VScode今天這一篇當然就是我們要開始使用它了~ 這邊先來介紹基本網頁三要素: •HTML•CSS •JavaScript 做網頁時可以想像你...

鐵人賽 Modern Web DAY 1
手把手web初學者 系列 第 1

技術 網頁的環境

耶~今天是我鐵人開賽的第一天,我將在這30天裡從頭好好學網頁那開頭就來介紹網頁的環境吧!不知道網頁的初學者們是不是跟我一樣從HTML開始學起的呢? HTML是什...

鐵人賽 自我挑戰組 DAY 7

技術 [Day 7] Profile: 來製作個簡單樸實的個人檔案吧!

挑戰開始快一周了,今天我們來挑戰Day #6 Profile 就來製作一個Thibe的鐵人檔案吧!雷茲狗! 完整作品CodePen: https://codep...

鐵人賽 自我挑戰組 DAY 14
小白網頁設計練成記 系列 第 14

技術 小白網頁設計練成記-DAY14-淺談HTML-核取方塊checkbox

金天我們聊聊check box這個input裡的屬性,當我們有多選的項目,如興趣/地區/清單等等,都可以用checkbox來實現。 表單核取方塊 checkbo...

鐵人賽 自我挑戰組 DAY 8

技術 Day 8 Side Project : Form Wave 表單波浪字體 (上)

今天來做表單的波浪效果,如圖中所示,當input框取得焦點時,表單的label就會有高低起伏的效果,這篇有很多重要的JS觀念,像是陣列的處理方法,所以打算分成...

鐵人賽 自我挑戰組 DAY 13
小白網頁設計練成記 系列 第 13

技術 小白網頁設計練成記-DAY13-淺談HTML結構標籤

在所有的HTML中只有< span >< div >沒有語意,它們主要的功用就是包裹其他元素,進行排版或是介面的修飾 div屬於區塊元素...

鐵人賽 自我挑戰組 DAY 7

技術 Day 7 Side Project: Split Landing Page 分離一頁式頁面

不知不覺時間來到了第七天啦! 今天要來做的是 Landing Page (又叫「一頁式網站」或「著陸頁」),那什麼是Landing Page呢?「 單一特定目...

鐵人賽 自我挑戰組 DAY 6

技術 [Day 6] Statistic: 來呈現文章瀏覽數逐漸下滑的趨勢(>_<)

Statistic 今天我們來實作Day #5 搭配上筆者Thibe這一週的文章瀏覽和預期數據,看來這下滑趨勢達到顯著呢(p &lt; 0.05)!此次作品建議...

鐵人賽 影片教學 DAY 13

技術 Day13 HTML 清單

前言 今天是課程的第13天,昨天我們在文字上面動手腳,而今天我們來介紹清單在網頁的文章或在寫作的時候,難免會有第一點第二點的重點項目或是你的代辦清單我們都會使用...

鐵人賽 自我挑戰組 DAY 12
小白網頁設計練成記 系列 第 12

技術 小白網頁設計練成記-DAY12-淺談HTML表格

在HTML裡,表格由 &lt; table &gt; 標籤来作為容器,裡面由&lt; tr &gt;或是&lt; td &gt;來組成。數據可以包含文本、圖片、...

鐵人賽 自我挑戰組 DAY 5

技術 [Day 5] Loadinggg: 這30天Loading好重(?

Loading 滴..滴滴..滴滴滴,讀取完成!今天我們來實作Day #4我們在讀取網頁期間,常會看到不同的讀取畫面,雖然讀取有可能讓人厭煩,但看到漂亮的loa...

鐵人賽 影片教學 DAY 12

技術 Day12 HTML 文字

前言 今天是課程的第12天終於我們可以在文字上面動點手腳了,從筆記語法我們學習了用符號來表達粗體以及斜體,那我們再進入到網頁的HTML語法,我們必須以語法的方式...

鐵人賽 自我挑戰組 DAY 11
小白網頁設計練成記 系列 第 11

技術 小白網頁設計練成記-DAY11-淺談form表單2

延續前章節,我們繼續討論&lt; form &gt;表單的子標籤 &lt; textarea &gt;多行輸入 跟 &lt; input &gt; 標籤不同的是...

鐵人賽 自我挑戰組 DAY 4

技術 [Day 4] The Pyramide: 金字塔日落陰影動畫

The Pyramide 今天我們來挑戰Day #3 金字塔,不要問我為什麼多了個e,我們要尊重作者的命名~金字塔這個作品是一個連貫的動畫,在天空、太陽、金字塔...

鐵人賽 影片教學 DAY 11

技術 Day11 HTML結構

前言 今天正式進旺網頁前端的第一巨頭HTML那我們在寫HTML也是要準備我們Vscode的插件先下載完我們從明天開始使用,那廢話不多說我們先來介紹~ 插件安裝...

鐵人賽 Modern Web DAY 7

技術 建構HTML的按鈕容器

雖然在JSXGraph中可以輕易建立button、chebox、label…等元件,但是這些元件會在畫板內,因此排版並不方便,也會干擾幾何元素的呈現。今天我們將...

鐵人賽 自我挑戰組 DAY 3

技術 [Day 3] Menu Icon: 漢堡包 好好ㄘ

前言 在每天的實作中,都會遇到不熟、不知道如何使用語法完成的難題,可以點擊CSS 100作者本身的CodePen參考(參考下圖紅色箭頭),像是背景色、動畫效果之...

鐵人賽 自我挑戰組 DAY 6

技術 Day 6 Side Project : Scroll Animation 滾動動畫

今天要來做的是滾動動畫,利用滑鼠滾輪來控制BOX從左右兩邊交叉的出現,倒回去也一樣可以XD! 那我們就直接開始吧 運用知識點羅列 CSS 知識點 使...

鐵人賽 自我挑戰組 DAY 5

技術 Day 5 Side Project : Blurry Loading 模糊加載

今天要來做的是圖片模糊加載,圖片一開始是很模糊的,隨著加載率從0%~100%的過程中,會越來越清楚,最後進入焦點,而加載文字的部分則會慢慢淡出 事前準備 1....

鐵人賽 自我挑戰組 DAY 10
小白網頁設計練成記 系列 第 10

技術 小白網頁設計練成記-DAY10-淺談HTML-<input>

HTML 表單 (form) 是用來讓使用者輸入資料,這些資料可以用來和使用者互動,例如表單內容填完後可以傳回遠端伺服器 (web server),像常見的連絡...

鐵人賽 自我挑戰組 DAY 4

技術 Day 4 Side Project : Rotating Navigation 旋轉的導覽列

今天是中秋節,應景一下就做了一個很陽春的導覽列,本篇的重點會放在CSS 2D Transform的部分中秋圖片參考自iStock 事前準備 一張你喜歡的圖...

鐵人賽 自我挑戰組 DAY 9
小白網頁設計練成記 系列 第 9

技術 小白網頁設計練成記-DAY9-時間<time>與縮寫<abbr>的用法

今天我們來聊聊這兩個標籤的使用場景 時間&lt; time &gt;在段落裡面,如果有與日期相關的語意,就可以用&lt; time &gt; 來表達,我們會使用...

鐵人賽 自我挑戰組 DAY 8
小白網頁設計練成記 系列 第 8

技術 小白網頁設計練成記-DAY8-淺談META TAG

HTML裡極為重要的一個標籤 META TAG 不可忽視! 但它不是人看的。 META 標籤是一個專門提供給搜尋引擎透過crawlers-spiders爬行蜘蛛...

鐵人賽 Modern Web DAY 7
【每天5分鐘】學前端 系列 第 7

技術 Day07【每天5分鐘】學前端 | HTML 表單 form

表單 Form 昨天介紹的 表格 ,最外層是用 &lt;table&gt; 標籤包起來;表單 的組成也有點像,它則是用 &lt;form&gt; 標籤包起來。...

鐵人賽 自我挑戰組 DAY 2

技術 [Day 2] 30 Days Iron Man: 參拾天鐵人

100 Days CSS Challenge 今天在了解前置設定之後,咱們來一起破關吧~就從Day #1開始!以下為重點介紹,完整程式碼請參考作品連結 1....

鐵人賽 自我挑戰組 DAY 7
小白網頁設計練成記 系列 第 7

技術 小白網頁設計練成記-DAY7-表格怎麼設置?

我們在HTML的表格都是由 &lt; table &gt; 標籤來定義。每個表格都有若干行(由 &lt; tr &gt; 標籤定義),然後每行被分割為若干單元格...