HTMLCSS基礎(chǔ)知識點(diǎn)_第1頁
HTMLCSS基礎(chǔ)知識點(diǎn)_第2頁
HTMLCSS基礎(chǔ)知識點(diǎn)_第3頁
HTMLCSS基礎(chǔ)知識點(diǎn)_第4頁
HTMLCSS基礎(chǔ)知識點(diǎn)_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、HTML+CSS筆記1.學(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)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。（3）JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單?；蚴髽?biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。2.添加樣式如：<

2、;style type="text/css"> h1 font-size:12px; color:#930; text-align:center; </style>3.（1）<h1></h1>就是標(biāo)題標(biāo)簽；<p></p>是段落標(biāo)簽；<p>我的第一個(gè)段落</p><p>我的第二個(gè)段落</p>（2）標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面。4.

3、（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)簽，在這里的

4、標(biāo)簽中的內(nèi)容會在瀏覽器中顯示出來。5.head部分的標(biāo)簽<head> <title>.</title> <meta> <link> <style>.</style> <script>.</script></head>6.<!-注釋文字 ->7. <em>需要強(qiáng)調(diào)的文本</em>，在瀏覽器中<em> 默認(rèn)用斜體表示<strong>需要強(qiáng)調(diào)的文本</strong>，<strong> 用粗體表示：一

5、個(gè)想要成名名叫<strong>尼克卡拉威</strong>（托比馬奎爾Tobey Maguire飾）的作家8. 強(qiáng)調(diào)標(biāo)簽比較<em>和<strong>標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用，它們的語義是強(qiáng)調(diào)。<span>標(biāo)簽是沒有語義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的。 注：<style>span color:blue; </style>9. <q>標(biāo)簽，短文本引用 <q>引用文本</q> “莊生曉夢迷蝴蝶。望帝春心托杜鵑?！?這是一句詩歌，出自晚唐詩人李商隱的錦瑟 。因?yàn)?/p>

6、不是作者自己的文字，所以需要使用<q></q>實(shí)現(xiàn)引用。注意：要引用的文本不用加雙引號，瀏覽器會對q標(biāo)簽自動添加雙引號。<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑。</p>10. <blockquote>標(biāo)簽，長文本引用 <blockquote>引用文本</blockquote>11.使用<br/>標(biāo)簽分行顯示文本需要加回車換行的地方加入<br />，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車 <p> 暗淡輕黃體性柔，<br/>情疏跡遠(yuǎn)只香留。<b

7、r/>何須淺碧深紅色，<br/>自是花中第一流。 </p><br />標(biāo)簽是一個(gè)空標(biāo)簽，沒有HTML內(nèi)容的標(biāo)簽就是空標(biāo)簽，空標(biāo)簽只需要寫一個(gè)開始標(biāo)簽，這樣的標(biāo)簽有<br />、<hr />和<img />。總結(jié)：在 html 代碼中輸入回車、空格都是沒有作用的。在html文本中想輸入回車換行，就必須輸入<br />。11.空格：要想輸入空格，必須寫入&nbsp; 語法：&nbsp;12.認(rèn)識<hr>標(biāo)簽，添加水平橫線13. <address>標(biāo)簽，為網(wǎng)頁加入地址信息

8、<address>聯(lián)系地址信息</address>14.使用<code>加入一行代碼 <code>代碼語言</code>；注：如果是多行代碼，可以使用<pre>標(biāo)簽。<pre>語言代碼段</pre><pre> 標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。15.使用ul,添加信息列表（無序列表）：如下圖<ul> <li>信息</li> <li>信息</li> .</ul>ul-

9、li在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)16.使用<ol>制作有序列表 如下圖：<ol> <li>信息</li> <li>信息</li> .</ol>17. <div>板塊<div.id="版塊名稱"></div>18.認(rèn)識table標(biāo)簽，認(rèn)識網(wǎng)頁上的表格 創(chuàng)建表格的四個(gè)元素：table、tbody、tr、th、td （1）<table></table>：整個(gè)表格以<table>標(biāo)記開始、</ta

