HTML
一、結構
- html> 與 </html> 之間的文本描述網頁
- <body> 與 </body> 之間的文本是可見的頁面內容
- <h1> 與 </h1> 之間的文本被顯示為標題
- <p> 與 </p> 之間的文本被顯示為段落
<html>
<head>
快遞單
</head>
<body>
郵寄的東西
</body>
</html>
二、概念
- HTML(Hyper Text Markup Language)： 超文本標記型語言,方便快速查找。'
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
HTML標簽
- HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標簽通常是成對出現的，比如 <b> 和 </b>,有些是單個出現的。有些是沒有內容的。
- 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
- 開始和結束標簽也被稱為開放標簽和閉合標簽
- 看到的網頁 == HTML
三、與XML的區別
- HTML：<key>value</key> key標簽是指定的
- XML：<key>value</key> key標簽可以自己定義
四、HTML頭部元素
<head> 元素是所有頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
1、<title> 標簽
定義文檔的標題。
2、<base> 標簽
頁面上的所有鏈接規定默認地址或默認目標（target）。
<head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head>
3、<link> 標簽
定義文檔與外部資源之間的關系。
4、<style> 標簽
用於為 HTML 文檔定義樣式信息。
5、<meta> 標簽
提供關於 HTML 文檔的元數據。
meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。
元數據可用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
6、<script> 標簽
用於定義客戶端腳本，比如 JavaScript。
五、HTML實體
1、<p> 元素
<p> 元素定義了 HTML 文檔中的一個段落。
<p>This is my first paragraph.</p>
2、<body> 元素
定義了 HTML 文檔的主體。
3、<html> 元素
定義了整個 HTML 文檔。
4、<h1> - <h6> 標簽
<h1> 定義最大的標題。<h6> 定義最小的標題。
<h1> 定義標題</h1>
5、<hr /> 標簽
在 HTML 頁面中創建水平線。
6、HTML注釋
<!-- This is a comment -->
7、 <br /> 標簽
在不產生一個新段落的情況下進行換行。
8、HTML鏈接
<a href ="www.baidu.com"> 這是一個鏈接</a>
target屬性：使用target屬性，可以使鏈接在新窗口打開。
9、HTML圖像
<img src="圖片路徑" width=“100” herght=“100”>
10、HTML表格
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<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>
在瀏覽器顯示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
border屬性（border=“1”）：顯示一個帶有邊框的表格。
表頭使用 <th> 標簽進行定義。
11、HTML列表
- 無序列表：無序列表始於 <ul> 標簽。每個列表項始於 <li>。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
- 有序列表：有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
12、<iframe>標簽
用來在一個HTML頁面上顯示另一個HTML頁面。
<iframe src="www.baidu.com" height="100" width="200"> </iframe>
13、<input>標簽
用戶名： <input type="text">
用戶名： <input type="text" readonly>
用戶名： <input type="text" disabled>
<!--單選框-->
<p> 我最喜歡的歌手
<input type="radio" name="favor_singer" id="zjl" value="周傑倫" readonly>周傑倫
<input type="radio" name="favor_singer" id="ljj" value="林俊傑" checked>林俊傑
<input type="radio" name="favor_singer" id="zhm" value="張惠妹"disabled>張惠妹
</p>
<!--多選框-->
<p> 我愛聽的歌手
<input type="checkbox" name="listen" value="周傑倫">周傑倫
<input type="checkbox" name="listen" value="林俊傑" checked>林俊傑
<input type="checkbox" name="listen" value="張惠妹">張惠妹
</p>
<!--無論單選或者多選同一個問題必須加name屬性-->
<input type="button">
<input type="color">
<input type="time">
<input type="email"> <!--只能輸入email格式的數據-->
<input type="file">
<input type="number">
<input type="password">
<!--文本域-->
<p>
<textarea> </textarea>
</p>
<p>
<p style="color:red">最喜歡的水果</p>
<!--select里只顯示option元素，備注信息放到select外-->
<select>
<option></option>
<option>草莓</option>
<option>香蕉</option>
<option>蘋果</option>
</select>
<input type="submit">
</p>
屬性總結：
- id必須要唯一，不唯一瀏覽器不會識別到，但是會產生嚴重的影響，是編程人員的問題
- for設同一個id name不是唯一的，當a有兩個相同的name，錨會定位到第一個。name的作用非常有用，作為可與服務器交互數據的HTML元素的服務器端的標識，分組，錨點
- value值很重要，向后端傳輸的數據就是value
- style通常被css文件代替
- class通常用來做樣式分離，可以同時又多個值，用空格分開
- readlonly和disabe的區別：
- readonly只針對input（text/password）和textarea有效，而disabled對於所有的表單元素有有效，包括select、radio、checkbox、button等，但是表單如果在使用了readonly后，當我們將表單以post或get的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將值傳遞出去（這種情況出現在當我們將某個表單中的textarea元素設置為disabled或readonly，但是submit button確實可以使用的）
- checked，默認值