《ASP NET》課件第二章 Html、javascript和css基礎(chǔ)_第1頁
《ASP NET》課件第二章 Html、javascript和css基礎(chǔ)_第2頁
《ASP NET》課件第二章 Html、javascript和css基礎(chǔ)_第3頁
《ASP NET》課件第二章 Html、javascript和css基礎(chǔ)_第4頁
《ASP NET》課件第二章 Html、javascript和css基礎(chǔ)_第5頁
已閱讀5頁，還剩43頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

本章知識想把第一章所述的系統(tǒng)自行開發(fā)出來，還是有不少需要學(xué)習(xí)和提高的地方。下面，讓我們首先從最基礎(chǔ)的內(nèi)容開始學(xué)習(xí)。第一個項目就是Html，這是開發(fā)Web程序的最基礎(chǔ)的知識其次是javascript，這是界面客戶端交互性的基石再次是css，這是讓界面美觀有序的基本技能2.1Html基礎(chǔ)2.1.1概述2.1.2常見的標(biāo)簽介紹2.1.3網(wǎng)頁布局2.1.4表單2.1.1Html概述HTML是超文本標(biāo)記語言(HyperTextMarkupLanguage)的英文縮寫，它不是編程語言，只是一種標(biāo)記語言。HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。HTML標(biāo)簽(HTMLtag)是由尖括號包圍的關(guān)鍵詞，比如<html>，大部分HTM標(biāo)簽是成對出現(xiàn)的，比如<p>和</p>，標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽，開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。也有少部分是單個標(biāo)簽，如換行符<br/>。HTML文檔就是通常所說的網(wǎng)頁，它包含HTML標(biāo)簽和內(nèi)容。網(wǎng)頁瀏覽器（如IE、360瀏覽器等）的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示。HTML標(biāo)簽不會顯示在瀏覽器中，只在后臺起到解釋作用。下面是一個簡單的案例（大家可以把它復(fù)制到一個文本文件中，并將該文本文件的后綴從txt修改為htm。然后通過IE瀏覽器打開查看效果，后面的案例也可以都這樣操作）。2.1.1Html概述<html><head><ttitle>我的第一個網(wǎng)頁</title></head><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html>2.1.2常見標(biāo)簽<html>元素，網(wǎng)頁全局框架<html><body><p>Thisismyfirstparagraph.</p></body></html>2.1.2常見標(biāo)簽<body>元素，網(wǎng)頁的主體<body><p>Thisismyfirstparagraph.</p></body>2.1.2常見標(biāo)簽<head>元素，網(wǎng)頁的頭部<head>元素是所有頭部元素的容器。<head>內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。在html文檔中，<head>與<body>平級，二者都是<html>的下級。以下標(biāo)簽都可以添加到head部分：<title>、<base>、<link>、<meta>、<script>以及<style>。<html><head></head><body><p>Thisismyfirstparagraph.</p></body></html>2.1.2常見標(biāo)簽<title>元素，網(wǎng)頁的標(biāo)題<title>標(biāo)簽定義文檔的標(biāo)題。title元素在所有HTML/XHTML文檔中都是必需的。它能夠：定義瀏覽器工具欄中的標(biāo)題；提供頁面被添加到收藏夾時顯示的標(biāo)題；顯示在搜索引擎結(jié)果中的頁面標(biāo)題。一個簡化的HTML文檔如下：<html><head><title>Titleofthedocument</title></head><body>Thecontentofthedocument......</body></html>2.1.2常見標(biāo)簽<p>元素，引入段落<p>Thisismyfirstparagraph.</p>這個<p>元素定義了HTML文檔中的一個段落，擁有一個開始標(biāo)簽<p>，以及一個結(jié)束標(biāo)簽</p>。元素內(nèi)容是：Thisismyfirstparagraph。2.1.2常見標(biāo)簽<h1>-<h6>元素，引入標(biāo)題HTML標(biāo)題(Heading)是通過<h1>-<h6>等標(biāo)簽進行定義的。實例如下：<h1>Thisisaheading</h1><h2>Thisisaheading</h2><h3>Thisisaheading</h3>2.1.2常見標(biāo)簽<a>元素，引入超級鏈接HTML鏈接是通過<a>標(biāo)簽進行定義的。實例如下：<ahref="">百度搜索</a>2.1.2常見標(biāo)簽<img>元素：引入圖像HTML圖像是通過<img>標(biāo)簽進行定義的。實例如下：<imgsrc="test.jpg"width="104"height="142"/>注意：此處需要在網(wǎng)頁的同一個目錄下準(zhǔn)備一張名為“test.jpg”的圖像2.1.2常見標(biāo)簽<table>元素：引入表格表格由<table>標(biāo)簽來定義。每個表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。字母td指表格數(shù)據(jù)（tabledata），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。<tableborder="1"><tr><td>row1,cell1</td><td>row1,cell2</td></tr><tr><td>row2,cell1</td><td>row2,cell2</td></tr></table>2.1.2常見標(biāo)簽如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時這很有用，但是大多數(shù)時候，我們希望顯示邊框。使用邊框?qū)傩詁order來顯示一個帶有邊框的表格：<tableborder="1"><tr><td>Row1,cell1</td><td>Row1,cell2</td></tr></table>2.1.2常見標(biāo)簽表格的表頭使用<th>標(biāo)簽進行定義。大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本：<html><head></head><body><tableborder="1"><tr><th>Heading</th><th>AnotherHeading</th></tr><tr><td>row1,cell1</td><td>row1,cell2</td></tr><tr><td>row2,cell1</td><td>row2,cell2</td></tr></table></body></html>2.1.2常見標(biāo)簽<ul>元素，引入無序列表無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標(biāo)記。無序列表始于<ul>標(biāo)簽。每個列表項始于<li>。<ul><li>Coffee</li><li>Milk</li></ul>2.1.2常見標(biāo)簽<ol>元素，引入有序列表同樣，有序列表也是一列項目，列表項目使用數(shù)字進行標(biāo)記。有序列表始于<ol>標(biāo)簽。每個列表項始于<li>標(biāo)簽。<ol><li>Coffee</li><li>Milk</li></ol>2.1.2常見標(biāo)簽<dl>元素，引入自定義列表自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>2.1.3網(wǎng)頁布局div元素是用于分組HTML元素的塊級元素。下面的例子使用五個div元素來創(chuàng)建多列布局：案例

