HTML簡(jiǎn)介
HTML(HyperText Mark-up Language)中文名稱為超文本標(biāo)記語言，一種為普通文件中某些字句加上標(biāo)識(shí)的語言，其目的在于運(yùn)用標(biāo)記（tag）合文件達(dá)到預(yù)期的效果。
HTML的優(yōu)點(diǎn)
- HTML文件比較小，便于在網(wǎng)絡(luò)上傳輸；
- HTML文檔獨(dú)立于計(jì)算機(jī)操作平臺(tái)；
- 原則上，建立HTML文檔不需要任何特殊的軟件，只需一般的文本編輯器即可；
- HTML標(biāo)記語言，非常便于學(xué)習(xí)。
HTML的局限性
- 直接用文本編輯時(shí)，不是所見即所得；
- 不同瀏覽器對(duì)同一個(gè)HTML文檔可能得到不同的顯示效果；
- 已定義的標(biāo)記往往不能滿足多方面的需要。
HTML基礎(chǔ)標(biāo)簽
HTML頭部結(jié)構(gòu)
DOCTYPE html
聲明文檔類型為HTML5文件。文檔聲明在HTML5文檔必不可少，且必須放在文檔的第一行。
meta
<meta> 標(biāo)簽提供了 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在客戶端，但是會(huì)被瀏覽器解析。META元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時(shí)間，作者及其他元數(shù)據(jù)。元數(shù)據(jù)可以被使用瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 Web 服務(wù)調(diào)用。
| 屬性 | 值 | 描述 |
|---|---|---|
| charset | character_set | 定義文檔的字符編碼。 |
| content | text | 定義與 http-equiv 或 name 屬性相關(guān)的元信息。 |
| http-equiv | content-type default-style refresh |
把 content 屬性關(guān)聯(lián)到 HTTP 頭部。 |
| name | application-name author description generator keywords |
把 content 屬性關(guān)聯(lián)到一個(gè)名稱。 |
實(shí)例 1 - 定義文檔關(guān)鍵詞，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
實(shí)例 2 - 定義web頁面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">
實(shí)例 3 - 定義頁面作者：
<meta name="author" content="Hege Refsnes">
實(shí)例 4 - 每30秒刷新頁面：
<meta http-equiv="refresh" content="30">
link
link標(biāo)簽定義文檔與外部資源的關(guān)系。link標(biāo)簽最常見的用途是鏈接樣式表。
| 屬性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 不支持該屬性。 定義被鏈接文檔的字符編碼方式。 |
| href | URL | 定義被鏈接文檔的位置。 |
| hreflang | language_code | 定義被鏈接文檔中文本的語言。 |
| media | media_query | 規(guī)定被鏈接文檔將顯示在什么設(shè)備上。 |
| rel | alternate archives author bookmark external first help icon last license next nofollow noreferrer pingback prefetch prev search sidebar stylesheet tag up |
必需。定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。 |
| rev | reversed relationship | HTML5 不支持該屬性。 定義被鏈接文檔與當(dāng)前文檔之間的關(guān)系。 |
| sizes | HeightxWidth any |
定義了鏈接屬性大小，只對(duì)屬性 rel="icon" 起作用。 |
| target | _blank _self _top _parent frame_name |
HTML5 不支持該屬性。 定義在何處加載被鏈接文檔。 |
| type | MIME_type | 規(guī)定被鏈接文檔的 MIME 類型。 |
實(shí)例
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
title
標(biāo)簽定義文檔的標(biāo)題，在所有 HTML 文檔中是必需的。
實(shí)例
<html>
<head>
<title>文檔標(biāo)題</title>
</head>
</html>
常見的塊級(jí)標(biāo)簽
常見的塊級(jí)標(biāo)簽
標(biāo)題標(biāo)簽<h1></h1>...<h6></h6>
水平線<hr/>
段落<p></p>
換行<br/>
引用<blockquote</blockquote>
預(yù)格式<pre></pre> 可以保留您需要的文本格式，比如不會(huì)取消換行和空格，并且所示文本是等寬的。
ol(order list)
標(biāo)簽定義了一個(gè)有序列表. 列表排序以數(shù)字來顯示。
| 屬性 | 值 | 描述 |
|---|---|---|
| compact | compact | HTML5中不支持，不贊成使用。請(qǐng)使用樣式取代它。規(guī)定列表呈現(xiàn)的效果比正常情況更小巧。 |
| reversed | reversed | 指定列表倒序(9,8,7...) |
| start | number | HTML5不支持，不贊成使用。請(qǐng)使用樣式取代它。規(guī)定列表中的起始點(diǎn)。 |
| type | 1 A a I i |
規(guī)定列表的類型。不贊成使用。請(qǐng)使用樣式代替。 |
實(shí)例
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
ul(unorder list)
標(biāo)簽定義了一個(gè)無序列表.
實(shí)例
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
定義描述列表
<dl>標(biāo)簽定義一個(gè)描述列表。<dl>標(biāo)簽與 <dt>（定義項(xiàng)目/名字）和 <dd> 描述每一個(gè)項(xiàng)目/名字）一起使用。<dl>標(biāo)簽必須有開始標(biāo)簽和結(jié)束標(biāo)簽。
實(shí)例
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
div
<div> 標(biāo)簽定義 HTML 文檔中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分。<div> 元素經(jīng)常與 CSS 一起使用，用來布局網(wǎng)頁。
實(shí)例
<div style="color:#0000FF">
<h3>這是一個(gè)在 div 元素中的標(biāo)題。</h3>
<p>這是一個(gè)在 div 元素中的文本。</p>
</div>
常見的行級(jí)標(biāo)簽
常見的行級(jí)標(biāo)簽
span 文本 : 用于包裹一部分文字，進(jìn)行特定樣式的修改。
小明真<span style="color:red; font-size:36px;">酷</span>??！
img 圖片
em 強(qiáng)調(diào)：瀏覽器顯示為傾斜
strong 強(qiáng)調(diào)：瀏覽器顯示為加粗。
q 短引用
a 超鏈接
i 傾斜
b 加粗
small 縮小字體
u 下劃線
q
標(biāo)簽定義一個(gè)短的引用。瀏覽器經(jīng)常會(huì)在這種引用的周圍插入引號(hào)。
| 屬性 | 值 | 描述 |
|---|---|---|
| cite | URL | 規(guī)定引用的源 URL。 |
實(shí)例
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
img
標(biāo)簽用于展示 HTML 頁面中的圖像，使得頁面能夠“圖文并茂”。img標(biāo)簽有兩個(gè)必需的屬性：src 和 alt。
| 屬性 | 值 | 描述 |
|---|---|---|
| align | top bottom middle left right |
HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定如何根據(jù)周圍的文本來排列圖像。 |
| alt | text | 規(guī)定圖像的替代文本。 |
| border | pixels | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定圖像周圍的邊框。 |
| crossorigin | anonymous use-credentials |
設(shè)置圖像的跨域?qū)傩?/td> |
| height | pixels | 規(guī)定圖像的高度。 |
| hspace | pixels | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定圖像左側(cè)和右側(cè)的空白。 |
| ismap | ismap | 將圖像規(guī)定為服務(wù)器端圖像映射。 |
| longdesc | URL | HTML5 不支持。HTML 4.01 已廢棄。 指向包含長(zhǎng)的圖像描述文檔的 URL。 |
| src | URL | 規(guī)定顯示圖像的 URL。 |
| usemap | #mapname | 將圖像定義為客戶器端圖像映射。 |
| vspace | pixels | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定圖像頂部和底部的空白。 |
| width | pixels | 規(guī)定圖像的寬度。 |
實(shí)例
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
表格標(biāo)簽
table
<table></table>表格框
<tr></tr>表格行
<td></td>表格列
<th></th> 表格標(biāo)題列（將tr中的td替換為th)，th默認(rèn)加粗且在單元格居中顯示。
table屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left center right |
HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定表格相對(duì)周圍元素的對(duì)齊方式。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定表格的背景顏色。 |
| border | 1 "" |
規(guī)定表格單元是否擁有邊框。 |
| cellpadding | pixels | HTML5 不支持。規(guī)定單元邊沿與其內(nèi)容之間的空白。 |
| cellspacing | pixels | HTML5 不支持。規(guī)定單元格之間的空白。 |
| frame | void above below hsides lhs rhs vsides box border |
HTML5 不支持。規(guī)定外側(cè)邊框的哪個(gè)部分是可見的。 |
| rules | none groups rows cols all |
HTML5 不支持。規(guī)定內(nèi)側(cè)邊框的哪個(gè)部分是可見的。 |
| summary | text | HTML5 不支持。規(guī)定表格的摘要。 |
| width | pixels % |
HTML5 不支持。規(guī)定表格的寬度。 |
實(shí)例-1 一個(gè)簡(jiǎn)單的 HTML 表格，包含兩列兩行：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
table多列與多行
跨列：colspan，某單元格跨N列，則該單元格右邊的N-1個(gè)td就不需要了。
跨行：rowspan，某單元格跨N行，則該單元格下邊的N-1個(gè)td就不需要了。
實(shí)例-2 表格單元橫跨兩列的表格
<table width="100%" border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>
實(shí)例-3 表格單元豎跨兩列的表格
<table border="1">
<tr>
<td rowspan="2">星期一</td>
<td>星期二</td>
</tr>
<tr>
<td>星期三</td>
</tr>
</table>
表單標(biāo)簽
表單語法
HTML 表單用于搜集不同類型的用戶輸入
實(shí)例-1 form基本使用 method規(guī)定如何發(fā)送表單數(shù)據(jù),常用值：get|post。action表示向何處發(fā)送表單數(shù)據(jù)
<form method="post" action="result.html">
<p>名字：<input name="name" type="text" ></p>
<p>密碼：<input name="pass" type="password"></p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>
常用表單元素
input 表單元素，表單項(xiàng)
實(shí)例-1 文本框
<input type="text"(文本框) name="userName"(文本框名稱) value="用戶名"(文本框初始值) size="30"(文本框長(zhǎng)度) maxlength="20"(文本框可輸入最多字符) />
實(shí)例-2 密碼框
<input type="password "(密碼框) name="pass"(密碼框的名稱) size="20"(密碼框的長(zhǎng)度) />
實(shí)例-3 單選按鈕
<input name="gen" type="radio"(單選按鈕框) value="男"(值) checked(單選按鈕選中狀態(tài)) />男
<input name="gen" type="radio" value="女" />女
實(shí)例-4 復(fù)選框
<input type="checkbox"(復(fù)選框) name="interest" value="sports"(值)/>運(yùn)動(dòng)
<input type="checkbox" name="interest" value="talk" checked(復(fù)選框選中狀態(tài)) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戲
實(shí)例-5 按鈕
<input type="reset" (重置按鈕) name="butReset" value="reset按鈕"(按鈕上顯示的文字)>
<input type="submit"(提交按鈕) name="butSubmit" value="submit按鈕">
<input type="button"(普通按鈕) name="butButton" value="button按鈕"/>
<input type="image"(圖片按鈕) src="images/login.gif"/(圖片路徑)>
實(shí)例-6 文件域
<form action="" method="post" enctype="multipart/form-data"（表單編碼屬性）>
<p><input type="file"(文件域) name="files" />
<input type="submit" name="upload" value="上傳" /></p>
</form>
實(shí)例-7 郵件 (會(huì)自動(dòng)驗(yàn)證Email地址格式是否正確)
<p>郵箱:<input type="email"（郵箱） name="email"/></p>
<input type="submit"/>
實(shí)例-8 網(wǎng)址(會(huì)自動(dòng)驗(yàn)證網(wǎng)址格式是否正確)
<p>請(qǐng)輸入你的網(wǎng)址:<input type="url"（網(wǎng)址） name="userUrl"/></p>
<input type="submit"/>
實(shí)例-9 數(shù)字
<p>請(qǐng)輸入數(shù)字:<input type="number"(數(shù)字) name="num" min="0"(允許的最小值) max="100"(允許的最大值) step(合法的數(shù)字間隔)="10"/></p>
<input type="submit"/>
實(shí)例-10 滑塊
<p>請(qǐng)輸入數(shù)字:<input type="range"(滑塊) name="range1" min="0"(允許的最小值) max="10"(允許的最大值) step(合法的數(shù)字間隔)="2"/></p>
<input type="submit"/>
實(shí)例-11 搜索框
<p>請(qǐng)輸入搜索的關(guān)鍵詞:<input type="search"(搜索框) name="sousuo"/></p>
<input type="submit"/>
select和option 下拉菜單
實(shí)例
<select(列表框) name="列表名稱" size="行數(shù)">
<option value="選項(xiàng)的值" selected="selected"(默認(rèn)選中項(xiàng))>…</option >
<option(選項(xiàng)) value="選項(xiàng)的值">…</option >
</select>
textarea 文本域
實(shí)例
<textarea(多行文本域) name="showText" cols="x"(顯示的列數(shù)) rows="y"(顯示的行數(shù))>文本內(nèi)容 </textarea >
