這篇文章主要介紹了前端開發必學的HTML知識 ,介紹了學習web前端開發需要掌握的基礎技術,有興趣的夥伴們可以參考一下
1 HTML介紹
1.1 程式碼初步體驗,製作第一個網頁
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>制作我的第一个网页</title> </head> <body> <h1>Hello World</h1> </body> </html>
1.2 HTML與CSS的關係
學習web前端開發基礎技術需要掌握:HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的:
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的訊息,可以包含文字、圖片、影片等。
2. CSS樣式是表現。就像網頁的外衣。例如,標題字體、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西都稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉式選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖)的輪替。可以這麼理解,有動畫的,有互動的一般都是用JavaScript來實現的。
下面程式碼示範了CSS的效果,HTML用來表示網頁元素,CSS讓元素表現更豐富,例如元素位置,大小,顏色,字體等:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Html和CSS的关系</title> <style type="text/css"> h1{ font-size:19px; color:#930; text-align:center; } </style> </head> <body> <h1>Hello World!</h1> </body> </html>
( 1)第8行程式碼,影響視窗的文字大小。
(2)第9行程式碼,影響視窗文字顏色的變化。
(3)第10行,影響視窗文字居中的變化。
1.3 認識HTML標籤
#各種不同的網頁,這些網頁都是由html標籤組成的。下面就是一個簡單的網頁:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>认识html标签</title> </head> <body> <h1>勇气</h1> <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p> <img src="http://img.imooc.com/52b4113500018cf102000200.jpg" > </body> </html>
# 效果如下:
分析這個網頁由哪些HTML組成:
(1)「勇氣」是網頁內容文章的標題,
三年級時...我也沒勇氣參加。
1.4 標籤語法
1.標籤由英文尖括號<和>括起來,如就是一個標籤。
2.html中的標籤一般都是成對出現的,分開始標籤和結束標籤。結束標籤比開始標籤多了一個/。
3.標籤結構示意圖如下:
4.標籤範例:
(1)
5.標籤與標籤之間是可以嵌套的,但先後順序必須保持一致,如:
裡嵌套
,那麼
必須放在的前面。如下圖所示。6.HTML標籤不區分大小寫,
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>标签的语法</title> </head> <body> <h1>在本教程中,你将学习如何使用 HTML 来创建站点</h1> <p>当特殊的样式需要应用到个别元素时,就可以使用内联样式。 </body> </html>
1.5 html/head/body認識HTML檔案基本結構
學習html檔案的結構:一個HTML檔案是有自己固定的結構的。
<html> <head>...</head> <body>...</body> </html>
代码讲解:
1. 称为根标签,所有的网页标签都在中。
2.