前端網(wǎng)頁設(shè)計(jì)的知識點(diǎn)大全,必看_第1頁
前端網(wǎng)頁設(shè)計(jì)的知識點(diǎn)大全,必看_第2頁
前端網(wǎng)頁設(shè)計(jì)的知識點(diǎn)大全,必看_第3頁
前端網(wǎng)頁設(shè)計(jì)的知識點(diǎn)大全,必看_第4頁
前端網(wǎng)頁設(shè)計(jì)的知識點(diǎn)大全,必看_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、<meta charset="utf-8"/><link rel="stylesheet" type="text/css" href="css/main.css"/> head 定義文檔頭部，包含： title, script, style, link, meta body 是網(wǎng)頁主要內(nèi)容，包含： h1,h2-h6, p, a, img2.4.認(rèn)識 head 標(biāo)簽：<head><title>.</title> <meta><link>

2、;<style>.</style><script>.</script> </head>認(rèn)識 body 標(biāo)簽：<p>段落文本</p> <h1>標(biāo)題文本</h1><em >斜體文本（強(qiáng)調(diào)）網(wǎng)頁標(biāo)題</em> <strong>粗體文本 </strong> <span>單獨(dú)樣式文本</span>有三段就放三個(gè) <p></p> h1-h6 共 6 個(gè)標(biāo)題分級 斜體文本內(nèi)容 粗體顯示文本內(nèi)容 沒有語義的，

3、 它的應(yīng)用就是為了 設(shè)置單獨(dú)的格式用<q>引用的文本</q><blockquote> 大段引用 </blockquote><br/><hr/>&nbsp;<address>地址信息 </address> <code>代碼內(nèi)容 </code> <pre>多行代碼 </pre>引用的文本內(nèi)容，會(huì)自動(dòng)加上雙引號 引用大段的文本內(nèi)容，文本前后會(huì)加上縮進(jìn) 換行水平橫線 空格地址信息，通常用于公司地址顯示 代碼，通常是一行內(nèi) 多行代碼 ,你需要在網(wǎng)頁中預(yù)顯

4、示格式時(shí)都可以使用<ul><li> 信息 1</li><li>信息 2</li>ul-li 列表信息，以圓點(diǎn)顯示</ul><ol><li>信息 </li><li>信息 </li>ol-li 列表信息，帶上序號</ol><div>排版內(nèi)容<div>排版中使用，相當(dāng)于一個(gè)容器確定邏輯部分：邏輯部分是頁面上相互關(guān)聯(lián)的一組元素，如欄目版塊<div id="版塊名稱">,</div> <t

5、able>表格內(nèi)容 </table> <caption> 標(biāo)題文本 </caption> <tbody>.</tbody>載一點(diǎn)顯示一點(diǎn)）<tr> 表格一行 </tr><td>表格單元格</td><th>表格表頭</th>div 帶上 ID 號，使之更清晰 創(chuàng)建表格為表格添加標(biāo)題文本若加此標(biāo)簽后，表格會(huì)一次性顯示出來（而非網(wǎng)頁加表格中的一行表格中的一個(gè)單元格表格頭部的一個(gè)單元格，表格表頭<table summary=" 表格摘要 "

6、>.</table>為表格添加摘要，但不會(huì)被瀏覽器顯示出<a href=" 目標(biāo)網(wǎng)址 " title=" 鼠標(biāo)滑過時(shí)顯示文本 ">鏈接顯示文本 </a> 鏈接標(biāo)簽 target="_blank" 網(wǎng)頁將在新窗口中打開 mailto: 網(wǎng)頁中郵件地址，可帶多個(gè)參數(shù) mailto: 郵箱地址 cc=抄送地址bcc=密抄地址;多個(gè)郵箱地址subject=郵件主題 body= 郵件內(nèi)容完整舉例 : <a href="mailto:yy ?cc=aa &bcc=bb &s

7、ubject= 主題 &body= 郵件內(nèi)容 ">發(fā)送郵件 </a><img scr="圖片地址” alt="下載失敗時(shí)替換文本 "title="提示文本” />5. 與用戶交互： 語法：<form method=" 傳送方式 " action=" 服務(wù)器文件 "></form>舉例：<form method="post" action="save.php"> <label for=&q

8、uot;username"> 用戶名 :</label> <input type="text" name="username" /> <label for="pass"> 密碼 :</label> <input type="password" name="pass" /></form> 表單控件：文本框、文本域、按鈕、單選框、復(fù)選框 method:post/get1. 文本框（文本 /密碼）<form&

