當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

跟着杨中科学习asp.net之html

發(fā)布時間：2023/12/20 asp.net 25 豆豆

生活随笔收集整理的這篇文章主要介紹了跟着杨中科学习asp.net之html 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

第一節(jié)課

ＨＴＭＬ基礎加強班

l 什么是瀏覽器？

1. 瀏覽器就是接受瀏覽者的操作（打開一個網(wǎng)址、點擊一個鏈接、點擊一個按鈕），然后幫瀏覽者去ｗｅｂ服務器請求網(wǎng)頁的內(nèi)容（ｈｔｍｌ格式返回），然后展現(xiàn)成人眼能夠看得懂的可視化的頁面的軟件。

l ＩＥ＝瀏覽器？這個說法是錯誤的。IE是瀏覽器的一種，還有FireFox、Opera、Charome等，注意遨游（Maxthon）、世界之窗、搜狗瀏覽器、３６０瀏覽器等并不是一種獨立于IE的瀏覽器，其內(nèi)核還是IE的內(nèi)核，只不過是換了一個外殼而已，所以用遨游的不能嘲笑用IE的，否則就露怯了，試著用WeBrowse空間自己開發(fā)一個瀏覽器。

l WebBrowser控件

雙擊按鈕：

方法如下：

webBrowser1.Navigate(textBox1.Text);

htm文件代碼如下：

<html>

<head>

</head>

<body>

<font color="red">hello</font>

<a href="http://www.itcast.cn">itcast</a>

</body>

</html>

運行結果：

l 所謂的Trident引擎就是WebBrosder空間，現(xiàn)在很多非IE核心的瀏覽器用的是Webkit引擎，比如遨游３或搜狗的雙核、Chrome、Safari。搞瀏覽器開發(fā)挺簡單的。

l HTML就是描述網(wǎng)頁長什么樣子、有什么內(nèi)容的一個文本。在查看網(wǎng)頁的描述內(nèi)容的方式：使用IE瀏覽器的話，在網(wǎng)頁上點擊右鍵，選擇“查看源文件”

l 瀏覽器兼容性問題：描述文件是一個統(tǒng)一的，但是就像口語翻譯一樣，不同翻譯翻譯出來的東西也是有差異的，所以同一個網(wǎng)頁在IE上和Firefox上看起來就可能長得不一樣，最明顯的就是以前qq空間上的頁面在Firefox上線時就有問題，甚至有的網(wǎng)頁在IE6、IE7、IE8上的也不一樣。因此web開發(fā)過程中的一個重要也是最頭疼的問題就是瀏覽器的兼容，測試Firefox（簡稱FF）、Chrome等瀏覽器安裝各自的軟件就可以，測試不同版本的IE可以用IETester。

l 只要能跑IE和firefox就ok了。

小知識：

瀏覽器兼容性測試：Acid。測試標準：對給定幾個網(wǎng)頁來測試，谷歌的Firefox１００分，IE的９８分。

瀏覽器開發(fā)引擎Webkit、Trident、Gecko。

QQ、暴風、千千靜聽等彈出的新聞中心是網(wǎng)頁，是嵌在瀏覽器框架中的。用visual studio 就可以開發(fā)。

靜態(tài)頁面、動態(tài)頁面

l 網(wǎng)站頁面分為靜態(tài)頁面和動態(tài)頁面兩種

n 靜態(tài)頁面：有一個html頁面文件保存在服務器上，瀏覽器要這個頁面的時候服務器就把這個頁面文件發(fā)給瀏覽器；

n 東莞臺頁面：服務器上沒有臉攔著要看的頁面，而是服務器動態(tài)生成的html頁面發(fā)給瀏覽器，動態(tài)語言的服務端也易用C#，vb.net、 php、java、c等編寫。

