HTML簡介

巔峰V紅塵發表於2020-10-18

HTML

HTML簡介

學號：201631062509

姓名：楊菓

1.什麼是 HTML?

HTML 語言用於描述網頁。

HTML 是指超文字標記語言: Hyper Text Markup Language
HTML 不是一種程式語言，而是一種標記語言
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 文件包含了HTML 標籤及文字內容
HTML 文件也叫做 web頁面

2.HTML 標籤

HTML 標記標籤通常被稱為HTML 標籤 (HTML tag)。

HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤

例項解析：

<!DOCTYPE html>
<html>
<body>
<h1>我是第一個標題</h1>
<p>我是第一個段落。</p>
</body>
</html>

DOCTYPE 宣告瞭文件的型別
<html> 標籤是HTML頁面的根元素，該標籤的結束標誌為 </html>
<head>標籤包含了文件的元（meta）資料，如<meta charset="utf-8">定義網頁編碼格式為utf-8。
<title>標籤定義文件的標題
<body> 標籤定義文件的主體，即網頁可見的頁面內容，該標籤的結束標誌為 </body>
<h1> 標籤作為一個標題使用，該標籤的結束標誌為 </h1>，--Html標題
<p> 標籤作為一個段落顯示，該標籤的結束標誌為 </p>--p標籤用法

3.HTML 編輯器

使用Notepad或TextEdit來編寫HTML

下列是三種專門用於編輯HTML的HTML編輯器：

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML編輯器

不過，我們同時推薦使用文字編輯器來學習HTML，比如Notepad（PC）或TextEdit（Mac）。我們相信，使用一款簡單的文字編輯器是學習HTML的好方法。

我們可以使用Notepad工具來建立HTML檔案，具體的步驟參考如下：

步驟1：啟動記事本

開啟Notepad的步驟（Windows系統中）：

開啟“開始”選單
選擇“所有程式”
選擇“附件”
選擇“記事本”

步驟2：使用記事本編輯HTML

在記事本中輸入HTML程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool 線上教程(www.w3cschool.cn)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>

步驟3：儲存你的HTML

在Notepad檔案選單中選擇另存為。

您可以以.htm或者.html副檔名儲存您的HTML檔案，兩者沒有區別，根據您的使用習慣即可。

將該檔案儲存在您常用的資料夾中，比如w3cschool

1459508307749495

步驟4：在瀏覽器中執行這個HTML檔案

啟動您的瀏覽器，然後選擇“檔案”選單的“開啟檔案”命令，或者直接在資料夾中雙擊您的HTML檔案。

執行顯示結果類似如下：

4.HTML 標籤

HTML 基本文件

<!DOCTYPE html>
<html>
<head>
<title>文件標題</title>
</head>
<body> 可見文字... </body>
</html>

基本標籤（Basic Tags）

<h1>最大的標題</h1>
 <h2> . . . </h2>
 <h3> . . . </h3>
 <h4> . . . </h4>
 <h5> . . . </h5>
 <h6>最小的標題</h6>
 
 <p>這是一個段落。</p>
 <br> （換行）
 <hr> （水平線）
 <!-- 這是註釋 -->

文字格式化（Formatting）

<b>粗體文字</b>
 <code>計算機程式碼</code>
 <em>強調文字</em>
 <i>斜體文字</i>
 <kbd>鍵盤輸入</kbd> 
 <pre>預格式化文字</pre>
 <small>更小的文字</small>
 <strong>重要的文字</strong>
 
 <abbr> （縮寫）
 <address> （聯絡資訊）
 <bdo> （文字方向）
 <blockquote> （從另一個源引用的部分）
 <cite> （工作的名稱）
 <del> （刪除的文字）
 <ins> （插入的文字）
 <sub> （下標文字）
 <sup> （上標文字）

連結（Links）

普通的連結：<a href="連結地址">連結文字</a>
影象連結： <a href="http://www.example.com/"><img src="URL" alt="替換文字"></a> 
郵件連結： <a href="mailto:webmaster@example.com">傳送e-mail</a>
書籤： <a id="tips">
提示部分</a> <a href="#tips">跳到提示部分</a>

圖片（Images）

<img src="URL" alt="替換文字" height="42" width="42">

樣式/區塊（Styles/Sections）

<style type="text/css">
   h1 {color:red;}
   p {color:blue;}
 </style>
 
 
 <div>文件中的塊級元素</div>
 <span>文件中的內聯元素</span>

無序列表

<ul>
   <li>專案</li>
   <li>專案</li>
 </ul>

有序列表

<ol>
   <li>第一項</li>
   <li>第二項</li>
 </ol>

定義列表

<dl>
   <dt>專案 1</dt>
     <dd>描述專案 1</dd>
   <dt>專案 2</dt>
     <dd>描述專案 2</dd>
 </dl>

表格（Tables）

<table border="1">
   <tr>
     <th>表格標題</th>
     <th>表格標題</th>
   </tr>
   <tr>
     <td>表格資料</td>
     <td>表格資料</td>
   </tr>
 </table>

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表單（Forms）

<form action="demo_form.php" method="post/get">

<input type="text" name="email" size="40" maxlength="50"> 
<input type="password"> 
<input type="checkbox" checked="checked"> 
<input type="radio" checked="checked"> 
<input type="submit" value="Send"> 
<input type="reset"> 
<input type="hidden"> 

<select> 
<option>蘋果</option> 
<option selected="selected">香蕉</option> 
<option>櫻桃</option> 
</select>

<textarea name="comment" rows="60" cols="20">
</textarea> 
</form>

實體（Entities）

&lt; 等同於 <
&gt; 等同於 >
&copy; 等同於 ©

5.例項執行
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool 線上教程(www.w3cschool.cn)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
結果：

程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>

<a href="http://www.w3cschool.cn">這是一個連結使用了 href 屬性</a>

</body>
</html>

結果：