HTML30分鐘入門教程_基礎教程

來源：懂視網責編：小采時間：2020-11-27 18:54:55

HTML30分鐘入門教程_基礎教程

HTML30分鐘入門教程_基礎教程:運行下面的代碼就可以了 HTML 30分鐘入門教程 h1 {text-align:center} p {text-indent:2em; line-height:140%; margin:auto 10px} span {margin:3px} .code { border:solid 1px gray; backgrou

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML30分鐘入門教程_基礎教程:運行下面的代碼就可以了 HTML 30分鐘入門教程 h1 {text-align:center} p {text-indent:2em; line-height:140%; margin:auto 10px} span {margin:3px} .code { border:solid 1px gray; backgrou

運行下面的代碼就可以了

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 <meta http-equiv="Content-Language" content="zh-CN" /> 
 <title>HTML 30分鐘入門教程</title> 
 <meta name="keywords" content="HTML,網頁,網頁制作,教程,入門" /> 
 <meta name="description" content="30分鐘內讓你明白HTML是什么，并對它有一些基本的了解。一旦入門后，你可以從網上找到更多更詳細的資料來繼續學習。" /> 
 <meta name="author" content="http://www.alabama37th.com/"/> 
 <style type="text/css"> 
 h1 {text-align:center} 
 p {text-indent:2em; line-height:140%; margin:auto 10px} 
 span {margin:3px} 
 .code { border:solid 1px gray; background-color:#eee} 
 .name { font-weight:bold } 
 dl {margin-left:20px} 
 dt {font-weight:bold} 
 .trans {color:red} 
 </style> 
<script language="javascript" type="text/javascript"> 
 1 && entity.charAt(0) == '#') 
 { 
 if (entity.charAt(1) == 'x' || entity.charAt(1) == 'X') 
 ch = String.fromCharCode(eval('0'+entity.substring(1))); 
 else 
 ch = String.fromCharCode(eval(entity.substring(1))); 
 } 
 else 
 { 
 switch (entity) 
 { 
 case 'quot': ch = String.fromCharCode(0x0022); break; 
 case 'amp': ch = String.fromCharCode(0x0026); break; 
 case 'lt': ch = String.fromCharCode(0x003c); break; 
 case 'gt': ch = String.fromCharCode(0x003e); break; 
 case 'nbsp': ch=String.fromCharCode(0x00a0); break; 
 default: ch = ''; break; 
 } 
 } 
 i = semicolonIndex; 
 } 
 } 
 out += ch; 
 } 
 return out; 
}

var theWin=null; 
// --> 
</ script> 
</head> 
<body language="javascript" onload="return window_onload()"> 
<h2>HTML 30分鐘入門教程</h2> 
<p style="text-align:center">作者：deerchao 來源:unibetter大學生社區 轉載請注明來源</p>

<h2>本文目標</h2> 
<p>30分鐘內讓你明白HTML是什么，并對它有一些基本的了解。一旦入門后，你可以從網上找到更多更詳細的資料來繼續學習。</p>

<h2>什么是HTML</h2> 
<p>HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，它規定了自己的語法規則，用來表示比"文本"更豐富的意義，比如圖片，表格，鏈接等。瀏覽器（IE,FireFox等）軟件知道HTML語言的語法，可以用來查看HTML文檔。目前互聯網上的絕大部分網頁都是使用HTML編寫的。</p>

<h2>HTML是什么樣的</h2> 
<p>簡單地來說，HTML的語法就是給文本加上表明文本含義的標簽(Tag)，讓用戶（人或程序）能對文本得到更好的理解。</p> 
<p>下面是一個最簡單的HTML文檔：</p> 
 
<html>
 
 <head>
 
 <title>第一個Html文檔</title>
 
 </head>
 
 <body>
 
 歡迎訪問Unibetter大學生社區!
 
 </body>
</html> 
 
<p> 
 所有的HTML文檔都應該有一個<html>標簽，<html>標簽可以包含兩個部分:<head>和<body>。</p> 
<p> 
 <head>標簽用于包含整個文檔的一般信息，比如文檔的標題（<title>標簽用于包含標題），對整個文檔的描述，文檔的關鍵字等等。文檔的具體內容就要放在<body>標簽里了。</p> 
 <p>標簽用于表示鏈接，在瀏覽器（如IE,Firefox等）中查看HTML文檔時，點擊標簽括起來的內容時，通常會跳轉到另一個頁面。這個要跳轉到的頁面的地址由標簽的href屬性指定。上面的中，href屬性的值就是http://www.unibetter.com。</p>

<h2>HTML文檔可以包含的內容</h2> 
<p>通過不同的標簽，HTML文檔可以包含不同的內容，比如文本，鏈接，圖片，列表，表格，表單，框架等。</p> 
 