l 編寫普通的html頁面和任何后臺語言無關的，可以使用dreamweaver、expression web等工具寫，這些工具是給頁面美工用的，開發(fā)人員用visual studio寫html就夠了，不要把精力放到怎么把頁面好看上，正規(guī)公司都有專門的頁面美工，不正規(guī)的公司都是偷別人的美工頁面，無論是偷別人的頁面，還是使用美工公司開發(fā)出來的頁面，對于開發(fā)人員要做的“填模板”工作都是一樣的。

第二課

課前說明：

l 內(nèi)容：html、css

l 目標：掌握手寫html實現(xiàn)一般難度的web頁面的能力（如網(wǎng)站注冊表單），為asp.net學習打基礎。堅持手寫html，可視化設計知識一種自學的手段。

l 參考書：張孝祥《javascript網(wǎng)頁開發(fā)——體驗式學習教程》

第一個網(wǎng)頁

主流編程人員所用的為visual studio 2008，可以去官網(wǎng)下載。有點大，3.7個G。

l 新建web項目（新建→asp.netweb應用程序），新建html頁面（添加→新建項→web→html頁）

l 查看頁面方式

n 切換到“設計”視圖，可以在這里查看初步的預覽效果，不是很準，可以再“設計”試圖工具箱中拖放空間可視化的設計，設計復雜頁面的時候很少直接可視化設計

n 右鍵，選擇“在瀏覽器中查看”。無法進行調(diào)試。

n 將要查看的頁面設為起始頁（在文件上點擊右鍵“設為起始頁”），然后點擊“啟動調(diào)試”，即可調(diào)試。

l 學沒有js、c#代碼的時候用“在瀏覽器中查看”。修改頁面不用關閉瀏覽器再打開，刷新就可以。

第三課

Html頁結構說明

l 所有內(nèi)容都在<html></html>標簽之內(nèi)：<head></head>內(nèi)存放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中，<head>內(nèi)的<title>中設置的是頁面的標題，<title>只能放在<head>中；<body>是頁面的主題，大部分顯示內(nèi)容都定義在這里。

l 所有頁面都應該至少含有這些部分，由于瀏覽器容錯性強，所以即使不包含也能正常顯示，但是最好還是寫全了。

顏色體系

l Body標簽中的bgcolor屬性可以設定網(wǎng)頁的背景顏色，<body bgcolor=“#006699”>

l #006699就是html中表示顏色的方式，每兩個是一組，三組就分別表示R、G、B的值，是16進制表示。關于RGB見備注

l 可以使用vs內(nèi)置的顏色選擇對話框生成RGB值，也可以用取色器（比如DEBUG內(nèi)置的取色器；打開IE，打開debugbar工具欄，點擊吸管圖標）；html海域定義了一些顏色：red、black、white等，比如bgcolor=“black”。

l 配色不是一個專業(yè)開發(fā)人員考慮的，是美工的事情，所以對于顏色的取值不用太操心，知道有這么一回事就行了。

Html和xml的聯(lián)系、區(qū)別

l Xhtml

l 屬性值：html中屬性值即可以用單引號括起來，也可以用雙引號括起來、甚至不用引號都可以（不推薦），單雙要配對。

l 注釋：html使用和xml一樣的<!—注釋內(nèi)容-->來做注釋。

l 特殊字符：html中<、>是有特殊含義的、空格不會被顯示的（輸入一個帶空格的字符串試試），所以需要特殊符號，相當于c#中的“\n”轉義符。&lt；（小于號）；&gt；（大于號）；&nbsp；（空格）；實用工具，免除記憶。

l 格式標簽<p></p>創(chuàng)建段落；<br/>回車，也可以寫成<br>，在html中有一些標簽可以不關閉，<br>就是一個，這是和xml不同的地方，但是為了遵循xhtml規(guī)范，推薦像xml一樣嚴格關閉。<br/><img=s.gif/>

l Html不把“ ”當成空格，因為html中經(jīng)常有縮進，如果把縮進的空格在瀏覽器中以空格形式展現(xiàn)的話，排版會很麻煩。“ ”表示空格。

l <pre>不是萬能的。功能有限。

文字格式

