HTML 超文本標(biāo)記語言扎瓶,是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用蕊爵,也是一種規(guī)范,一種標(biāo)準(zhǔn)删铃,它通過標(biāo)記符號來標(biāo)記要來現(xiàn)實(shí)的網(wǎng)頁中的各個(gè)部分耳贬。網(wǎng)頁文件本身就是一種文本文件,通過文本文件中添加標(biāo)記符猎唁,可以告訴瀏覽器如何現(xiàn)實(shí)內(nèi)容咒劲。
<!doctype html>
<html>
<head>
<title>HTML基礎(chǔ)---二</title>
</head>
<body>
<div style="font-size:25px;font-weight:bold;font-style:italic;font-family:'楷體'">
hellow world
</div>
<!-- font 是規(guī)定文本的字體(famil),尺寸(size),樣式(style)等的 -->
<!-- 我們也可以簡寫 列如 ↓ -->
<div style="font:bold italic 25px '楷體';">
Hellow World
</div>
<!-- 屬性之間用空格隔開,不能用‘ , ’ 否側(cè)顯示不出效果 -->
<div style="width:200px;height:200px;border:1px solid #333;text-align:center;line-height:200px;">
字體垂直居中了
</div>
<!-- text-align 規(guī)定元素中的文本的水平對齊方式,它有三個(gè)屬性:left诫隅,right腐魂,center(中心) -->
<!-- line-height 設(shè)置行間的距離(行高),該屬性會影響行框的布局 -->
<div style="width:200px;height:200px;border:1px solid #333;background-color:red;background-image:url(image/1.jpg);background-repeat:no-repeat;background-position:center">
</div>
<!-- background 是一個(gè)背景屬性,可以設(shè)置如下屬性:
background-color 背景顏色
background-position 背景定位 它有五個(gè)屬性:left,right,top,bottom,center,可以設(shè)置9個(gè)方向逐纬,也可以通過像素(px)或者百分比設(shè)置位置
background-size 背景尺寸
background-repeat 設(shè)置背景是否可以重復(fù)
background-image 背景圖片
-->
<span>hellow world</span>
<!-- span標(biāo)簽是被用來組合文檔中的行內(nèi)元素的蛔屹,span沒有固定的格式表現(xiàn)。當(dāng)它應(yīng)用樣式時(shí)豁生,才會發(fā)生變化兔毒,跟div標(biāo)簽差不多,只不過div是塊級元素 -->
<div style="width:200px;height:200px;border:1px solid #333;"></div>
<!-- 將style寫入標(biāo)簽內(nèi)甸箱,如果樣式太多,我們看著也會覺得煩,下面會介紹另一種方法 內(nèi)聯(lián)樣式 -->
<style>
p{
width:200px;
height:200px;
border:1px solid #333;
text-align:center;
line-height:200px;
}
</style>
<p>內(nèi)聯(lián)樣式</p>
<!-- style標(biāo)簽要寫在head標(biāo)簽里罐栈,這里只是做掩飾
效果跟行內(nèi)樣式一樣外厂,而且代碼看的也很干凈,
同時(shí)我們也運(yùn)用了一個(gè)叫做標(biāo)簽選擇器的方法豌骏,
通過標(biāo)簽來設(shè)置樣式
-->
<style>
.test{
width:200px;
height:200px;
border:1px solid #333;
background:#c23;
text-align:center;
line-height:200px;
}
</style>
<div class="test">
類選擇器方法
</div>
<!-- 這里的class 是設(shè)置類名的意思龟梦,比如:test就是類名
我們在內(nèi)聯(lián)樣式中可以通過 . + 類名的方式來設(shè)置樣式
-->
<style>
#test{
width:200px;
height:200px;
border:1px solid #333;
background:#32c;
text-align:center;
line-height:200px;
}
</style>
<div id="test">
id選擇器方法
</div>
<!-- id 是給標(biāo)簽設(shè)置一個(gè)id,之后通過id名也可以設(shè)置樣式肯适,但這個(gè)id不能重復(fù)变秦,
所以通常我們是在JS里才用id
-->
</body>
</html>
結(jié)果預(yù)覽:
預(yù)覽---1.png
預(yù)覽---2.png