TML 標題

HTML 標題（Heading）是通過 <h1> - <h6> 標簽來定義的.

h是英文header標題的縮寫，標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文、PPT 等。

這里有六個標題元素標簽 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每個元素代表文檔中不同級別的內容：

<h1> 表示主標題（ the main heading ），<h2> 表示二級子標題（ subheadings ），<h3>表示三級子標題（ sub-subheadings ），<h4>、<h5>、<h6>字體的大小依次遞減。

<h1>這是標題1</h1>
<h2>這是標題2</h2>
<h3>這是標題3</h3>
<h4>這是標題4</h4>
<h5>這是標題5</h5>
<h6>這是標題6</h6>

HTML 段落

HTML 段落是通過標簽<p>來定義的，P是英文paragraph段落的縮寫，經常被用來創建一個段落，就和你寫作文一樣。

<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

HTML 中的鏈接

HTML 鏈接是通過標簽<a>來定義的。a標簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。

<a href="http://www.liyadong.cn">這是一個鏈接</a>
<a href="#">這是一個空鏈接</a> 

HTML 圖像

HTML 圖像是通過標簽<img>來定義的。使用img元素來為你的網站添加圖片，使用src 屬性指向一個圖片的具體地址。

<img src="logonew2.png" width="206" height="36">

請注意：img元素是自關閉元素，不需要結束標記。

HTML 強調

在 HTML 中我們可以使用em（emphasis）元素來標記這樣的情況，瀏覽器默認風格為斜體：

在 HTML 中我們還可以使用<strong>(strong importance)元素來標記這樣的請況，瀏覽器默認風格為粗體：

<p>我 <em>很高興</em>你不 <em>討厭我</em>.</p>
<p>這種液體是<strong>高毒性的</strong>.</p>
<p>我就指望你<strong>不會</strong> 遲到!</p>

HTML 水平線

<hr> 標簽在 HTML 頁面中創建水平線。

hr 元素可用于分隔內容，使用該元素產生的水平線可以在視覺上將文檔分隔成各個部分。

<p>hr 標簽定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>

HTML 注釋

可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。

HTML 注釋可以方便地用來幫助網頁設計人員，提醒他們與程序相關的信息。

注釋寫法如下:

<!-- 這是一個注釋 -->

HTML 折行

如果您希望在不產生一個新起點的情況下進行換行（新行），請使用 <br /> 標簽。

在 HTML 語言中，<br /> 標簽定義為一個換行符，它可以理解為簡單的輸入一個空行，而不是用來對內容進行拆分：

<p>這個<br>段落<br>演示了分行的效果</p>

HTML 文本格式化標簽

HTML "計算機輸出" 標簽

HTML 引文, 引用, 及標簽定義

HTML <q> 用于短的引用

HTML <q> 元素定義短的引用。

瀏覽器通常會為 <q> 元素包圍引號。

<p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>

用于長引用的 HTML <blockquote>

HTML <blockquote> 元素定義被引用的節。

瀏覽器通常會對 <blockquote> 元素進行縮進處理。

<p>以下內容引用自 WWF 的網站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年來，WWF 一直致力于保護自然界的未來。
世界領先的環保組織，WWF 工作于 100 個國家，
并得到美國一百二十萬會員及全球近五百萬會員的支持。
</blockquote>

用于縮略詞的 HTML <abbr>

HTML <abbr> 元素定義縮寫或首字母縮略語。

對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜索引擎提供有用的信息。

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

用于定義的 HTML <dfn>

HTML <dfn> 元素定義項目或縮寫的定義。

<dfn> 的用法，按照 HTML5 標準中的描述，有點復雜：

1. 如果設置了 <dfn> 元素的 title 屬性，則定義項目：

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

2. 如果 <dfn> 元素包含具有標題的 <abbr> 元素，則 title 定義項目：

<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

3. 否則，<dfn> 文本內容即是項目，并且父元素包含定義。

<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

注釋：如果您希望簡而化之，請使用第一條，或使用 <abbr> 代替。

用于聯系信息的 HTML <address>

HTML <address> 元素定義文檔或文章的聯系信息（作者/擁有者）。此元素通常以斜體顯示。大多數瀏覽器會在此元素前后添加折行。

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

用于著作標題的 HTML <cite>

HTML <cite> 元素定義著作的標題。

瀏覽器通常會以斜體顯示 <cite> 元素。

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

用于雙向重寫的 HTML <bdo>

HTML <bdo> 元素定義雙流向覆蓋（bi-directional override）。

<bdo> 元素用于覆蓋當前文本方向：

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML 引文、引用和定義元素

HTML 區塊

HTML 可以通過 <div> 和 <span> 將元素組合起來。

HTML 區塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

實例: <h1>, <p>, <ul>, <table>

HTML 內聯元素

內聯元素在顯示時通常不會以新行開始。

實例: <b>, <td>, <a>, <img>

HTML <div> 元素

<div> 標簽可以把文檔分割為獨立的、不同的部分。

HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。

如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。

<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。

<p>這是一些文本。</p>
<div style="color:#00FFFF">
<h3>這是一個在 div 元素中的標題。</h3>
<p>這是一個在 div 元素中的文本。</p>
</div>
<p>這是一些文本。</p>

HTML <span> 與元素

HTML <span> 元素是內聯元素，可用作文本的容器

<span> 元素也沒有特定的含義。

當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。

<p>我有一雙
<span style="color:gold">金色</span> 的
<span style="font-size:50px">大眼睛</span>和 
<span style="color:blue">藍色的頭發</span>。
</p> 

HTML 分組標簽

HTML無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表適合成員之間無級別順序關系的情況。

無序列表使用 <ul> 標簽：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。

