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

下載本文檔

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

文檔簡介

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

2、樣式如：<style type="text/css">h1font-size:12px;color:#930;text-align:center;</style>3 . (1) <h1></h1>就是標題標簽；<p></p>是段落標簽；<p>我的第一個段落</p><p>我的第二個段落</p>(2)標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如： div里嵌套p,那么/p必須 放在/div的前面。頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。

3、5. head部分的標簽<head><title></title><meta><link><style></style><script></script></head>6. <!-注釋文字->7. <em>需要強調的文本</em> ,在瀏覽器中<em>默認用斜體表示<strong> 需要強調的文本 </strong> , <strong> 用粗體 表示：一個想要成名名叫 <strong&

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

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

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

7、信息<address> 聯系地址信息 </address>14 .使用<code>加入一行代碼<code> 代碼語言 </code> ；注：如果是多行代碼，可以使用 <pre>標簽。<pre>語言代碼段</pre><pre>標簽的主要作用：預格式化的文本。被包圍在pre元素中的文本通常會保留空格和換行符。15 .使用ul,添加信息列表（無序列表）：如下圖卜臺灣i瘋狗浪”吞噬S人臺風蓑海南kA.遇難 卜Bi英土乓槍條俘虐視頻夫妻吵架送兒子汽油 男子難存51萬一元紙幣司機高速上蛇形倒車 上冷