9、gt;<input type="text/password" name=" 名稱" value=" 文本" /> </form> type :有"text ”和"password”兩種類型name :為文本框命名，方便后臺ASP和PHP使用value :文本框默認(rèn)值，一般起提示作用2. 文本域（多行文本）<textarea rows=" 行數(shù) " cols=" 列數(shù) ">默認(rèn)文本內(nèi)容 </textarea> cols :多行輸入

10、域的列數(shù) rows :多行輸入域的行數(shù)3. 單選框、復(fù)選框<input type="radio/checkbox"value=" 值 "name=" 名 稱 "checked="checked"/>type: radio 單選， checkbox 復(fù)選框value :提交數(shù)據(jù)到服務(wù)器的值，后臺PHP處理使用name :為控件命名，以備后臺程序ASP和PHP使用checked: checked="checked" 時(shí)，此選項(xiàng)默認(rèn)被選中 注意:同一組的單選按鈕， name 取值一定要一致

11、4. 下拉列表框<form action="save.php" method="post" ><label> 愛好:</label><select multiple="multiple"><label for="book> 看書 </label><option value=" 看書 " id="book"> 看書 </option><option value=" 旅游 &qu

12、ot;> 旅游 </option><option value=" 運(yùn)動(dòng) "> 運(yùn)動(dòng) </option><option value=" 購物 "> 購物 </option></select><input type="submit" value=" 提交 "><input type="reset" value=" 重置 " /></form>value ：向服務(wù)器提交