l <br>只是回車(即換行)，<p>是分段，<p>前后會有比較大的空白，而<br>則沒有。

如圖

l <center>網(wǎng)絡創(chuàng)新小組</center>居中顯示

如圖

l h標簽，html定義了<h1></h1>到<h6></h6>六個h標簽，分別表示不同大小的字體。

l <b>網(wǎng)絡創(chuàng)新小組</b>粗體

l <font></font>字體標簽，<font color=“red”>紅色</font> <font size=“30” color=“red”>紅色</font>

url、超鏈接

l url：表示資源在網(wǎng)絡中的地址，比如

http://127.0.0.1/a.html、ftp://192.168.88.128/b.zip。還有uri的概念，比url大，有的可以使用uri之中說法，可以暫時看成和url一樣大就行。

l 超鏈接：<a href="http://www.hao123.com">好123</a>

點擊，直接進入“好123”網(wǎng)站

l <a>中還可以嵌套圖片，這樣就是點擊圖片打開連接<a href=www.hebiace.edu.cn ><img src=”http://www.hebiace.edu.cn/images/newindex1104_03.gif” /></a>

超鏈接深入

l 相對url：相對url表示相對于當前文檔的資源，“/”表示網(wǎng)站根目錄，“../”表示父目錄，“../../”表示父目錄的父目錄，”../”或者不寫任何斜線表示相對于當前路徑的目錄。站內(nèi)引用最好用相對url，這樣域名改變了，目錄改變了都不受影響。

l 將<a>的target屬性設定為“_blank”就可以在新的窗口中打開超鏈接。國內(nèi)的網(wǎng)站都默認是在新窗口中打開。

l 超鏈接：<a href=”http://www.baidu.com”>baidu</a>

l 用<a>的target屬性為<a>起名字：<a name=”last”>這就是最后</a>

這樣可以通過<a href=”#last”>跳到平臺</a>來跳轉到超鏈接的部分。

l 案例：去評論、回到正文。多敲幾個回車

圖片

l <img src=”a.jpg”/>注意圖片是連接的，不是插入的，所以如果src指向的文件不存在了，就看不了了。Alt屬性為圖片無法顯示使得顯示文本，鼠標方式也會有懸浮提示“點擊查看大圖”；border屬性指定邊框，border=“0”不顯示邊框；width、height屬性指定圖片的顯示大小，如果不指定則是原始大小。

l 最好指定width、height，哪怕是原始尺寸大小，因為如果不指定大小，圖片不占位置，圖片下載后才調(diào)整大小，會造成頁面很亂。如果知道那個了width、height哪怕圖片沒有加載完成，也會先把位置占上。

l 如果網(wǎng)頁上要顯示小圖（比如縮略圖），不要僅僅是把大圖設定一下width、height來縮小，因為仍然會下載大圖，使得加載速度很慢。

列表、表格

列表：<ul><li>灌水區(qū)</li><li>版務區(qū)</li><li>原創(chuàng)貼圖</li></ul>

l （unordered list）

l 還有有序列表<ol></ol>，很少用。Ordered list

l 表格：<table></table>為表格，在內(nèi)部用過<tr>創(chuàng)建行，<tr>內(nèi)部通過<td>創(chuàng)建單元格。可以講table的border屬性設為0來隱藏表格線

n <tr>屬性：align，水平對齊，可選值left、right、center；valign，垂直對齊，可選值top、middle、bottom。

n <td>也有align和valign。<tr align=”right”><td>tom</td><td align=”left”>20</td><td>男</td>：子標簽默認則繼承父標簽的屬性，如果自己單組設定了屬性，則會覆蓋父標簽的屬性。

n 還可以使rowspan、colspan來進行單元格的合并，vs可視化的功能來做就行。

n 表頭的td可以用th代替，這樣就會表示粗體、居中顯示。

n 建議將表頭用<><thead>代替<tr>

表單

l 網(wǎng)站表單于填單

l <form>標簽為表單標簽。如果要把數(shù)據(jù)提交到服務器，則需要將<input>、<textarea>、<select>等表單元素放到form中。

