HTML初識
(Hyper Text Markup Language): 超文本標記語言
「HTML骨架格式」
<!-- 頁面中最大的標簽 根標簽 -->
<html>
<!-- 頭部標簽 -->
<head>
<!-- 標題標簽 -->
<title></title>
</head>
<!-- 文檔的主體 -->
<body>
</body>
</html>
約定大小寫:
- HTML標簽名、類名、標簽屬性和大部分屬性值統一用小寫
HTML標簽關系
- 嵌套關系父子級包含關系
- 並列關系兄弟級並列關系
- 如果兩個標簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位（一個tab是4個空格）。如果是並列關系，最好上下對齊。
基本標簽和屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
文檔類型<!DOCTYPE >
用來說明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告訴瀏覽器按照HTML5標准解析頁面。
<html>
作用： <html>標簽用來告訴瀏覽器這個文檔中包含的信息是用HTML編寫的。
所有的網頁的內容都需要編寫到html標簽中， 一個頁面中html標簽只能有一個。 html標簽中有兩個子標簽head和body
<head>
作用： <head>標簽用來表示網頁的元數據，幫助瀏覽器解析網頁，head中的信息在瀏覽器中不可見。
<head>標簽作為html標簽的子元素的出現，一 個網頁中只能有一個head。
<meta>
<meta> 標簽可提供有關頁面的元信息，比如 針對搜索引擎和更新頻度的描述和關鍵詞。 <meta> 標簽位於文檔的頭部，不包含任何內 容。
• 設置頁面的字符集 – <meta charset="utf-8">
• 設置網頁的描述 – <meta name="description" content="">
• 設置網頁的關鍵字 – <meta name="keywords" content="">
• 請求的重定向 – <meta http-equiv="refresh" content="5;url=地址"/>
<title>
作用： <title>標簽表示網頁的標題，一般會在網頁的標題欄上顯示。 – title標簽中的文字，是頁面優化的最重要因素。在 搜索引擎的搜索時最先看到的、最醒目的內容。
用法： 建議將title標簽緊貼着head標簽編寫，這樣搜索 引擎可以快速檢索到標題標簽。 – 網站中的多個頁面的title也不應該重復，這樣不利 於搜索隱藏檢索。
<body>
作用： – 標簽用來設置網頁的主體，所有在頁 面中能看到的內容都應該編寫到body標簽中。
用法： – body標簽作為html的子標簽使用。
lang
- 根據根據lang屬性來設定不同語言的樣式，或者字體
- 告訴搜索引擎做精確的識別
- 讓語法檢查程序做語言識別
- 幫助翻譯工具做識別
- 幫助網頁閱讀程序做識別
字符集
(Character set)是多個字符的集合,計算機要准確的處理各種字符集文字，需要進行字符編碼，以便計算機能夠識別和存儲各種文字
UTF-8是目前最常用的字符集編碼方式，讓 html 文件是以 UTF-8 編碼保存的， 瀏覽器根據編碼去解碼對應的html內容。
<meta charset="UTF-8" />
常用標簽
排版標簽
主要和css搭配使用，顯示網頁結構的標簽，是網頁布局最常用的標簽
- 標題標簽
h(h1~h6) - 段落標簽
p，可以把 HTML 文檔分割為若干段落 - 水平線標簽
hr - 換行標簽
br - div和span標簽: 是沒有語義的，是我們網頁布局最主要的2個盒子。
文本格式化標簽
b和strong文字以粗體顯示i和em文字以斜體顯示s和del文字以加刪除線顯示u和ins文字以加下划線顯示
區塊標簽
div
圖像標簽img
| 屬性 | 值 | 說明 |
|---|---|---|
src |
URL | 規定顯示圖像的 URL。必填 |
width |
規定圖像的寬度。 | |
length |
規定圖像的長度， | |
alt |
text | 圖片加載失敗時的替代文本 |
title |
text | 鼠標懸浮在圖片上時的提示信息 |
注意：
-
圖片大小一般只設置長或寬的一種，如設置長度時寬度可自適應變化
-
標簽可以擁有多個屬性，屬性必須寫在開始標簽中，位於標簽名后面。
-
屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
-
采取 鍵值對 的格式 key="value" 的格式
超鏈接標簽
<a href="跳轉url" target="目標窗口的彈出方式">文本或圖像</a>
| 屬性 | 作用 |
|---|---|
| href | 用於指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能 |
| target | 用於指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，_blank為在新窗口中打開方式。 |
鏈接分類
-
外部鏈接 ，格式·
http://www.baidu.com -
內部鏈接 ，直接鏈接內部頁面名稱即可，比如跳轉首頁
< a href="index.html"> -
空鏈接，如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即
href="#")，表示該鏈接暫時為一個空鏈接。<!-- 在開發中可以將#作為超鏈接的路徑的展位符使用,點擊可回到頁面頂部 --> <a href="#">回到頂部</a> <!-- 可以使用 javascript:; 來作為href的屬性，此時點擊這個超鏈接什么也不會發生，常用來獲取當前行的數據並打開彈框 --> <a href="javascript:;" @click="openDialog(scope.row)">打開彈框</a> -
不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
-
錨點鏈接，通過創建錨點鏈接，用戶能夠快速定位到目標內容。
<!-- 使用相應的id名標注跳轉目標的位置。 (找目標) --> <h3 id="two">第2集</h3> <!-- 使用<a href="#id名">鏈接文本</a>創建鏈接文本（被點擊的） --> <a href="#two">
src 和 href 的區別
一句話概括: src 是引入資源的，href 是跳轉url的
- src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯系。
- src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
- href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接。如果我們在文檔中添加那么瀏覽器會識別該文檔為css文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
表格
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
table、tr、td，他們是創建表格的基本標簽，缺一不可
table用於定義一個表格標簽。tr標簽 用於定義表格中的行，必須嵌套在 table標簽中。td用於定義表格中的單元格，必須嵌套在<tr></tr>標簽中。字母 td 指表格數據（table data），即數據單元格的內容，現在我們明白，表格最合適的地方就是用來存儲數據的。td像一個容器，可以容納所有的元素。
**表頭單元格標簽th **: 一般表頭單元格位於表格的第一行或第一列，並且文本加粗居中，只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可。
表格屬性（了解）
大多數表格屬性在html5中已經廢除使用，改用css樣式
注意： border cellpadding cellspacing 默認為0
合並單元格
合並的順序我們按照先上后下、先左后右的順序 ，合並完之后需要刪除多余的單元格。
- 跨行合並：
rowspan="合並單元格的個數" - 跨列合並：
colspan="合並單元格的個數"
表格划分結構
- 頁眉:
<thead> - 主體：
<tbody> - 頁腳：
<tfoot>
注意：
- ：用於定義表格的頭部。用來放標題之類的東西。 內部必須擁有 標簽！
- ：用於定義表格的主體。放數據本體 。
- 放表格的腳注之類。
- 以上標簽都是放到table標簽中。
列表
無序列表ul
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。<li>與</li>之間相當於一個容器，可以容納所有元素。
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
有序列表 ol
<ol>標簽中的type屬性值為排序的序列號，不添加type屬性時，有序列表默認從數字1開始排序，常用的type屬性值分別為是1，a，A，i，I<ol reversed="reversed">中的reversed屬性能夠讓有序列表中的序列倒序排列。<ol start="3">中的start屬性值為數值型，有序列表中的第一個序列號將從3開始排列。
<ol type="A" start="2">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
自定義列表
定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
...
</dl>
表單
在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。表單目的是為了收集用戶信息。
- 表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
- 提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
- 表單域：它相當於一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后台服務器。
表單域<form>
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
重要屬性：
action: 設置提交的服務器地址method: 設置提交的方式 GET(默認值)或 POST
input 控件
input 輸入的意思，為單標簽，type屬性設置不同的屬性值用來指定不同的控件類型，除了type屬性還有別的屬性
下面通過一個簡單的例子來介紹幾個重要的屬性
<form action="1.php" method="post">
用戶名：<input type="text" name="username" value="birdy"> <br>
密碼：<input type="password" name="password"> <br>
<input type="submit" value="注冊">
</form>
密碼輸入123，點擊注冊按鈕后，傳給服務器參數如下
username=birdy
password=123
由此可見，type屬性定義輸入框的類型，name屬性定義傳遞給服務器的參數名，而value屬性則是參數的值
type屬性
type 屬性規定要顯示的 input元素的類型。
常見屬性
name屬性
name表單控件的名字， 后台可以通過這個name屬性定位到是哪一個控件。 頁面中的表單很多，name主要作用就是用於區別不同的表單控件。
- name屬性值是我們自己定義的。
- 單選框radio 如果是一組，我們必須給他們命名相同的名字name
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女