HTMLCSS基礎知識點_第1頁
HTMLCSS基礎知識點_第2頁
HTMLCSS基礎知識點_第3頁
HTMLCSS基礎知識點_第4頁
HTMLCSS基礎知識點_第5頁
已閱讀5頁，還剩6頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、HTML+CSS筆記1.學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。（1）HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。（2） CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。（3）JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。2.添加樣式如：<

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

3、（1） <html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。（2）<head>標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽 （3）在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的

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

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

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

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

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

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

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

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

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

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

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

15、t; action="服務器文件">講解：1.<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。2.action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。3.method ： 數據傳送的方式（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、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）2、me

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

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

19、 value="文本" /></form>1、type：   當type="text"時，輸入框為文本輸入框;   當type="password"時, 輸入框為密碼輸入框。2、name：為文本框命名，以備后臺程序ASP 、PHP使用。3、value：為文本輸入框設置默認值。(一般起到提示作用)舉例：<form> 姓名： <input type="text" name="myName"> <br/&

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

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

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

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

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論