網頁設計小知識:HTML是什麼?
文章推薦指數: 80 %
HTML是一種標記語言,而不是程式語言。
它主要的作用在於告訴瀏覽器「網頁應該要有哪些元素」,元素可以是很簡單的純文字,也可以複雜到有許多的影音、 ...
KNOWLEDGE網頁設計新知
2019-06-13
網頁設計小知識:HTML是什麼?
HTML是一種標記語言,而不是程式語言。
它主要的作用在於告訴瀏覽器「網頁應該要有哪些元素」,元素可以是很簡單的純文字,也可以複雜到有許多的影音、動態效果以及API..等。
既然HTML是由「元素」組成,那「元素」有哪些呢?
元素(elements)=標籤(tags)+內容(content)
我們可以利用標籤控制內容呈現的樣子,如:字體大小、粗體斜體、顏色、置入圖片影片…等等。
內容通常為元素內容中的文字。
元素組成關係,請見如下圖
當然元素還可以有屬性(Attribute)
利用屬性,我們可以設定這個元素的色彩、對齊方式…等等,而上圖的屬性則是將「內容」以「粗體」的形式呈現。
要注意的是,HTML是由「巢狀元素(nestelement)」構成的。
每個元素都有自己的起始以及結束標籤,並一層層包覆。
如果起始以及結束標籤錯置,瀏覽器就沒辦法正確判斷我們想呈現的樣式。
在HTML5這個版本,特別強化了文件結構。
只要正確利用這些標籤,就能輕易分類內容、選單、刊頭、刊尾...等元素,電腦就能正確解釋並呈現HTML中的內容。
除此之外,搜尋引擎就能快速找到網頁的標籤,進而提升搜尋引擎的精確度。
因此,結構強化對SEO優化有十分重要的影響力。
結論
目前為止我們已對HTML有初步的認識,但還是要經過多次的實作練習,才能寫出我們理想中的網頁哦~
你的APP開發適合原生型、混合型還是Web型?
網頁前端設計三大元素:HTML、CSS、JavaScript
其它文章
網頁設計趨勢:2020年十大設計重點
網頁設計趨勢:GoogleChrome未來將把載入速度較慢網站進行標記
網頁設計趨勢:Apple隱私權政策更新-三大原則保障使用者
網頁設計趨勢:GoogleChrome瀏覽器以AI幫助視障用戶看網頁內容
網頁設計趨勢:Instagram網頁版未來也可發文了!
網頁設計趨勢:Pantone發表2020年年度色彩
網頁設計趨勢:Chrome79將逐步封鎖https網頁中未SSL加密之內容
網頁設計決勝點:資訊圖表
網頁設計小知識:SEO優化最容易誤解的四大觀念
網頁設計趨勢:Android10正式推出!
網頁設計趨勢:Wikimedia加入W3C協助制定網頁標準
網頁設計趨勢:iPad也有自己的作業系統了!
網頁設計趨勢:Google搜尋引擎7月30日起預設封鎖Flash
網頁設計行銷:提升成交率的秘訣-Google再行銷廣告
網頁設計小知識:API設計和應用程式設計有什麼不同?
網頁設計小知識:什麼是API?
網頁設計趨勢:Google搜尋引擎小改版—網站圖示
網頁設計行銷策略:SEO與PPC的操作
網頁前端設計:透過JavaScript與jQuery認識Angular
網頁設計與商業思維3:從使用者體驗(UX)設計看見客戶體驗(CX)的價值
網頁設計與商業思維2:UX設計與專案管理的差異
網頁設計與商業思維1:從網頁設計了解產品開發流程
你的APP開發適合原生型、混合型還是Web型?
網頁前端設計三大元素:HTML、CSS、JavaScript
網頁設計行銷:2019在地商家業績提升的關鍵
網頁設計SEO:為什麼要裝SSL憑證呢?
網頁設計:圖片處理技巧
網頁設計SEO:為什麼要做網站,經營社群不好嗎?
網站行銷:增加訂單不二法則-有效蒐集目標客戶之Email吧!
網頁設計小知識:淺談SEO的核心價值
網頁設計趨勢:2019年Google演算法情報三大重點一次搞懂!
網頁設計:提高網路行銷效益的必備技巧-CTA(CallToAction)
網頁設計小知識:快檢查吧!不可或缺的首頁必備內容元素
網頁設計工具-GoogleFonts介紹及應用
網頁設計字型篇:襯線體與無襯線體之應用
網頁設計小知識:什麼是UIUX設計?
網頁設計:2019年最強LandingPage教戰手冊(下篇)
網頁設計:2019年最強LandingPage教戰手冊(上篇)
網頁設計小知識:十大UX設計容易犯的錯誤
網頁設計字型篇:網頁字型要如何選擇?
網頁設計:網格(GridLayout)的基本觀念
網頁設計小知識:什麼是Off-SiteSEO(站外SEO)?
2019年版本!什麼是On-PageSEO?
深入淺出!2019年網頁設計SEO優化指南4
深入淺出!2019年網頁設計SEO優化指南3
深入淺出!2019年網頁設計SEO優化指南2
深入淺出!2019年網頁設計SEO優化指南1
網頁設計趨勢:什麼是GDPR?
少即是多!極簡主義的介紹及網頁設計應用(下)
少即是多!極簡主義的介紹及網頁設計應用(上)
網頁設計趨勢:色彩權威Pantone發表2019年年度色彩LivingCoral
網頁設計小知識:什麼是RWD響應式網頁設計?
網頁設計小知識:網頁色彩要如何選擇?
網頁設計小知識:SEO優化要怎麼做?
RWD網頁設計開發-W3.CSS介紹
如何選擇適合的網頁設計公司?
關注2019年7種尖端網頁設計趨勢
文章分類標籤
關鍵字排名
Google搜尋引擎
SEO
台北網頁設計公司
網頁設計公司
網頁設計
2020網頁設計趨勢
GoogleChrome
Instagram
搜尋引擎
網頁色彩學
彩通
網頁資訊圖表
UX設計
Angular
jQuery
SEO優化
前端設計
JavaScript
iPadOS
網頁設計趨勢
色彩心理學
iOS
Andoid
Web型
混合型
原生型
APP開發
CSS
HTML
網頁結構
產品開發
使用者體驗
客戶體驗
網頁CX設計
使用者體驗設計
GoogleFonts
UI設計
網頁資訊安全
SSL憑證
搜尋引擎優化
On-PageSEO
網格
網站著陸頁
LandingPage
GoogleFont
字型設計
極簡主義
GDPR
網站優化
響應式網頁設計
嚮應式網頁
RWD網頁設計
Google演算法
蒐集資訊
BecomeOurClient.
告訴我們您的業務目標,我們將共同創造令人驚喜的事物
CONTACTME
延伸文章資訊
- 1HTML - 維基百科,自由的百科全書 - Wikipedia
超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用於創建網頁的標準標記語言。HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站...
- 2HTML - 維基百科,自由的百科全書 - Wikipedia
超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用於建立網頁的標準標記語言。HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站...
- 3HTML是什麼?HTML基礎應用與解說|天矽科技客製化網頁設計
HTML (Hyper Text Markup Language) 超文本標記語言,一種建立網頁的標準標記語言,用來組織架構並呈現網頁內容的程式語言,常與CSS與JavaScript一起使用在網...
- 4HTML 是什麼?HTML 語法入門教學|ALPHA Camp Blog
HTML 是Hypertext Markup Language 的縮寫,也就是「超文本標記語言」(請注意,他是標記語言,不是程式語言)。 HyperText:一種結構化的文字 ...
- 5HTML是甚麼,有甚麼作用? HTML為甚麼常要和CSS常常一起 ...
HTML,英文全寫為HyperText Markup Language,你看到它英文中最後的字是Language,是一種IT語言,現在HTML是在用第5版本(HTML 4 和5有甚麼區別的話可以...