HTML
Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言，不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
思想：網(wǎng)頁(yè)中有很多數(shù)據(jù)，不同的數(shù)據(jù)可能需要不同的顯示效果，一個(gè)標(biāo)簽相當(dāng)于一個(gè)容器，想要修改容器內(nèi)數(shù)據(jù)的樣式，只需要改變?nèi)萜鞯膶傩灾?，就可以?shí)現(xiàn)容器內(nèi)數(shù)據(jù)樣式的變化。
語(yǔ)言結(jié)構(gòu)介紹：
<!-- 聲明文檔頁(yè)面使用的html版本，當(dāng)前是html5 -->
<!DOCTYPE html>
<!-- html文檔的根元素標(biāo)簽，表示html文檔的開(kāi)始和結(jié)束 -->
<html>
<!-- html文檔的頭部標(biāo)簽 -->
<head>
<!-- 定義文檔標(biāo)題 -->
<title>html學(xué)習(xí)</title>
<!--
用于html頁(yè)面的元信息
http-equiv：指定元信息的名稱，該屬性指定的名稱具有特殊意義，它可以向?yàn)g覽器傳回一些有用的信息，幫助瀏覽器正確地處理網(wǎng)頁(yè)內(nèi)容。
name：指定元信息名稱，該名稱可以隨意指定
content：指定元信息的值
-->
<!-- 指定文檔的字符編碼 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!-- 3s后會(huì)自動(dòng)跳轉(zhuǎn)到baidu主頁(yè) -->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
<!-- 指定作者 -->
<meta name="author" content="author_name"/>
<!-- 指定關(guān)鍵字，用逗號(hào)隔開(kāi)（便于搜索引擎進(jìn)行搜索） -->
<meta name="keywords" content="關(guān)鍵字1，關(guān)鍵字2，關(guān)鍵字3"/>
<!-- 對(duì)關(guān)鍵字進(jìn)行描述 -->
<meta name="description" content="對(duì)關(guān)鍵字的描述...">
<!-- 鏈接外部js資源文件 -->
<script src="theme.js"></script>
<!-- 包含js腳本 -->
<script type="text/javascript">
// js代碼
</script>
<!-- 鏈接外部css資源文件 -->
<link rel="stypesheet" type="text/css" href="theme.css"/>
<!-- 定義內(nèi)部css樣式 -->
<style type="text/css">
/* css代碼 */
</style>
</head>
<!-- html文檔主體標(biāo)簽 -->
<body>
</body>
</html>
塊級(jí)標(biāo)簽
顯示為"塊"狀，瀏覽器會(huì)在其前后顯示折行。常用的塊級(jí)元素包括：<p>, <h1>~<h6>, <div>, <ul>等
標(biāo)題標(biāo)簽
<!-- 標(biāo)題標(biāo)簽，從h1到h6依次文字減小 -->
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
段落標(biāo)簽
<p>同一個(gè)世界，同一個(gè)夢(mèng)想</p>
<p>夢(mèng)想還是要有的，萬(wàn)一實(shí)現(xiàn)了呢？</p>
水平線標(biāo)簽
<!-- <hr/> size從1-7，越來(lái)越粗 -->
<hr/>
列表
<!-- ol：有序列表 type設(shè)置排序方式 1默認(rèn)，還有a,i.. -->
<ol type="a">
<li>中國(guó)</li>
<li>日本</li>
<li>韓國(guó)</li>
</ol>
<!-- ul：無(wú)序列表 type：circle（空心圓）,disc（實(shí)心圓）,square（實(shí)心方塊），默認(rèn)desc -->
<ul type="circle">
<li>蘋(píng)果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<!-- dl：definition list，定義列表，最常用 -->
<!-- dl, dt, dd, 可以將or和ul放在dd里面 -->
<dl>
<dt>亞洲</dt>
<dd>中國(guó)</dd>
<dd>日本</dd>
<dd>朝鮮</dd>
<dt>歐洲</dt>
<dd>英國(guó)</dd>
<dd>法國(guó)</dd>
<dd>德國(guó)</dd>
</dl>
分區(qū)標(biāo)簽
<!-- div標(biāo)簽一般當(dāng)作結(jié)構(gòu)化塊狀元素使用，一般最常用的用途是對(duì)網(wǎng)頁(yè)進(jìn)行整體分塊布局，即當(dāng)容器來(lái)使用 -->
<div id="fruit">
<p>蘋(píng)果</p>
<p>香蕉</p>
<p>橘子</p>
</div>
<div id="country">
<p>中國(guó)</p>
<p>日本</p>
<p>朝鮮</p>
</div>
行級(jí)標(biāo)簽
按行逐一顯示，前后不會(huì)自動(dòng)換行，常用的行級(jí)標(biāo)簽包括：<b>, <i>, <sub>, <sup>等
<!-- 定義粗體文本 -->
<b>粗體文本</b>
<!-- 定義傾斜文本 -->
<i>傾斜文本</i>
<!-- 效果和b類似，語(yǔ)氣較強(qiáng) -->
<strong>粗體文本</strong>
<!-- 效果和i類似，語(yǔ)氣較強(qiáng) -->
<em>傾斜文本</em>
<!-- 定義小號(hào)文本 -->
<small>小號(hào)文本</small>
<!-- 定義下標(biāo)文本 -->
H<sub>2</sub>o
<!-- 定義上標(biāo)文本 -->
10<sup>2</sup>
<!-- 定義文本顯示方向，內(nèi)有dir屬性，只能取值ltr從左到右或rtl從右到左 -->
<bdo dir="rtl">文本內(nèi)容</bdo>
<!--
超鏈接標(biāo)簽
href：指定超鏈接所關(guān)聯(lián)的另一個(gè)資源
target：指定框架集中的哪個(gè)框架來(lái)裝載另一個(gè)資源，該屬性值有_self, _blank, _top, _parent四個(gè)值，分別代表使用自身、新窗口、頂層框架、父框架來(lái)裝載新資源
-->
<a href="超鏈接地址" target="目標(biāo)窗口">點(diǎn)擊</a>
<!-- 圖像標(biāo)簽 -->
<img src="圖片地址" alt="提示文字"/>
<!-- span標(biāo)簽：內(nèi)部放文本或者行級(jí)標(biāo)簽 -->
<span>文本等行級(jí)內(nèi)容</span>
<!-- 換行標(biāo)簽 -->
<br/>
<!-- 常用的特殊符號(hào) -->
<!-- 空格 -->
><!-- 大于號(hào)(>) -->
<<!-- 小于號(hào)(<) -->
"<!-- 引號(hào)(") -->
©<!-- 版權(quán)符號(hào)(?) -->
框架
frameset框架集
創(chuàng)建框架頁(yè)面的步驟：
- 創(chuàng)建各個(gè)子窗口對(duì)應(yīng)的
html文件
- 創(chuàng)建整個(gè)框架文件，分別引用子窗口文件
框架的使用
<!--
frameset：框架集標(biāo)簽，不能與body標(biāo)簽同時(shí)使用，除非與noframes標(biāo)簽聯(lián)合使用時(shí)
將瀏覽器分割成多個(gè)框架頁(yè)，來(lái)加載多個(gè)html頁(yè)面
frame：框架標(biāo)簽
cols：pixels, %, * 定義框架集中列的數(shù)目和尺寸
rows：pixels, %, * 定義框架集中行的數(shù)目和尺寸
noresize：設(shè)置框架尺寸不可調(diào)整
border：設(shè)置框架邊框?qū)挾?-->
<frameset rows="25%,*" border="1" noresize="noresize">
<frame src="top.html">上邊/frame>
<frameset cols="25%,*">
<!-- 如果希望點(diǎn)擊左邊框架的超鏈接，右邊框架顯示超鏈接內(nèi)容，可以將左邊超鏈接a標(biāo)簽的target設(shè)置成右邊框架的名稱即可 -->
<frame src="left.html" name="leftFrame">左邊</frame>
<frame src="right.html" name="rightFrame">右邊</frame>
</frameset>
<!-- noframe標(biāo)簽為那些不支持框架的瀏覽器顯示文本，noframes元素位于frameset內(nèi)部 -->
<noframes>
<body>
您的瀏覽器無(wú)法處理框架！
</body>
</noframes>
</frameset>
iframe內(nèi)嵌框架
<!--
iframe：內(nèi)嵌框架，在body標(biāo)簽內(nèi)部
frameborder：0, 1 規(guī)定是否顯示框架周圍的邊框
name：規(guī)定iframe的名稱
scrolling：yes(顯示), no(不顯示), auto(內(nèi)容超過(guò)框架則顯示，否則不顯示) 規(guī)定是否在iframe中顯示滾動(dòng)條
scr：規(guī)定在iframe中顯示的文檔的url
width：框架寬度
height：框架高度
-->
<body>
<!-- <iframe src="引用頁(yè)面地址" name="框架標(biāo)識(shí)名" frameborder="邊框" scrolling="是否顯示滾動(dòng)條"> -->
<!-- 和frameset類似，如果希望點(diǎn)擊iframe外的超鏈接，iframe中顯示相應(yīng)的網(wǎng)頁(yè)，可以將超鏈接a標(biāo)簽的target設(shè)置成iframe的名稱即可 -->
<iframe src="http://www.baidu.com" name="contentFrame" width="100%" height="400px"></iframe>
<p><a target="contentFrame">新浪</a></p>
<p><a target="contentFrame">百度</a></p>
</iframe>
</body>
表格
使用場(chǎng)景
- 主要用于規(guī)則的數(shù)據(jù)顯示；
- 適當(dāng)?shù)目梢栽诒韱雾?yè)面中使用；
使用表格標(biāo)簽進(jìn)行頁(yè)面布局的缺點(diǎn)
-
代碼量比較大，頁(yè)面瀏覽速度比較慢；
-
層次結(jié)構(gòu)比較復(fù)雜，不易于維護(hù)和改版；
-
不利于搜索引擎搜索查找數(shù)據(jù)；
<!-- 定義表格頭 -->
<thead>
<!-- 定義表格行，該元素內(nèi)只能包含th標(biāo)簽和td標(biāo)簽 -->
<tr>
<!-- 定義表格頁(yè)眉的單元格 -->
<th>球隊(duì)名稱</th>
<th>老板</th>
<th>當(dāng)家球星</th>
</tr>
</thead>
<!-- 定義表格的主體 -->
<tbody>
<tr>
<!--
定義單元格，包含兩個(gè)主要的屬性
colspan：?jiǎn)卧窨缍嗌倭? rowspan：?jiǎn)卧窨缍嗌傩? -->
<td>騎士</td>
<td>丹尼爾·吉爾伯特</td>
<td>勒布朗·詹姆斯</td>
</tr>
<tr>
<td>勇士</td>
<td>喬·拉科布</td>
<td>斯蒂芬·庫(kù)里</td>
</tr>
<tr>
<td>馬刺</td>
<td>皮特·霍爾特</td>
<td>科懷·倫納德</td>
</tr>
</tbody>
<!-- 定義表格尾部 -->
<tfoot>
<tr>
<td colspan="3">總計(jì)3支球隊(duì)</td>
</tr>
</tfoot>
表單
基本語(yǔ)法
<!--
action：指定表單提交后由服務(wù)器上的哪個(gè)處理程序進(jìn)行處理
enctype：用于指定表單數(shù)據(jù)的編碼方式
method：指定向服務(wù)器提交的方式 get post
-->
<form action="表單提交地址" method="提交方法" target="打開(kāi)方式">
<!-- 文本框、按鈕等表單元素 -->
</form>
常見(jiàn)的表單元素使用
<!--
input元素中常用屬性：
checked：設(shè)置單選框、復(fù)選框初始狀態(tài)是否處于選中狀態(tài)，只有當(dāng)type屬性為checkbox或radio時(shí)才可指定
disabled：設(shè)置首次加載時(shí)禁用此元素，當(dāng)type為hidden時(shí)不能指定該屬性
maxlength：指定文本框中所允許輸入的最大字符數(shù)
readonly：指定該文本框內(nèi)的值不允許修改（可用js腳本修改）
size：指定該元素的長(zhǎng)度
src：指定圖像域所顯示的圖像url，只有當(dāng)type的值為image時(shí)才可以指定該屬性
-->
<!-- text，單行文本框 -->
單行文本框：<input type="text" maxlength="10" size="4" /><br/>
<!-- password，密碼輸入框 -->
密碼輸入框：<input type="password" disabled="disabled"/><br/>
<!-- hidden，隱藏域 -->
隱藏域<input type="hidden"/><br/>
<!-- radio，單選框 -->
單選框：男<input type="radio" name="sex" value="0" />
女<input type="radio" name="sex" value="1" checked="checked" /><br/>
<!-- checkbox，復(fù)選框 -->
復(fù)選框：籃球<input type="checkbox" name="hobby" value="0" />
足球<input type="checkbox" name="hobby" value="1" />
排球<input type="checkbox" name="hobby" value="2"><br/>
<!-- image，圖像域，可以指定width和height屬性，有submit按鈕的功能，會(huì)提交表單數(shù)據(jù) -->
圖像域：<input type="image"/><br/>
<!-- file，文件上傳域 -->
文件上傳：<input type="file"/><br/>
<!-- submit、reset、button，提交、重置、普通按鈕 -->
提交按鈕：<input type="submit" value="提交按鈕"/><br/>
重置按鈕：<input type="reset" value="重置按鈕"/><br/>
普通按鈕：<input type="button" value="普通按鈕"/><br/>
使用button定義按鈕
<!--
button按鈕與input按鈕相比，提供了更強(qiáng)大的功能和更豐富的內(nèi)容
disabled：指定是否禁用此元素，該屬性的值只能是disabled或者省略
name：指定按鈕的唯一名稱
type：指定按鈕屬于哪種按鈕，只能是button、reset、submit
-->
<button type="按鈕類型" name="按鈕名稱">
普通文本、格式化文本、圖像
</button>
提交按鈕：<button type="submit"><b>提交按鈕</b></button><br/>
重置按鈕：<button type="reset"><i>重置按鈕</i></button><br/>
普通按鈕：<button type="button">普通按鈕</button>
使用label定義標(biāo)簽
<!--
label元素不會(huì)向用戶呈現(xiàn)任何特殊效果，不過(guò)它為鼠標(biāo)用戶改進(jìn)了可用性。如果在label元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
for：規(guī)定label綁定到哪個(gè)表單元素，值為表單元素的id
form：規(guī)定label字段所屬的一個(gè)或多個(gè)表單
-->
<!-- <label>文本</label> -->
<label for="text">單行文本框：</label><input type="text" id="text"/>
列表菜單和下拉菜單
<!--
select標(biāo)簽常用屬性：
disabled：指定是否禁用此元素，該屬性的值只能是disabled或者省略
mutiple：設(shè)置該列表框是否允許多選
size：指定該列表內(nèi)同時(shí)顯示多少個(gè)列表項(xiàng)
-->
<!--
基本語(yǔ)法：
<select name="指定列表名稱" size="行數(shù)">
<option value="選項(xiàng)值" selected="selected">...</option>
</select>
-->
<!-- 列表菜單：多選項(xiàng)展示，可多選 -->
<select size="3" multiple="multiple" id="country">
<option value="0">中國(guó)</option>
<option value="1">美國(guó)</option>
<option value="2">日本</option>
<option value="3">韓國(guó)</option>
</select><br/>
<!-- 下拉菜單 -->
<select id="city">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">武漢</option>
<option value="3">廣州</option>
</select><br/>
<!--
在<select>標(biāo)簽內(nèi)，只能包含如下兩種子元素：
<option>：用于定義列表框選項(xiàng)或菜單項(xiàng)，它的常用屬性如下：
disabled：指定禁用該選擇，該屬性的值只能是disabled或省略
selected：指定該列表初始狀態(tài)是否處于選中狀態(tài)，值只能為selected
value：指定該選項(xiàng)對(duì)應(yīng)的請(qǐng)求參數(shù)值
<optgroup>：用于定義列表項(xiàng)或菜單項(xiàng)組，它的常用屬性如下：
label：指定該選項(xiàng)組的標(biāo)簽，必需
disabled：禁用該選項(xiàng)組里的所有選項(xiàng)，該屬性值只能為disabled或省略
-->
<select>
<optgroup label="一線城市">
<option>北京</option>
<option>上海</option>
<option>廣州</option>
</optgroup>
<optgroup label="二線城市">
<option>杭州</option>
<option>武漢</option>
<option>南京</option>
</optgroup>
</select>
多行文本框
<!--
textarea：多行文本框，常用屬性如下：
cols：指定文本框的寬度，必填
rows：指定文本框的高度，必填
readonly：指定該文本框只讀，該屬性的值只能是readonly或省略
-->
<!--
基本語(yǔ)法：
<textarea name="..." cols="列寬" rows="行寬">
文本內(nèi)容
</textarea>
-->
<textarea name="content" cols="50" rows="5" readonly="readonly">
1) 用戶可通過(guò)各種已有和未來(lái)新增的渠道注冊(cè)賬號(hào)及加入付費(fèi)使用。
2) 在用戶使用具體某種方式加入付費(fèi)會(huì)員時(shí)，須閱讀并確認(rèn)相關(guān)的用戶協(xié)議和使用方法。
</textarea>
html多媒體
web上的多媒體指的是音效、音樂(lè)、視頻和動(dòng)畫(huà)，現(xiàn)代網(wǎng)絡(luò)瀏覽器已經(jīng)支持很多多媒體格式。常見(jiàn)的視頻格式有avi, wmv, mpg/mpeg, mov, rm/ram, mp4等，常用的音頻格式有mid/midi, rm/ram, wav, wma, mp3/mpga等。
在html5之前，主要提供兩種元素來(lái)進(jìn)行多媒體的展示，一個(gè)是<embed>標(biāo)簽，另一個(gè)是<object>標(biāo)簽。
<!--
embed是html5中新標(biāo)簽，定義嵌入的內(nèi)容，比如插件，常用屬性：
height：設(shè)置嵌入內(nèi)容的高度
width：設(shè)置嵌入內(nèi)容的寬度
src：設(shè)置嵌入內(nèi)容的url
type：設(shè)置嵌入內(nèi)容的類型
在html5中提供了audio（音頻）和video（視頻）標(biāo)簽來(lái)進(jìn)行音頻和視頻的播放，使用比較簡(jiǎn)單，功能更強(qiáng)大。
-->
<!-- embed播放音頻 -->
<!-- <embed src="/Users/wangzhao/Music/網(wǎng)易云音樂(lè)/電臺(tái)節(jié)目/這個(gè)少女不太冷丶 - 牽絲戲.mp3" width="0" height="0" autostart="false" loop="true"></embed> -->
<!-- embed播放flash視頻 -->
<embed src="xxx.swf" width="200" height="200" loop="true" quality="high" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFrash"></embed>
<!-- object標(biāo)簽 -->
<!--
可以使用<object>標(biāo)簽來(lái)給瀏覽器加載插件，通過(guò)加載的插件來(lái)播放音頻和視頻
微軟開(kāi)發(fā)，對(duì)IE兼容性很好，對(duì)其他瀏覽器兼容一般
-->
<object data="/Users/wangzhao/Music/網(wǎng)易云音樂(lè)/電臺(tái)節(jié)目/這個(gè)少女不太冷丶 - 牽絲戲.mp3">
<param name="src" value="/Users/wangzhao/Music/網(wǎng)易云音樂(lè)/電臺(tái)節(jié)目/這個(gè)少女不太冷丶 - 牽絲戲.mp3">
<param name="autoplay" value="false">
</object>
|
