1.Html和CSS的關系
學習web前端開發(fā)基礎技術需要掌握:HTML床牧、CSS艰垂、JavaScript語言桑寨。下面我們就來了解下這三門技術都是用來實現(xiàn)什么的:
- HTML是網(wǎng)頁內(nèi)容的載體揍庄。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字久窟、圖片秩冈、視頻等。
- CSS樣式是表現(xiàn)斥扛。就像網(wǎng)頁的外衣入问。比如,標題字體稀颁、顏色變化芬失,或為標題加入背景圖片、邊框等匾灶。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)棱烂。
-
JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如:鼠標滑過彈出下拉菜單阶女〖彰樱或鼠標滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換秃踩〕挠悖可以這么理解,有動畫的吞瞪,有交互的一般都是用JavaScript來實現(xiàn)的馁启。
下面給大家布置一個任務驾孔,在完成任務的時候芍秆,每輸入一行代碼,代碼窗口就會立即顯示出效果翠勉。
任務
我也來試試:為Hello World添加樣式
1.在右邊編輯器的第8行妖啥,輸入font-size:50px;
(注意結(jié)果窗口的文字大小的變化)。
2.在右邊編輯器的第9行对碌,輸入color:#930;
(注意結(jié)果窗口的文字顏色的變化)荆虱。
3.在右邊編輯器的第10行,輸入text-align:center;
(注意結(jié)果窗口的文字居中的變化)朽们。
2.認識html標簽
讓我們通過一個網(wǎng)頁的學習怀读,來對html標簽有一個初步理解。平常大家說的上網(wǎng)就是瀏覽各種各式各樣的網(wǎng)頁骑脱,這些網(wǎng)頁都是由html標簽組成的菜枷。下面就是一個簡單的網(wǎng)頁。效果圖如下:
我們來分析一下叁丧,這個網(wǎng)頁由哪些html標簽組成:
“勇氣”是網(wǎng)頁內(nèi)容文章的標題啤誊,
<h1></h1>
就是標題標簽岳瞭,它在網(wǎng)頁上的代碼寫成
<h1>勇氣</h1>
。“三年級時...我也沒勇氣參加蚊锹⊥ぃ” 是網(wǎng)頁中文章的段落,
<p></p>
是段落標簽牡昆。它在網(wǎng)頁上的代碼寫成<p>三年級時...我也沒勇氣參加姚炕。</p>
網(wǎng)頁上那張小女生的圖片,由img
標簽來完成的丢烘,它在網(wǎng)頁上的代碼寫成<img src="1.jpg">
網(wǎng)頁的完整代碼如下圖:
總結(jié)一下钻心,可以這么說,網(wǎng)頁中每一個內(nèi)容在瀏覽器中的顯示铅协,都要存放到各種標簽中捷沸。
3.標簽的語法
1.標簽由英文尖括號 < 和 > 括起來,如<html>就是一個標簽狐史。
2.html中的標簽一般都是成對出現(xiàn)的痒给,分開始標簽和結(jié)束標簽。結(jié)束標簽比開始標簽多了一個/骏全。
如:
(1) <p></p>
(2)<div></div>
(3)<span></span>
3.標簽與標簽之間是可以嵌套的苍柏,但先后順序必須保持一致,如:
<div>
里嵌套<p>
姜贡,那么</p>
必須放在</div>
的前面试吁。如下圖所示。4.HTML標簽不區(qū)分大小寫楼咳,
<h1>
和<H1>
是一樣的熄捍,但建議小寫,因為大部分程序員都以小寫為準母怜。
4.認識html文件基本結(jié)構(gòu)
這一節(jié)中我們來學習html文件的結(jié)構(gòu):一個HTML文件是有自己固定的結(jié)構(gòu)的余耽。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解:
<html></html>稱為根標簽,所有的網(wǎng)頁標簽都在<html></html>中苹熏。
<head> 標簽用于定義文檔的頭部碟贾,它是所有頭部元素的容器。頭部元素有<title>轨域、<script>袱耽、 <style>、<link>干发、 <meta>等標簽朱巨,頭部標簽在下一小節(jié)中會有詳細介紹。
在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容铐然,如
<h1>蔬崩、<p>恶座、<a>、<img>
等網(wǎng)頁內(nèi)容標簽沥阳,在這里的標簽中的內(nèi)容會在瀏覽器中顯示出來跨琳。
5.認識head標簽
下面我們來了解一下<head>標簽的作用。
文檔的頭部描述了文檔的各種屬性和信息桐罕,包括文檔的標題等脉让。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標簽可用在 head 部分:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標簽:在<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息功炮,它會出現(xiàn)在瀏覽器的標題欄中溅潜。網(wǎng)頁的title標簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么,搜索引擎可以通過網(wǎng)頁標題薪伏,迅速的判斷出網(wǎng)頁的主題滚澜。每個網(wǎng)頁的內(nèi)容都是不同的,每個網(wǎng)頁都應該有一個獨一無二的title嫁怀。
例如:
<head>
<title>hello world</title>
</head>
<title>標簽的內(nèi)容“hello world”會在瀏覽器中的標題欄上顯示出來设捐,如下圖所示:
<head>標簽中的其它標簽內(nèi)容的講解,會在以后的章節(jié)中為大家一一講解塘淑。
6.了解HTML的代碼注釋
什么是代碼注釋萝招?代碼注釋的作用是幫助程序員標注代碼的用途,過一段時間后再看你所編寫的代碼存捺,就能很快想起這段代碼的用途槐沼。代碼注釋不僅方便程序員自己回憶起以前代碼的用途,還可以幫助其他程序員很快的讀懂你的程序的功能捌治,方便多人合作開發(fā)網(wǎng)頁代碼岗钩。
語法:
****
如:右邊編輯器的代碼的第 8、12 行都是具滴,但是你會發(fā)現(xiàn)注釋代碼是不會在結(jié)果窗口中顯示出來的凹嘲。