文本 
HTML對文本的支持是最豐富的，你可以設置不同級別的標題，分段和換行，可以指定文本的語義和外觀，可以說明文本是引用自其它的地方，等等等等。 
鏈接 
鏈接用來指出內容與另一個頁面或當前頁面某個地方有關。 
圖片 
圖片用于使頁面更加美觀，或提供更多的信息。 
列表 
列表用于說明一系列條目是彼此相關的。 
表格 
表格是按行與列將數據組織在一起的形式。也有不少人使用表格進行頁面布局。 
表單 
表單通常由文本輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁面更有交互性。 
框架 
框架使頁面里能包含其它的頁面。

<h2>HTML文檔格式詳細說明</h2> 
<p>前面介紹了HTML文檔的基本格式，下面再做一個詳細說明。</p> 
<p>HTML文檔可以用任何文本編輯器（比如記事本，UltraEdit等）創建，編輯，因為它的內容在本質也只是一些文本。</p> 
<p>在HTML文本中，用尖括號括起來的部分稱為標簽。如果想在正文里使用尖括號（或者大與號小與號，總之是同一個東西），必須使用字符轉義，也就是說轉換字符的原有意義。<應該使用<代替，>則使用>，至于&符號本身,則應該使用&替代（不得不說的是有很多HTML文檔沒有遵循這個規則，常用的瀏覽器也都能夠分析出&到底是一個轉義的開始，還是一個符號，但是這樣做是不推薦的）。</p> 
<p>標簽本質上是對它所包含的內容的說明，可能會有屬性，來給出更多的信息。比如<img>（圖片）標簽有src屬性（用于指明圖片的地址），width和height屬性（用于說明圖片的寬度和高度）。HTML里能使用哪些標簽，這些標簽分別可以擁有哪些屬性，這些都是有規定的，知道了這里說的基本知識之后，學習HTML其實也就是學習這些標簽了。本文后面會對常用的HTML標簽做出簡短的介紹。</p> 
<p>標簽通常有開始部分和結束部分（也被稱為開始標簽和結束標簽），它們一起限定了這個標簽所包含的內容。屬性只能在開始標簽中指定，屬性值可以用單引號或雙引號括起來。結束標簽都以/加上標簽名來表示。有時候，有些標簽并不包含其它內容（只包括自己的屬性，甚至連屬性都沒有），這種情況下，可以寫成類似這樣：<img src="https://www.gxlcms.com/Uploads/logo.gif" />。注意最后的一個空格和一個反斜杠，它說明這個標簽已經結束，不需要單獨的結束標簽了。</p> 
<p>某些標簽包含的內容中還可以有新的標簽，新的標簽名甚至可能還可以與包含它的標簽的名稱相同（哪些標簽可以包含標簽，可以包含哪些標簽也是有規定的）。比如：</p>

分類目錄...
 當前分類內容列表...
 
 
<p>在這種情況下，最后出現的標簽應該最先結束。</p> 
<p>HTML文檔里所有的空白符（空格，Tab，換行，回車）會被瀏覽器忽略，唯一的例外是空格，對空格的處理方式是所有連續的空格被當成一個空格，不管有一個，還是兩個，還是100個。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容，比如可以在每個標簽開始后增加縮進，標簽結束后減少縮進。由于英語文本中空格用得很普遍（用于分隔單詞），所以對空格做了這樣的特殊處理。如果要顯示連續的空格（比如為了縮進），應該用 來代表空格。</p>

<h2>常用標簽介紹</h2> 
<h3> 
 文本</h3> 
<p>最常用的標簽可能是<font>了，它用于改變字體，字號，文字顏色。</p> 
 
<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">紅色的5</font>
<font face="黑體">黑體的字</font> 
 
<p>加粗，下劃線，斜體字也是常用的文字效果，它們分別用<b>,,<i>表示：</p> 
 
<b>Bold</b>
<i>italic</i>
underline 
 
<p>還有一些標簽，用來指出包含的文本有特殊的意義，比如（表示縮寫），<em>（表示強調），（表示更強地強調）,<cite>（表示引用），（表示地址）等等。這些標簽不是為了定義顯示效果而存在的，所以從瀏覽器里看它們可能沒有任何效果，也可能不同的瀏覽器對這些標簽的顯示效果完全不同。</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p>一篇很長的文章，如果有合適的小標題的話，就可以快速地對它的內容進行大致的了解。在HTML里，用來表示標題的標簽有：<h2>,<h2>,<h3>,<h4>,<h5>,<h6>，它們分別表示一級標題，二級標題，三級標題...</p> 
 
<h2>HTML 30分鐘教程</h2>
<h2>什么是HTML</h2>
...
<h2>HTML是什么樣的</h2>
... 
 
<h3> 
 圖片</h3> 
<p> 
 <hr>標簽用于在頁面上添加橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。</p> 
 
<hr width="90%" color="red" /> 
 
<p><img>標簽用于在頁面上添加圖片，src屬性指定圖片的地址，如果無法打開src指定的圖片，瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文本。</p> 
 
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="圖片簡介" /> 
 
<h3> 
 鏈接</h3> 
<p>超級鏈接用標簽表示，href屬性指定了鏈接到的地址。標簽可以包含文本，也可以包含圖片。</p> 
 
Unibetter大學生論壇
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="驗證HTML" /> 
 