13、值selected ：設(shè)置 selected="selected" 時(shí)，默認(rèn)選中multiple ： multiple="multiple" 時(shí)，可以使用 Ctrl 多選，但很丑label：為了改進(jìn)鼠標(biāo)易用性，鼠標(biāo)點(diǎn)擊文本時(shí)，選擇上 Radio6. 認(rèn)識CSS樣式：CSS層疊樣式表 (Cascading Style Sheet®，主要用于定義 HTML內(nèi)容在瀏覽器內(nèi)的顯 示樣式語法：選擇符 屬性 : 值 舉例：p color: blue選擇符：又稱選擇器，指明要應(yīng)用樣式規(guī)則的元素，如<html>、<body>、<h

14、1>、<p>、<img>.聲明：指的是冒號” :“多條聲明：使用分號” ;“隔開，最好每行都加上分號注釋：CSS使用/*/，HTML注釋則使用<!-內(nèi)容->7. CSS樣式分類：1. 內(nèi)聯(lián)式<p style="color:red;font-size:12px"> 這里文字是紅色。 </p>2. 嵌入式較通用的一類，CSS樣式放置在<style>標(biāo)簽中，而<style>通常要放置在<head>內(nèi) <style type="text/css">s

15、pancolor:blue;font-size:12px;</style>3. 外部式把CSS代碼寫到一個(gè)單獨(dú)的外部文件中，以.css擴(kuò)展名結(jié)尾，在<head>內(nèi)使用<li nk>標(biāo)簽引入，如：<link href="base.css" rel="stylesheet" type="text/css" /> href: .css文件路徑rel 和 type: rel="stylesheet" type="text/css" 是固定寫法，不能改 三種

16、方法的優(yōu)先級：內(nèi)聯(lián)式 > 嵌入式 > 外部式 就近原則，嵌入式 >外部式有一個(gè)前提：嵌入式css 樣式的位置一定在外部式的后面以上規(guī)則適用于相同權(quán)值的情況8. CSS 類選擇器語法：類選器名稱css樣式代碼;舉例：<style type="text/css">.stress color:red;</style> 注意：前邊的小圓點(diǎn)是必須要有的 使用：<span class="stress">膽小如鼠 </span>9. CSS ID選擇器語法：#ID選擇器名稱css樣式代碼舉例：#setG

17、reencolor:green;<span id="setGreen"> 膽小如鼠 </span>區(qū)別：起始于 '.' 與 '#'調(diào)用時(shí) class= 與 id=ID選擇器只能在文檔中使用一次，類選擇器則可以使用多次 一個(gè)元素可以使用多個(gè)類選擇器同時(shí)設(shè)置多個(gè)樣式，而 ID 選擇器是不可以的， 女口 <span class="stress bigsize"W年級 </span>10. CSS 子選擇器還有一個(gè)比較有用的選擇器子選擇器，即大于符號 (>),用于選擇指定標(biāo)簽元素的第

18、一 代子元素。舉例：.food>liborder:1px solid red;若大于符號換成空格 ( ),用于選擇指定標(biāo)簽元素的所有后輩元素，舉例：.first spanborder:1px solid red;11. CSS 通用選擇器通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)( * )號指定，它的作用是匹配 html 中所有標(biāo)簽元素：* color: red;此時(shí)，所有元素的字體都為紅色12. CSS 偽類選擇符偽類選擇符，它允許給 html 不存在的標(biāo)簽(標(biāo)簽的某種狀態(tài))設(shè)置樣式，比如說我 們給 html 中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色a:hovercolor:red

19、;此時(shí)，把鼠標(biāo)放置到元素上邊，顏色就會(huì)切換為紅色13. CSS 分組選擇符多個(gè)標(biāo)簽使用逗號隔開：h1,spancolor:red;相當(dāng)于：h1color:red;spancolor:red;14. CSS 繼承CSS的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規(guī)則，它允許樣式 不僅應(yīng)用于某個(gè)特定 html 標(biāo)簽元素，而且應(yīng)用于其后代如：pcolor:red; /* 可被 span 繼承 */pborder:1px solid red; /* 此時(shí)， span 將不繼承，邊框顯示紅色 */15. CSS 特殊性（權(quán)值） 權(quán)值： pcolor:red; /* 權(quán)值為 1*/ p span

20、color:green; /* 權(quán)值為 1+1=2*/ .warningcolor:white; /* 權(quán)值為 10*/ p span.warningcolor:purple; /* 權(quán)值為 1+1+10=12*/ #footer .note pcolor:yellow; /* 權(quán)值為 100+10+1=111*/ 注意：還有一個(gè)權(quán)值比較特殊 -繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低。層疊： 相同權(quán)值時(shí)，最后一個(gè)將被應(yīng)用相同權(quán)值時(shí)，使用 !important 將得到最高權(quán)重，如 pcolor:red!important; 樣式優(yōu)先級為：瀏覽器默認(rèn)的樣式 &l

21、t; 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式， 使用 !important 優(yōu)先級比 用戶自己設(shè)定 還高16. CSS 文字排版1. 字體 bodyfont-family:" 宋體 " bodyfont-family:"Microsoft Yahei"2. 字號，顏色 bodyfont-size:12px;color:#6663. 粗體p spanfont-weight:bold; afont-weight:bold;4. 斜體 p afont-style:italic; pfont-style:italic;5. 下劃線 p atext-deco

22、ration:underline;6. 刪除線 .oldPricetext-decoration:line-through;7. 縮進(jìn) ptext-indent:2em; /*2em 表示兩倍文字大小 */8. 行間距 pline-height:1.5em;9. 字間距、字母間距 h1letter-spacing:50px;word-spacing:50px; /* 分別是字母、單詞間距 */19.對齊 h1text-align:center; /*left 、 right 和 center*/17. CSS 元素分類 塊狀元素：div、p、h1.h6、ol、ul、dl、table、 addr

23、ess、blockquote 、 form內(nèi)聯(lián)元素： a、span、br、i、em、strong、label、q、var、cite、code 內(nèi)聯(lián)塊狀元素：img、input1. 塊狀元素：1、每個(gè)塊級元素都從新的一行開始， 并且其后的元素也另起一行。 （真霸道，一 個(gè)塊級元素獨(dú)占一行）2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。3、元素寬度在不設(shè)置的情況下， 是它本身父容器的 100%（和父元素的寬度一致） ， 除非設(shè)定一個(gè)寬度。注意： adisplay:block; /* 可以把內(nèi)聯(lián)元素 a 轉(zhuǎn)換為 塊狀元素 */2. 內(nèi)聯(lián)元素：1、和其他元素都在一行上；2、元素的高度、寬度、行高及

24、頂部和底部邊距不可設(shè)置；3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。注意： display:inline 可以轉(zhuǎn)換成內(nèi)聯(lián)元素3. 內(nèi)聯(lián)塊狀元素：1、和其他元素都在一行上；2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。 注意： display:inline-block 可以轉(zhuǎn)換成內(nèi)聯(lián)塊狀18. CSS 盒模型1. 邊框div border:2px solid red;相當(dāng)于：divborder-width:2px; border-style:solid;border-color:red;border-style: dashed （虛線） | dotted （點(diǎn)線） | solid

25、（實(shí)線） border-color:#888; / 前面的井號不要忘掉。border-width: 有 thin | medium | thick （但不是很常用） ，最常還是用象素（ px）2. 上下左右邊框：divborder-bottom:1px solid red; /*top 、 bottom 、 left 和 right*/3. 高度和寬度 div width:200px; /* 寬度 */ height:30px; /* 高度 */ padding:20px; /* 元素到邊框的距離，又名為“填充” */ border:1px solid red;margin:10px; /*

26、兩盒子距離，又名為“邊界” */ 19. CSS 布局模型 元素有三種布局模型：1、流動(dòng)模型（ Flow） 網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容的 第一點(diǎn)， 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布， 因?yàn)?在默認(rèn)狀態(tài)下，塊狀元素的寬度都為 100%第二點(diǎn)， 在流動(dòng)模型下， 內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯 示2、浮動(dòng)模型 （Float） 現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示 任何元素在默認(rèn)情況下是不能浮動(dòng)的，但可以用CSS定義為浮動(dòng)，如div、p'table、img 等元素都可以被定義為浮動(dòng)舉例：#div1float:lef

