一.學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握:HTML、CSS、JavaScript語言
1.HTML是網(wǎng)頁內(nèi)容的載體。 內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息梁沧,可以包含文字,圖片蝇裤,視頻等.
2.CSS樣式是表現(xiàn),就像網(wǎng)頁的外衣廷支。比如频鉴,標(biāo)題字體,顏色變化酥泞,或為標(biāo)題加入背景圖片砚殿,邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn).
3.JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特殊效果.如:鼠標(biāo)滑過彈出下拉菜單芝囤∷蒲祝或鼠標(biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞(新聞圖片)的輪換悯姊∠勖辏可以這么理解,有動畫的悯许,有交互的一般都是用JavaScript來實(shí)現(xiàn)的仆嗦。
網(wǎng)頁每一個內(nèi)容在瀏覽器中的顯示,都要存放到各種標(biāo)簽中先壕。
二.標(biāo)簽的語法
1.標(biāo)簽由英文尖括號< 和 >括起來瘩扼,如<html>就是一個標(biāo)簽
2.html中的標(biāo)簽一般都是成對出現(xiàn)的,分開始標(biāo)簽和結(jié)束標(biāo)簽垃僚。結(jié)束標(biāo)簽比開始多了一個"/".如<p></p> <div></div><span></span>.
3.標(biāo)簽與標(biāo)簽之間是可以嵌套的集绰,但先手順序必須保持一致,如:<div>里嵌套<p>,那么</p>必須放在</div>的前面.
4.HTML標(biāo)簽不區(qū)分大小寫,<h1>和<H1>是一樣的谆棺,但建議小寫栽燕,因為大部分程序員都以小寫為準(zhǔn)
一個HTML文件是有自己固定的結(jié)構(gòu)的。
三.認(rèn)識html文件基本結(jié)構(gòu)
<html>
<head>...</head>
<body>...</body>
</html>
1.<html><.html>稱為根標(biāo)簽改淑,所有的網(wǎng)頁標(biāo)簽都在<html></html>中碍岔。
2<head>標(biāo)簽用于定義文檔的頭部,它是所有頭部元素的容器朵夏,頭部元素有<title>,<script>,<style>,<link>,<meta>等標(biāo)簽蔼啦。
3在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容,如<h1>,<p>,<a>,<img>等網(wǎng)頁內(nèi)容標(biāo)簽
四.標(biāo)簽介紹
1.head標(biāo)簽
文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標(biāo)題等侍郭。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者.<title>標(biāo)簽:在<title>和</title>標(biāo)簽之家你的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息询吴,它會出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁的title標(biāo)簽用于高速用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么亮元,搜索引擎可以通過網(wǎng)頁標(biāo)題,迅速的判斷出網(wǎng)頁的主題唠摹。每個網(wǎng)頁的內(nèi)容都是不同的爆捞,每個網(wǎng)頁都應(yīng)該有一個獨(dú)一無二的title.
2.P標(biāo)簽
如果想在網(wǎng)頁上顯示文章,這時就需要<p>標(biāo)簽了勾拉,把文章的段落放到<p>標(biāo)簽中.
語法:<p>段落文本</p>
<p>標(biāo)簽的默認(rèn)樣式煮甥,段前段后都會有空白盗温,如果不喜歡這個空白,可以用CSS樣式來刪除或改變它.
3.<hx>標(biāo)簽
標(biāo)題標(biāo)簽一共有6個成肘,h1,h2,h3,h4,h5,h6分別為一級標(biāo)題,二級標(biāo)題卖局,三級標(biāo)題,四級標(biāo)題双霍,五級標(biāo)題砚偶,六級標(biāo)題。并且依據(jù)重要性遞減洒闸。<h1>是最高的等級.
語法:<hx>標(biāo)題文本</hx>, x為1-6
注:因為h1標(biāo)簽在網(wǎng)頁中比較重要染坯,所以一般h1標(biāo)簽被用在網(wǎng)站名稱上。好標(biāo)簽字號最大,h2標(biāo)簽字號相對h1要小丘逸,以此類推h6標(biāo)簽的字號最小.
4.<strong>和<em>標(biāo)簽
如果想在一段話中特別強(qiáng)調(diào)幾個文字单鹿,這時候就可以用到<em>或<strong>標(biāo)簽。但兩者在強(qiáng)調(diào)的語氣上有區(qū)別:<em>表示強(qiáng)調(diào)深纲,<strong>表示更強(qiáng)烈的強(qiáng)調(diào)/并且在瀏覽器中<em>默認(rèn)用斜體表示,<strong>用粗體表示仲锄。兩個標(biāo)簽相比,目前國內(nèi)前端程序員更喜歡用<strong>表示強(qiáng)調(diào).
語法:
<em>需要強(qiáng)調(diào)的文本</em>
<strong>需要強(qiáng)調(diào)的文本</strong>
5.<span>標(biāo)簽
<em>和<strong>標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時使用,它們的語義是強(qiáng)調(diào) 湃鹊。
<span>標(biāo)簽是沒有語義的,它的作用是為了設(shè)置單獨(dú)的樣式用的儒喊。
6.<q>標(biāo)簽 (quote)
語法:<q>引用文本</q>
語義:引用別人的話,自動為文本加上雙引號
7.<blockquote>標(biāo)簽
<blockquote>的作用也是引用別人的文本,但它是對長文本的引用涛舍,如在文章中引入大段某知名作家的名字澄惊,這時需要這個標(biāo)簽.瀏覽器對<blockquote>的解析是縮進(jìn)樣式.
語法:<blockquote>引用文本</blockquote>
8.<br/>標(biāo)簽
<br/>標(biāo)簽相當(dāng)于word文檔中的回車.
語法:在需要加回車換行的地方加入<br/>.
9.空格
語法:
在html代碼中輸入空格是不起作用的.
10.<hr>標(biāo)簽
在信息展開時,有時會需要加一些用于分割的橫線富雅,這樣會使文章看起來整齊些.(1).<hr/>標(biāo)簽和<br/>標(biāo)簽一樣也是一個空標(biāo)簽掸驱,所以只有一個開始標(biāo)簽,沒有結(jié)束標(biāo)簽没佑。(2).<hr/>標(biāo)簽在瀏覽器中的默認(rèn)樣式線條比較粗毕贼,顏色為灰色(3).現(xiàn)在一般使用xhtml1.0的版本來規(guī)范寫法
語法:html4.01版本 <hr> xthml1.0版本<hr />
11.<address>標(biāo)簽
一般網(wǎng)頁中會有一些網(wǎng)站的聯(lián)系地址需要在網(wǎng)頁中中顯示出來,這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽蛤奢。也可以定義一個地址(比如電子郵件地址),簽名或者文檔的作者身份.在瀏覽器上顯示的默認(rèn)樣式為斜體鬼癣。
語法:<address>聯(lián)系地址信息</address>
12.<code>標(biāo)簽
在介紹語言技術(shù)的網(wǎng)站中,避免不了在網(wǎng)頁中顯示一些計算機(jī)專業(yè)的編程代碼 啤贩,當(dāng)代碼為一行代碼時待秃,就可以使用<code>標(biāo)簽了
P:在文章中一般如果要插入多行代碼的時候,不能使用<code>標(biāo)簽.可以使用<pre>標(biāo)簽
語法 :<code>代碼語言</code>
13.<pre>標(biāo)簽
<pre>標(biāo)簽的主要作用:預(yù)格式化的文本痹屹。被包圍在pre元素的中的文本通常會保留空格和換行符.P:<pre>標(biāo)簽不只是為了顯示計算機(jī)的源代碼時用的章郁,在你需要再網(wǎng)頁中預(yù)顯示格式時都可以使用它,只是<pre>標(biāo)簽的一個常見應(yīng)用就是用來展示計算機(jī)的源代碼
語法:<pre>語言代碼段</pre>
14.<ul>標(biāo)簽
ul-li標(biāo)簽是沒有前后順序的信息列表.ul-li在網(wǎng)頁中顯示的默認(rèn)樣式一般為:每項li前都自帶一個原點(diǎn).
語法:<ul>
? ? ? ? ? ? ? ? ? <li>信息</li>....
? ? ? ? ? </ul>
15.<ol>標(biāo)簽
ol-li標(biāo)簽用來制作有序列表.默認(rèn)樣式一般為:每項<li>前都自帶一個序號,序號默認(rèn)從1開始.
語法:
<ol>
? ? ? ? <li>信息</li>...
</ol>
16.<div>標(biāo)簽
在網(wǎng)頁制作過程中,可以把一些獨(dú)立的邏輯部分劃分出來志衍,放在一個<div>標(biāo)簽中暖庄,這個<div>標(biāo)簽的作用就相當(dāng)于一個容器.
語法:<div>...</div>
17.table標(biāo)簽.
(1).<table>...</table>:整個表格以<table>標(biāo)記開始,</table>標(biāo)記結(jié)束
(2).<tbody>...</tbody>:當(dāng)表格內(nèi)容非常多時聊替,表格會下載一點(diǎn)顯示一點(diǎn),但如果加上<tbody>標(biāo)簽后培廓,這個表格就要等表格內(nèi)容全部下載完才會顯示惹悄。
(3).<tr>...</tr>表格的一行,所以有幾對tr表格就有幾行.
(4).<td>..</td>表格一的個單元個肩钠,一行中包含幾對<td>...</td>,說明一行中就有幾列.
(5)<th>...</th>表格的頭部的一個單元格泣港,表格表頭,默認(rèn)為粗體并且居中顯示
(6)<table summary = "表格簡介文本">表格摘要。在table中增加summary屬性,,此為摘要蔬将,是表格簡介文本爷速,不會被用戶看到,但是有利于搜索引擎更好的讀取表格內(nèi)容霞怀。
(7)<caption>標(biāo)題文本</caption>表格標(biāo)題惫东,用以描述表格內(nèi)容,標(biāo)題的顯示位置在表格上方