l <input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox（復選框）file（文件選擇框）、hidden（隱藏字段）、img（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）

input表單詳解

submit：點擊submit按鈕表單就會被提交給服務器，中文IE下默認按鈕文本為“提交查詢”，可以設置value屬性修改按鈕的顯示文本

text：size屬性為寬度，value為值，maxlength為可以輸入的最大長度，readonly只讀。<input type="text" readonly/>（只寫屬性名，不寫屬性值）或者<input type="text" readonly="readonly" />（推薦）

checkbox：checked屬性表示是否被選中，<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。

radio：相同name屬性的為一只有組，不同radio設定不同的value值，這樣通過取指定name的值就可以知道誰被選中了，不用單獨的判斷。

</br>

<input type="radio" name="gender" />男

<br>

<input type="radio" name="gender"/>女

</br

<br>

<input type="radio" name="gender"/>保密

</br>

<input type="radio" name="habit" />籃球

<br>

<input type="radio" name="habit"/>足球

</br

<br>

<input type="radio" name="habit"/>排球

</br>

file：使用file，則form的enctype必須設置為multipart/form-data、method屬性為POST（*）

image：使用src屬性指定圖片的地址，用來實現(xiàn)美化的“登錄按鈕”。用圖片實現(xiàn)的submit按鈕，同時提交了用戶點擊圖片的坐標。

<select>標簽

用來創(chuàng)建類似于WinForm中的ComboBox或者ListBox

如果size屬性大于1就是ListBox（size的值為顯示出來的列表數(shù)量），否則就是ComboBox。<select multiple>或者<select multiple="multiple">（推薦）multiple有且只有一個值，那么就是可以多選的ListBox。

</select>

</select>

Size控制同時顯示多少個值

select中的項是<option>，<option>北京</option>還可以設定項的值<option value="1">北京</option>。

將一個option設置為選中：<option selected>333</option>或者<option selected="selected">333</option>(推薦)就可以將這個項設定為選擇項

如何實現(xiàn)“不選擇”，添加一個<option value="-1">--不選擇--<option>，然后編程判斷select選中的值如果是-1就認為是不選擇。

select分組選項，可以使用optgroup對數(shù)據(jù)進行分組，分組本身不會被選擇，無論對于下拉列表還是列表框都適用。見備注。

<form>

</optgroup>

</optgroup>

</optgroup>

</select>

</form>

其他標簽

l <textarea>多行文本（也是表單元素）：<textarea>文本</textarea>，cols=“50”、rows=“15”屬性表示行數(shù)和列數(shù)。

l <textarea cols="10" rows="10">

l <label>：在<input type=“text”>前可以寫普通的文本來修飾，但是單擊修飾文本的時候input并不會得到焦點，而用label則可以，for屬性指定要修飾的控件的id，<label for=“txt1” >asdfad</label>；”txt1”為被修飾的控件設置一個唯一的id。(label的accesskey=“r”屬性指定快捷鍵，FF不支持)

l 姓名：<input type="text"/>

l 婚否：<input type="checkbox"/>

l </br>

l <label for="name">姓名：</label><input id="name" type="text"/>

l <label for="ma">婚否：</label><input id="ma" type="checkbox"/>

用label主要是點擊“姓名”、“婚否”，鼠標就會在該方框里面。

l <label for="ma">婚否</label> <input id="ma" type="checkbox" />

l fieldset：GroupBox效果，將控件劃分一個區(qū)域，看起來更規(guī)整

</fieldset>

</fieldset>

l submit(提交)、reset(恢復為默認值)

l *滾動文字 <marquee>

l *播放聲音（dw中添加媒體→插件）、顯示flash，見備注。

練習

練習1：實現(xiàn)登錄界面，有用戶名、密碼、驗證碼（使用普通圖片代替）、“記住密碼”復選框、登錄按鈕、重置按鈕。使用Table進行布局。使用label來寫修飾文本。

</table>

