參考學習：w3school.com.cn/html5/html_5_intro.asp

H5分為：html(內(nèi)容和結(jié)構),css（樣式）,javascript（交互）

Html(表示：<標簽 ? 屬性> 內(nèi)容（元素）</標簽>)

html文檔中主要分為head嗦随，和body兩部分搭盾；

head:包含title伴嗡，文章的標題迅皇，可以包含javascript；

body:文檔主體酵颁，包含段落嫉你，標題信认，鏈接，javascript等標簽均抽；

* 元素：標簽開始到標簽結(jié)束的部分全部是元素；

* 標簽（大小寫不敏感）：

<br/>：定義空元素其掂，標簽一開始就結(jié)束油挥，如不產(chǎn)生新段落的情況下，可以用作換行（新增一行）款熬；

<p 屬性>?內(nèi)容</p>: 定義段落深寥；

<h1>-<h6>：定義標題，h1為最大標題,h6為最小標題贤牛；

<hr/>: 定義水平線惋鹅；

<!-->：定義注釋；

<abbr>:定義縮寫殉簸；

<a>:定義鏈接闰集；?

備注：后續(xù)文章會詳細介紹標簽；

* 屬性：鍵值對的形式般卑，緊跟在開始標簽中武鲁，如name="value"

<a > This is a link</a>

備注：為屬性，This is a link為內(nèi)容蝠检；

* 樣式（俗稱內(nèi)聯(lián)樣式）：style屬性用于改變html元素的樣式沐鼠，直接放在標簽后面的，如

<h1 style="font-family:verdana">A heading</h1>

style屬性：它是一種新的首選的改變html元素樣式的方式叹谁，通過HTML樣式饲梭，能夠通過使用style屬性直接將樣式添加到html元素中，或者間接地在獨立的樣式表中進行定義(稍后介紹)焰檩；

屬性包含：font-family：字體

* 格式化：

? ? ?** 文本格式化：在一個 HTML 文件中對文本進行格式化

? ? ? ? ?<b>:?定義粗體文本憔涉；

? ? ? ?? <big>:?定義大號字；

? ? ? ? ?<em>:?定義著重文本锅尘；

? ? ? ? ?<i>:?定義斜體字监氢；

? ? ? ? ?<small>:?定義小體字；

? ? ? ? ?<strong>:?定義加重字體藤违；

? ? ? ? ?<sub>:?定義下標字浪腐；

? ? ? ? ?<sup>:?定義上標字；

? ? ? ? ?<ins>:?定義插入字顿乒；

? ? ? ? ?<del>:?定義刪除字议街；

? ? ** 預格式文本：使用 pre 標簽對空行和空格進行控制

? ? ? ? ?<pre>: pre中的元素的空格和空行全部保留；

? ? ** “計算機”輸出標簽

? ? ? ? <code>: 定義計算機代碼璧榄，不保留多余的空格和折行特漩。

? ? ? ? <kbd>: 定義鍵盤碼吧雹；

? ? ? ? <samp>: 定義計算機代碼樣本；

? ? ? ? <tt>: 定義打字機代碼涂身；

? ? ? ? <var>: 定義變量雄卷；

? ? ? ? <pre>: 定義預定義格式，保留空格和折行蛤售；

? ? ** 地址:在 HTML 文件中寫地址

? ? ? <address>:定義地址丁鹉；

? ? ** 縮寫與首字母縮寫：當您把鼠標移至縮略詞語上時，title 可用于展示表達的完整版本悴能。

? ? ? ? <abbr>:縮寫 ? ?<abbr> title="etcetera">etc. <abbr/>

? ? ? ?<acronym> :這是首字母縮寫 <acronym title="World Wide Web"></acronym>

? ? ** 文字方向：改變文字的方向

? ? ? ? <bdo> : dir="rtl" 為向左輸出揣钦；

? ? ** 塊引用：使用 blockquote 元素的話，瀏覽器會插入換行和外邊距

? ? ? ? <blockquote>：長引用

? ? ? ?<q>:定義短引用漠酿，帶雙引號

? ? ** 刪除字效果和插入字效果

? ? ? ? <del>: ? 刪除 ? ??<del >二十< /del>

? ? ? ? <ins>: 增加

*引用

? ? <dfn>:定義項目或所寫的定義冯凹； ? <dfn title="World Health Organization">WHO</dfn>

? ? <city>:定義著作的標題；

* 注釋

<!-->:注釋

* 塊：大多數(shù)的html元素被定義為塊級元素或內(nèi)聯(lián)元素

? HTML 塊元素：塊級元素在瀏覽器顯示時炒嘲，通常會以新行來開始（和結(jié)束）

內(nèi)聯(lián)元素：內(nèi)聯(lián)元素在顯示時通常不會以新行開始宇姚，就是一行內(nèi)突然加入幾個字，格式摸吠、字體與其他字體都不一樣空凸；

