前端篇之Html基礎語法(二十九)
HTML 元素
HTML元素指的是HTML文檔中的標簽和內容。標簽用于定義元素的類型，而內容則是元素所包含的內容。HTML元素由開始標簽和結束標簽組成，也可以是自閉合標簽。
例如，下面是一個叫做<p>的HTML元素：
<p>This is a paragraph.</p>
其中，<p>是開始標簽，</p>是結束標簽，而This is a paragraph.則是<p>元素的內容。
另外，還有一些特殊的HTML元素，比如<!DOCTYPE>和<html>，它們并不需要結束標簽。
HTML 屬性
HTML 屬性是用于定義 HTML 元素的特殊特性，如元素的顏色、大小、鏈接、標題等。屬性的值可以是字符串、數字、布爾值等不同類型的數據，以便于元素的展示和交互。以下是一些常見的 HTML 屬性：
-
class：為元素指定一個或多個樣式類名。
-
id：為元素指定一個唯一的標識符。
-
style：為元素指定一組內聯樣式。
-
src：為圖像、音頻、視頻等元素指定資源的 URL 地址。
-
href：為鏈接元素指定目標 URL 地址。
-
title：為元素指定提示信息。
-
target：為鏈接元素指定打開方式（在當前窗口、在新窗口、在同一框架等）。
-
alt：為圖像元素指定當無法顯示該圖像時的替代文本。
這些屬性只是 HTML 中的一小部分，還有許多其他屬性和用法。正確地使用和理解 HTML 屬性是開發完整、有效的 Web 應用程序的重要組成部分。
HTML 文本格式化
HTML 文本格式化可以通過使用HTML標簽來控制文本的樣式和排版。以下是一些常見的HTML標簽：
-
標題標簽：
<h1>到<h6>標簽用于定義不同級別的標題，其中<h1>是最高級別的標題，依次遞減。 -
段落標簽：
<p>標簽用于定義段落，可以在其中添加文本和其他標簽。 -
粗體標簽：
<b>或<strong>標簽用于將文本加粗。 -
斜體標簽：
<i>或<em>標簽用于將文本斜體化。 -
下劃線標簽：
<u>標簽用于在文本下方添加下劃線 -
刪除線標簽：
<del>標簽用于在文本上添加刪除線。 -
超鏈接標簽：
<a>標簽用于創建鏈接，可以將其他網頁、文檔或文件與文本關聯起來。 -
圖片標簽：
<img>標簽用于在文本中插入圖片。 -
列表標簽：
<ul>和<ol>標簽用于創建無序和有序列表，其中<li>標簽用于定義列表項。 -
換行標簽：
<br>標簽用于在文本中插入一個換行符。
除此之外，還有許多其他的HTML標簽可以用來格式化文本，在實際使用中可以根據需要選擇合適的標簽。
Html圖像
HTML (Hypertext Markup Language)可以在網站中顯示圖像。HTML中使用<img>標簽來插入圖像，具體代碼如下：
<img src="image.jpg" alt="圖片描述">
其中，src屬性指定要插入的圖像的URL，alt屬性指定當圖像無法加載時顯示的替代文本。
可以通過CSS樣式來控制圖像的大小、對齊和邊框等。例如：
<img src="image.jpg" alt="圖片描述" style="width: 300px; height: 200px; border: 1px solid black;">
在這個例子中，CSS樣式將圖像寬度設置為300像素，高度設置為200像素，并添加了一個1像素的黑色邊框。
需要注意的是，插入圖像時應確保圖片文件在服務器上可用，并且URL路徑正確。
Html鏈接
HTML鏈接是指將文本或圖像與另一個網頁、文件或位置相關聯的標記。HTML中使用<a>標簽創建鏈接，其中href屬性定義需要鏈接到的目標URL。以下是一個示例鏈接代碼：
<a href="https://www.baidu.com">點擊此處訪問示例網站</a>
該代碼將創建一個文本鏈接，將用戶帶到“https://www.baidu.com”網站。
點擊此處訪問示例網站
Html 列表
在 HTML 中，有三種主要的列表類型：無序列表，有序列表和定義列表。
無序列表（Unordered List）
無序列表使用 <ul> 標簽來定義，其中每個項目都使用 <li> 標簽。無序列表通常用于列出沒有特定順序的項目。
<ul><li>項目1</li><li>項目2</li><li>項目3</li>
</ul>
效果如下：
- 項目1
- 項目2
- 項目3
有序列表（Ordered List）
有序列表使用 <ol> 標簽來定義，其中每個項目都使用 <li> 標簽。有序列表通常用于列出有特定順序的項目。
<ol><li>第一項</li><li>第二項</li><li>第三項</li>
</ol>
效果如下：
- 第一項
- 第二項
- 第三項
定義列表（Definition List）
定義列表使用 <dl> 標簽來定義，其中每個項目由一個術語和一個定義組成。術語使用 <dt> 標簽定義，定義使用 <dd> 標簽定義。
<dl><dt>術語1</dt><dd>定義1</dd><dt>術語2</dt><dd>定義2</dd><dt>術語3</dt><dd>定義3</dd>
</dl>
效果如下：
- 術語1
- 定義1 術語2
- 定義2 術語3
- 定義3
Html 表格
HTML表格是一種在網頁上呈現數據的標準方法。它是由一系列行和列組成的矩形區域，并且數據通常按行列排列。
以下是HTML表格的基本結構：
<table><tr><th>表頭</th><th>表頭</th></tr><tr><td>數據</td><td>數據</td></tr><tr><td>數據</td><td>數據</td></tr>
</table>
在這個例子中，用<table>標簽定義表格，用<tr>標簽定義行，用<th>標簽定義表頭單元格，用<td>標簽定義數據單元格。<tr>中的單元格可以根據需要添加或刪除，以適合表格的大小和內容。
效果如下：
| 表頭 | 表頭 |
|---|---|
| 數據 | 數據 |
| 數據 | 數據 |
Html 表單
HTML表單是一種Web頁面元素，它允許用戶輸入數據并將其發送到服務器進行處理。表單由一組表單元素（如輸入字段、下拉列表、復選框、單選按鈕等）組成，還包括提交按鈕或重置按鈕，以便用戶可以提交表單或重置表單中的所有輸入。
HTML表單由<form>標簽定義，該標簽包含表單中的所有表單元素，并指示表單發送到哪個URL進行處理。表單元素由各種輸入類型標簽（如<input>、<select>、<textarea>等）定義。
例如，以下代碼是一個簡單的HTML表單，它包括三個輸入字段（姓名、電子郵件和評論），以及一個提交按鈕：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單</title>
</head>
<body><form action="process-form.php" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><br><label for="email">電子郵件：</label><input type="email" id="email" name="email"><br><label for="comment">評論：</label><br><textarea id="comment" name="comment"></textarea><br><input type="submit" value="提交">
</form>
</body>
</html>
在此示例中，表單將提交到process-form.php頁面進行處理，其中包括三個輸入字段（姓名、電子郵件和評論），每個輸入字段都被指定一個ID和一個名稱。最后，提交按鈕標記為標簽，并設置其類型為“submit”。
瀏覽器顯示效果如下:
 的 蛋白質結構預測 項目流程)