27、t;#div2float:right;3、層模型（ Layer） 就像是圖像軟件 PhotoShop 中非常流行的圖層編輯功能一樣， 每個(gè)圖層能夠精確 定位操作，但在網(wǎng)頁設(shè)計(jì)領(lǐng)域，由于網(wǎng)頁大小的活動(dòng)性，層布局沒能受到熱捧層模型有三種形式：1、絕對定位 （position: absolute） 需要設(shè)置 position:absolute（ 表示絕對定位 ），這條語句的作用將元素從文 檔流中拖出來然后使用 left 、 right 、 top 、 bottom 屬性相對于其最接近的一個(gè)具有定 位屬性的父包含塊進(jìn)行絕對定位如果不存在這樣的包含塊，則相對于 body 元素，即相對于瀏覽器窗口 舉例：

28、 div xxxx:yyyy;position:absolute;right:100px; top:20px;2、相對定位 （position: relative） position:relative （表示相對定位） ，它通過 left、 right 、top、 bottom 屬 性確定元素在正常文檔流中的偏移位置相對定位完成的過程是首先按 static（float） 方式生成一個(gè)元素 （并且元素 像層一樣浮動(dòng)了起來 ），然后相對于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left 、 right 、 top 、bottom 屬性確定，偏移前的位置保留不動(dòng)舉例：#div1 width:200px;

29、height:200px; border:2px red solid; position:relative; left:100px; top:50px;<div id="div1"></div>3、固定定位 （position: fixed） 如彈窗廣告 fixed：表示固定定位，與absolute定位類型類似，但它的相對移動(dòng)的坐 標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化， 除非你在屏幕中移動(dòng)瀏覽器 窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響舉例：

30、#div1 width:200px; height:200px;border:2px red solid;position:fixed;left:100px; top:50px;Relative 與 Absolute 組合使用：1、參照定位的元素必須是相對定位元素的前輩元素 <div id="box1"><!- 參照定位的元素（前輩） -><div id="box2"> 相對參照元素進(jìn)行定位 </div><!- 相對定位元素 -> </div>2、參照定位的元素必須加入 positi

31、on:relative; #box1width:200px; height:200px; position:relative;3、定位元素加入 position:absolute ，便可以使用 top 、bottom 、left 、right 來進(jìn)行偏移定位了#box2 position:absolute; top:20px; left:30px;20. 代碼簡寫：1. 盒模型： margin:10px; 相當(dāng)于 margin:10px 10px 10px 10px; （上右下左順序） margin:10px 40px; 相當(dāng)于 margin:10px 40px 10px 40px; （上右

32、下左順序） padding, border 和 margin 是一 致的；2. 顏色值： pcolor:#000000; 相當(dāng)于 pcolor: #000; pcolor: #336699; 相當(dāng)于 pcolor: #369;3. 字體： body font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:" 宋體 ",sans-serif; 編寫為： bodyfont:italic small-caps bold

33、12px/1.5em "宋體 ",sans-serif;1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的 屬性未指定將自動(dòng)使用默認(rèn)值。2、在縮寫時(shí) font-size 與 line-height 中間要加入“ / ”斜扛。21. 長度值CSS規(guī)范中假設(shè)1. 像素 像素為什么是相對單位呢？因?yàn)橄袼刂傅氖秋@示器上的小點(diǎn)（ “ 90 像素 =1 英寸”）2. em假定 font-size 設(shè)定 14px，那么 1em=14px百分比 pfont-size:12px;line-height:130%一， html+css 基礎(chǔ)1- 1H