8、知識;男大命根孑的秘密女神表白神回復 L娛樂I汪峰表白再楣秒奈談戀愛的都神經病 *張亮：天天總爰拆臺張學友急帚劈腿女助理 匕才皓男子殺女友藏尸箱中迪拜百豪車琳行游戲 英雄聯盟提莫崛起 題江;夬塞OMC勝帕<ul><li>信息 </li><li>信息 </li></ul>ul-li在網頁中顯示的默認式一般為：每項li前都自帶一個圓點16 .使用<ol>制作有序列表 如下圖：新書熱賣一 不省心(馮小剛重作者：回小剛著 出版社：長江文藝出 出版時間：爾13年09月我承認我不曾歷蛭治暴(蔣方一向不為遇見，只為遠方工當當

9、獨一站在兩個世界的邊韁壁誥的生,1加L C*獺這么點兒夢想：IQ段壬垮®書熱賣，獲戴軍親筆.， <ol><li>信息 </li><li>信息 </li></ol>17 . <div> 板塊<div.id="版塊名稱"> </div>18 .認識table標簽，認識網頁上的表格創建表格的四個元素：table、tbody、tr、th、td標記結束。(1) <table> </table>：整個表格以 <table>標記開始、&

10、lt;/table>12 / 11(2) <tbody>-Vtbody> :當表格內容非常多時，表格會下載一點顯示一點，但如果加上 <tbody>標簽后, 這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。(3) <tr> </tr> ：表格的一行，所以有幾對 tr表格就有幾行。(4) <td> - </td> :表格的一個單元格，一行中包含幾對<td></td>,說明一行中就有幾列。(5) <th></th> :表格的頭部的一個單元格，表格表頭

11、。(6)表格中列的個數，取決于一行中數據單元格的個數。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

13、="_blank" >click here!</a>22 .使用mailto在網頁中鏈接 Email地址<a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用 mailto做許多其它事情。下面一一進行講解，請看詳細圖示：施姓宇版髀翱IfiMtHllto：翊金自的用用舞&腌戶詢電子啰件理序引凰勵6 # 如件用自相上崢他地址<i t:="iaiJo： mioDoc. c.“戲白仙榔Wtcc=在收件人眥后同-雌.口以他寫我諾才好三 .二爐二三二二：1-；二.：.：

14、二：一二三七.二七：-.：二三三<k>蚓施峨bcc-任岷的崛用山出舵里上密的H岫1電舊力ailt配仃峭pjtbMtt.oMT）發數A）貼號舄再性相艇B皿妹雕骷林# “噓-a hie f-"jiailtci: y檔is: K- t兩網員隹 h：解理subject用subjtxR：1債件主愚女JlEFioilEMinooc. coa?5iifjjtc仁發送電子&杵。發函睇楠bi>dy-用即就鞘舶容& krf=*niltt>:過畫幻曾電曲磁電束司嘉泳牙浸傲注意：如果mailto后面同時有多個參數的話，第一個參數必須以 ？ ”開頭，后面的參數每一個都以

15、 &”分隔。下面是一個完整的實例：* subject ft 產郵件羽 hr?f=rmailtciyyt&inicoc. com ? cc=xi古Biin睥imMC, cow A bcc-xiaoyu®iioo:< com 內容一發法，/驍23 .認識<img>標簽，為網頁插入圖片 語法:提示文本"><img src=" 圖片地址"alt="下載失敗時的替換文本"title ="舉例:<img src = "myimage.gif" alt = "

16、;My Image" title = "My Image" />講解:1、src ：標識圖像的位置;2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本;3、title :提供在圖像可見時對圖像的描述（鼠標滑過圖片時顯示的文本）;4、圖像可以是GIF, PNG, JPEG格式的圖像文件。24.使用表單標簽，與用戶交流語法:<form method="傳送方式"action="服務器文件">講解：1 .<form> : <form>標簽是成對出現的，

17、以 <form>開始，以</form>結束。2 .action :瀏覽者輸入的數據被傳送到的地方，比如一個PHP頁面(save.php)3 .method :數據傳送的方式(get/post )。<form method="post" action="save.php"><label for="username">用戶名：</label><input type="text" name="username" /><lab

18、el for="pass">密碼：</label><input type="password" name="pass" /></form>注意：1、所有表單控件(文本框、文本域、按鈕、單選框、復選框等)都必須放在 <form></form> 標簽之間(否 則用戶輸入的信息可提交不到服務器上哦！)2、method:post/get的區別這一部分內容屬于后端程序員考慮的問題注：Form中的get和post方法，在數據傳輸過程中分別對應了GET和POST方法。二者主要區別如下

19、：1、Get將表單中數據的按照 variable=value的形式，添加到 action所指向的URL后面，并 且兩者使用“鞋接，而各個變量之間使用 “&'連接；Post是將表單中的數據放在 form的數 據體中，按照變量和值相對應的方式，傳遞到action所指向URL。如下形式：2、Get是不安全的，因為在傳輸過程，數據被存放在請求的URL地址中，這樣就可能會有一些隱私的信息被第三方看到。3、Get方式傳輸的數據量非常小， 一般限制在 2KB左右，但是執行效率卻比 Post方法好； 而Post方式傳遞的數據量相對較大， 它是等待服務器來讀取數據， 不過也有字節限制， 這 是為

20、了避免對服務器用大量數據進行惡意攻擊，根據微軟方面的說法，微軟對用Request.Form()可接收的最大數據有限制，IIS4中為80KB字節，IIS5中為100KB字節。綜上所述，請盡量用 Post方法。25.文本輸入框，密碼輸入框語法：<form><input type="text/password" name="名稱"value=" 文本"/></form>1、type :當type=" text "時,輸入框為 文本輸入框;當type=" password&qu

21、ot;時，輸入框為 密碼輸入框。2、name為文本框命名，以備后臺程序ASP、PH唯用。3、value :為文本輸入框設置默認值。(一般起到提示作用) 舉例：<form>姓名：<input type="text" name="myName"><br/>密碼：<input type="password" name="pass"></form>26.文本域，支持多行文本輸入語法：<textarea rows="行數"cols=&quo

22、t;歹U數" >文本 </textarea>1、<textarea> 標簽是成對出現的，以 <textarea> 開始，以</textarea> 結束。2、cols :多行輸入域的列數。3、rows :多行輸入域的行數。4、在<textarea></textarea>標簽之間可以輸入默認值。舉例：<form method="post" action="save.php"><label> 聯系我們 </label><textar

23、ea cols="50" rows="10" >在這里輸入內容.</textarea></form>27 .使用單選框，復選框，讓用戶選擇html中有兩種選擇框，即 單選框和復選框，兩者的區別是 單選框中的選項用戶只能選擇一項，而 復選框 中用戶可以任意選擇多項，甚至全選語法：值"name="名稱"<input type="radio/checkbox" value="checked="checked"/>1、type:當type=&

24、quot;radio" 時，控件為單選框當type="checkbox" 時，控件為復選框2、value :提交數據到服務器的值（后臺程序 PHP使用）3、name：為控件命名，以備后臺程序ASP、PHP使用4、checked :當設置 checked="checked" 時，該選項被默認選中注意：同一組的單選按鈕，name取值一定要一致，比如上面例子為同一個名稱“radioLove ；'這樣同一組的單選按鈕才可以起到單選的作用。28 .使用下拉列表框，節省空間<form names'iForn" >41百

25、b電1%愛好:</label>-(select >< opt ion value='讀書，讀書/option< option "lug=r運動運動/option，coption v5lue='音樂音樂/option>optionaluu “旅游旅游<r叩七二外力< option vaJ.uw=r由物5日的七£="5£1電匚七期，購物叩tion </5elect>t/fcrni講解:1、value :向服務器提交的值顯示的值2、selected="selected&quo

26、t;設置selected="selected" 屬性，則該選項就被默認選中。29 .使用下拉列表框進行多選下拉列表也可以進行多選操作，在select標簽中設置multiple="multiple”屬性，就可以實現多選功能，在 widows操作系統下，進彳f多選時按下Ctrl鍵同時進行 單擊（在Mac下使用Command +單擊），可以選擇多個選項。如下代碼：<form ndeu="iFQnn” >Qdbeb愛好:</label><select multiple="multiple">< opt

27、ion,讀書, 讀書Aoption>< option valuw="運動運動(/ption< option value音樂，音樂coptiwi Trains"旅游' >旅游option- 叩tion nlu,的珈D而物“叩tion</£elect></-Form>30 .使用提交按鈕，提交數據語法：input type="submit" value=" 提交"type :只有當type值設置為submit時，按鈕才有提交作用 value :按鈕上顯示的文字<for

28、m method="posf action=*,iave.php'>(label +"=K«yN白me，姓名：</label>input type="text" va2ue=" * riame= "myName " />input type="submit'1 uGu"提交"name="subniitBtn" /></farm>注：在type中只有submit是用來提交表單的，button只是一個按鈕不能提交

29、表單。31 .使用重置按鈕，重置表單信息當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入 用戶名”后，發現書寫有誤，可以使用 重 置按鈕使輸入框恢復到初始狀態。只需要把 type設置為"reset"就可以語法：<input type="reset" value=" 重置">type :只有當type值設置為reset時，按鈕才有重置作用value :按鈕上顯示的文字32 .form 表單中的label標簽語法：<label for=" 控件id名稱"注意：標簽的for屬性中的值應當與相關控件的

30、id屬性值一定要相同32.認識CSS樣式pfont-size:12px;color:red;font-weight:bold;33 . CSS注釋代碼用/*注釋語句*/來標明（Html中使用<!-注釋語句-> ）34 .CSS代碼語法css樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示:逸樣的宜K ©0】網:也19可）選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如 ol）不會受到影響。聲明：在英文大括號“ ”中的的就是聲明，屬性和值之間用英文冒號f”分隔。當有多條聲明時，中間可以英文分號“分

31、隔，如下所示：pfont-size:12px;color:red;注意：1、最后一條聲明可以沒有分號，但是為了以后修改方便，一般也加上分號。2、為了使用樣式更加容易閱讀，可以將每條代碼寫在一個新行內，如下所示：Pfont-size:12px;color:red;35 .內聯式CSS樣式，直接寫在現有的HTML標簽中從CSS樣式代碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。這一小節先來講解內聯式。內聯式css樣式表就是把css代碼直接寫在現有的 HTML標簽中，如下面代碼：<p style="color:red">這里文字是紅色。</p>注意要寫在元素的開始標簽里，下面這種寫法是錯誤的:<p> 這里文字是紅色。</p style="color:red">并且css樣式代碼要寫在style=""雙引號中，如果有多條cs

溫馨提示

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

評論

0/150

提交評論