10、ble>標(biāo)記結(jié)束。（2）<tbody></tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。（3）<tr></tr>：表格的一行，所以有幾對tr 表格就有幾行。（4）<td></td>：表格的一個(gè)單元格，一行中包含幾對<td>.</td>，說明一行中就有幾列。（5）<th></th>：表格的頭部的一個(gè)單元格，表格表頭。（6）表格中列的個(gè)數(shù)，取決于一行中

11、數(shù)據(jù)單元格的個(gè)數(shù)。19.caption標(biāo)簽，為表格添加標(biāo)題和摘要摘要：摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。標(biāo)題：用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。 語法：<table summary="表格簡介文本"> <caption>標(biāo)題文本</caption>20.使用<a>標(biāo)簽，鏈接到另一個(gè)頁面語法：<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本"

12、;>鏈接顯示的文本</a> 例如：<a href="" title="點(diǎn)擊進(jìn)入慕課網(wǎng)">click here!</a>上面例子作用是單擊click here!文字，網(wǎng)頁鏈接到這個(gè)網(wǎng)頁。title屬性的作用，鼠標(biāo)滑過鏈接文字時(shí)會顯示這個(gè)屬性的文本內(nèi)容21在新建瀏覽器窗口中打開鏈接 <a>標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開，有時(shí)我們需要在新的瀏覽器窗口中打開。如下代碼：<a href="目標(biāo)網(wǎng)址" target="_blank"&g

13、t;click here!</a>22.使用mailto在網(wǎng)頁中鏈接Email地址 <a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進(jìn)行講解，請看詳細(xì)圖示：注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。下面是一個(gè)完整的實(shí)例:23.認(rèn)識<img>標(biāo)簽，為網(wǎng)頁插入圖片語法：<img src="圖片地址" alt="下載失敗時(shí)的替換文本" titl

14、e = "提示文本">舉例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />講解：1、src：標(biāo)識圖像的位置；2、alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；3、title：提供在圖像可見時(shí)對圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)；4、圖像可以是GIF，PNG，JPEG格式的圖像文件。24.使用表單標(biāo)簽，與用戶交流語法：<form method="傳送方式&quo

15、t; action="服務(wù)器文件">講解：1.<form> ：<form>標(biāo)簽是成對出現(xiàn)的，以<form>開始，以</form>結(jié)束。2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。3.method ： 數(shù)據(jù)傳送的方式（get/post）。<form method="post" action="save.php"> <label for="username">用戶名

16、:</label> <input type="text" name="username" /> <label for="pass">密碼:</label> <input type="password" name="pass" /></form>注意:1、所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在<form></form>標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦?。?、me

17、thod:post/get的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題注：Form中的get和post方法，在數(shù)據(jù)傳輸過程中分別對應(yīng)了GET和POST方法。二者主要區(qū)別如下：1、Get將表單中數(shù)據(jù)的按照variable=value的形式，添加到action所指向的URL后面，并且兩者使用“?”連接，而各個(gè)變量之間使用“&”連接；Post是將表單中的數(shù)據(jù)放在form的數(shù)據(jù)體中，按照變量和值相對應(yīng)的方式，傳遞到action所指向URL。如下形式：     2、Get是不安全的，因?yàn)樵趥鬏斶^程，數(shù)據(jù)被存放在請求的URL地址中，這樣就可能會有一些隱私的信息

18、被第三方看到。3、Get方式傳輸?shù)臄?shù)據(jù)量非常小，一般限制在 2KB 左右，但是執(zhí)行效率卻比 Post 方法好；而 Post 方式傳遞的數(shù)據(jù)量相對較大，它是等待服務(wù)器來讀取數(shù)據(jù)，不過也有字節(jié)限制，這是為了避免對服務(wù)器用大量數(shù)據(jù)進(jìn)行惡意攻擊，根據(jù)微軟方面的說法，微軟對用 Request.Form()可接收的最大數(shù)據(jù)有限制，IIS4中為 80KB 字節(jié)，IIS5 中為 100KB 字節(jié)。綜上所述，請盡量用 Post 方法。25.文本輸入框，密碼輸入框語法：<form> <input type="text/password" name="名稱"

