2017年1月27日
1.元素 = 開始標(biāo)記 + 內(nèi)容 + 結(jié)束標(biāo)記
<h1>Starbuzz Coffee Beverages</h1>
2.屬性：能提供元素的一些額外信息（屬性的正確寫法 別忘了都用雙引號）
<a href="beverages/elixir.html">elixirs</a>
2017年1月28日
一HTML和CSS
1.HTML負(fù)責(zé)創(chuàng)建網(wǎng)頁結(jié)構(gòu)（超文本標(biāo)記語言）【HyperText Markup Language】
CSS負(fù)責(zé)控制網(wǎng)頁表現(xiàn) （層疊樣式表）【cascading style sheets】
2.內(nèi)聯(lián)模式使用css （<style> 放在 <head>元素里面）
<!doctype html> <!-- 最新版本html,即html5 -->
<html>
<head>
<meta charset="utf-8"> <!-- 指定字符編碼 -->
<title>Starbuzz Coffee's Mission</title>
<!-- 指定為css類型，其實只用style就可以，瀏覽器都知道是CSS類型 -->
<!-- 設(shè)置背景顏色 -->
<!-- 創(chuàng)建左右 外邊距為頁面20% -->
<!-- body邊框為虛線 -->
<!-- 創(chuàng)建內(nèi)邊距 -->
<!-- 設(shè)置文本字體 -->
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee's Mission</h1>
<p>To provide all the caffeine that you need to power your life.</p>
<p>Just drink it.</p>
</body>
</html>
3.<a>屬性href用法 相對鏈接建立內(nèi)部鏈接，絕對鏈接建立外部鏈接
a.相對路徑
<a href="beverages/elixir.html">elixirs</a>
b.絕對路徑（一般是網(wǎng)站外部的鏈接才用，URL） <跳轉(zhuǎn)到錨點地方>
<a title="Read all about caffeine on the Buzz">Caffeine Buzz</a>
其中目標(biāo)鏈接頁面(buzz/index.html)有如下id設(shè)置
<h3 id="Coffee">Coffee</h3>
c.補(bǔ)充：如果是同一個文件頁面內(nèi)跳轉(zhuǎn)
<a href="#top">Back to top</a>
d.每次鏈接到一個新窗口展示.（如果同一類的跳轉(zhuǎn)到同一個窗口，target取個特定名字就可以,如coffee）
<a target=“_blank" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>
二.代碼組織（一般不要把所有的頁面都放在根目錄下，即使很少的頁面，也不利于后期維護(hù)）
-
按推薦方式進(jìn)行代碼組織
第一步：按推薦方式最近文件目錄
Paste_Image.png
第二步,根據(jù)目錄如下結(jié)構(gòu),修改代碼里面頁面跳轉(zhuǎn)和圖片相關(guān)鏈接
Paste_Image.png
1.”lounge.html”鏈接到”elixir.html” (首先進(jìn)入beverages文件夾)
<a href="beverages/elixir.html">elixirs</a>
2.”directions.html”鏈接到”lounge.html” （先用..返回上級， 進(jìn)入同級頁面后，可以直接訪問）
<..返回到上一層的父文件夾>
<a href="../lounge.html">Back to the Lounge</a>
3.修改圖片鏈接（進(jìn)入images目錄先）
<img src="images/drinks.gif">
4.”elixir.html”獲取圖片鏈接
<img src="../images/green.jpg">
三.引用元素
1.<q> 短引用（便不是所有瀏覽器都支持）[一般用在段落里]
<q>A journey of a thousand miles begins with one Segway.</q>
2.長引用<blockquote> [一般用在自成一段]
<blockquote>
Passing cars,
<br> When you can't see,
<br> May get you,
<br> A glimpse,
<br> Of eternity.
<br>
</blockquote>
四.塊元素和內(nèi)聯(lián)元素（塊元素特立獨行；內(nèi)聯(lián)元素隨波逐流）
1.塊元素顯示時就好像前后各有一個換行。
<h1> <p> <blockquote> <ol> <li>2.內(nèi)聯(lián)元素，行內(nèi)顯示
<q> <a> <img>
五.空元素（void元素）[除了空元素，其他都是正常元素]
1.沒有內(nèi)容，也沒有結(jié)束標(biāo)記
<img> <br>
六.創(chuàng)建HTML列表
1.有序列表<ol> <li>【一定要一起使用】
<ol>
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Truth or Consequences, NM</li>
<li>Why, AZ</li>
</ol>
2.無序列表<ul> <li>【一定要一起使用】
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
七.輸出特殊字符<> 和 &
The <html> elment rocks. the &
http://www.w3school.com.cn/tags/html_ref_ascii.asp (< 也可以用
<實體表示)
2017年1月29日
一.將寫好的網(wǎng)站發(fā)布到web上
第1步.找一家托管公司。（保證服務(wù)器一天24小時運行）
選擇標(biāo)準(zhǔn)
<blockquote>
a.技術(shù)支持
b.數(shù)據(jù)傳輸（網(wǎng)站如果有大量訪問，需要考慮）
c.備份（服務(wù)器出現(xiàn)故障后，能否及時恢復(fù)）
d.域名（很多托管公司，都有附帶域名注冊服務(wù)）
e.可靠性（一般保證99%以上時間都能正常運行）
</blockquote>
第2步. 為網(wǎng)站注冊一個網(wǎng)站名
eg:www.starbuzzcoffee.com
注意 starbuzzcoffee.com才是域名。（一個域名可以創(chuàng)建多個網(wǎng)站）
第3步.測試正常后，把你的代碼上傳到托管公司的服務(wù)器上后，就可以通過網(wǎng)站名訪問了。
一般都會有工具用于上傳。
4.補(bǔ)充：一般可以用如下URL(Uniform Resource Locator)【統(tǒng)一資源定位符】訪問
http://www.starbuzzcoffee.com <web服務(wù)器會默認(rèn)請求index.html 或default.htm,根據(jù)托管公司的默認(rèn)值>
上面的鏈接服務(wù)器自動加上/（建議都自己主動加個/）,之后在加上默認(rèn)文件，
http://www.starbuzzcoffee.com/index.html
URL由一個協(xié)議，一個網(wǎng)站名和資源文件絕對地祖冊。
二.圖片
1.瀏覽器獲取圖片順序
2.3種圖片一般使用場景JPEG,PNG,GIF
JPEG:有損，一般處理復(fù)雜圖片，如照片
PNG:無損，有多種顏色透明背景，logo
GIF:無損，可以有動畫效果，一種顏色透明背景 ,logo
3.<img>元素
標(biāo)準(zhǔn)寫法
<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png" alt="Pencil line 35 miles long">
4.圖像大小屬性（由于<img>元素是內(nèi)聯(lián)模式，所以圖片沒顯示前，可能會影響后面的布局，所以可以提早告訴瀏覽器長寬屬性）
（不建議直接用width和height屬性來調(diào)整頁面圖片大小,因為還是獲取整個原文件后，再縮放。）
2017年1月30日
一.寫標(biāo)準(zhǔn)的HTML（HTML5）
1.html5
html5其實就是最新版的html，當(dāng)前HTML標(biāo)準(zhǔn)
html不會在有6,7,8指定標(biāo)準(zhǔn)，它其實是個“活的標(biāo)準(zhǔn)”，會采用向后兼容的方式，既支持老的方式，也支持新的方式。
html5:不在單單用來構(gòu)建web頁面，還可以構(gòu)建web應(yīng)用，如社交媒體應(yīng)用，游戲應(yīng)用等。
2.書寫標(biāo)準(zhǔn)的html代碼
2.1聲明使用html5標(biāo)準(zhǔn)，第一行輸入
<!doctype html>
2.2用<meta>元素增加指定字符編碼，一般都是utf-8（保存html文件時也選擇utf-8模式）
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
</head>
3.W3C檢驗工具
如果您發(fā)現(xiàn)本文對你有所幫助，如果您認(rèn)為其他人也可能受益，請把它分享出去。
