git發(fā)布網(wǎng)頁
http://www.cnblogs.com/lijiayi/p/githubpages.html
Html中: <!--注釋語句-->
CSS：/*注釋語句*/ 單行//
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成
在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。
當(dāng)有多條聲明時，中間可以英文分號“;”
http://www.imooc.com/code/611
html
快速參考手冊
http://www.w3school.com.cn/html/html_quick.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實踐題 - 選項卡</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
<br />
<hr />
＃超鏈接
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。
<a >This is a link</a>
有兩種使用 <a> 標(biāo)簽的方式：
１ 通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接
２ 通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽?。ＬD(zhuǎn)
<a href="#C4">查看 Chapter 4。</a>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter 4</a></h2>
＃target指定位置顯示
<a target="_blank">Visit W3School!</a>
#郵件鏈接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">發(fā)送郵件</a>
#圖片作為鏈接
<a href="/example/html/lastpage.html">
</a>
#圖片
1 背景圖片
<body background="/i/eg_background.jpg">
gif 和 jpg 文件均可用作 HTML 背景。
如果圖像小于頁面，圖像會進(jìn)行重復(fù)。
2 排列圖片
<p>圖像  在文本中</p>
middle/top
3 浮動圖片
<p>
<img src ="/i/eg_cute.gif" align ="left">
帶有圖像的一個段落。圖像的 align 屬性設(shè)置為 "left"。圖像將浮動到文本的左側(cè)。right
</p>
4 圖片映射
#表格
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
#列表
1 無序列表
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
2 有序列表
<ol type="A">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
3 嵌套列表
4 自定義列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
HTML <div> 和 <span>
#可以通過 <div> 和 <span> 將 HTML 元素組合起來。
大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。
1 塊級元素
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）。
例子：<h1>, <p>, <ul>, <table>
2 內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時通常不會以新行開始。
例子：<b>, <td>, <a>, <img>
*HTML <div> 元素
HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
*HTML <span> 元素
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當(dāng)與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性。
HTML 類
對 HTML 進(jìn)行分類（設(shè)置類），使我們能夠為元素的類定義 CSS 樣式。
為相同的類設(shè)置相同的樣式，或者為不同的類設(shè)置不同的樣式。
<div class="cities">
span.red {color:red;}
HTML布局
1 使用 <div> 元素的 HTML 布局
<div> 元素常用作布局工具，因為能夠輕松地通過 CSS 對其進(jìn)行定位。
2 使用 HTML5 的網(wǎng)站布局
HTML5 提供的新語義元素定義了網(wǎng)頁的不同部分：
header 定義文檔或節(jié)的頁眉
nav 定義導(dǎo)航鏈接的容器
section 定義文檔中的節(jié)
article 定義獨立的自包含文章
aside 定義內(nèi)容之外的內(nèi)容（比如側(cè)欄）
footer 定義文檔或節(jié)的頁腳
details 定義額外的細(xì)節(jié)
summary 定義 details 元素的標(biāo)題
HTML 框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。
框架結(jié)構(gòu)標(biāo)簽（<frameset>）
框架結(jié)構(gòu)標(biāo)簽（<frameset>）定義如何將窗口分割為框架
每個 frameset 定義了一系列行或列
rows/columns 的值規(guī)定了每行或每列占據(jù)屏幕的面積
HTML 背景
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
HTML實體
大于號 >
CSS
- 內(nèi)聯(lián)樣式
當(dāng)特殊的樣式需要應(yīng)用到個別元素時，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
- 內(nèi)部樣式表
當(dāng)單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
[看10遍教程不如寫一遍代碼--HTML入門demo小結(jié)](http://www.cnblogs.com/yanhaoqi/p/5958042.html)
<!-- html是網(wǎng)頁的根標(biāo)簽，網(wǎng)頁中所有內(nèi)容都要寫到html標(biāo)簽中，一個頁面中只能有一個html標(biāo)簽 -->
<!-- head中的內(nèi)容不會在頁面中顯示，它用來告訴瀏覽器如何解析網(wǎng)頁 -->
<!-- title用來設(shè)置整個網(wǎng)頁的標(biāo)題（主要內(nèi)容）
搜索引擎在檢索一個網(wǎng)頁時，將會最先檢索title中的內(nèi)容，注意title中的內(nèi)容不要太長，盡量在25個文字左右
-->
<!-- body是網(wǎng)頁的主體，網(wǎng)頁中所有可見的內(nèi)容都要編寫到body中 -->
<!-- 即使網(wǎng)頁編寫的不符合規(guī)范，瀏覽器也會盡最大的努力正確的解析頁面 -->
<!-- 常用的標(biāo)簽 -->
<!-- 標(biāo)題標(biāo)簽 -->
<!-- 在html中一共有六級標(biāo)題標(biāo)簽，h1~h6 h1最大，h6最小 ，但是我們并不關(guān)心它的顯示大小
h1~h6叫語義化標(biāo)簽，h1表示一級標(biāo)題，它的重要性僅次于title，對于搜索引擎檢索是很重要
注意，一般情況下一個頁面中只能有一個h1
h1以后的標(biāo)題標(biāo)簽重要性越來越低，一般我們使用標(biāo)題就到h3 h3以后的很少用
-->
<!-- 段落標(biāo)簽
p標(biāo)簽標(biāo)示的是一個段落，它里面的內(nèi)容，會單獨占一行
并且它會默認(rèn)在段落的前后各加一個換行
-->
<!-- 在HTML中，多個連續(xù)的空格或者是換行，瀏覽器只會解析成一個空格
換行時需要使用標(biāo)簽來操作
-->
<!--
水平線
hr標(biāo)簽可以在頁面中的指定位置，輸出一條水平線
-->
<!-- 在HTML中一些特殊符號是不能直接編寫的比如小于號 大于號不能和字母一塊
我們需要使用轉(zhuǎn)義字符（實體）來表示這些特殊符號
實體的語法：
&實體的名字;
小于號：
<
大于號:
>
空格：
版權(quán)聲明：
?
-->
<!-- meta用來設(shè)置網(wǎng)頁的元數(shù)據(jù)，比如可以用來設(shè)置網(wǎng)頁的編碼 -->
<meta charset="utf-8" />
<!-- 我們還可以使用meta來設(shè)置網(wǎng)頁的關(guān)鍵字 -->
<!-- name屬性用來設(shè)置，屬性的名字。 content用來設(shè)置屬性的值 -->
<!-- 我們可以同時為一個網(wǎng)站設(shè)置多個關(guān)鍵字，多個關(guān)鍵字之間使用,隔開 -->
<meta name="keywords" content="美女,帥哥,HTML5,Java" />
<!-- meta還可以用來設(shè)置網(wǎng)頁的描述（簡介） -->
<!-- 搜索引擎在檢索頁面時，會檢索keywords和description中的內(nèi)容
但是這些內(nèi)容不會影響網(wǎng)站在搜索引擎中的排名
-->
<meta name="description" content="專注于搜集各種美女帥哥的圖片" />
<!-- meta還可以用來做請求的重定向 -->
<!-- http-equiv="refresh" 固定值
content="秒數(shù);url=目標(biāo)地址"
-->
<meta http-equiv="refresh" content="5;url=demo8.html" />
<!-- HTML的注釋不能嵌套所有語言的注釋都不能嵌套-->
<!-- 標(biāo)簽必須正確結(jié)束 -->
<!-- 要么成對出現(xiàn) -->
<!-- 屬性必須有值，且值必須加引號 -->
<!-- html中不區(qū)分大小寫 , 但是所有的規(guī)范里都推薦我們使用小寫 -->
<!-- 標(biāo)簽可以嵌套，但是不能交叉嵌套 -->
<!-- 可以通過target屬性來設(shè)置在哪里打開目標(biāo)頁面
_self 表示在當(dāng)前頁面打開鏈接
_blank 表示在一個新的窗口中打開
- 我們還可以將target的值設(shè)置為一個內(nèi)聯(lián)框架的名字
這時它會在指定的內(nèi)聯(lián)框架中打開新的頁面
-->
<!-- a的href屬性可以設(shè)置為一個 #id屬性值 這樣點擊超鏈接以后，網(wǎng)頁會自動定位到該id對應(yīng)的元素的位置 -->
<!-- 在每一個元素中都可以設(shè)置一個id屬性，id是標(biāo)簽的唯一標(biāo)識，在同一個頁面中不能出現(xiàn)相同的id屬性值 -->
<!-- 我們?nèi)绻麑⒊溄拥膆ref設(shè)置#，則超鏈接點擊后會自動的回調(diào)當(dāng)前頁面最上邊 -->
<!-- 這種發(fā)送郵件的連接，href應(yīng)該以mailto:開頭，后邊跟著一個電子郵件地址，這樣點擊以后將會打開系統(tǒng)中默認(rèn)的郵件客戶端向目標(biāo)地址發(fā)送郵件-->
<!-- 元素之間的關(guān)系
父元素
- 直接包含子元素的元素我們稱為父元素
子元素
- 直接被父元素包含的元素我們稱為子元素
祖先元素
- 直接或間接包含后代元素的元素我們稱為祖先元素（父元素也是祖先元素）
后代元素
- 直接或間接被祖先元素包含的元素我們稱為后代元素（子元素也是后代元素）
兄弟元素
- 擁有相同的父元素的元素我們稱為兄弟元素
-->
<span> 在CSS定義中屬于一個行內(nèi)元素,在行內(nèi)定義一個區(qū)域，也就是一行內(nèi)可以被 <span> 劃分成好幾個區(qū)域，從而實現(xiàn)某種特定效果。 <span> 本身沒有任何屬性,可以在span中對文字樣式進(jìn)行設(shè)置。 <div> 在CSS定義中屬于一個塊級元素 <div> 可以包含段落、標(biāo)題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。在頁面效果上，使用 <div> 會[自動換行](https://www.baidu.com/s?wd=%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPj79uWF-n1P-nHKhrAck0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPj0vPjnYPWcY)，使用 <span> 就會保持同行。
<!-- id和class
id和class屬性值必須以字母開頭
id選擇器 #id
class選擇器 .class
在前端開發(fā)中，編寫css時，一般我們選擇使用 class選擇器，盡量避免使用id選擇器。
class屬性用來為一個元素分組，頁面中相同的class屬性值可以出現(xiàn)多個，并且一個元素可以擁有多個class
-->
<!-- 標(biāo)簽中還支持一個屬性，叫做title
一個元素設(shè)置了title屬性以后，當(dāng)鼠標(biāo)引入到元素上邊時，title中的文字會顯示出來
-->
/*
:first-letter表示第一個字母
* */
p:first-letter{
color: red;
font-size: 30px;
}
/*
* :first-line表示的是第一行
*/
.p2:first-line{
background-color: yellow;
}
/*
* :first-child選中第一個子元素
* first-child是在所有的子元素中進(jìn)行排序
*/
/*p:first-child {
background-color: yellowgreen;
}*/
/*
* :last-child可以選中頁面中的最后一個子元素
*/
/*p:last-child{
background-color: royalblue;
}*/
/*
* :nth-child(位置)
* 可以找到指定位置的子元素，需要一個子元素的位置
* 如果位置寫一個odd，則表示選中奇數(shù)行
* 如果寫一個even，則表示選中偶數(shù)行
*/
/*p:nth-child(even){
background-color: red;
}*/
/*
* :first-of-type 在指定類型元素中找到第一個子元素
*/
<p class="p1">我是一個段落</p>
/*
* CSS的樣式設(shè)置具有繼承性
* 祖先元素上的樣式會自動應(yīng)用到他的后代元素中
* 但是并不是所有的樣式都有繼承性
* 比如：背景顏色就不能繼承
*
* 特殊情況：
* 如果給body設(shè)置背景顏色，它會默認(rèn)將背景顏色應(yīng)用到其父元素上<html>
*/
/*p{
font-size: 60px;
background-color: yellow;
}*/
/*
* 選擇器的優(yōu)先級（權(quán)重）
* 當(dāng)我們使用不同的選擇器，為同一個元素設(shè)置同一個樣式時，到底要應(yīng)用哪個選擇器設(shè)置的樣式呢？
* 這個是由選擇器的優(yōu)先級（權(quán)重）來決定
*
* 注意當(dāng)一個元素上有相同的樣式產(chǎn)生沖突時，會根據(jù)選擇器的優(yōu)先級來決定顯示那個樣式，優(yōu)先級高的優(yōu)先顯示
* 優(yōu)先級的計算，需要將所有的選擇器相加來計算，如果優(yōu)先級一樣，則誰在下邊用誰
* 優(yōu)先級的累加，不能超過選擇器的最高數(shù)量級
*
*
* 內(nèi)聯(lián)樣式：
* 內(nèi)聯(lián)樣式的優(yōu)先級最大，內(nèi)聯(lián)樣式會優(yōu)先于所有的選擇器顯示
* 優(yōu)先級是 1000
* ID選擇器：
* 優(yōu)先級是 100
* 類和偽類選擇器：
* 優(yōu)先級是 10
* 元素選擇器：
* 優(yōu)先級是 1
* 通配選擇器（*）：
* 優(yōu)先級是 0
* 繼承來的樣式：
* 沒有優(yōu)先級
*
* 我們可以在一個樣式的后邊添加一個 !important 來將該樣式設(shè)置為優(yōu)先級最高的樣式，這樣他會優(yōu)先于所有的樣式顯示
* 但是在開發(fā)中和內(nèi)聯(lián)樣式一樣，盡量避免使用!important
*/