網(wǎng)頁布局示例演示，并講解2.1.3網(wǎng)頁布局使用HTML<table>標(biāo)簽是創(chuàng)建布局的一種簡單的方式?？梢允褂?lt;div>或者<table>元素來創(chuàng)建多列。CSS用于對元素進行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。下面的例子使用三行兩列的表格-第一和最后一行使用colspan屬性來橫跨兩列：案例

表格布局示例，講解并演示2.1.4表單文本域（TextFields）當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域。<form>Firstname:<inputtype="text"name="firstname"/><br/>Lastname:<inputtype="text"name="lastname"/></form>2.1.4表單單選按鈕（RadioButtons）當(dāng)用戶從若干給定的的選擇中選取其一時，就會用到單選框。<form><inputtype="radio"name="sex"value="male"/>Male<br/><inputtype="radio"name="sex"value="female"/>Female</form>2.1.4表單復(fù)選框（Checkboxes）當(dāng)用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復(fù)選框。<form><inputtype="checkbox"name="bike"/>Ihaveabike<br/><inputtype="checkbox"name="car"/>Ihaveacar</form>2.1.4表單表單的動作屬性（Action）和確認(rèn)按鈕當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(guān)的處理。<formname="input"action="xxx.aspx"method="get">Username:<inputtype="text"name="user"/><inputtype="submit"value="Submit"/></form>假如您在上面的文本框內(nèi)鍵入幾個字母，然后點擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會傳送到"xxx.aspx"的頁面。由xxx.aspx頁面負(fù)責(zé)處理輸入的數(shù)據(jù)。2.2javascript基礎(chǔ)2.2.1基本語法2.2.1幾個小案例2.2.2如何在頁面上嵌入javascript2.2.3javascript綜合案例2.2.1基本語法變量數(shù)據(jù)類型

重點強調(diào)無類型選擇結(jié)構(gòu)：If、Switch、For循環(huán)、while循環(huán)、do/while循環(huán)Break語句結(jié)合教材上的代碼講解2.2.2幾個小案例點擊事件-案例

事件響應(yīng)改變文字-案例

改變文字燈泡開光事件-案例