html <div>塊元素：是塊級元素，它是可用于組合其他html元素的容器寸痢，沒有特定含義呀洲，由于是塊級元素，瀏覽器會在其前后顯示折行啼止，如果與 CSS 一同使用道逗，<div>元素可用于對大的內(nèi)容塊設置樣式屬性。<div>元素的另一個常見的用途是文檔布局献烦。它取代了使用表格定義布局的老式方法滓窍。使用 <table>元素進行文檔布局不是表格的正確用法。<table>元素的作用是顯示表格化的數(shù)據(jù)巩那。

html <span>元素：是內(nèi)聯(lián)元素吏夯，可用于文本的容器，沒特定含義即横，當與 CSS 一同使用時噪生，?<span>元素可用于為部分文本設置樣式屬性。

?標簽：

?*?

<div>:可定義文檔中的分區(qū)或節(jié)（division/section）东囚。

eg：

<div style="color:#00FF00">

<h1>標題</h1>

<p>段落部分</p>

</div>

用法： <div>標簽可以把文檔分割為獨立的跺嗽、不同的部分。它可以用作嚴格的組織工具，并且

不使用任何格式與其關聯(lián)桨嫁。如果用 id 或 class 來標記植兰，那么該標簽的作用會變得更加有效。

<div>是一個塊級元素璃吧。這意味著它的內(nèi)容自動地開始一個新行楣导。實際上，換行是<div>固有的唯一格式表現(xiàn)畜挨∫蓿可以通過<div>的 class 或 id 應用額外的樣式。

? ? ?* *不必為每一個<div>都加上類或 id朦促，雖然這樣做也有一定的好處。

? ? ?* *?可以對同一個<div>元素應用 class 或 id 屬性栓始，但是更常見的情況是只應用其中一種务冕。這兩者的主要差異是，class 用于元素組(類似的元素幻赚，或者可以理解為某一類元素）禀忆，而id 用于標識單獨的唯一的元素。

*<span>:組合文檔中的行內(nèi)元素落恼；span 沒有固定的格式表現(xiàn)轨域，當對它應用樣式時咬展，它才會產(chǎn)生視覺上的變化；

eg：

<p>

文檔前面部分

<span

?style="color:red">這部分內(nèi)容很特殊

</span>

文檔后面部分

</p>

* 如果不對 span 應用樣式，那么span 元素中的文本與其他文本不會任何視覺上的差異洪唐。

*可以為 span 應用 id 或 class 屬性，這樣既可以增加適當?shù)恼Z義拧抖，又便于對 span 應用樣式秃殉。

*提示：事實上，您也許已經(jīng)注意到了咪笑，一些站點上有一些文本的樣式與其他文本是不同的可帽。比如“提示”使用了粗體的橘紅色。盡管實現(xiàn)這種效果的方法非常多窗怒，但是我們的做法是：使用“提示”使用 span 元素映跟，然后對這個span 元素的父元素，即p 元素應用 class扬虚，這樣就可以對這個類的子元素 span 應用相應的樣式了可以為 span 應用 id 或 class 屬性努隙，這樣既可以增加適當?shù)恼Z義，又便于對 span 應用樣式孔轴。

* 列表：

? ?**無序列表是一個項目的列表剃法，無序列表始于<ul>標簽，每個列表項始于<li>標簽，此列項 ? ? ? 目使用粗體圓點（典型的小黑圓圈）進行標記贷洲；

eg:

<ul>

<li>Coffee</li>

<li>Tea</li>

</ul>

顯示結(jié)果：

· Coffee

· Tea

備注：列表內(nèi)可以使用段落收厨，換行符，圖片优构，鏈接以及其他列表等等诵叁；

? ? **有序列表也是一個項目的列表，列表項目使用數(shù)字進行標記钦椭；有序列表始于<ol>,每個列表項始于<li>標簽拧额；

eg:

<ol>

<li>Coffee</li>

<li>Tea</li>

</ol>

顯示結(jié)果：

1.Coffee

2.Tea

備注：列表內(nèi)可以使用段落，換行符彪腔，圖片侥锦，鏈接以及其他列表等等；

定義列表:自定義列表不僅僅是一列項目德挣，而是項目及其注釋的組合恭垦。

自定義列表以<dl>標簽開始。每個自定義列表項目以<dt>開始格嗅。每個自定義列表項的定義（描述）<dd>開始;

<dl>

<dt>Coffee</dt>

<dd>Tea ? and Coffee</dd>

<dt>Test</dt>

<dd>RRRRRR</dd>

</dl>

顯示結(jié)果為：

Coffee

Tea? and Coffee

Test

RRRRRR

css:獨立的在樣式表中進行定義番挺；

* 外部樣式表（.css文件）：當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇屯掖。使用外部樣式表玄柏，你就可以通過更改一個文件來改變整個站點的外觀,在head部分通過link標簽定義。

eg：

<head >

<link rel="stylesheet" ?type="text/css" ?href="mystyle.css">

</head>

* 內(nèi)部樣式表（.css文件）（用的比較多）：當單個文件需要特別樣式時贴铜，就可以使用內(nèi)部樣式表粪摘。你可以在 head 部分通過標簽定義內(nèi)部樣式表。

eg：

<head>

<style type="text/css">

