一周學(xué)會(huì)HTML
1.HTML是什么北救？
HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
2.HTML發(fā)展歷程
HTML版本從1.0到4.0不斷升級，其版本的規(guī)則都是由W3C組織制定。到了HTML4.0版本后猖辫，HTML規(guī)則在當(dāng)時(shí)較為全面荔仁，W3C組織甚至認(rèn)為沒有更新版本的必要伍宦，W3C組織于是專注于完善HTML的語法規(guī)則，推出了新一款的規(guī)則XHTML1.0乏梁，XHTML與HTML大部
分一致次洼，主要升級在于語法規(guī)則更加嚴(yán)格，可擴(kuò)展性更強(qiáng)遇骑。
-webKit- -O- -moz- -ms-
各大瀏覽器廠商不能接受W3C不再擴(kuò)充HTML功能卖毁，于是各自對HTML進(jìn)行擴(kuò)展，不再遵循W3C的路數(shù)落萎，于是市面上就出現(xiàn)了多種版本的擴(kuò)展版HTML亥啦。W3C不愿意HTML被隨意擴(kuò)展，只能再次制定新的擴(kuò)展規(guī)則模暗，綜合多家瀏覽器廠商的擴(kuò)展禁悠，得到了最終的HTML版本，命名為HTML5.0兑宇。
【注】各種瀏覽器對HTML5的屬性支持性不同碍侦，本次課程大多以chrome和safari為例(兩者均為WebKit內(nèi)核)。
3.HTML、CSS和JavaScript三者的關(guān)系
一個(gè)完整的前端頁面可分成多個(gè)部分瓷产。實(shí)體內(nèi)容為HTML部分站玄，樣式、布局及少部分過渡和動(dòng)畫屬于CSS部分濒旦，數(shù)據(jù)的處理（請求株旷、運(yùn)算、存儲(chǔ)等）尔邓、頁面內(nèi)容樣式的動(dòng)態(tài)變化等可以通過JavaScript實(shí)現(xiàn)晾剖。
4.開發(fā)工具
WebStorm、Dreamweaver梯嗽、Sublime齿尽、記事本...
二、HTML文檔結(jié)構(gòu)
1.結(jié)構(gòu)總覽
一個(gè)完整的html文件應(yīng)為以下結(jié)構(gòu)：
<!DOCTYPE html> // DTD Document Type Define 文檔類型定義
<html lang="en">
<head>
<meta charset="UTF-8"> // 字符集編碼格式
<title></title> //頁面標(biāo)題
</head>
<body>
</body>
</html>
2.文檔特性與語法
(1) 標(biāo)簽的三種形式
a. <title> </title> 具有開始標(biāo)簽和關(guān)閉標(biāo)簽
b. <meta> 單個(gè)標(biāo)簽
c. <input /> 自身既是開始標(biāo)簽也是關(guān)閉標(biāo)簽
(2) 標(biāo)簽的關(guān)系
兄弟標(biāo)簽灯节、父子標(biāo)簽循头、先輩標(biāo)簽后輩標(biāo)簽
(3) 不區(qū)分單雙引號、不區(qū)分大小寫
三炎疆、HTML標(biāo)簽
1.基礎(chǔ)標(biāo)簽
(1) head與body
(2) title
(3) meta // meta 設(shè)置頁面屬性
(4) link // 資源引用
2.常用標(biāo)簽
(1) hi (i: 1~6)
(2) p big small i
(3) br
(4) div // 1.Block標(biāo)簽卡骂，塊級元素 2.inline標(biāo)簽，行元素標(biāo)簽
(5) img
(6) a
(7) pre
(8)
【溢出】
(1) 溢出屬性（容器的）
overflow:visible/hidden(隱藏)/scroll/auto(自動(dòng))/inherit;
visible:默認(rèn)值形入，內(nèi)容不會(huì)被修剪全跨，會(huì)成現(xiàn)在元素框之外；
hidden：內(nèi)容會(huì)被修剪唯笙，并且其余內(nèi)容是不可見的螟蒸；
scroll：內(nèi)容會(huì)被修剪盒使，但是瀏覽器會(huì)顯示滾動(dòng)條崩掘，以便查看其余的內(nèi)容;
auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條少办，以便查看其他的內(nèi)容;
inherit：規(guī)定應(yīng)該從父元素繼承overflow屬性的值苞慢。
(2) 空余空間
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit 該屬性用來設(shè)置如何處理元素內(nèi)的空白；
normal：默認(rèn)值英妓，空白會(huì)被瀏覽器忽略挽放，
pre：空白會(huì)被瀏覽器保留，其行為方式類似HTML中的pre標(biāo)簽蔓纠；
nowrap:文本不會(huì)換行辑畦，文本會(huì)在同一行上繼續(xù)，直到遇到
標(biāo)簽為止腿倚；
pre-wrap：保留空白符序列纯出，但是正常的進(jìn)行換行；
pre-line:合并空白符序列，但是保留換行符暂筝；
inherit：規(guī)定應(yīng)該從父元素繼承White-space屬性的值箩言；(ie瀏覽器都不支持此屬性值)
(3) 文本溢出
text-overflow:clip/ellipsis
clip：不顯示省略號（...），而是簡單的裁切;
ellipsis：當(dāng)對象內(nèi)文本溢出時(shí)焕襟，顯示省略標(biāo)記陨收；
說明：
text-overflow屬性僅是...，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記鸵赖，并不具備其它的樣式屬性定義务漩，要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號的效果還需定義：
1、容器寬度：width：value它褪；
2菲饼、強(qiáng)制文本在一行內(nèi)顯示:white-space：nowrap;
3、溢出內(nèi)容為隱藏：overflow：hidden列赎；
4宏悦、溢出文本顯示省略號：text-overflow：ellipsis;
3.重要標(biāo)簽
(1) 表格 table
子標(biāo)簽: th tr td
屬性: colspan rowspan
(2) 列表
1> ol有序列表 子標(biāo)簽li
2> ul無序列表 子標(biāo)簽li
3> dl說明列表 子標(biāo)簽dt dd
4.表單標(biāo)簽
(1) 什么是表單？
表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能包吝，將采集到的用戶信息提交饼煞。
一個(gè)表單有三個(gè)基本組成部分：
表單標(biāo)簽form：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。
表單域：包含了文本框诗越、密碼框砖瞧、隱藏域、多行文本框嚷狞、復(fù)選框块促、單選框、下拉選擇框和文件上傳框等床未。
表單按鈕：包括提交按鈕竭翠、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入薇搁，還可以用表單按鈕來控制其他定義了處理腳本的處理工作
(2) 創(chuàng)建一個(gè)表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="login" method="post" action="http://andy1991.cn/demo/adlogin.php" onsubmit="**return** loginn()">
<input id="username" name="username" type="text">
<input name="password" type="password">
<input type="submit">
</form>
<script type="text/javascript">
**function** loginn() {
**if** (document.getElementById('username').value == 'naibin') {
alert('登陸成功');
}**else** {
alert('登陸失敗');
}
**return false**;
}
</script>
</body>
</html>
四斋扰、標(biāo)簽屬性
src name alt value max min title
1.id
不可重復(fù)，唯一的標(biāo)志一個(gè)標(biāo)簽元素啃洋，可以通過id定位到一個(gè)頁面里的唯一的標(biāo)簽
2.name
一個(gè)標(biāo)簽的名字
3.class
標(biāo)簽的類名传货，將某一些標(biāo)簽劃歸為一類，可以進(jìn)行批量處理
4.style
CSS樣式屬性
5.alt
替換顯示文本
6.title
鼠標(biāo)懸停顯示文本
五宏娄、附加
1.iframe
2.修改光標(biāo) cursor
3.HTML5新增結(jié)構(gòu)標(biāo)簽 (塊級標(biāo)簽)
(1) header
<header> 標(biāo)簽定義文檔的頁眉（介紹信息）问裕。
(2) footer
<footer> 標(biāo)簽定義文檔或節(jié)的頁腳。
<footer> 元素應(yīng)當(dāng)含有其包含元素的信息孵坚。
頁腳通常包含文檔的作者粮宛、版權(quán)信息貌踏、使用條款鏈接、聯(lián)系信息等等窟勃。
您可以在一個(gè)文檔中使用多個(gè) <footer> 元素祖乳。
(3) nav
<nav> 標(biāo)簽定義導(dǎo)航鏈接的部分。
(4) section
<section> 標(biāo)簽定義文檔中的節(jié)（section秉氧、區(qū)段）眷昆。比如章節(jié)、頁眉汁咏、頁腳或文檔中的其他部分亚斋。
(5) article
<article> 標(biāo)簽規(guī)定獨(dú)立的自包含內(nèi)容。
一篇文章應(yīng)有其自身的意義攘滩，應(yīng)該有可能獨(dú)立于站點(diǎn)的其余部分對其進(jìn)行分發(fā)帅刊。
<article> 元素的潛在來源：
- 論壇帖子
- 報(bào)紙文章
- 博客條目
- 用戶評論
(6) aside
<aside> 標(biāo)簽定義其所處內(nèi)容之外的內(nèi)容。
aside 的內(nèi)容應(yīng)該與附近的內(nèi)容相關(guān)漂问。