19、 value="文本" /></form>1、type：   當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?   當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框。2、name：為文本框命名，以備后臺程序ASP 、PHP使用。3、value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)舉例：<form> 姓名： <input type="text" name="myName"> <br/&

20、gt; 密碼： <input type="password" name="pass"></form>26.文本域，支持多行文本輸入語法：<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>1、<textarea>標(biāo)簽是成對出現(xiàn)的，以<textarea>開始，以</textarea>結(jié)束。2、cols ：多行輸入域的列數(shù)。3、rows ：多行輸入域的行數(shù)。4、在<textarea><

21、/textarea>標(biāo)簽之間可以輸入默認(rèn)值。舉例：<form method="post" action="save.php"> <label>聯(lián)系我們</label> <textarea cols="50" rows="10" >在這里輸入內(nèi)容.</textarea></form>27.使用單選框，復(fù)選框，讓用戶選擇html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全

22、選語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>1、type:當(dāng) type="radio" 時(shí)，控件為單選框當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）3、name：為控件命名，以備后臺程序 ASP、PHP 使用4、checked：當(dāng)設(shè)置 checked="

23、;checked" 時(shí)，該選項(xiàng)被默認(rèn)選中注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。28使用下拉列表框，節(jié)省空間講解：1、value：2、selected="selected"：設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。29.使用下拉列表框進(jìn)行多選 下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性，就可以實(shí)現(xiàn)多選功能，在 widows 操作系

24、統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊），可以選擇多個(gè)選項(xiàng)。如下代碼：30.使用提交按鈕，提交數(shù)據(jù) 語法：<input type="submit" value="提交">type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用value：按鈕上顯示的文字注：在type中只有submit是用來提交表單的，button只是一個(gè)按鈕.不能提交表單。31.使用重置按鈕，重置表單信息 當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后，發(fā)現(xiàn)書寫有誤，可以使用重置按鈕

25、使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以語法：<input type="reset" value="重置">type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用value：按鈕上顯示的文字32.form表單中的label標(biāo)簽 語法：<label for="控件id名稱">注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。32.認(rèn)識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Style Sheets

26、)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。如下列代碼：p font-size:12px; color:red; font-weight:bold;33. CSS注釋代碼 用/*注釋語句*/來標(biāo)明（Html中使用<!-注釋語句->)34.CSS代碼語法 css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁中所有的段（p）的文字將變成藍(lán)色，而其他的元素（如ol）不會受到影響。聲明：在英文大括號“”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當(dāng)有多條聲明時(shí)，

27、中間可以英文分號“;”分隔，如下所示：pfont-size:12px;color:red;注意：1、最后一條聲明可以沒有分號，但是為了以后修改方便，一般也加上分號。2、為了使用樣式更加容易閱讀，可以將每條代碼寫在一個(gè)新行內(nèi)，如下所示：p font-size:12px; color:red;35.內(nèi)聯(lián)式CSS樣式，直接寫在現(xiàn)有的HTML標(biāo)簽中從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種。這一小節(jié)先來講解內(nèi)聯(lián)式。內(nèi)聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中，如下面代碼：<p style="color:red">這

28、里文字是紅色。</p>注意要寫在元素的開始標(biāo)簽里，下面這種寫法是錯(cuò)誤的：<p>這里文字是紅色。</p style="color:red">并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設(shè)置可以寫在一起，中間用分號隔開。如下代碼：<p style="color:red;font-size:12px">這里文字是紅色。</p>36.內(nèi)聯(lián)式css樣式，直接寫在現(xiàn)有的HTML標(biāo)簽中內(nèi)聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中，如下面代碼：<p style="

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論