body{ ? ? ? //對body主體元素進行全面設置

background-color:red ? //設置本html文檔的主體背景為紅色

}

p { ? ?//對段落進行設置

margin-left: 20px ? //對每個段落全部左縮進20px ? ?

}

</style>

</head>

* 內(nèi)聯(lián)樣式(不推薦使用)：當特殊的樣式需要應用到個別元素時绍坝，就可以使用內(nèi)聯(lián)樣式赶熟。 使用內(nèi)聯(lián)樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性陷嘴。以下實例顯示出如何改變段落的顏色和左外邊距映砖。

eg：

<p style="color：red ; margin-left: 20px"> This is a paragraph</p>

備注：單個屬性不需要標點符號，多個屬性時候需要用灾挨；進行分割

* 用到的標簽：

? ?**<style>:定義樣式定義邑退；

? ?**<link>：定義資源引用；

? ?**<div>：定義文檔中的區(qū)域或塊劳澄；

? ? ? ? ? <div>

? ? ? ? ? ?<h1>標題</h1>

? ? ? ? ? ?<p>這是段落</p>

? ? ? ? ? ?</div>

? ? ? **<span>：定義文章行內(nèi)的塊或區(qū)域地技；

? ? ? ? ? ? <p>

? ? ? ? ? ? <span>這是行內(nèi)塊</span>

? ? ? ? ? ?</p>

? ? ? **<font>：規(guī)定字體大小和顏色，不贊成使用秒拔，請使用樣式莫矗，<font? font size="3"? face="verdana" ?color="red"> this? is? some Text</font>

? ? ? **<basefont>:定義基準文字，不贊成使用，請使用樣式作谚；

? ? ? **<center>:對文本進行水平居中三娩；不贊成使用，請使用樣式妹懒；

注意：

**對html文檔中對標簽包括的部分進行樣式修訂時候：

html中布局文件：<標簽> </標簽>

eg：針對header標簽進行修飾雀监；

<header>

<h1 >City Gallery </h1>

</header>

css樣式對應：標簽（*）{ }

header?{ ? ? ? ? ? ? ? ? ? ? ?// 標簽{ }

background-color:black;

color:white;

text-align:center;

padding:5px;

}

**對html文檔中的塊<div>中的id（id必須為標簽名）進行樣式修訂時候需要加#：

html布局文件中：

<div id="header">

<h1 >City Gallery</h1>? ? //header為已存在的標簽名

</div>

css文件中：

#header{ ? ? ? ?// #標簽名

background-color:black;

color:white;

text-align:center;

padding:5px;

}

**對html文檔中的塊<div>中的class（class名字為自定義元素的類名）進行樣式修訂時候需要加 .

html:

<div class="cities">

<h1>London</h1>

<p>London is the Capital of England</p>

</div>

為自定義元素的類定義css中：

.cities{ ? ? ?//.*（類名）

}

**針對文檔中固有標簽中（除<div>之外）自定義class元素的類的樣式修飾，使用 *（某標簽） .**（ 定義的class名）及*（某標簽） .** （定義的class名字）? **(標簽中的子元素)

html中的：

eg：標簽為table眨唬，class名為lamp

<table ??class="lamp">

<tr>

<th>這里是表格標題</th>

<td>這是表格的單元格</td>

</tr>

</table>

對固定標簽中自定義的元素的類的css樣式中：

1. ?table.lamp ? ? ? ? ? ? ? ? ? ? ? ? ?//* . ** ? ? ? ? ?

? ? ? {

? ? ? width:100%;

? ? ? border:1px solid#d4d4d4;

? ? ?}

2.

table.lamp th,td{ ? ? ? ? ? ? ? //* .** 標簽中的子元素会前，table標簽下的子元素為th，td

padding:10px;

}

*偽類:css中特殊的定義的名稱匾竿，與id和class（可以隨意定）不同

標簽（*）:偽類

例如：

a:link,a:visited{? ? //link,visited是鏈接a中的偽類（規(guī)定好的偽類瓦宜，無法更改）

border-style:solid;

border-width:5px;

border-color:transparent;}

Javascript(html 腳本)

在html中加入javascript代碼：

* 可以放在html中的head部分（可以被全局調(diào)用），也可以放置在body部分（從性能方便考慮英放在body底部（或者</html>標簽之前）岭妖，因為腳本是從上到下一步步執(zhí)行的歉提，js放在body頂部，js執(zhí)行過程耗時越久区转，瀏覽器等待響應用戶輸入的時間就越長，就會影響頁面的渲染（h5部分）的時間）版扩；

* 在html中<script? ></script>里面就是javascript代碼废离；一個html文件中可以有多個<script ></script>標簽；

* 可以引用本頁面（html）的js礁芦，也可以引用外部js文件蜻韭；

* 引用本頁面代碼：

<script ?type="text/javascript" >

function ?allowdrop( kk){ ? //allowdrop為方法名稱，可以在本html頁面被調(diào)用柿扣；kk為屬性值

}

<script>

* 引用外部js文件：

<script ?type="text/javascript" ?src="demo.js"></script>

單獨寫js文件：

function? ?allowdrop(kk){

//js代碼

}