萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> HTML基本進修條記
HTML基本進修條記
html基本|條記
顛末1天多的費力奮戰，終於把html（Hypertext markup language）的基本教程給看完了。
這次為了xml而看了這“迂腐”的技能，照舊有點收成的。。總體來說，固然不是很純熟，可是看懂一樣平常的html網頁源文件已經不是題目了。閒來無事，就寫寫條記吧，說說感覺也好！
1總體架構
html給我的感受是很尺度，很著名目標。最首要的代碼特點就是標志成對的呈現，固然有些可以省略，可是提議除非過分啰嗦照舊把前後都加上去吧！作為一個完備的html網頁，老是有頭部，主體和末了3大部門，別離用<head></head>,<body></body>和</html>暗示。其它，一個重要特征就是可以自界說氣魄漚背通CSS），這長短常利便的，相同於編程說話的類的成果吧！同時，還可以嵌入其他script來加強其交互成果。而對付相等重要的標志，壹貝偾由頭部標識和屬性所構成。（<標識 屬性1 屬性2 屬性3...>）看來，進修html是進修其他網頁劇本說話的基本吧，同時對付進修可視化網頁計劃也是有輔佐的（這麼說應該不外分吧！）！，下面就讓我們一路來具體說明各個部門的組成元素。
2常見標志先容
著實大大都html網頁的標志不多，就只有10幾個吧！（看到這裡，好！）這裡首要先容一下常見的節制文件的外面和機關的標志！
<h>:從<h1>到<h6>所標識的字體依次減小，一樣平常來說，<h1>用來標志文件問題<h2>用來標志一章的問題<h3>用來標志章節的問題，<h6>則是來作為小字印刷，如版權信息等等。
<p>和<br>:根基相同於回車鍵的成果，而<p>可以插入空格，同時也可以附帶屬性，如<p align=right>結果<p>（缺省環境是左對齊，左對齊許多分列方法的缺省環境）
<div>:固然相同於<p>,也可以行使align屬性，可是在行使氣魄威風凜凜表格時成果強盛。（氣魄威風凜凜表格見後）
<hr>:可以發生一條程度線，對付組織名目是很有輔佐的。
在這裡應該說一說邏輯標志和物理標志的不同：物理標志表白信息的外面，而邏輯標志表白信息的語義。從合用范疇來說，行使邏輯標志更值得保舉，由於邏輯標志暗示的是本質特征，不隨賞識器的變革而變革！
邏輯標志：<cite><dfn><strong><code><ins><del>（注：各人可以本身測試一下，看看有什麼結果，個中ins和del是很有效的標志，出格是在多人相助開拓的時辰，看字面應該知道這兩個是干嘛的吧！）
物理標志：<i><t><tt><big><small><sub><sup><strike>（注：各人測試吧，下手最重要◎）
3鏈接
鏈接是超文本（Hypertext）名目標重要實現方法，而行使的就是錨（Anchor）（，以是縮寫也就是<a>）,
一個典范的錨標志的界說：<a href="方針頁面">激活熱區</a>（注：href：hypertext reference,就是鏈接到那邊），此刻分環境先容：
1）外部鏈接
1。1非當地文件：<a href="http://www.zsu.edu.cn">中山大學</a>（這個很明明，不消表明白）
1。2其他情勢的非當地資源：<a href="ftp://ftp.zsu.edu.cn">中山大學</a>（ftp資源）
<a href="mailto:[email protected]">我的email</a>（email信息）
1。2當地文件：<a href="另一個網頁.html">另一網頁？</a>（統一文件夾的，雖然也可以給出完備路徑咯）
<a href="../另一個網頁.html">另一網頁？</a>（上一級別文件夾的）
（注：../暗示上一級文件夾，同樣../../就暗示上上一級）
2）內部鏈接
什麼是內部鏈接，就是在統一個網頁裡邊的鏈接！這樣做是為了停止網頁太大而造成的賞識貧困！
步調：起主要界說一個引用方針錨，然後在另一處界說被錨引用的方針！看例子吧◎
<a herf="#top">top</a>（個中＃top界說了該錨）
<a>top</a>（這裡就引用了該錨）
(注：這種要領最常見的應用就是網頁上常常看到的網頁最下邊的“返回頂部”了)
4圖像
行使圖像：<img src="圖像文件">（注：圖像文件路徑與鏈接路徑溝通）。在這裡可以插手提醒屬性<alt>，如<img src="http://www.webjx.com/htmldata/2005-06-01/圖片.gif" alt="圖片">（注：看看有什麼結果，假如圖片不存在，會奈何呢？）
1）對齊方法：缺省是左對齊，可以行使<div align=..>舉辦變動。
2）高度和寬度：<img src="http://www.webjx.com/htmldata/2005-06-01/圖片.gif" height=34mm width=34mm>（注：看大白了吧！不外應該留意的一點是，在ie裡邊高度和寬度的比例應該與源圖溝通，否則就表現不了，已在我的機子上測試過了）
3）附近地區和邊框：<img src="圖像文件" border＝4 hspace=5 vspace=5>（注：很簡樸吧，測試一下吧！尚有，邊框默認環境是沒有的，可是對付有鏈接的圖來說，有個框框照舊很好的）
5列表
1）無序列表：無序，就是沒有出格的序號，也就是劃一哦。。下面看個例子吧。
<ul><li>內容1<li>內容2<li>內容3</ul>（注：對付ul，可以添加屬性type，屬性值有disc,square,circle，這樣就可以改變序號了◎）
2）有序列表：這個雖然就是前面有序號咯。
<ol><li>內容1<li>內容2<li>內容3</ol>（注：對付ol，同樣可以添加type屬性，屬性值可所以1，a，A，i，I，呵呵，本身測試一下。）其它，對付ol，可以從喜好的序號開始排序，用的屬性就是ol的start和li的value了，很大白吧：）
3）列表嵌套：嵌套，相同於樹狀菜單的對象。可以行使<ul><ul></ul></ul>(ol也一樣)相同的名目舉辦行使。
4）界說列表：首要有dl，dt，dd，別離代表界說標識，頭部和內容，行使要領：
<dl><dt>頭部<dd>界說的內容</dl>（注：dt和dd不必要竣事標志）
6表單
1）界說一個form：界說一個form標志，用於確定發送動靜的范例和處理賞罰方法，個中必需的屬性就是action了。<form action="http://zsu.edu.cn/..." method="post">（注：method用於聲名傳送數據的方法，尚有get方法，不外此刻常用post）。相同的有，<form action="mailto:[email protected]" method="post">
2)大部門的form都是在<input>中處理賞罰的。如下面所示：
請輸入名字<input type="text"><p>
請輸進口令<input type="password"><p>
請提著名貴意見<textarea rows=3 cols=20 >
</textarea><p>
<input type="submit" value="Submit form">
<input type="reset" value="Clear data">
本身可以修改一部屬性並舉辦測試◎
3）復選框和單選框
<input type="checkbox" value="check1">check1
<input type="checkbox" checked value="check2">check2
<input type="checkbox" checked value="check3">check3<p>（這是復選框）
<input type="radio" value="radio1">radio1
<input type="radio" checked value="radio2">radio2
<input type="radio" value="radio3">radio3<p>（這是單選框）
4）下拉菜單和轉動菜單
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><p>（下拉菜單）
<select multiple size=5>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><p>（轉動菜單，就是比下拉菜單多了個multiple屬性和name屬性，而size屬性是無關緊要）
7幀布局
什麼是幀布局，就是在一個完備網頁裡邊分頁，當一個頁的url產生變革，其他的可以穩固：）行使幀布局可以使得網頁越發多變，內容越發富厚，不外也會帶來必然的貧困，由於它打亂了原本的根基操縱法則。
怎樣成立一個幀布局？如下面的例子所示。
<html>///留意：沒有body的哦。。
<head>
<title>幀布局</title>
</head>
<frameset rows="50%,*" cols="50%,*">//界說了網頁的分頁布局，包羅了行數和列數
<frame src="doc1.html">//引用網頁的根基寫法
<frameset rows="40%,50%">//界說了一個嵌套的幀
<frame src="doc2.html">
<frame src="doc3.html" scrolling="y
