您好,登錄后才能下訂單哦!
本篇文章詳細介紹了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;
盒子的大小=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的基礎了嗎?通過這篇文章,希望你能收獲更多,如果想了解更多,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。