34、tml和CSS的關(guān)系學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS JavaScript語言。下面我們就來了解下這三門技術(shù)都是用來實(shí)現(xiàn)什么的：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)新聞（新聞圖片）的輪換?？梢赃@么理解，有動(dòng)畫的，有交 互的一般都是用 Java

35、Script來實(shí)現(xiàn)的。1- 21， HTML標(biāo)簽不區(qū)分大小寫，<h1>和<H1>是一樣的，但建議小寫，因?yàn)榇蟛糠殖绦騿T都 以小寫為準(zhǔn)。1- 3一個(gè)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)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部

36、元素有 <title> 、 <script>、 <style>、<link>、<meta>等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會(huì)有詳細(xì)介紹。3. 在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來。1- 41 ，下面這些標(biāo)簽可用在 head 部分：<head><title>.</title><meta><link&

37、gt;<style>.</style><script>.</script></head>2，代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的 讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼。語法：<!- 注釋文字 ->3，CSS注釋代碼就像在Html的注釋一樣，在 CSS中也有注釋語句：用/*注釋語句*/來標(biāo)明（Html中使用 <!- 注釋語句 ->）1- 51，語義化：說的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下我可以使用這個(gè)標(biāo)簽 才合理） 比如， 網(wǎng)頁上的文章的標(biāo)題就得用標(biāo)題標(biāo)簽

38、， 網(wǎng)頁上的各個(gè)欄目的欄目名稱也可 以使用標(biāo)題標(biāo)簽。2，語義化的作用1 ） . 更容易被搜索引擎收錄。2）. 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。二，認(rèn)識標(biāo)簽（第一部分）2- 1如果想在網(wǎng)頁上顯示文章，這時(shí)就需要<p>標(biāo)簽了，把文章的段落放到 <p>標(biāo)簽中。語法：<p>段落文本</p>2- 2<hx >標(biāo)簽來制作文章的標(biāo)題。標(biāo)題標(biāo)簽一共有 6 個(gè)， h1、h2、h3、h4、h5、 h6 分別為一級標(biāo)題、二級標(biāo)題、三級標(biāo)題、四級標(biāo)題、五級標(biāo)題、六級標(biāo)題。并且依據(jù)重要性遞減。<h1>是最高的等級。語法：<hx>標(biāo)題文本

39、</hx> （x為1-6）文章的標(biāo)題前面已經(jīng)說過了， 可以使用標(biāo)題標(biāo)簽， 另外網(wǎng)頁上的各個(gè)欄目的標(biāo)題也可使用 它們2- 3有了段落又有了標(biāo)題，現(xiàn)在如果想在一段話中特別強(qiáng)調(diào)某幾個(gè)文字，這時(shí)候就可以用到<em> 或 <str ong> 標(biāo)簽。但兩者在強(qiáng)調(diào)的語氣上有區(qū)別 :<em> 表示強(qiáng)調(diào)， <strong> 表示更強(qiáng)烈的強(qiáng)調(diào)。并且在瀏 覽器中 <em> 默認(rèn)用斜體表示， <strong> 用粗體表示。兩個(gè)標(biāo)簽相比，目前國內(nèi)前端程序 員更喜歡使用<strong>表示強(qiáng)調(diào)2- 4<em>、&l

40、t;strong>、<span>的區(qū)另U：1. <em>和<stro ng>標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用，它們的語義是強(qiáng)調(diào)。2. <spa n>標(biāo)簽是沒有語義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的，把一段話圈起來， 然后用css設(shè)置樣式。2- 5q 標(biāo)簽，短文本引用比如在你的網(wǎng)頁的文章里想引用某個(gè)作家的一句詩，這樣會(huì)使你的文章更加出彩，那么<q>標(biāo)簽是你所需要的。語法：<q>引用文本</q>1，注意要引用的文本不用加雙引號，瀏覽器會(huì)對q 標(biāo)簽自動(dòng)添加雙引號。2,注意這里用<q>標(biāo)簽的真

41、正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了） ，而是它的語義：引用別人的話blockquote 標(biāo)簽，長文本引用<blockquote> 的作用也是引用別人的文本。但它是對長文本的引用<q>標(biāo)簽是對簡短文本的引用，比如說引用一句話就用到<q>標(biāo)簽。語法 :<blockquote> 引用文本 </blockquote>瀏覽器對 <blockquote> 標(biāo)簽的解析是縮進(jìn)樣式2-6換行標(biāo)簽 <br/><br/> 標(biāo)簽作用相當(dāng)于 word 文檔中的回車。分割線標(biāo)簽 <

42、;hr/><hr/> 標(biāo)簽和 <br/> 標(biāo)簽一樣也是一個(gè)空標(biāo)簽，所以只有一個(gè)開始標(biāo)簽，沒有結(jié)束標(biāo)簽。<hr/> 標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式 不美觀，沒有關(guān)系，這些外在樣式在我們以后學(xué)習(xí)了 css 樣式表之后，都可以對其修改。2-7html 特殊字符空格： &nbsp; （; 分號必不可少 ）2-8address 標(biāo)簽，為網(wǎng)頁加入地址信息語法：<address>地址信息 </address>如：<address>北京市西城區(qū)德外大街10號</address&

43、gt;在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當(dāng)然可以，可以在后面的課程中使用css樣式來修改它<address>標(biāo)簽的默認(rèn)樣式2-9在介紹語言技術(shù)的網(wǎng)站中， 必免不了在網(wǎng)頁中顯示一些計(jì)算機(jī)專業(yè)的編程代碼， 當(dāng)代碼為 一行代碼時(shí)，你就可以使用<code>標(biāo)簽了，如下面例子：<code>var i=i+300;</code>語法：<code>代碼語言 </code>注意：在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽，如果是多行代碼，可以使用<pre>標(biāo)簽。<pre> 標(biāo)簽的

44、主要作用 :預(yù)格式化的文本。被包圍在pre 元素中的文本通常會(huì)保留空格和換行符。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入 &nbsp;。注意： <pre> 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的， 在你需要在網(wǎng)頁中預(yù)顯示格式時(shí) 都可以使用它，只是<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。三，認(rèn)識標(biāo)簽（第二部分）3- 11，無序列表ul-li 是沒有前后順序的信息列表。語法：<ul><li>信息 </li><li>信息 </li></ul>舉例：<u

45、l><li>精彩少年</li><li>美麗突然出現(xiàn)</li><li>觸動(dòng)心靈的旋律</li></ul> ul-li 在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng) li 前都自帶一個(gè)圓點(diǎn)2,有序列表語法：<ol><li> 信息 </li><li> 信息 </li></ol>舉例：下面是一個(gè)熱點(diǎn)課程下載排行榜：<ol><li>前端開發(fā)面試心法</li><li>零基礎(chǔ)學(xué)習(xí)html</li>&

46、lt;li>JavaScript 全攻略 </li></ol><ol>在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>前都自帶一個(gè)序號，序號默認(rèn)從1開3- 2<div>容器標(biāo)簽在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)<div>標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。語法：<div> </div>確定邏輯部分：什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。 如網(wǎng)頁中的獨(dú)立的欄目版塊， 就是一 個(gè)典型的邏輯部分。 如下圖所示： 圖中用紅色邊框標(biāo)出的部分就是一個(gè)

47、邏輯部分， 就可以 使用<div>標(biāo)簽作為容器注釋： <div> 是一個(gè)塊級元素， 也就是說， 瀏覽器通常會(huì)在 div 元素前后放置一個(gè)換行符。3- 3創(chuàng)建表格的五個(gè)元素：table 、 tbody 、tr、th、td1、 <table>, </table> :整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。2、<tbody>, </tbody> ：當(dāng)表格內(nèi)容非常多時(shí)，表格會(huì)下載一點(diǎn)顯示一點(diǎn)，但如果加上 <tbody> 標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示。如右側(cè)

48、代碼編輯器中的 代碼。（這個(gè)標(biāo)簽基本上不怎么用了）3、<tr>, </tr> :表格的一行，所以有幾對 tr 表格就有幾行。4、 <td>, </td> :表格的一個(gè)單元格，一行中包含幾對<td>.<td/> ，說明一行中就有幾列。5、<th>, </th> :表格的頭部的一個(gè)單元格，表格表頭。6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。 表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要<table summary=" 本表格記錄 2012 年到 2013 年庫存記錄，記錄

49、包括 U 盤和耳機(jī)庫存量 "> <caption>2012 年到 2013 年庫存記錄 </caption>3- 41，使用<a>標(biāo)簽，鏈接到別一個(gè)頁面使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁制作中可以說是無處不在，只要有鏈接的地方，就 會(huì)有這個(gè)標(biāo)簽。語法:<a href= ”目標(biāo)網(wǎng)址” >鏈接顯示的文本</a>例如:<a href = "">click here!</a>上面例子作用是單擊click here!文字，網(wǎng)頁鏈接到 這個(gè)網(wǎng)頁。3- 5認(rèn)識<img&

