標籤：html css 網頁設計
我們經常上網瀏覽網頁，來擷取資訊。可網頁是什麼呢？它又是如何編寫出來的呢？
網頁又叫Web頁面，我們經常可以在網頁上看到文字、圖片、視頻等。我們所要說的HTML（超文字標記語言 (HTML)）就是構成網頁文檔的主要語言，也是網頁設計的核心語言。
首先，我們先來理解下三個概念：HTML，HTML文檔和HTML標籤。
HTML
描述網頁的一種語言。
超文字標記語言 (HTML) ，而非程式設計語言。
標記語言是一套標記標籤 (markup tag)
HTML 文檔
描述網頁
包含 HTML 標籤和純文字
也被稱為網頁
HTML 標籤
也叫 標記標籤
是由角括弧包圍的關鍵詞，比如 <html>
通常是成對出現的，比如 <b> 和 </b>
第一個標籤是開始標籤，第二個標籤是結束標籤
梳理這三者的關係，HTML文檔是由HTML這種標記語言編寫的，它包括標籤和文本元素。所以我們重點來說一下HTML文檔，瞭解了HTML文檔，就對HTML有了一個大致的瞭解。
下面就通過幾個例子來實踐下吧！
HTML的基本結構：
<html><!--頭部,包含標題--><head><title>標題</title></head><!--主體部分--><body></body></html>
通過網頁顯示文本，並對文本的樣式進行簡單的設定。
<html><head><title>白頭吟</title></head><body><center><!--詩的標題--><h2><font color="black"><b>白頭吟</b></font></h2><br><!--作者--><font color="black" size="2">卓文君</font><br><br><!--本文--><font color="green" size="4">皚如山上雪，皎若雲間月。<br>聞君有兩意，故來相決絕。<br>今日鬥酒會，明旦溝水頭。<br>躞蹀禦溝上，溝水東西流。<br>淒淒複淒淒，嫁娶不須啼。<br>願得一心人，白頭不相離。<br>竹竿何嫋嫋，魚尾何簁簁！<br>男兒重意氣，何用錢刀為！</font></center></body></html>
接下來是一個課程表的表格，用到的標籤主要有<table>,<tr>，<th>,<td>等。
<html><head><title>表格</title></head><body><table border="1"align="center" bgcolor="#ffdddd"><caption>課程表</caption><tr align="center" valign="middle"><th>星期</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr align="center" valign="middle"><td>第一節</td><td>數學</td><td>語文</td><td>美術</td><td>地理</td> <td>語文</td></tr><tr align="center" valign="middle"><td>第二節</td><td>生物</td><td>英語</td><td>體育</td><td>地理</td><td>語文</td></tr><tr align="center" valign="middle"><td>第三節</td><td>數學</td><td>地理</td><td>語文</td><td>英語</td><td>語文</td></tr><tr align="center" valign="middle"><td>第四節</td><td>數學</td><td>地理</td><td>語文</td><td>英語</td><td>語文</td></tr><tr align="center" valign="middle"><td>第五節</td><td>數學</td><td>地理</td><td>語文</td><td>地理</td><td>語文</td></tr></table></body></html>
下面我們來製作一個註冊的表單，主要就是<input>元素的使用，它用於接受使用者輸入的資訊，主要屬性是type。
<html><head><title></title><head><body><form method="get" action="reg.jsp"><!--單行文本輸入控制項-->使用者名稱： <input type="text" name="user" size="30"><br><!--口令輸入控制項-->密 碼： <input type="password" name="pwd" size="30"><br><!--重設按鈕--><input type="reset" value="重設" size="30"><!--提交按鈕--><input type="submit" value="提交" size="30"></form></body></html>
相關概念：
URL：統一資源定位器（Uniform Resource Locator，縮寫為URL）。互連網上的每個檔案都有一個唯一的URL，它包含的資訊指出檔案的位置以及瀏覽器應該怎麼處理它。
基本URL包含模式（或稱協議）、伺服器名稱（或IP地址）、路徑和檔案名稱。模式/協議（scheme）：它告訴瀏覽器如何處理將要開啟的檔案。最常用的模式是HTTP。URL分為絕對URL和相對URL，即絕對路徑與相對路徑。
<html><head><title>路徑的例子</title></head><body><!--相對路徑--><a href="Test1.html">例子1</a><br><!--絕對路徑--><a href="C:\Users\ysx\Desktop\Test1.html">例子2</a><br></body></html>
通過上面幾個簡單的例子，可以看出，利用HTML我們可以設計出網頁中的段落、文本、表格、表單等。而且，我們可以對元素標籤的樣式進行簡單的設定，呈現出來的效果也是很漂亮的。但是我們對其樣式等的修改是十分有限的，沒辦法像CSS一樣靈活的設定。
網上有個更為通俗的解釋：沒CSS的html頁面就好比“沒化妝的醜女人”，而隨意處理的html頁面就是“化妝後的醜女人”；用了CSS後，等於是把醜女人換了一張林志玲的臉或者連身材也換了，只不過骨頭、器官之類的還是原來的而已！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
