雙標簽:就是成對出現的,類似于這種 <html> </html>
單標簽:就是可以單個使用的,類似于 <br> 換行標簽 或 <hr>水平線標簽。
標簽的屬性是用來定義文字或字符的 顏色、寬高、粗細、大小、等,這個是標簽屬性的作用。
1、每一個標簽都有自己的屬性,單標簽和雙標簽都有。
2、一個標簽可以有多個屬性。
3、每個屬性都有對應的值,值要用單或雙引號引起來。
4、多個屬性之間使用空格隔開。
5、屬性沒有順序之分。
6、字體屬性值,必須是系統可以識別的字體,一般為系統自帶字體。
7、HTML5 中 font 屬性已經棄用。
源代碼:↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--網頁抬頭-->
<title>中央氣象局</title>
</head>
<body>
<!--水平線的寬度是500像素,這個width就是標簽屬性-->
<hr width="500">
<!--下面這個是多個標簽屬性,多個屬性之間用空格隔開-->
<font color="red" face="黑體" size="7">標簽屬性</font>
</body>
</html>
background-color 屬性為元素定義了背景顏色:
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
HTML樣式:好看的顏色字體是有方法的
SS Text(文本)屬性可定義文本的外觀,比如文本的顏色、對齊文本、裝飾文本、文本縮進、行間距等。
用的最多的就是文本顏色,color屬性用于定義文本的顏色。語法如下:
div {
color:red;
}
顏色的表現形式有:
預定義的顏色值: red、green、pink等
十六進制: #FF0000、#FF6600、#29D794等
RGB代碼: rgb(255,0,0)或rgb(100%,0%,0%)等
看下效果:
對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<div>人保說的是還有7次洗車,5次還是3次道路救援啥的</div>
</body>
</html>
所有div對應的都為藍色。
使用第二種方法,16進制顏色來表示,先看下效果:
對應代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div {
color: blue;
} */
div {
color: #FF0000;
}
</style>
</head>
<body>
<div>人保說的是還有7次洗車,5次還是3次道路救援啥的</div>
</body>
</html>
最后使用第三種方法,看下效果:
對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div {
color: blue;
} */
/* div {
color: #FF0000;
} */
div {
color: rgb(255, 193, 100);
}
</style>
</head>
<body>
<div>人保說的是還有7次洗車,5次還是3次道路救援啥的</div>
</body>
</html>
rgb竟然是red、green、blue,也是今天才知道的。
今天就先到這里了,中午休息~
*請認真填寫需求信息,我們會在24小時內與您取得聯系。