50、gt;標(biāo)簽，為網(wǎng)頁插入圖片在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標(biāo)簽來插入圖片。語法:<img src="圖片地址” alt="下載失敗時(shí)的替換文本 "title ="提示文本">舉例:<img src = "myimage.gif" alt = "My Image" title = "My Image" />講解：1、src：標(biāo)識圖像的位置；2、 alt ：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到

51、該屬性指定的 文本；3、title ：提供在圖像可見時(shí)對圖像的描述 （鼠標(biāo)滑過圖片時(shí)顯示的文本 ）；4、圖像可以是 GIF, PNG, JPEG格式的圖像文件。四，表單標(biāo)簽（與用戶進(jìn)行交互）4- 1表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端, 這樣服務(wù)器端程序就可以處理表單傳過 來的數(shù)據(jù)。語法：<form method=" 傳送方式 " action=" 服務(wù)器文件 ">講解：1. <form> ： <form> 標(biāo)簽是成對出現(xiàn)的,以 <form> 開始,以 </form> 結(jié)束。2. acti

52、on :瀏覽者輸入的數(shù)據(jù)被傳送到的地方，比如一個(gè)PHP頁面（save.php）。3. method ： 數(shù)據(jù)傳送的方式（ get/post）。4- 2<input> 輸入框文本輸入框、密碼輸入框當(dāng)用戶要在表單中鍵入字母、 數(shù)字等內(nèi)容時(shí), 就會(huì)用到文本輸入框。 文本框也可以轉(zhuǎn)化為 密碼輸入框。語法：<form><input type="text/password" name=" 名稱"value="文本"/></form>1 、 type ： 當(dāng) type="text"

53、 時(shí),輸入框?yàn)槲谋据斎肟?當(dāng) type="password" 時(shí) , 輸入框?yàn)槊艽a輸入框。2、name:為文本框命名，以備后臺程序 ASP、PHP使用。3、 value:為文本輸入框設(shè)置默認(rèn)值。（一般起到提示作用）4- 3文本域，支持多行文本輸入當(dāng)用戶需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。語法:vtextarea rows="行數(shù) ” cols="列數(shù)">文本 </textarea>1、<textarea> 標(biāo)簽是成對出現(xiàn)的，以 <textarea> 開始，以 </textarea>

54、; 結(jié)束。2、cols :多行輸入域的列數(shù)。3、rows :多行輸入域的行數(shù)。4- 4單選框，復(fù)選框語法:<in puttype="radio/checkbox"value="值"n ame="名稱"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

55、使用4、checked:當(dāng)設(shè)置 checked="checked"時(shí)，該選項(xiàng)被默認(rèn)選中注意:同一組的單選按鈕， name 取值一定要一致，這樣同一組的單選按鈕才可以起到單 選的作用。4- 5下拉列表框，節(jié)省空間 下拉列表在網(wǎng)頁中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁空間。既可以單選、又可以多選。 語法： <option value=" 提交值 "> 選項(xiàng) </option> 提交值是向服務(wù)器提交的值，選項(xiàng)是顯示的值。 <form action="save.php" method="post"

56、 ><label> 愛好:</label><select><option value=" 看書 ">看書 </option><option value=" 旅游 " selected="selected"> 旅游 </option><option value=" 運(yùn)動(dòng) ">運(yùn)動(dòng) </option><option value=" 購物 ">購物 </option>

57、;</select></form>4-6 使用下拉列表框進(jìn)行多選下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置 multiple="multiple"屬性,就可以實(shí)現(xiàn)多選功能，進(jìn)行多選時(shí)按下 Ctrl 鍵同時(shí)進(jìn)行單擊，可以選擇多個(gè)選項(xiàng)。如下代碼：<form action="save.php" method="post" ><label> 愛好:</label><select multiple="multiple"><

58、option value=" 看書 ">看書 </option><option value=" 旅游 ">旅游 </option> <option value=" 運(yùn)動(dòng) ">運(yùn)動(dòng) </option><option value=" 購物 "> 購物 </option> </select></form>4-7在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。1，提交按鈕：當(dāng)用戶需要提交表單信息到服務(wù)器時(shí)，