練習2：實現(xiàn)注冊頁面，分為兩個頁面，第一個頁面是協(xié)議顯示頁面，點擊“我同意”超鏈接進入第二個注冊頁面，填寫內(nèi)容：用戶名、密碼、重復密碼、省份（下拉列表）、性別（男、女、保密三個Radio）、職業(yè)（學生、公司職員、其他三個Radio）、愛好（登山、籃球、足球、讀書、游泳五個CheckBox）。使用label來寫修飾文本。將愛好幾個CheckBox放到一個fieldset(GroupBox)中

樣式表、CSS

CSS（層疊樣式表，Cascading Style Sheets）是用來美化頁面用的，可以對頁面元素進行更精細的設置，樣式主要描述元素的字體顏色、背景顏色、邊框等。CSS是描述元素的皮膚。

使用CSS的好處：

外觀美化布局、定位

樣式表能實現(xiàn)內(nèi)容與樣式的分離，方便團隊開發(fā)

方便統(tǒng)一定義格式,修改也方便.

HTML標簽的外觀樣式比較單一

頁面色彩不生動

樣式修改不方便

樣式表的作用：為網(wǎng)頁設置外觀，相當于華麗的衣服。

例如：背景顏色：

邊框顏色：

使用CSS的三種方式

CSS主要有元素內(nèi)聯(lián)、頁面嵌入和外部引用三種使用方式。CSS是描述元素的皮膚！

元素內(nèi)聯(lián)(行內(nèi)樣式表)，直接將樣式寫入元素的style屬性中，<input type="text" readonly="readonly" style="background-color: #FF00FF" />，適用于樣式?jīng)]有可復用性的場合。

頁面嵌入（內(nèi)嵌樣式表）：在head中加入

input{border-color:Yellow;color:Red;}

</style>

表示頁面中所有input都是采用指定的樣式。適合于樣式復用，減小頁面體積

外部引用（外部樣式表），將css內(nèi)容寫入css后綴的文件

textarea{background:yellow}

然后在頁面中引用，在head中加入

適合于多個頁面共享css。

一列全部顯示顏色：

層(DIV)

文本顏色：

語法：

<style>

p{}

</style>

<p></p>

把CSS申明在一個文件里面

Div層（塊級元素）、Span(行內(nèi)元素)

div：<div></div>將內(nèi)容放到層中，就以將這些內(nèi)容當成一個整體進行處理，比如整體隱藏、整體移動等。div非常強大和常用。類似于WinForm的Panel。

span：div是將內(nèi)容放到一個矩形的區(qū)塊中，會影響布局（兩端會換行），而span只是把一段內(nèi)容定義成一個整體進行操作，但不影響布局、顯示（兩端沒有換行）。演示：一行文字用span與div截取部分文字的區(qū)別。

Div在網(wǎng)頁布局中使用非常多。

Span一般用來圈住一小段文字，設置不同的樣式。為什么不用<font>標簽，因為用<span>可以通過CSS來設樣式。

html這些標簽去哪里查？Msdn目錄→ web開發(fā) → HTML and CSS → HTML and DHTML Reference → Objects

常見CSS樣式

Css樣式的屬性的鍵值對之間用“：”（冒號）隔開，而不同的屬性之間用”;”（分號）隔開。

css計量單位：css中表示寬度、距離時有多種計量單位：px（像素）、30%（百分比）、em（相對單位）等。width:20px。

background-color:Red;背景顏色；

color：文本顏色

border-style:solid;邊框風格，實線（默認是沒有），還有dotted(點)等值；

border-color：邊框顏色；

border-width：邊框寬度(默認是0)。

例子：style="border-color:Red;border-width:1px;border-style:dotted;"

display：元素是否顯示，可選值none（不顯示）、block （顯示為塊級元素，此元素前后會帶有換行符。）、inline（顯示為內(nèi)聯(lián)元素，元素前后沒有換行符 ,為div增加display:inline;樣式后與span顯示效果一致。注意：【

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> 】）等。

