HTML與css入門總結
HTML：超文字標記語言，超文字指的是超連結，標記指的是標籤，這是一種由一個個標籤組成的製作網頁的語言。
HTML基本結構：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>
</head>
<body>
網頁顯示內容
</body>
</html>
第一行是文件宣告；
第二行與最後一行的<html>標籤與</html>定義了html文件的整體；
<head>標籤和<body>標籤是第一層子元素，<head>標籤負責網頁的一些設定及定義標題，包括定義網頁編碼格式，外鏈
--------------------------
標題標籤：
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
會從大到小一層層顯示其標題
段落標籤：表示文件的一個文欄位落，具有塊元素基本特性，含有預設外邊距
段前與段尾分別加<p>
--------------
通用塊容器標籤：表示文件一塊內容，具有塊元素特性，無其他預設樣式
段落前後分別加<div>與</div>
---------------
---------------
常用的內聯標籤
1：超連結標籤，連結到另一個網頁，預設文字藍色，有下劃線。
<a href="./03----標題標籤.html">標題連結標籤</a>
<a herf="http://www.baidu.com"target="_blank">
百度的連結</a>
2：圖片標籤，在網頁中插入圖片，支援寬高設定，具體格式為：
<img src="images/pic.jpg" alt="圖片" />
這個 src 後面跟的是我們圖片儲存的位置，alt後面跟的是圖片顯示不出來時的提示資訊。
一些其他常用的功能標籤
1：換行標籤
<br>因為雖然我們編寫時換行了，但在網頁顯示時它是預設不會換行的，這時可以用<br>標籤，在此處跳到下一行。
2：註釋標籤
<!---註釋--> 這裡可以直接用Ctrl + / 快捷鍵實現
字元實體
1：空格的字元實體
 這個代表一個空格實體
2：“< >”的字元實體
在網頁上顯示“< >”時可能會被誤認為標籤，我們想要在網頁上顯示出它們可以用它們的字元實體 “<”是&It “>”是>
標籤語義化
帶語義的標籤
1、h1~h6：表示標題
2、p：表示段落
3、img：表示圖片
4、a：表示連結
不帶語義的標籤
不帶語義的標籤
1、div：表示一塊內容
2、span：表示行內的一塊內容
---------------------------------------
css：為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 CascadingStyle Sheets的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文件的結構和內容，表現形式完全交給CSS，html文件變得更加簡潔
css的基本語法
定義方法是：選擇器 { 屬性：值； 屬性：值；屬性：值；}
示例：
div{
width:100px;
height:100px;
background:gold;
}
css引入方式
內聯式；嵌入式；外鏈式。
外鏈式是通過link標籤連結外部樣式檔案到頁面中，較好用。
<link rel="stylesheet" herf="./css/out.css">
css屬性入門
佈局常用樣式屬性
Width 元素標籤寬度
Height 元素標籤高度
Background 元素背景色或背景圖片
Border 元素四周邊框
border:1px solid black;設定元素四周邊框是1畫素寬的黑色實線
border也可以分別設定四個邊的
Border-top 頂邊邊框
Border-top：10px soild red
定邊是10畫素寬的紅色實線
後面left right bottom 分別對應左右底三邊邊框
Padding：元素包含的內容與元素邊框的距離，即內邊距。
padding:20px;padding是同時設定4個邊的，也可以像border一樣拆分成分別設定四個邊:padding-top、padding-left、padding-right、padding-bottom。
margin：元素與外界的距離，即外邊距
margin:20px;margin是同時設定4個邊的，也可以像border一樣拆分成分別設定四個邊:margin-top、margin-left、margin-right、margin-bottom。
文字常用樣式屬性1
color：文字顏色
Font-size：文字大小
Font-family：文字字型
Font-weight：文字是否加粗 bold加粗；normal不加粗
Line-height：文字行高
Text-decoration：文字下劃線 後面加none表示把下劃線去掉