標籤：html基礎
前段基礎：
以下為我們需要瞭解的三個方面：
html 超文字標記語言 (HTML) （頁面結構）
css 層疊樣式表 （頁面樣式）通過 html+css 能設定靜態頁面
js javaScript （頁面行為）
常用的集中軟體開發工具：
subline 、webStorm、 DreamWeave；
基本樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
</body>
</html>
一個網頁有head（主體）與body（內容）部分
<!DOCTYPE HTML> 聲明文件類型
! 聲明 注意
document 文檔
type 類型
<meta charset = "utf-8">
代碼編碼格式
utf-8 國際標準
gb2312 中文簡體標準
不同標準下，同一個字元 對應的編碼是不同的！
<div>塊</div>
內部樣式表：將樣式從標籤裡面分離開，寫在head部分；
html裡面注釋格式：<!-- Content -->
css內的注釋樣式
/*
*Content
*/
一般用外部樣式表，方便網頁的維護；內部樣式與行間樣式 不利於維護
行間樣式：將樣式寫在標籤行裡面
</div style = "background:red; width:200px;height:400px;">
#box{
width:400px;
}
XX：？?;
屬性：屬性值；
/屬性有： width 寬度； height 高度；
background 背景（可以是顏色可以是圖片）
repeat 重複 no-repeat 不重複 repeat-x 橫向重複 repeat-y縱向重複
；
例子：backgtound：blue url（圖片名） no-repeat 10px（橫向位置可以用百分數 cent er等） 50 px（縱向位置）fixed（固定）；
複合屬性：一個屬性有多個屬性值 叫複合屬性
fixed 固定 固定在頁面的上，不隨著頁面上下發生改變
！！！前端是一個解釋性語言，需要遊覽器進行解讀，因此寫代碼盡量精簡！
常見樣式：
邊框（border）：
border-width:邊框寬度
borde-style:邊框樣式
border-color 邊框顏色
邊框樣式：
solid 實線
dashed 虛線
dotted 點線
border複合屬性：上線左右邊框粗細，樣式和顏色；
內邊距：（padding）
注意：內邊距相當於給一個盒子加了填充厚度會影響盒子大小
有上下左右邊距；
如有padding-top等
也可以上下 如 padding:10px 10px;
複合 必須要按 top right bottom left；
外邊距：（margin）
上下外邊距會疊加；
父子級包含的時候子級的margin-top會傳遞給父級（內邊距替代外邊距）可以用內邊距（padding 來實現）
margin-left:auto;此代碼會自動計算右邊的距離，全部給左邊；無論怎麼調都會使在右邊。
margin-left：auto；與margin-right:auto;
會是邊框始終處於中間
外邊距的複合：
margin:top right bottom left；
650) this.width=650;" src="https://s1.51cto.com/wyfs02/M01/8E/8C/wKioL1jE_XnxamF1AA46dH81vZc654.jpg-wh_500x0-wm_3-wmp_4-s_1348230152.jpg" title="2017_03_12_15_09.23.jpg" alt="wKioL1jE_XnxamF1AA46dH81vZc654.jpg-wh_50" />
盒子的大小=border+padding+wudth/height;
盒子的寬度=border-left+padding-left+width+padding-right+border-ringt;
盒子的高度=border-top+padding-top+width+padding-bottom+border-bottom;
頁面中結構外的內容樣式稱為文本樣式：
font-size文字大小:偶數；預設12px
font-family文字字型:預設宋體；可以跟多個字型用逗號隔開。表示如果沒有這個字型，顯示後面字型；
文字顏色color:（可以用ps吸管取顏色並轉為16進位，16進位前要跟“#”例：color:#?????;）
line-height行高:文字在行高的置中；
text-align：文字對齊（center等）
text-indent:首行縮排（）；em單位；縮排幾個字；
font-weight：文字著重；
font-style：文字樣式（斜體等樣式）；
text-decoration:（overline downline line-through none）文本修飾；
letter-spacing:字間距；
word-spacing:英文單詞間距；
！！！總結：
常見的複合屬性:
background
border
padding
margin
font:font-size|font-weight|font-size/line-height|font-family;
(font瞭解)
遊覽器建議多裝幾個IETester
標準遊覽器：firebox（firebug 1.12.4）經常用於調試
、chrome、safara、oprea。等
HTML學習總結（1）
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