cursor，style cursor:鼠標在元素上時顯示的光標圖標，可選值：cursor（默認光標）、pointer（超鏈接上的手）、text（輸入Bean）、wait（忙沙漏）、help（幫助）等。還可以通過cursor:url(dinosau2.ani)使用ani、cur格式的自定義光標圖片。

LI不顯示圓點：LIST-STYLE-TYPE: none;一般設在li或者ul上

設置光標（格式必須是ani或者cur）

margin(與表格的cellspacing屬性類似)、padding(與表格的cellpadding類似。)

margin:值1; //上右下左都是值1。

margin:值1 值2; //上下為值1，左右為值2.

margin:值1 值2 值3; //上為值1 左右為值2 下為值3;

margin:值1 值2 值3 值4; //每個值分別是：上右下左;(順時針方向)

例如：

風格是inline

樣式選擇器

對于非元素內(nèi)聯(lián)的樣式需要定義樣式選擇器，通俗的說就是這個樣式適合于哪些元素，三種：標簽選擇器、class選擇器和id選擇器。

標簽選擇器 input{border-color:Yellow;color:Red;}，對于指定的標簽采用統(tǒng)一的樣式

class選擇器，以定義一個命名的樣式，然后在用到它的時候設定元素的class屬性為樣式的名稱，還可以同時設定多個class，名稱之間加空格

樣式名稱開頭加“.”

.warning{background:Yellow;}

.highlight{font-size:xx-large;cursor:help;}

同一個標簽可以應用多個類選擇器（空格隔開）。如果樣式表中

style="background-color:Green"的權優(yōu)先于

<style>

.warning{background:Yellow;}

.highlight{font-size:xx-large;cursor:help;}

</style>

的class, 所以背景變?yōu)榫G色，原先class設置為黃色。

標簽+class選擇器

class選擇器也可以針對不同的標簽，實現(xiàn)同樣的樣式名對于不同的標簽有不同的樣式，只要在樣式名前加標簽名即可。

input.accountno{text-align:right;color:Red;}

label.accountno{font-style:italic;}

執(zhí)行：

id選擇器

為指定id的元素設定樣式，id前加#

#username

{

font-size:10px;

}

style、class可以同時組合使用

更多選擇器(*)

包含選擇器：

P strong{ background-color:Yellow}

表示P標簽內(nèi)的strong標簽內(nèi)的內(nèi)容使用的樣式

<strong>fadsfasdfads</strong>

<p><strong>adfasfd</strong></p>

組合選擇器，同時為多個標簽設定一個樣式

H1,H2,input{background-color:Green}

<h1>nihao</h1>

(*)其他CSS選擇器：div > p(子選擇器)、div + p（相鄰選擇器）、…。IE7以下不支持。在jQuery中還會學習。

偽選擇器

偽選擇器：為標簽的不同狀態(tài)設定不同的樣式：

A:visited：超鏈接點擊過的樣式；A:active：選中超鏈接時的樣式；A:link：超鏈接未被訪問時的狀態(tài)；A:hover：鼠標移到超鏈接時的狀態(tài)。

A:visited {TEXT-DECORATION: none}

A:active {TEXT-DECORATION: none}

A:link {TEXT-DECORATION: none}

A:hover {TEXT-DECORATION: underline}

說明：TEXT-DECORATION: none表示超鏈接不顯示下劃線。

不是所有的元素都支持偽選擇器。（不同瀏覽器支持情況不一樣,IE7以下不支持input:hover等標簽。），目前大多數(shù)只在A標簽時使用。

注意瀏覽器緩存問題。

思考：頁面上部分超鏈接默認是紅色、部分超鏈接默認是白色。怎么實現(xiàn)？（.myAnchor:link）

轉載于:https://www.cnblogs.com/seclusively/p/3789394.html

總結

以上是生活随笔為你收集整理的跟着杨中科学习asp.net之html的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Python 内置模块之 logging
下一篇：跟着杨中科学习asp.net之dom