標籤：劃線 led 結合 完整 相對 換行 表示 lock 電腦
從23號開始用了4天時間看完了《Head First Html與CSS》這本書，本書講解方式深入淺出，便於理解，結合習題，便於記憶，是一本不錯的入門書。下面是本書的學習筆記：
一、認識HTML
HyperText Markup Language，超文字標記語言 (HTML)的縮寫。標記文本來告訴瀏覽器文本的結構。
注釋放在<!--和-->之間，瀏覽器會忽略其中內容。
1、在電腦上建立一個html檔案
開啟記事本，另存新檔尾碼名為.html，編碼為UTF-8。
本地測試，直接在瀏覽器中開啟，可以直接將檔案拖進去。
2、html檔案基本結構
<html>
<head>
</head>
<body>
</body>
</html>
一個完整的元素：<h1> Starbuzz Coffee Beverages</h1> 開始標記+內容+結束標記
3、增加樣式，<style>元素
放在頭部裡，制定類型，加屬性type為css(也可不指定)，可以在頭部標記裡加屬性。
<head>
<style type="text/css">
</style>
</head>
css是另一門語言是層疊樣式表的縮寫，cascading style sheets，文法結構跟html不同。html 負責頁面結構(布局)，css負責頁面樣式（表現）。
css基本文法是：元素名 {屬性1：值；
屬性2：值；
}
例：body {
background-color: #d2b48c;
border: 2px dotted black;
margin-left: 20%;
margin-right: 20%;
padding: 10px;
}
二、深入瞭解超文本HT，hypertext
1、超連結，元素<a>
<a href="direction.html">detailed derections</a>
href屬性來指定連結的目標檔案，> <中間的內容是瀏覽器顯示的文本（標籤），通常帶有一個底線，代表可點擊。href是縮寫，hypertextreference，超文本引用。
2、引用路徑
在本網站內容用相對位址，外網站內容用絕對位址url
如果相對本網頁，要引用的內容是在下級子檔案夾：images/coffee.jpg
如果相對本網頁，要引用的內容是在兄弟檔案夾，則要先返回上級父資料夾，在下行到該兄弟檔案夾：../images/coffee.jpg，一個".."代表上行一級。如果要上行兩級則用../..。
如果相對本網頁，要引用的內容就在本級，則直接用coffee.jpg
註："/"只用做分隔。
三、Web頁面建設
首先根據草圖建一個頁面略圖，就是用html元素標識出基本的架構，然後再把元素和內容補充完整，形成基本布局。
1、塊元素block，內嵌元素inline
塊元素：<p> <blockquote> <ol> <ul> <li>，單獨顯示，前後有換行。
內嵌元素：<q> <em> <img>，沒有換行。
2、其他
<br>是分行符號，沒有任何內容，沒有結束標記。是一個void元素。<img>也是void元素，有屬性，但是沒有內容和結束標記。
ul: unordered list 無序列表
ol: ordered list 有序列表
li: list item 清單項目
ul 與 li ，ol 與 li , 必須成組使用，不能單獨也不能搭配其他使用。
特殊字元要用字元實體來表示。&是所有實體的第一個字元，例如< 是< ，但是&不能單獨使用，要用實體&。
【2017.7.27】Html與CSS學習筆記1-3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
