HTML 是用來描述網頁的一種語言
HTML 指的是超文字標記語言 (Hyper Text Markup Language)
HTML 不是一種程式語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML定義網頁的結構和內容
HTML的版本DOCTYPE宣告，指定要使用的HTML版本
常見版本宣告
HTML 5
<!DOCTYPE html>
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML元素
HTML元素是描述HTML文件各部分的結構
HTML元素大概有以下幾種方式：
元素具有開始標記、結束標記和中間的內容
<title>Hello World</title> 元素是包括從開始標記到結束標記的所有一切內容有的元素沒有內容所以不需要結束標記如：<br />
元素也可以巢狀到其他元素
<head><meta charset="utf-8" />
<title>Hello World</title>
</head>
理解一下下面的html程式碼回到後面的問題
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
這是第一個html頁面
</body>
</html>
上面html程式碼有多少個元素？5個元素2.上面html程式碼有多少個巢狀元素？4個巢狀元素3.上面html程式碼有哪些元素？html, head, title, body, meta 請對照仔細理解一下標題與段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>標題與段落演示</title>
</head>
<body>
<h1>標題1</h1>
<p>我是段落1</p>
<h2>標題2</h2>
<p>我是段落2</p>
<h3>標題3</h3>
<p>我是段落3</p>
<h4>標題4</h4>
<p>我是段落4</p>
</body>
</html>
格式化仔細對照程式碼和網頁效果就能理解了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>格式化演示</title>
</head>
<body>
<p>
.NET 5 下一代全平臺<b>.Net 框架</b> ，更多更詳細介紹我就不復制貼上了，也沒啥意義，<i>網上一搜一大把</i>，
這裡只是提一下讓大家有個印象就成。因為這個是個很基礎的系列，<u>所以很多方面都只是淺嘗輒止</u>，
<span style="color:red;">旨在讓初學者能夠直觀上有個概念然後能快速入門</span>，大夥可以根據這個線索提綱有針對性深度學習研究。
</p>
</body>
</html>
列表<html>
<head>
<meta charset="utf-8" />
<title>列表演示</title>
</head>
<body>
<h1>無序列表</h1>
<ul>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
<h1>有序列表</h1>
<ol>
<li>ItemA</li>
<li>ItemB</li>
<li>ItemC</li>
</ol>
</body>
</html>
圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片演示</title>
</head>
<body>
<img src="images/h5.png" width="80" height="100" />
<img src="images/js.png" width="80" height="100" />
<img src="images/css.png" width="80" height="100" />
</body>
</html>
HTML元素屬性HTML元素可以有屬性屬性提供有關元素的附加資訊屬性總是在開始標籤中指定屬性以鍵/值對的形式出現，如：key=“value”示例1<img src=“/images/h5.png”width=“50”height=“60”/>圖片路徑（src）和影象大小（width和height）都作為img元素的屬性示例2<p title=“關於NetCore”>跨平臺 .NET Core 是微軟推出的最新的跨平臺的框架，用它可 以建立的應用可以執行在MAC，Linux上 。</p>元素P有title屬性，值為“About RP” 超連結<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超連結演示</title>
</head>
<body>
<a href="https://docs.microsoft.com/zh-cn/dotnet/">Net官方文件</a>
<a href="https://www.microsoft.com/zh-cn/">微軟中文官網</a>
<a href="Heading.html">標題和段落演示</a>
<a href="Lists.html">列表演示</a>
</body>
</html>
DIVS
<div>元素是一個塊元素，可以用作其他HTML元素的容器。
它可用於將<h1>和<p>分組成塊。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIV演示</title>
</head>
<body>
<div style="width:450px;background-color:yellow;">
<h1>NET Framework</h1>
<p>NET Framework是用於Windows的新託管程式碼程式設計模型。它將強大的功能與新技術結合起來，用於構建具有視覺上引人注目的使用者體驗的應用程式，實現跨技術邊界的無縫通訊，並且能支援各種業務流程。</p>
</div>
<div style="width:450px;background-color:lightblue;">
<h1>NET Core</h1>
<p>.NET Core是適用於 Windows、Linux 和 macOS 的免費、開源託管的計算機軟體框架，是微軟開發的第一個官方版本，具有跨平臺能力的應用程式開發框架 (Application Framework)，未來也將會支援 FreeBSD 與 Alpine 平臺，也是微軟在一開始發展時就開源的軟體平臺 [1] ，它經常也會拿來和現有的開源 .NET 平臺 Mono 比較。</p>
</div>
</body>
</html>
表單
表單form元素用於前臺輸入後臺獲取前臺輸入相關資料。
在form元素中，有不同型別的輸入元素，常用如下：文字輸入
列表
下拉列表
複選框
<html>
<head>
<meta charset="utf-8" />
<title>表單演示</title>
</head>
<body>
<form id="userinfo">
<div>
<label for="name">使用者名稱：</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="nation">民族：</label>
<select id="nation">
<option>--請選擇--</option>
</select>
</div>
<div>
<label>性別：</label>
<input type="radio" name="gender" id="gender1" />男
<input type="radio" name="gender" id="gender2" />女
</div>
<div>
<label>興趣愛好：</label>
<input type="checkbox" name="like1" id="like1" />籃球
<input type="checkbox" name="like2" id="like2" />看書
<input type="checkbox" name="like3" id="like3" />跑步
</div>
<div>
<label for="introduce">介紹：</label>
<textarea id="introduce" name="introduce" rows="5" cols="40"></textarea>
</div>
<div>
<input type="submit" value="表單提交" />
</div>
</form>
</body>
</html>
HTML元素標識 id屬性是HTML元素的標識屬性，該值在HTML文件中必須是唯一的
id屬性主要用於：
透過CSS指向樣式表中的樣式
透過JavaScript操縱特定id的元素
示例
<div id=“menu”><input type=“text” id=“sno”>
HTML就簡單介紹到這裡，本節介紹了我們日常web網頁開發中所要用到的HTML元素，可以對照程式碼和執行效果進行理解，可以嘗試修改程式碼然後執行檢視實際效果。
下一節將介紹CSS