燈泡開關(guān)2.2.3如何在頁面上嵌入javascript<head>中的JavaScript函數(shù)下列代碼中，一個JavaScript函數(shù)放置到HTML頁面的<head>部分。該函數(shù)會在點擊按鈕時被調(diào)用：案例head中嵌入javascript2.2.3如何在頁面上嵌入javascript<body>中的JavaScript函數(shù)這個案例中，我們把一個JavaScript函數(shù)放置到HTML頁面的<body>部分。該函數(shù)會在點擊按鈕時被調(diào)用：案例body中嵌入javascript2.2.3如何在頁面上嵌入javascript外部的JavaScript可以把腳本保存到外部文件中。外部文件通常包含被多個網(wǎng)頁使用的代碼，是一種通用代碼的開發(fā)方法。外部JavaScript文件的文件擴展名是.js，可以通過.net工程中添加新項來制作，如下圖：如需使用外部文件，請在<script>標(biāo)簽的"src"屬性中設(shè)置該.js文件：<html><body><scriptsrc="myScript.js"></script></body></html>提示：外部腳本js文件中不能包含<script>標(biāo)簽。2.2.4javascript綜合案例DOM案例1深刻詮釋了如何把網(wǎng)頁控件本身作為參數(shù)傳遞，并利用不同事件進行控制。案例DOM案例1DOM案例2詮釋了如何把dom、事件響應(yīng)和css進行結(jié)合。案例DOM案例22.3CSS基礎(chǔ)2.3.1CSS樣式表的三種嵌入形式2.3.2CSS基本語法2.3.3CSS高級語法2.3.4ID選擇器2.3.5類型選擇器2.3.1CSS樣式表的三種嵌入形式外部樣式表當(dāng)樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用<link>標(biāo)簽鏈接到樣式表。<link>標(biāo)簽在（文檔的）頭部：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>瀏覽器會從文件mystyle.css中讀到樣式聲明，并根據(jù)它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的html標(biāo)簽。樣式表應(yīng)該以.css擴展名進行保存。下面是一個樣式表文件的例子：hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}2.3.1CSS樣式表的三種嵌入形式內(nèi)部樣式表當(dāng)單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用<style>標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:<head><styletype="text/css">hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}</style></head>2.3.1CSS樣式表的三種嵌入形式內(nèi)聯(lián)樣式由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當(dāng)樣式僅需要在一個元素上應(yīng)用一次時。要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style屬性可以包含任何CSS屬性。本例展示如何改變段落的顏色和左外邊距：<pstyle="color:sienna;margin-left:20px">Thisisaparagraph</p>2.3.1CSS樣式表的三種嵌入形式多重樣式如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。例如，外部樣式表擁有針對h3選擇器的三個屬性：h3{color:red;text-align:left;font-size:8pt;}2.3.1CSS樣式表的三種嵌入形式而內(nèi)部樣式表擁有針對h3選擇器的兩個屬性：h3{text-align:right;font-size:20pt;}2.3.1CSS樣式表的三種嵌入形式假如擁有內(nèi)部樣式表的這個頁面同時與外部樣式表鏈接，那么h3得到的樣式是：color:red;text-align:right;font-size:20pt;即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內(nèi)部樣式表中的規(guī)則取代。2.3.1CSS樣式表的三種嵌入形式案例

lesson3-test1.htm案例

lesson3-test1.css案例Internalstylesheet的案例2.3.2CSS基本語法CSS規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。selector{declaration1;declaration2;...declarationN}選擇器通常是您需要改變樣式的HTML元素。每條聲明由一個屬性和一個值組成。屬性（property）是您希望設(shè)置的樣式屬性（styleattribute）。每個屬性有一個值。屬性和值被冒號分開。selector{property:value}2.3.2CSS基本語法下面這行代碼的作用是將h1元素內(nèi)的文字顏色定義為紅色，同時將字體大小設(shè)置為14像素。在這個例子中，h1是選擇器，color和font-size是屬性，red和14px是值。h1{color:red;font-size:14px;}下面的示意圖為您展示了上面這段代碼的結(jié)構(gòu)：2.3.2CSS基本語法多重聲明：提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。p{text-align:center;color:red;} 建議每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：p{text-align:center;color:black;font-family:arial;}2.3.2CSS基本語法案例CSS基本語法案例2.3.3CSS高級語法選擇器的分組你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標(biāo)題元素進行了分組。所有的標(biāo)題元素都是綠色的。h1,h2,h3,h4,h5,h6{color:green;}2.3.3CSS高級語法繼承及其問題根據(jù)CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作?？纯聪旅孢@條規(guī)則：body{font-family:Verdana,sans-serif;}根據(jù)上面這條規(guī)則，站點的body元素將使用

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論