iT邦幫忙

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

技術 Day 7 CSS 基本認識

前言 前面HTML的網頁架構的地方已經建立好了,那當然就是開始要想辦法讓網頁看起來美美的啦~ 這時候使用CSS來統一定義每個HTML標籤的位置大小,讓網站的風格...

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

技術 開始製作HTML表單吧~(一)

昨天介紹完HTML表單常用的元件,今天我們就來時做一個吧~我找了一個申請表作為範例,一起來將此表格做成表單今天先來做表格的第一部分,光是第一部份就打了147行呢...

鐵人賽 自我挑戰組 DAY 15

技術 Day 15:偽元素與偽類

組件實作 : Demo 一、前言 在寫某些專案或者是練習,時不時會看到::before、::after這類元素的用法,在第一次接觸時,總是會感到困惑,不清...

鐵人賽 Software Development DAY 5

技術 [Day5] 不懂HTML 還想學會整人 ㄏㄚˋ😱

雖然本系列文的主題是用 LIFF 做 LINE 整人工具,乍看之下只會用到 LINE API (也就是JavaScript)但其實 JavaScript 是應用...

技術 【HTML】為何用<p>包<div>會出錯?

【前言】本系列為個人前端學習之路的學習筆記,在過往的學習過程中累積了很多筆記,如今想藉著IT邦幫忙這個平台做整理+再複習。本系列標題一律以【】標示該篇文章主要涉...

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

技術 小白網頁設計練成記-DAY6-延續前話HTML5 中的 b / strong,i / em 有什么区别?

上次我們有提到 &lt; b &gt; 和 &lt; strong &gt; 同樣都有將字體加粗的效果,同樣&lt; i &gt; 和 &lt; em &gt;...

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

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

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

鐵人賽 自我挑戰組 DAY 3

技術 Day 03 HTML<列表標籤>

列表標籤可以用來為頁面進行布局 主要分為無序列表、有序列表、自定義列表三大類 1.無序列表無序列表主要使用的標籤如下蘋果香蕉鳳梨水蜜桃哈密瓜無序列表 使用無序列...

鐵人賽 Modern Web DAY 20
跟著 OXXO 一起學 HTML 系列 第 53

技術 ( Day 20.2 ) HTML 輸入 <input>

&lt;input&gt; 輸入元素是 HTML 表單元件裡最重要也最特別的元素,&lt;input&gt; 可以根據類型 type 屬性的設定,轉換成不同的輸...

鐵人賽 自我挑戰組 DAY 20

技術 Day 20 Side Project : Password Generator 密碼生成器(上)

這篇沒有帥哥可以看,不過也是一個非常有趣的projecto( ̄▽ ̄)d 今天要做的是密碼生成器,根據使用者的需求去自動生成密碼,聽起來很厲害,另外考量到這篇的J...

技術 幫助自己上班的零件數量查詢器(5) - Js、Vue基本架構

Vue.js(/vjuː/,簡稱Vue)是一個用於建立使用者介面的開源MVVM前端JavaScript框架,也是一個建立單頁應用的Web應用框架。--維基百科...

鐵人賽 自我挑戰組 DAY 13

技術 Day 13:Vim 學習筆記

一、前言 其實,我也不知道自己怎麼會想加入這個主題,只是有點想要學習 Vim 的基本操作,順便紀錄一下學過的操作方法,現階段我也沒有想要背任何的指令或是快捷鍵...

鐵人賽 自我挑戰組 DAY 30

技術 Day 30:完賽心得(2022 自我挑戰)

一、前言 終於完成鐵人賽啦!可怕的不是每天的截稿期限,而是要在同一天寫兩篇「完賽心得」,而且內容還不能一樣,雖然我是有點想直接複製貼上,不過這樣子好像有點說不...

鐵人賽 Modern Web DAY 29

技術 Day 29:組件集大成

功能實作 : Demo 一、前言 今天的目標是將現有的組件組成一個 SPA 網頁,最終目標是先把網頁寫出來,至於優化和除錯的部分,就要等整個功能都實作出來...

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 background & border