59、需要用到提交按鈕。語法：<in put type="submit" value="提交">type ：只有當(dāng) type 值設(shè)置為 submit 時(shí)，按鈕才有提交作用va l ue ：按鈕上顯示的文字2，重置按鈕，重置表單信息當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)， 比如用戶輸入 “用戶名” 后，發(fā)現(xiàn)書寫有誤， 可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。語法：<input type="reset" value=" 重置 ">type

60、 ：只有當(dāng) type 值設(shè)置為 reset 時(shí)，按鈕才有重置作用value :按鈕上顯示的文字五，css樣式5- 1認(rèn)識 css 樣式CSS全稱為“層疊樣式表(Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。如下列代碼:pfont-size:12px;color:red;font-weight:bold;使用CSS樣式的一個(gè)好處是通過定義某個(gè)樣式，可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號或者顏色等。5- 2CSS代碼語法css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成選擇符 屬性 :值pcolor:re

61、d;選擇符：又稱選擇器， 指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素， 如本例中是網(wǎng)頁中所有的段 （p） 的文字將變成藍(lán)色，而其他的元素（如 01）不會(huì)受到影響。聲明：在英文大括號“訂”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號“;”分隔，如下所示：pf0nt-size:12px;c0l0r:red;5- 3從 CSS 樣式代碼插入的形式來看基本可以分為以下3 種：內(nèi)聯(lián)式、嵌入式和外部式三種1, 內(nèi)聯(lián)式 css 樣式就是把css代碼直接寫在現(xiàn)有的 HTML標(biāo)簽中，如下面代碼：<p style="c0l0r:red"> 這里文字是紅色。

62、 </p>css樣式代碼要寫在 style=""雙引號中，如果有多條 css樣式代碼設(shè)置可以寫在一起，中間 用分號隔開。如下代碼：<p style="c0l0r:red;f0nt-size:12px"> 這里文字是紅色。 </p>2, 嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間。如下面代碼實(shí)現(xiàn)把三個(gè)<span>標(biāo)簽中的文字設(shè)置為紅色：<style type="text/css

63、">spanc0l0r:red;</style>嵌入式 css 樣式必須寫在 <style></style> 之間，并且一般情況下嵌入式 css 樣式寫在 <head></head> 之間。3,外部式 css 樣式寫在單獨(dú)的一個(gè)文件中外部式css樣式（也可稱為外聯(lián)式）就是把css代碼寫一個(gè)單獨(dú)的外部文件中， 這個(gè)css樣式 文件以“ .css"為擴(kuò)展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式 文件鏈接到 HTML 文件內(nèi)，如下面代碼：

64、<link href="base.css" rel="stylesheet" type="text/css" />注意：1、 css樣式文件名稱以有意義的英文字母命名，如main.css。2、rel="stylesheet" type="text/css" 是固定寫法不可修改。3、<link>標(biāo)簽位置一般寫在 <head>標(biāo)簽之內(nèi)。六，CSS選擇器每一條css樣式定義由兩部分組成，形式如下：選擇器 樣式 ;在之前的部分就是“選擇器"，“選擇器&quo

65、t;指明了 中的“樣式"的作用對象，也就是“樣式"作用于網(wǎng)頁中的哪些元素6- 1 ，標(biāo)簽選擇器標(biāo)簽選擇器其實(shí)就是 html 代碼中的標(biāo)簽。如右側(cè)代碼編輯器中的 <html>、 <body>、 <h1>、 <p>、<img>。例如下面代碼：pfont-size:12px;line-height:1.6em;上面的css樣式代碼的作用：為 p標(biāo)簽設(shè)置12px字號，行間距設(shè)置 1.6em的樣式。6- 2，類選擇器類選擇器在css樣式編碼中是最常用到的，如右側(cè)代碼編輯器中的代碼：可以實(shí)現(xiàn)為“膽小如鼠"、“勇氣&q

66、uot;字體設(shè)置為紅色。語法：.類選器名稱 css 樣式代碼 ;1、英文圓點(diǎn)開頭2、其中類選器名稱可以任意起名（但不要起中文噢）使用方法：第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來，如下：<span>膽小如鼠 </span>第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個(gè)類，如下：<span class="stress">膽小如鼠 </span>第三步：設(shè)置類選器 css樣式，如下：.stresscolor:red;/* 類前面要加入一個(gè)英文圓點(diǎn) */6- 3， ID 選擇器在很多方面， ID 選擇器都類似于類選擇符，但也有一些重要的區(qū)別

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(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

提交評論