有序列表適合各項目之間存在順序關系的情況。

<ol>       
<li>Coffee</li>      
<li>Milk</li>       
</ol>

HTML 自定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

自定義列表中的一個術語名可以對應多重定義或者多個術語名對應同一個定義，如果只有術語名或者只有定義也是可行的，也就是說 <dt> 與 <dd> 在其中數量不限、對應關系不限。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML 表格

表格由<table>標簽來定義。每個表格均有若干行（由<tr>標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

　HTML 表格的基本結構：

<table>…</table>：定義表格

<th>…</th>：定義表格的標題欄（文字加粗）

<tr>…</tr>：定義表格的行

<td>…</td>：定義表格的列

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML 表格標簽

HTML框架

<iframe>標簽規定一個內聯框架。

一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。

通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。

iframe 語法：

<iframe src="URL"></iframe>

該URL指向不同的網頁，將窗口內容顯示為URL地址指向頁面。

height和width屬性用來定義iframe標簽的高度與寬度。屬性默認以像素為單位, 但是你可以指定其按比例顯示 (如："80%").

<iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>

iframe可以顯示一個目標鏈接的頁面，目標鏈接的屬性必須使用iframe的屬性，如下實例：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

HTML 表單

表單是一個包含表單元素的區域。

表單元素是允許用戶在表單中輸入內容，比如：文本域 (textarea)、下拉列表、單選框 (radio-buttons)、復選框 (checkboxes)等等。

表單使用表單標簽 <form> 來設置:

<form>
.   
input elements        
.
</form>

文本域通過 <input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。您可以在編程測試中創建文本輸入框！

<form>
姓名: <input type="text" name="firstname"><br>       
電話號碼: <input type="text" name="lastname">      
</form>

密碼字段通過標簽 <input type="password"> 來定義:

單選按鈕（Radio Buttons）

<input type="radio"> 標簽定義了表單單選框選項。

<form>        
<input type="radio" name="sex" value="male">男<br>      
<input type="radio" name="sex" value="female">女       
</form>

復選框（Checkboxes）

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

<form>      
<input type="checkbox" name="vehicle" value="Bike">我有自行車<br>      
<input type="checkbox" name="vehicle" value="Car">我有小車
</form>

提交按鈕 (Submit Button)

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

以上內容整理于網絡，如有侵權請聯系刪除。

TML常用元素使用練習2

NO.3:<!--注釋-->

注釋標簽是為代碼添加注釋使用的，它的內容不會顯示在頁面中。幾乎每種編程語言都有自己注釋的寫法。對于一些復雜代碼標注注釋對團隊合作非常重要，即使自己若干年后打開以前寫的代碼，也能通過注釋快速回憶起曾經的思路。當然，HTML很少用到注釋，因為它太簡單了。

<!--這里是注釋-->代碼示例：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1><hr>
<p>千里之行始于足下<br>值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，<br>
  因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元<br>
  素及屬性的指定形成一個整體認識，以后可以根據需求通過查詢手冊來自己學習其他<br>
  元素及其屬性的用法。</p><hr><!--這里是注釋-->
</body> 
</html>

因為頁面中沒有顯示，就不給大家截圖了。

NO.4:<img>

<img>可以用來顯示圖片元素，但是寫法和之前的元素不太一樣，這個元素沒有結尾標簽。它是通過改變標簽的src屬性向頁面導入圖片。

在做這個練習之前我們需要做一個準備工作，

step1：找一張圖片，例如：下面這張美女

step2：右鍵-另存為

step3：選擇路徑，我們在之前的篇章中已經帶領大家在自己的某個盤上建立了一個叫做"零基礎自學網頁制作"的文件夾，圖片保存到這個文件夾中！

step4：圖片命名為 image1.jpg

step5：確定你的"第一個頁面.html"文件和"image1.jpg"在一個文件夾中。

<img src="image1.jpg"/> 示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body><h1>第一個網頁</h1><hr>
<img src="image1.jpg"/>
  </body> 
</html>

頁面效果如圖所示：

HTML元素中除了有向首尾標簽中間添加文字來顯示內容的元素，也有通過src屬性導入信息的元素。

NO.5:<a></a>

<a></a>標簽是用來添加超鏈接的元素，這個元素的寫法比較有趣。

<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516">零基礎自學網頁制作——序章（學習目的、對象、基本概念）</a>代碼示例：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1>
<hr><a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516"> 零基礎自學網頁制作——序章（學習目的、對象、基本概念）</a></body> </html>

頁面效果如圖：

通過點擊"零基礎自學網頁制作——序章（學習目的、對象、基本概念）"可以跳轉到相應頁面。

通過觀察發現，a標簽是在首尾標簽之間添加要顯示的文字內容，通過為href屬性添加網址完成超鏈接設置。

大家思考一下，如果把文字換成圖片，超鏈接還會起作用嗎？

示例代碼如下：

<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_
id=6785149184245760516?group_id=6785149184245760516"><img src="image1.jpg"/></a>

使用"<img src="image1.jpg"/>"代替"零基礎自學網頁制作——序章（學習目的、對象、基本概念）"。

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1><hr>
<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group
_id=6785149184245760516?group_id=6785149184245760516"> <img src="image1.jpg"/></a>
  </body> 
  </html>

效果如下：

看起來似乎沒有變化，但是鼠標移動到圖片上時，箭頭變成了小手的圖標。

點擊后打開目標鏈接。

今天的內容到這里就結束了，通過這幾個元素的學習，大家對html元素的使用建立了基本概念。

下一期我們將詳細講解html元素中的屬性，在練習中再次介紹幾個常用元素，并為大家講解"絕對路徑"與"相對路徑"的區別。

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作