前言 文字樣式設計變化之後那可以試試看更改背景還有框線設計 background color / image 背景顏色 / 圖片 Background-siz...

鐵人賽 自我挑戰組 DAY 16

技術 [Day 16] Upload: 以假亂真的上傳

我們常常在交作業、交報告、分享檔案的時候需要上傳的步驟,那你有想過做一個好看的上傳動畫嗎?今天我們就來實作Day #15,不會實際上傳檔案的好看動畫 Uploa...

鐵人賽 Modern Web DAY 15
淺談web 系列 第 15

技術 鐵人賽DAY15-HTML(三)

一、HTML表格在表格中「行」用&lt;tr&gt;元素來定義,「該列的標題」用&lt;th&gt;元素來定義,而「表格內的資料」用&lt;td&gt;元素來定...

鐵人賽 自我挑戰組 DAY 7

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

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

鐵人賽 影片教學 DAY 2

技術 Day02【從麻瓜變成前端魔法師】HTML 簡介

HTML(架構):好比房子的鋼筋、水泥、磚頭CSS(樣式):就像房子的裝潢、油漆JavaScript(動態效果):霍爾的移動城堡,跑起來~~ 如何快速生...

鐵人賽 影片教學 DAY 11

技術 Day11 HTML結構

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

技術 學會網頁製作除了javascript還要會....HTML1

從基本的 HTML、CSS 網頁設計開始入門,先學習靜態版面設計技巧,再帶入動態的 JavaScript 程式撰寫。所以我決定先去了解HTML與CSS,首先來學...

鐵人賽 自我挑戰組 DAY 21

技術 Day 21:小作品展示

組件實作 : Demo、Demo2 一、前言 昨天學習 Sass 的最主要目的,就是為了要看懂自己以前寫的東西,我把它統稱為小作品,當時的這些小作品我是照...

鐵人賽 自我挑戰組 DAY 21

技術 Day 21 Side Project : Password Generator 密碼生成器(下)

接續Day 20,繼續來講解沒完成的JS部分 專案回顧 畫面和功能拆解 畫面中的密碼生成器裡內有標題 &gt; 結果顯示欄 +複製按鈕 &gt; 需求設定...

鐵人賽 自我挑戰組 DAY 29

技術 [Day 29] Checklist: 打個勾勾完賽吧

很快地,今天來到了第29天,我們來實作Day #27 Checklist CodePen: https://codepen.io/stevetanus/pen/...

技術 學習javascript前...HTML3

學習html就是在學習如何使用標籤,所以我現在要來了解各個標籤的意思以及如何使用。1.&lt; title &gt;通常放在 &lt; head &gt; 內部...

鐵人賽 自我挑戰組 DAY 27

技術 Day27 網頁前端-刻意練習(RWD#3)

Day27 六角 RWD#3 簡單小語 圖片的版型看到就想要練習,又看到這種斜一邊然後小尺寸變正的圖片縮放樣式,模糊效果及觸及事件,看到就忍不這想趕快學習並實...

鐵人賽 Modern Web DAY 27
跟著 OXXO 一起學 HTML 系列 第 69

技術 ( Day 27.1 ) HTML 播放影片 <video>

&lt;video&gt; 播放影片元素可以在 HTML 裡讀取並播放指定格式的影片,甚至可以搭配 &lt;source&gt; 和 &lt;track&gt;...

鐵人賽 Modern Web DAY 2

技術 Day2: HTML之區塊元素與行內元素

區塊元素1.almost佔滿整個版面2.區塊元素會另起一行來進行呈現 行內元素1.比較常用在段落裡面2.沒辦法設定寬高 以上練習來自六角學院課程練習:disp...

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

技術 手把手從VScode上手

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

鐵人賽 Modern Web DAY 6

技術 #05 HTML 基礎語法

↓ 今日學習重點 ↓ 了解 HTML 的語法 上一篇文章,我們有建立了一份 HTML 檔案, 那麼這些語法到底是什麼意思呢?讓我們往下看。 HTML...