<h3>分段與換行</h3> 
<p>由于HTML文檔會忽略空白符，所以要想保證正常的分段換行的話，必須指出哪些文字是屬于同一段落的，這就用到了標簽<p>。</p> 
 
<p>這是第一段。</p>
<p>這是第二段。</p> 
 
<p>也有人不用<p>，而用<br>。<br>只表示換行，不表示段落的開始或結束，所以通常沒有結束標簽。</p> 
 
這是第一段。<br>
這是第二段。<br />
這是第三段。 
 
<p>有時，要把文檔看作不同的部分組合起來的，比如一個典型的頁面可能包括三個部分：頁頭，主體，頁腳。標簽專門用于標明不同的部分：</p> 
 
頁頭內容
主體內容
頁腳內容 
 
<h3>表格</h3> 
<p>HTML文檔在瀏覽器里通常是從左到右，從上到下地顯示的，到了窗口右邊就自動換行。為了實現分欄的效果，很多人使用表格（<table>）進行頁面排版（雖然HTML里提供表格的本意不是為了排版）。</p> 
<p><table>標簽里通常會包含幾個<tr>標簽，<tr>代表表格里的一行。<tr>標簽又會包含<td>標簽，每個<td>代表一個單元格。</p> 
 
<table>
 <tr>
 <td>2000</td><td>悉尼</td>
 </tr>
 <tr>
 <td>2004</td><td>雅典</td>
 </tr>
 <tr>
 <td>2008</td><td>北京</td>
 </tr>
</table> 
 
<p><tr>標簽還可以被<table>里的<thead>或<tbody>或<tfoot>包含。它們分別代表表頭，表正文，表腳。在打印網頁的時候，如果表格很大，一頁打印不完，<thead>和<tfoot>將在每一頁出現。</p> 
<p><th>和<td>非常相似，也用在<tr>里邊，不同的是<th>代表這個單元格是它所在的行或列的標題。</p> 
 
<table>
 <thead>
 <tr><th>時間</th><th>地點</th></tr>
 </thead>
 <tbody>
 <tr><td>2000</td><td>悉尼</td></tr>
 <tr><td>2004</td><td>雅典</td></tr>
 <tr><td>2000</td><td>北京</td></tr>
 </tbody>
</table> 
 
<h3>列表</h3> 
<p>表格用于表示二維數據（行，列），一維數據則用列表表示。列表可以分為無序列表（），有序列表（<ol>）和定義列表（）。前兩種列表更常見一些，都用<li>標簽包含列表項目。</p> 
<p>無序列表表示一系列類似的項目，它們之間沒有先后順序。</p>

<li>蘋果</li>
 <li>桔子</li>
 <li>桃</li>
 
 
<p>有序列表中各個項目間的順序是很重要的，瀏覽器通常會自動給它們產生編號。</p> 
 
<ol>
 <li>打開冰箱門</li>
 <li>把大象趕進去</li>
 <li>關上冰箱門</li>
</ol> 
 
<h3>框架</h3> 
<p>最后談一下框架，曾經非常流行的技術，框架使一個窗口里能同時顯示多個文檔。主框架頁里面沒有<body>標簽，取代它的是<frameset>。</p> 
<p><frameset>標簽的屬性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（寬度）。</p> 
<p><frameset>標簽可以包含<frame>標簽，每個<frame>標簽代表一個文檔（src屬性指定文檔的地址）。</p> 
<p>如果覺得這樣的頁面還不夠復雜的話，還可以在<frameset>標簽里包含<frameset>標簽。</p> 
 
<frameset rows="15%,*">
 <frame src="top.html" name=title scrolling=no>
 <frameset cols="20%,*">
 <frame src="left.html" 
 name=sidebar>
 <frame src="right.html" 
 name=recipes>
 </frameset>
</frameset> 
 
<h2>30分鐘以后怎么辦</h2> 
<p> 
 這篇文章只是讓從沒有接觸過HTML的人對HTML有個初步的印象，所以很多東西都沒有談到。本文并沒有列出HTML中所有的標簽，對于列出的標簽也沒有介紹它們的全部屬性。另外，沒有提到的東西里還包括我覺得非常重要的CSS, 
 JavaScript, XHTML, XML, Web Standards，以及它們與HTML的關系。不過這些也不太可能在30分鐘內學會，好在只要入了門，就能利用網上很多資源繼續學習。當然，如果有一本紙質書，就更好了，這方面我推薦<<HTML與XHTML權威指南>>。下面是一些我覺得不錯的網上資源：</p> 
 
 
 <li>HTML語言參考（英文）</li> 
 <li>HTML教程</li> 
 
<h2> 一些我認為你可能已經知道的術語的參考</h2> 
 
文本 
文字 
文檔 
文件，通常指內容是數據（而不是程序）的文件 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML30分鐘入門教程_基礎教程

推薦度：

點擊下載本文 文檔為doc格式

標簽：教程 30分鐘基本

熱門焦點

HTML30分鐘入門教程_基礎教程

HTML30分鐘入門教程_基礎教程

HTML30分鐘入門教程_基礎教程

最新推薦

猜你喜歡

熱門推薦