初學(xué)HTML5<step 1>
html5基礎(chǔ)
一、internet與web
- 1.1 internet
- internet是個(gè)全球性的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)胎挎，它提供的主要服務(wù)：Telnet/www/Email/BBS/FTP等胁出。信息在internet上被分成許多小數(shù)據(jù)包（使用TCP/IP協(xié)議簇）進(jìn)行傳輸型型，在目的地進(jìn)行重組。
- 1.2 web
- web又稱萬維網(wǎng)或環(huán)球網(wǎng)全蝶，它將各種類型的信息和服務(wù)進(jìn)行連接闹蒜，提供生動(dòng)的用戶圖形界面（可稱為文檔），web其實(shí)是無數(shù)文檔的集合抑淫，這些文檔就存在因特網(wǎng)的某個(gè)地方绷落。
web的工作原理：由web服務(wù)器、瀏覽器始苇、和通信協(xié)議組成砌烁，瀏覽器通過HTTP（超文本傳輸協(xié)議）向web服務(wù)器發(fā)出請(qǐng)求，web服務(wù)器應(yīng)答并將信息發(fā)送給瀏覽器（主要以網(wǎng)頁的形式發(fā)布）催式，瀏覽器解釋HTML網(wǎng)頁文檔函喉，并顯示在用戶屏幕上避归。
二、HTML
- 2.1 HTML
- HTML是超文本標(biāo)記語言函似，一種純文本語言槐脏。用該語言編寫的文件以.html或.htm為后綴,設(shè)計(jì)的網(wǎng)頁由瀏覽器進(jìn)行解釋執(zhí)行。在HTML頁面上可以使用腳本語言編寫的程序段撇寞，如VB/JS顿天。
第一個(gè)學(xué)習(xí)的元素就是<html>
html作為超文本標(biāo)記語言，它的元素如下表：
【上圖網(wǎng)址http://www.html5star.com/manual/html5label-meaning/】
詳細(xì)的元素標(biāo)簽使用方法可以在網(wǎng)上找《HTML5從rrumne入門到精通》
里面有詳細(xì)內(nèi)容蔑担，但是目錄無法跳轉(zhuǎn)牌废，閱讀十分不方便。
- 文本樣式：就是對(duì)文本進(jìn)行修飾
<b>加粗</b>
<i>傾斜</i>
<u>下劃線</u>
<s>刪除線</s>
<sub>下標(biāo)</sub>
<sup>上標(biāo)</sup>
-
標(biāo)記語法分為單標(biāo)記和雙標(biāo)記啤握；元素是尖括號(hào)內(nèi)的包圍的部分鸟缕，元素之間還可以相互嵌套；屬性排抬，每個(gè)元素都有自己所特有的屬性,屬性都有值懂从，標(biāo)準(zhǔn)屬性是絕大多數(shù)元素支持的屬性，如id蹲蒲、title番甩、class、style等届搁。
注釋
html文檔結(jié)構(gòu)
<!DOCTYPE html><html>
<head>
<title>HTML骨架</title>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="...">
<meta name="keywords" content="html,css,js"> </head>
<body>
<h1 align="center"></h1>
</body>
</html>文本
文本樣式：對(duì)文本進(jìn)行修飾缘薛，如<b>加粗</b>、<i>傾斜</i>等卡睦；
標(biāo)題元素：<h#><h#>宴胧；
段落元素：<p></p>；
強(qiáng)制換行元素：
表锻；
分區(qū)元素<span>行內(nèi)分區(qū)</span>恕齐、<div>塊內(nèi)分區(qū)</div>；
分割線：
單標(biāo)記瞬逊；
預(yù)格式化：<pre></pre>檐迟，保留中間的格式； 圖像和鏈接
[站外圖片上傳中……(2)]
<a target="_self">點(diǎn)擊瀏覽器會(huì)在原標(biāo)簽跳轉(zhuǎn)到http://www.apple.com</a>
<a href="mailto:=266575219@qq.com?subject=我要請(qǐng)客吃飯&asda@163.com">發(fā)送郵件包含對(duì)象及內(nèi)容或抄送對(duì)象</a>
<a href="壓縮包.rar">下載文件</a><a href="圖.png">打開圖</a>
<a href="#錨點(diǎn)">適合遠(yuǎn)方</a>
<a href="javascript:...">鏈接到j(luò)avascript 功能</a>
- 表格
表格由三種元素嵌套而成
table tr(行) td(列)
cellspacing：設(shè)置外邊距
cellpadding：設(shè)置內(nèi)邊距
align:水平對(duì)其方式left/right/center
valign:橫向?qū)ζ浞绞絫op/middle/bottom
caption設(shè)置表格標(biāo)題码耐，必須跟在
table后面顯示在表格上面
<table border="1" width="300px" height="300px" cellspacing="10" cellpadding="10"> <caption>表格名字</caption> <tr width="20" align="left" valign="top"> <td width="60">1</td> <td>2</td> <td>3</td></tr> <tr align="center" valign="middle"> <td>4</td> <td>5</td> <td>6</td> </tr> <tr align="right" valign="bottom"> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
效果圖
- 列表
- 有序列表ol和無序列表ul；
- li：指示具體列表內(nèi)容溶其；
- 列表中的type屬性骚腥、列表的嵌套、定義列表瓶逃。
結(jié)構(gòu)標(biāo)記 - 使用大量的div進(jìn)行頁面布局
- 表單
用于顯示信息束铭，并提交到服務(wù)器廓块。使用<form></form>構(gòu)建。
一些注意事項(xiàng)~~
checked:設(shè)置radio/checkbox的默認(rèn)值
maxlength:設(shè)置最大字符數(shù)
select:
selected:默認(rèn)選中項(xiàng)
size:讓用戶看到幾個(gè)選項(xiàng)
option契沫；列表項(xiàng)
textarea :
cols :設(shè)置寬 用字符數(shù)設(shè)置
rows:設(shè)置高
label: 與其他元素綁定带猴，是實(shí)現(xiàn)選項(xiàng)點(diǎn)擊選項(xiàng)按鈕實(shí)現(xiàn)效果
for：實(shí)現(xiàn)綁定另一個(gè)元素id
按鈕：<input type="submit"/>
<input type="reset">
<input type="button"/>跟JS搭配使用
<input type="hidden"/>
form屬性 method:get/post
get:將數(shù)據(jù)放在url中，并對(duì)數(shù)據(jù)大小限制懈万，且不安全
post:不將數(shù)據(jù)放在url中-->
<form> 用戶名<input type="text" value="admin" name="user"/></br> 密 碼<input type="password" value="admin"/> </br><input type="submit" value="ok"/>
</form>
- iframe
使用iframe在瀏覽器上顯示多個(gè) 文檔頁面
<iframe src="http://www.baidu.com" width="500" height="500">
</iframe>
