HTML
什麼是HTML？
①全稱：超文字標記語言
②超文字：在普通的文字內容的基礎上新增超連結、圖片、視訊等
③標記語言：HTML提供一系列標籤
④版本：HTML 4.01
HTML宣告
1.編碼格式：HTML 5
2.HTML的模版
①HTML的宣告 <!DOCTYPE html>
作用：告訴瀏覽器當前HTML頁面的版本和型別
用法：必須在HTML頁面的0行0列
注意：宣告並不是必要的，宣告讓瀏覽器更好地解析HTML頁面。
②根標籤<html>
閉合標籤:具有開始標籤和結束標籤
注意：一個HTML頁面中只能具有一個根標籤
③<head>標籤
作用：定義當前HTML頁面的資訊
子標籤
<title> 定義HTML頁面的標題，方便被搜尋引擎抓取。
<link> 引入外部的CSS檔案
<style> 編寫CSS樣式程式碼
<script> 引入外部的JavaScript檔案或編寫JavaScript程式碼
<meta> <meta charset=”UTF-8″> 設定編碼格式
<meta name=”keywords”> 設定關鍵字，方便被搜尋引擎抓取。
④<body>標籤
作用：顯示在瀏覽器視窗中
HTML的標籤
①閉合標籤：具有開始和結束標籤
②單標籤：只有開始標籤
HTML的屬性
1.定義：被定義在開始標籤
2.格式：屬性名稱=”值”
3.分類：
①標準屬性：幾乎所有的標籤都具有的屬性
舉例：id-標識，唯一
name-名稱
class
style
②私有屬性：只有某個具體的標籤具有的屬性
常見的標籤：
標題 <h1>~<h6>
效果：從大到小
<h1>：方便地搜尋引擎抓取，一個HTML頁面最好只有一個<h1>
段落 <p></p>
換行 <br>
水平線 <hr>
列表
①有序列表
<ol>
<li></li>
</ol>
②無序列表
<ul>
<li><li>
</ul>
③定義列表
<dl>
<dt>專案名稱</dt>
<dd>專案中的具體內容</dd>
</dl>
連結
<a href="地址"></a>作用：實現頁面之間的跳轉
②錨點
<a href="#名稱">回到頂部</a>| 屬性名 | 值 | 描述 |
|---|---|---|
| href | URL | 規定連結的目標 URL。 |
| target | _blank/_parent/_self | 規定在何處開啟目標 URL。僅在 href 屬性存在時使用。 |
路徑
①相對路徑：目標頁面相對於當前頁面的路徑
②絕對路徑：從根目錄開始查詢到目標頁面的路徑
圖片
①<img src=”圖片的地址” alt=””>
②顯示大小：width 設定圖片顯示的寬度
Height 設定圖片顯示的高度
③注意：設定顯示的寬度和高度與原圖片的比例保持一致
④img元素的屬性列表：
| 屬性名 | 值 | 描述 |
|---|---|---|
| align | topbottommiddleleftright | HTML5 不支援。HTML 4.01 已廢棄。 規定如何根據周圍的文字來排列影像。 |
| alt | text | 規定影像的替代文字。 |
| height | pixels | 規定影像的高度。 |
| src | URL | 規定顯示影像的 URL。 |
| width | pixels | 規定影像的寬度。 |
HTML表格
①概念：具有行和列
②基本結構<table> 表示表格<tr> 表示行<td> 表示單元格
③帶表頭的表格
表頭單元格由<th>建立，元素中的文字通常呈現粗體並居中。
標準單元格由<td>建立，元素中的文字預設左側對齊。
分類：
<thead> 表示表格的表頭，顯示在表格的最上面。
<tbody> 表示表格中的資料
<tfoot> 表示表格中的結尾，顯示在表格的最下面。
④帶標題的表格
<caption>定義標題：每個表格只能設定一個，預設居中顯示。
⑤跨行或跨列
rowspan 跨行
colspan 跨列
HTML表單
①作用：提交頁面中的資料內容
②<form>：表示表單
屬性名 值 描述
action URL 規定當提交表單時向何處傳送表單資料。
method get/post 規定用於傳送表單資料的 HTTP 方法。
name text 規定表單的名稱。
③表單的元件：<input>
④輸入框
<input type=”text”>
<input type=”password”>
⑤按鈕
<input type=”button”>
<input type=”reset”>
<input type=”submit”>
⑥單選或多選框
<input type=”radio”>
<input type=”checkbox”>
⑦隱藏域
<input type=”hidden”>
⑧檔案域
<input type=”file”>
⑨<select>
下拉單選框
下拉多選框
HTML實體
概念：HTML實體指的就是HTML的轉義字元
| 顯示結果 | 描述 | 實體名稱 |
|---|---|---|
| 空格 | ||
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和號 | & |
| “ | 引號 | “ |
| © | 版權（copyright） | © |
| ® | 註冊商標 | ® |
| ™ | 商標 | ™ |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |