認識網頁

網頁的組成

網頁主要由文字、圖片和按鈕等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及 Flash 等。

Web 標準

1：w3c 萬維網聯盟組織：用來制定 web 標準的機構（組織）

2：web 標準：製作網頁要遵循的規範

3：web 標準規範的分類：結構標準；表現標準；行爲標準
- 結構標準：html（用來製作網頁的）
- 表現標準：css（對網頁進行美化的）
- 行爲標準：javascript（讓網頁動起來，具有生命力）

4：web 標準總結：
- 結構標準：相當於人的身體
- 表現標準：相當於人的衣服
- 行爲標準：相當於人的動作

瀏覽器介紹

瀏覽器是網頁運行的平臺，常用的瀏覽器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari 和 Opera 等。

瀏覽器內核：也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內，容以及頁面的格式信息。

IE	Google/Opera	FireFox	Safari
trident	blink	gecko	webkit

瀏覽器與服務器

1：瀏覽器向服務器發送請求（通過http協議）

2：http協議：超文本傳輸協議，也就是瀏覽器和服務器端的網頁傳輸數據的約束和規範

3：https：加密處理

4：url協議:平時我們寫的網址就是 url 地址

url協議：規定 url 地址的格式

協議規定格式： scheme://host.domain:port/path/filename

scheme: 定義因特網服務的類型。常見的就是http
host: 定義域主機（http 的默認主機是www）
domain: 定義因特網域名比如：w3school.com.cn
:port 定義端口號（網頁默認端口 :80）
path: 網頁所在服務器上的路徑
filename: 文件名稱

認識 html

概念

html (Hyper Text Markup Language ) 中文譯爲 超文本標記語言，主要是通過 html 標記對網頁中的文本，圖片，聲音等內容進行描述。

HTML 之所以稱爲超文本標記語言，不僅是因爲他通過標記描述網頁內容，同時也由於文本中包含了所謂的 超級鏈接，通過超鏈接可以實現網頁的跳轉。從而構成了豐富多彩的 Web 頁面。

html 結構

基本結構如下：

<! Doctype html>
  <html lang="en">
      <head>
         <title></title>
      </head>
      <body></body>
  </html>

各部分的含義：

<!-- 文檔類型 -->
<! Doctype html>

<!-- 根標籤 -->
<html></html>

<html></html> 用於告知瀏覽器其自身是一個 HTML 文檔，</html> 標記標誌着 HTML 文檔的開始，</html> 標記標誌着 HTML 文檔的結束，在他們之間的是文檔的頭部和主體內容。

<!-- <html lang="en"> 向搜索引擎表示該頁面是html語言，並且語言爲英文網站 -->
<html  lang="en">

這個主要是給搜索引擎看的，搜索引擎不會去判斷該站點是中文站還是英文站，所以這句話就是讓搜索引擎知道，你的站點是中文站，對 html 頁面本身不會有影響。

<!-- html文檔頭部分 -->
<head></head>

主要用來封裝其他位於文檔頭部的標記。一個 HTML 文檔只能含有一對 <head> 標記，絕大多數文檔頭部包含的數據都不會真正作爲內容顯示在頁面中。

<!-- 網頁的標題 -->
<title></title>

<title> 標記用於定義HTML頁面的標題，<title></title> 之間的內容將顯示在瀏即給網頁取一個名字，必須位於 <head> 標記之內。一個HTML文檔只能含有一對 <title></title> 標記，將顯示在瀏覽器窗口的標題欄中。

<!--例子-->
<title>Demo</title>

效果演示 ![這裏寫圖片描述](https://img-blog.csdn.net/20180407193702562)

<!-- html結構的主體部分 -->
<body></body>

<body> 標記用於定義 HTML 文檔所要顯示的內容，也稱爲主體標記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位於 <body> 標記內，<body> 標記中的信息纔是最終展示給用戶看的。

一個HTML文檔只能含有一對 <body> 標記，且 <body> 標記必須在 <html> 標記內，位於 <head> 頭部標記之後。

標籤的分類

HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。

HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>；
HTML 標籤通常是成對出現的，比如 <b> 和 </b>；
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤；
開始和結束標籤也被稱爲開放標籤和閉合標籤；

HTML標記—雙標記

雙標記也稱體標記，是指由開始和結束兩個標記符組成的標記。其基本語法格式如下：

<標記名></標記名>
<!-- 例如： -->
<body></body>

該語法中 <標記名> 表示該標記的作用開始，一般稱爲 開始標記（start tag），</標記名> 表示該標記的作用結束，一般稱爲 結束標記（end tag）。和開始標記相比，結束標記只是在前面加了一個關閉符 /。

HTML標記—單標記

單標記也稱空標記，只有開始標籤沒有結束標籤：

<標記名>
<!-- 例如： -->
<! doctype html>

標籤關係

嵌套關係：類似父親和兒子之間的關係

<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>

並列關係：類似與兄弟之間的關係

<head></head>
<body></body>

html 標籤介紹

單標籤

文本註釋標籤

<!-- 文本註釋標籤 Ctrl+/  -->

文本換行標籤

你好<br>我來自中國

效果演示：

你好
我來自中國

橫線標籤

<hr>

效果演示：

雙標籤

段落標籤

<p>
    這是一行文字
</p>
<p>
    這也是一行文字
</p>

效果演示：

標題標籤

注意：標題標籤只能取到數字 1-6

<h1>這是一個標題1</h1>
<h2>這是一個標題2</h2>
<h3>這是一個標題3</h3>
<h4>這是一個標題4</h4>
<h5>這是一個標題5</h5>
<h6>這是一個標題6</h6>

效果演示：

文本標籤

<font></font>

例如：

<font  size="10"  color="red">
    優美的文字
</font>

效果演示：

優美的文字

文本格式化標籤

文字加粗顯示

<strong>該減肥了！</strong>
<br>
<b>該減肥了！</b>

效果演示：
該減肥了！
該減肥了！

文字斜體

<em>這行字是斜的</em>
<i>這行字是斜的</i>

效果演示：

這行字是斜的
這行字是斜的

文字下橫線

<ins>文字下橫線</ins>
<u>文字下橫線</u>

效果演示：

文字下橫線
文字下橫線

文字刪除線

<del>刪除線</del>
<s>刪除線</s>

效果演示：

~~刪除線~~
~~刪除線~~

文字上標

aaaa<sup>aa</sup>

效果演示：

aaaa^aa

文字下標

bbbb<sub>bb</sub>

效果演示：

bbbb_bb

圖片標籤

<img>

屬性	描述
src	設置顯示圖片（圖片名稱或者圖片路徑）
title	用來設置鼠標放在圖片上顯示的文字
alt	當圖片無法正常顯示的時候，對圖片的描述
width	用來設置圖片寬度
height	用來設置圖片的高度

<!-- 下圖來自百度圖片 -->
<img src="www.baidu.com/imags/1.png" title="HTML" alt="測試圖片" width="200" height="200">

效果演示：

相對路徑

當圖片和文件（html）在同一個文件夾中時，src 屬性中直接寫上圖片名稱即可。

<img src="1.jpg">

當圖片在文件（html）的下一級目錄中時，src 屬性中寫上圖片所在的文件夾名 +“/” + 圖片名稱

<img src="1/1.jpg">

當圖片在文件（html）的上一級目錄中時，src 屬性中寫上 ../圖片所在文件夾名 + “/” + 圖片名稱

<img src="../2/1.jpg">

絕對路徑

凡是帶有 磁盤路徑 的都是絕對路徑，或者帶有 網站地址 的也是絕對路徑。

<img src="D:\a\1.png">
<img src="www.baidu.com/imags/1.png">

超鏈接

在HTML中創建超鏈接非常簡單，只需用 <a></a> 標記環繞需要被鏈接的對象即可，其基本語法格式如下：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

屬性	描述
href	用於指定鏈接目標的 url 地址，當爲 `<a>` 標記應用 `href` 屬性時，它就具有了超鏈接的功能。
target	用於指定鏈接頁面的打開方式，其取值有 `_self` 和 `_blank` 兩種，其中 `_self` 爲默認值， `_blank` 爲在新窗口中打開方式。

在 <head> 標籤中使用 <base> 標籤可以設置網頁整體鏈接的打開狀態。

<head>
    <base target="_blank">
</head>

實例：

<a href="http://www.baidu.com" target="_self">當前頁面跳轉到百度，記得回來繼續看哦~</a>
<a href="http://www.baidu.com" target="_blank">新頁面跳轉到百度，記得關掉回來繼續看哦~</a>

效果演示：

當前頁面跳轉到百度，記得回來繼續看哦~
新頁面跳轉到百度，記得關掉回來繼續看哦~

注意:

（1）暫時沒有確定鏈接目標時，通常將 <a> 標記的 href 屬性值定義爲“#”(即 href="#" )，表示該鏈接暫時爲一個空鏈接。

（2）不僅可以創建文本超鏈接，在網頁中各種網頁元素，如 圖像、表格、音頻、視頻 等都可以添加超鏈接。

錨鏈接

通過創建錨點鏈接，用戶能夠快速定位到目標內容。

創建錨點鏈接分爲兩步：

使用 “ <a href="#id名"> 鏈接文本 </a> ” 創建鏈接文本；
使用相應的 id 名標註跳轉目標的位置。

<!-- 例如在網頁頂部寫個你好 -->
<p id="db">你好</p>

<!-- 給 a 標籤設置 href 屬性 "#id名稱" -->
<a href="#db">返回頂部</a>

效果演示：

你好

返回頂部

特殊字符

特殊字符	描述	字符的代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
©	版權	`©`
®	註冊商標	`®`
°	攝氏度	`°`
±	正負號	`±`
×	乘號	`×`
÷	除號	`÷`
²	平方（上標2）	`²`
³	立方（上標3）	`³`

列表

無序列表（ul）

<ul>
    <li></li>  列表項
    <li></li>
    ......
</ul>

例如：

大家喜歡吃什麼水果
<ul>
    <li>蘋果</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>水蜜桃</li>
    <li>菠蘿</li>
</ul>

效果演示：

大家喜歡吃什麼水果

蘋果
香蕉
菠蘿

屬性：type

（默認值）實心圓點：disc

實心方塊：square

空心圓圈：circle

實例：

<ul>
    <li>蘋果</li>
    <li>香蕉</li>
</ul>
<ul type="square">
    <li>蘋果</li>
    <li>香蕉</li>
</ul>
<ul type="circle">
    <li>蘋果</li>
    <li>香蕉</li>
</ul>

效果演示：

有序列表（ol）

<ol>
    <li></li>
    <li></li>
</ol>

屬性：type

默認(阿拉伯數字)，A（ABCD排序），a（abcd排序），i（小寫的羅馬數字），I（大寫的羅馬數字）

屬性：start=”3”，表示從第幾個數開始

把大象放冰箱分幾步？
<ol type=""  start="3">
    <li>打開冰箱門</li>
    <li>把大象放進去</li>
    <li>關上冰箱門</li>
</ol>
<ol type="a"  start="3">
    <li>打開冰箱門</li>
    <li>把大象放進去</li>
    <li>關上冰箱門</li>
</ol>
<ol type="I"  start="3">
    <li>打開冰箱門</li>
    <li>把大象放進去</li>
    <li>關上冰箱門</li>
</ol>
<ol type="A"  start="3">
    <li>打開冰箱門</li>
    <li>把大象放進去</li>
    <li>關上冰箱門</li>
</ol>
<ol type="i"  start="3">
    <li>打開冰箱門</li>
    <li>把大象放進去</li>
    <li>關上冰箱門</li>
</ol>

效果演示：

自定義列表（dl）

自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

<dl>
    <dt></dt>  小標題
    <dd></dd>  列表項
    <dd></dd>
    <dd></dd>
</dl>

一般用於網頁的底部，例如：

<!-- 自定義列表 -->
<dl>
    <dt>售後服務</dt>
    <dd>收貨地址</dd>
    <dd>在線支付</dd>
    <dd>聯繫客服</dd>
</dl>

效果演示：

售後服務: 收貨地址; 在線支付; 聯繫客服

小補充

頁面背景音樂

<embed src="1.mp3" hidden="true">

屬性：

src：設置音樂路徑
hidden：隱藏播放按鈕，true 隱藏，false 顯示

頁面滾動效果

<!-- 中間的內容可以爲 文字、圖片，也可以是由程序生成的文字或圖片 -->
<marquee>
    ...
</marquee>

屬性	描述
height	設置高度
width	設置寬度
bgcolor	設置背景顏色
behavior	設定滾動的方式： alternate：表示在兩端之間來回滾動； scroll：表示由一端滾動到另一端，會重複； slide：表示由一端滾動到另一端，不會重複。
direction	設定滾動的時間： down：向下滾動； left：向左滾動； right：向右滾動； up：向上滾動。
loop	設置滾動次數，-1 表示一直滾下去

Meta標籤和Link標籤

Meta 標籤

meta 的屬性有兩種：name 和 http-equiv。

name 屬性

主要用於描述網頁，對應於 content（網頁內容）。

1、用來說明網頁使用的字符集，即編碼格式

<meta  charset="utf-8">

2、用以說明生成工具（如Microsoft FrontPage 4.0）等；

<meta name="generator" contect="">

3、向搜索引擎說明你的網頁的關鍵詞；

<meta name="keywords" contect="">

4、告訴搜索引擎你的站點的主要內容；

<meta name="description" contect="">

5、告訴搜索引擎你的站點的製作的作者；

<meta  name="author"  contect="你的姓名">

6、有時候會有一些站點內容，不希望被ROBOTS抓取而公開。爲了解決這個問題，ROBOTS開發界提供了兩個辦法：一個是robots.txt，另一個是 The Robots META 標籤。

<meta   name="robots" contect= "all|none|index|noindex|follow|nofollow">

robots 其中的屬性說明如下：

設定爲 all：文件將被檢索，且頁面上的鏈接可以被查詢；

設定爲 none：文件將不被檢索，且頁面上的鏈接不可以被查詢；

設定爲 index：文件將被檢索；

設定爲 follow：頁面上的鏈接可以被查詢；

設定爲 noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；

設定爲 nofollow`：文件將不被檢索，頁面上的鏈接可以被查詢。

http-equiv 屬性

<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />

網頁重定向，表示的是 5 秒後網頁自動跳轉到指定網址。

Link 標籤

<link  rel="icon"  href="favicon.ico">

給網頁 titile 中放置小圖標

<link rel="stylesheet"   href="1.css">

引入外部樣式表

表格（table）

表格基本結構

在 HTML 語言中，表格至少由 <TABLE> 標籤、<TR> 標籤和 <TD> 標籤這 3 對標籤組成。

1.<table>
<table>...</table> 標籤用於在HTML文檔中創建表格。它包含表名和表格本身內容的代碼。表格的基本單元是單元格，用 <td>...</td> 標籤定義。

2.<tr>
表格行用 <tr> 標籤定義，由單元格構成。多個行結合在一起就構成一個表格，這反映在用於創建表格的HTML語法中。表格的每一行都用 <tr> 標籤表示，並用相應的 </tr> 結束.

3.<td>
表格的每一行又有若干表格單元格，用 <td>...</td> 標籤表示。td 是”表格數據(Table Data)”的英文縮寫。<td> 標籤定義一個列，嵌套於 <tr> 標籤內。
border 屬性是最常用的屬性，可用於定義表格的單元格和結構。該屬性指定邊框的厚度，如果其值設置爲零(0)，則不顯示邊框。

基本語法：

<table>
    <tr>
        <td>姓名</td>
        <td>年齡</td>
        <td>職業</td>
        <td>籍貫</td>
    </tr>
</table>

效果演示（由於沒給border標籤賦值，所以看不到邊框）：

屬性介紹：

border：設置表格邊框的厚度
width：設置表格寬度
height：設置表格高度
cellspacing：設置單元格之間的距離
cellpadding：文字距離單元格邊框的距離
bgcolor=”red”：設置背景顏色
align=”center” | left | right：給 tr 或者 td 設置讓文字居中，給 table 設置讓表格居中

屬性名	含義	常用屬性值
border	設置邊框，默認爲0，沒有邊框	單位爲 px 像素值
cellspacing	設置單元格與單元格之間的距離	單位爲 px 像素值，默認爲 2px
cellpadding	設置文字與單元格之間的距離	默認 1px
width	設置表格的寬度	單位 px
height	設置表格的高度	單位 px
align	設置表格在網頁中的對其方式	left 左 rigth 右 center 居中
bgcolor	設置背景顏色	white，red，green等

設置表格表頭，用法和 td 一樣

表頭一般位於表格的第一行或第一列，其文本加粗居中。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>職業</th>
            <th>籍貫</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>碼農</td>
            <td>江蘇</td>
        </tr>
    </tbody>
</table>

效果演示（同上，沒給border和width賦值看不出效果）：

table標籤給border和width賦值後：

<table border="1" width="50%">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>職業</th>
            <th>籍貫</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>碼農</td>
            <td>江蘇</td>
        </tr>
    </tbody>
</table>

效果演示（給border和width賦值後的效果）：

表格屬性設置示例：

<table border="1" width="400" height="200" cellspacing="0" cellpadding="20" bgcolor="red">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>職業</th>
        <th>籍貫</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>碼農</td>
        <td>江蘇</td>
    </tr>
</table>

效果演示：

設置表格標題：

caption 標籤必須緊隨 table 標籤之後。只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。

<table border="1" cellpadding="0" width="50%">
    <!-- 設置表格標題 -->
    <caption><h3>人員信息表</h3></caption>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>職業</th>
        <th>籍貫</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>碼農</td>
        <td>江蘇</td>
    </tr>
</table>

效果演示：

表格結構

<table>
    <thead></thead>    頭
    <tbody></tbody>    身體
    <tfoot></tfoot>    腳
</table>

在使用表格進行佈局時，可以將表格劃分爲頭部、主體和頁腳，具體如下所示：

<thead></thead>：用於定義表格的頭部，必須位於 <table></table> 標記中，一般包含網頁的logo和導航等頭部信息。
<tbody></tbody>：用於定義表格的主體，位於 <table></table> 標記中 <thead></thead> 標記之後，一般包含網頁中除頭部和底部之外的其他內容。
<tfoot></tfoot>：用於定義表格的頁腳，位於 <table></table> 標記中 <tbody></tbody> 標記之後，一般包含網頁底部的企業信息等。

補充知識：單元格的合併

橫向合併

<tr>
    <td></td>
    <td colspan="2"></td>
    <td></td>
</tr>

實例展示：

<table border="1" cellspacing="0" cellpadding="20" width="50%">
    <tr>
        <th>姓名</th>
        <th colspan="2">年齡</th>
        <!--<th>職業</th>-->
        <th>籍貫</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>碼農</td>
        <td>江蘇</td>
    </tr>
</table>

效果演示：

縱向合併

<tr>
    <td></td>
    <td rowspan="2"></td>  <!-- 縱向合併 -->
    <td></td>
</tr>
<tr>
    <td></td>
    <!--<td></td>-->
    <td></td>
</tr>

實例展示：

<!-- 實例展示 -->
<table border="1" cellspacing="0" cellpadding="20">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>職業</th>
        <th>籍貫</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td rowspan="2">碼農</td>  <!-- 縱向合併 -->
        <td>江蘇</td>
    </tr>
    <tr>
        <td>小白</td>
        <td>21</td>
        <!--<td>前端</td>-->
        <td>北京</td>
    </tr>
</table>

效果演示：

表單（form）

表單介紹

表單的作用：主要負責數據採集功能。

對於表單構成中的表單控件、提示信息和表單域，對他們的具體解釋如下：

表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：他相當於一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到後臺服務器。

基本語法：

<form name="form_name" action="url" method="get|post">…</form>

屬性介紹：

Name ：定義表單的名稱；
Action ：用來指定表單處理程序的位置（服務器端腳本處理程序）；
Method: 定義表單結果從瀏覽器傳送到服務器的方式，默認參數爲：get。

get數據提交：① 通過地址欄的方式進行數據提交，將用戶輸入的信息顯出來；② get提交安全性差。

post提交：① 數據通過後臺進行提交，不會將用戶信息顯示出來；② 安全性比較好。

表單域

<form action="">
    …
</form>

容納表單空間和提示信息的一個區域。

表單控件

input 控件

語法：

<input  type=“控件類型”>

在上面的語法中，<input> 標記爲單標記，type屬性爲其最基本的屬性，其取值有多種，用於指定不同的控件類型。除了type屬性之外，<input> 標記還可以定義很多其他的屬性，其常用屬性如下表所示。

屬性	屬性值	描述
type	text password radio checkbox button submit reset image hidden file	單行文本輸入框密碼輸入框單選按鈕複選框普通按鈕提交按鈕重置按鈕圖像形式的提交按鈕隱藏域文件域
name	由用戶自定義	控件的名稱
value	由用戶自定義	input 控件中的默認文本值
size	正整數	input 控件在頁面中的顯示寬度
readonly	readonly	該控件內容爲只讀（不能編輯修改）
disabled	disabled	第一次加載頁面時禁用該控件（顯示爲灰色）

文本輸入框

<!-- 文本輸入框 -->
用戶名：<input type="text" maxlength="6"   name="username"  value="1234" >

效果演示：

屬性:

maxlength：設置文本輸入框最多能輸多少字符
readonly=”readonly”：設置文本輸入框爲只讀（不能編輯）
disabled+”disabled”：控件屬於非激活狀態
name=”username”：給輸入框設置名稱
value：設置默認顯示的值

密碼輸入框

<!-- 密碼輸入框 -->
密碼：<input type="password" name="pwd" value="123">

效果演示：

屬性用法與文本輸入框的用法一樣。

單選按鈕

<!-- 單選按鈕 -->
性別：
<input type="radio" name="xb"  checked="checked" value="nan">男
<input type="radio" name="xb" value="nv" >女

注意：實現單選效果一定要給控件設置相同的名稱

效果演示：

屬性：

checked=”checked”：設置默認選中項

多選控件

興趣愛好：
<input type="checkbox" checked="checked">抽菸
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">燙頭

效果演示（全默認選中）：

興趣愛好：
<input type="checkbox">抽菸
<input type="checkbox">喝酒
<input type="checkbox">燙頭

效果演示（全默認不選中）：

屬性：

checked=”checked”：設置默認選中項

圖片上傳控件

頭像：
<input type="file">

效果演示：

表單提交按鈕

<!-- 表單提交按鈕 -->
<input type="submit"  value="登錄">

效果演示：

普通按鈕

<!-- 普通按鈕 -->
<input type="button"  value="普通按鈕">

效果演示：

注意：該按鈕不能進行表單提交。通常和 js 代碼配合使用。

重置按鈕

清空所有表單數據，恢復到初始狀態

<!-- 重置按鈕 -->
<input type="reset">

效果演示：

圖片按鈕

<!-- 圖片按鈕 -->
<input type="image" src="按鈕.jpg">

select 控件

在 HTML 中，要想製作下拉菜單，就需要使用select控件。

下拉列表

出生地：
省：
<select multiple="multiple" size="6">
    <option>山東</option>
    <option>山西</option>
    <option>河南</option>
    <option>河北</option>
    <option  selected="selected">北京</option>
</select>

效果演示（顯示6條可選擇記錄，默認選中北京）：

屬性：

selected=”selected”：設置默認選中項
multiple=”multiple”：可以實現多選效果

下拉列表分組顯示

市(區)：
<select id="name">
    <optgroup label="北京市">
        <option>西城區 </option>
        <option>東城區</option>
        <option>海淀區</option>
        <option>昌平區</option>
    </optgroup>
    <optgroup label="上海市">
        <option>黃浦區 </option>
        <option>松江區</option>
        <option>浦東新區</option>
        <option>靜安區</option>
    </optgroup>
</select>

效果演示：

textarea 控件

如果需要輸入大量的信息，就需要用到 <textarea></textarea> 標記。通過 textarea 控件可以輕鬆地創建多行文本輸入框，其基本語法格式如下：

<textarea cols="每行中的字符數" rows="顯示的行數">
    文本內容
</textarea>

屬性：

cols：相當於寬度
rows：相當於高度

自我介紹：
<textarea cols="30" rows="5">
</textarea>

效果演示（文本框可以輸入內容）：

組合表單

fieldset 用於表單分組。

語法：

<fieldset>
    <legend>用戶註冊</legend>
</fieldset>

舉例：

<fieldset>
    <legend>用戶註冊</legend>
        用戶名：<input type="text" maxlength="6"   name="username"  value="" >
        <br>
        <br>
        密碼：<input type="password" name="pwd" value="123">
</fieldset>

效果演示：

表單補充

判斷網址

<!-- 判斷網址 -->
<input type="url">
<input type="submit">

判斷郵箱

<!-- 判斷郵箱 -->
<input type="email">
<input type="submit">

日期控件

<!-- 日期控件 -->
<input type="date">
<input type="submit">

時間控件

<!-- 時間控件 -->
<input type="time">
<input type="submit">

帶有 spinner 控件的數字字段

<!-- 帶有 spinner 控件的數字字段 -->
<input type="number">
<input type="submit">

屬性：

step：表示每次加減的值（即步長）

帶有 slider 控件的數字字段

<!-- 帶有 slider 控件的數字字段 -->
<input type="range">
<input type="submit">

屬性：

max：最大值
min：最小值
step：每次加減的值（即步長）

定義拾色器

<!-- 定義拾色器 -->
<input type="color">
<input type="submit">

標籤語義化

標籤語義化概念：

根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）

標籤語義化意義：

1: 網頁結構合理

2: 有利於 SEO :和搜索引擎建立良好溝通，有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取；

3: 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）;

4: 便於團隊開發和維護.

標籤語義化（注意事項）

1：儘可能少的使用無語義的標籤 div 和 span ；

2：在語義不明顯時，既可以使用 div 或者 p 時，儘量用 p, 因爲 p 在默認情況下有上下間距，對兼容特殊終端有利；

3：不要使用純樣式標籤，如：b、font、u 等，改用 css 設置。

4：需要強調的文本，可以包含在 strong 或者 em 標籤中。strong 默認樣式是加粗（不要用b），em 是斜體（不用 i ）；

總結

總的來說 html 很簡單，很容易上手。但這只是基礎，html + css + javascript 才能做出真正漂亮的網頁。

千里之行，始於足下，接下來的路，加油！

特殊字符	描述	字符的代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
©	版權	`©`
®	註冊商標	`®`
°	攝氏度	`°`
±	正負號	`±`
×	乘號	`×`
÷	除號	`÷`
²	平方（上標2）	`²`
³	立方（上標3）	`³`

特殊字符	描述	字符的代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
©	版權	`©`
®	註冊商標	`®`
°	攝氏度	`°`
±	正負號	`±`
×	乘號	`×`
÷	除號	`÷`
²	平方（上標2）	`²`
³	立方（上標3）	`³`

HTML5網頁編輯基礎(簡介+基礎標籤使用)

認識網頁

網頁的組成

Web 標準

瀏覽器介紹

瀏覽器與服務器

認識 html

概念

html 結構

標籤的分類

HTML標記—雙標記

HTML標記—單標記

標籤關係

html 標籤介紹

單標籤

文本註釋標籤

文本換行標籤

橫線標籤

雙標籤

段落標籤

標題標籤

文本標籤

文本格式化標籤

文字加粗顯示

文字斜體

文字下橫線

文字刪除線

文字上標

文字下標

圖片標籤

相對路徑

絕對路徑

超鏈接

錨鏈接

特殊字符

列表

無序列表（ul）

有序列表（ol）

自定義列表（dl）

小補充

頁面背景音樂

頁面滾動效果

Meta標籤和Link標籤

Meta 標籤

name 屬性

http-equiv 屬性

Link 標籤

表格（table）

表格基本結構

設置表格表頭，用法和 td 一樣

表格屬性設置示例：

設置表格標題：

表格結構

補充知識：單元格的合併

橫向合併

縱向合併

表單（form）

表單介紹

表單域

表單控件

input 控件

文本輸入框

密碼輸入框

單選按鈕

多選控件

圖片上傳控件

表單提交按鈕

普通按鈕

重置按鈕

圖片按鈕

select 控件

下拉列表

下拉列表分組顯示

textarea 控件

組合表單

表單補充

判斷網址

判斷郵箱

日期控件

時間控件

特殊字符	描述	字符的代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
©	版權	`©`
®	註冊商標	`®`
°	攝氏度	`°`
±	正負號	`±`
×	乘號	`×`
÷	除號	`÷`
²	平方（上標2）	`²`
³	立方（上標3）	`³`