前端開發(fā)學(xué)習(xí)筆記(一)-Html簡介+ Css標(biāo)簽

一.學(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.空格&nbsp;

語法:&nbsp;

在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)題的顯示位置在表格上方

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末毙石,一起剝皮案震驚了整個濱河市廉沮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌徐矩,老刑警劉巖滞时,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異滤灯,居然都是意外死亡坪稽,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進(jìn)店門鳞骤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窒百,“玉大人,你說我怎么就攤上這事豫尽「萆遥” “怎么了?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵美旧,是天一觀的道長渤滞。 經(jīng)常有香客問我,道長榴嗅,這世上最難降的妖魔是什么妄呕? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮嗽测,結(jié)果婚禮上趴腋,老公的妹妹穿的比我還像新娘。我一直安慰自己论咏,他們只是感情好优炬,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著厅贪,像睡著了一般蠢护。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上养涮,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天葵硕,我揣著相機(jī)與錄音,去河邊找鬼贯吓。 笑死懈凹,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的悄谐。 我是一名探鬼主播介评,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼爬舰!你這毒婦竟也來了们陆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤情屹,失蹤者是張志新(化名)和其女友劉穎坪仇,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體垃你,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡椅文,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了惜颇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片皆刺。...
    茶點(diǎn)故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖官还,靈堂內(nèi)的尸體忽然破棺而出芹橡,到底是詐尸還是另有隱情,我是刑警寧澤望伦,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布林说,位于F島的核電站,受9級特大地震影響屯伞,放射性物質(zhì)發(fā)生泄漏腿箩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一劣摇、第九天 我趴在偏房一處隱蔽的房頂上張望珠移。 院中可真熱鬧,春花似錦、人聲如沸钧惧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽浓瞪。三九已至懈玻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間乾颁,已是汗流浹背涂乌。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留英岭,地道東北人湾盒。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像诅妹,于是被迫代替她去往敵國和親罚勾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 一漾唉、Html和CSS的關(guān)系 學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握:HTML荧库、CSS、JavaScript語言赵刑。下面我...
    空指針的空閱讀 977評論 0 2
  • 引言 在日常開發(fā)Android中分衫,很多時候會遇到和WebView打交道,對CSS HTML JS不是很清楚的話是完...
    張文靖同學(xué)閱讀 2,837評論 0 11
  • 本文主要是起筆記的作用般此,內(nèi)容來自慕課網(wǎng). 認(rèn)識HTML蚪战、CSS、JavaScript 學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需...
    0o凍僵的企鵝o0閱讀 679評論 3 7
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案铐懊? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評論 1 92
  • 不恨他邀桑,但也不會輕易原諒,起碼現(xiàn)在沒有科乎。 交給時間壁畸。 自己日子還是要自己過。
    倔強(qiáng)的一一閱讀 242評論 0 0