html入門與實戰
web标準：
結構标準
樣式标準
行為标準
html格式語言——超文本标簽語言
加粗字型
文法骨架格式
帶尖括号的都稱為标簽
</>表示結束
<html> 根标簽
<head> 頭标簽
<title></title> 标題标簽
</head>
<body> 主體标簽
</body>
</html>
head和body是并行狀态；title包含在head裡
以上都是雙标簽，還有部分單标簽
單标簽
換行标簽，數量很少
标簽的互相關系分為嵌套關系（子元素縮進鍵位）和并列關系（上下對齊）
在sublime中使用！加tab即可快速生成骨架
告訴我們使用的是html 5版本
charset=“UTF-8”>是目前最常用的字元集編碼方式，可以避免亂碼
标簽
1.排版标簽
2.标題标簽
<h1>第一級</h1>
<h2>第2級</h2>
<h3>第3級</h3>
<h4>第4級</h4>
<h5>第5級</h5>
<h6>第6級</h6>
最小到六級
3.段落标簽
<p>這就是一個段落一般實驗結果用圖表展示，然後在正文進行觀察分析。例如，論文[2]的主實驗部分先介紹不同Selector和Reader對實驗效果的影響（4.4 Effect of Different Paragraph Selectors、4.5 Effect of Different Paragraph Readers）</p>
<p>接着介紹主實驗結果和觀察分析（4.6 Overall Results）。其中表格中會把最好效果加粗顯示，一般應大部分位于本文提出的方法；為了更加清晰明了，觀察分析結論可用（1）（2）（3）列出，其中第1條一般要得出主要結論，即本文方法要顯著優于已有方法。</p>
4.水準線标簽
是單标簽
橫線
5.換行标簽
也是單标簽
<br /> 用來換行
6.div,span标簽
div是分割，分區的意思
span 跨度，距離
<div>這是頭部</div>
<span>今日價格</span>
7.文本格式化标簽
<stong></strong>或者<b></b> 表示加粗
<em></em> 表示斜體
<del></del> 表示文字用删除線的形式表示
<ins></ins> 加上下劃線
8.标簽屬性
要求：水準線，長度為500,顔色為紅色
<hr width = "500" color = "red" />
注意屬性的位置，必須寫在開始标簽中，位于标簽名後面
屬性之間不分順序，屬性之間用空格隔開
屬性有預設值
9.圖像标簽
這也是單标簽
插入的圖檔可以是本地的，也可以是網絡上的
<img src = "圖像URL" /> 這是路徑屬性
帶有alt的圖像
<img src = "圖像URL" alt = "提示文本，這是我的圖檔" />
帶有title的圖像
<img src = "圖像URL" title = "滑鼠懸停時顯示的内容" />
帶有寬度的圖像
<img src = "圖像URL" title = "滑鼠懸停時顯示的内容" width = "400" />
帶有邊框（可設定寬度）的圖像
<img src = "圖像URL" width = "400" border = "10" />
10.連結标簽
target分為self（在自己視窗打開，會覆寫自己）和blank（在新視窗打開）
用#代替空連結
11.錨點定位
使用者能夠快速定位到目标内容
12.base标簽
也是一個單标簽
<head>
<base target = "blank"/>
其他标簽代碼
</head>
讓頁面中所有連結都以新視窗打開
設定整體連結的打開狀态
13.特殊标簽字元
14.注釋标簽
15.路徑
16.無序清單的使用
<ul>
<li>清單項1</li>
<li>清單項2</li>
<li>清單項3</li>
</ul>
<ul></ul>之間隻能放<li></li>标簽，輸入其他标簽是不被允許的
<li></li>标簽之間可以放其他标簽
<ul>
<li>清單項1</li>
<li>清單項2</li>
<li>清單項3</li>
<li>
<h3>清單裡的标題</h3>
<p>清單裡的段落</p>
<ul>
<li>清單裡的清單1</li>
<li>清單裡的清單2</li>
<li>清單裡的清單3</li>
</ul>
</li>
</ul>
17.有序清單的使用
<ol>
<li>中國</li>
<li>英國</li>
<li>美國</li>
</ol>
18.自定義清單
<dl>
<dt>西安</dt>
<dd>碑林</dd>
<dd>灞橋</dd>
<dd>雁塔</dd>
<dd>曲江</dd>
</dl>
css快速掌握
css翻譯為層疊樣式表
給html網頁設定外觀或者樣式
文字的顔色大小，網頁的背景顔色，背景圖檔都通過css設定
css的文法規則
由選擇器和一對大括号（一條一條的聲明語句）組成
每條聲明由屬性:值組成，每條用英文分号隔開
css中的屬性值一般不加引号（不同于html）
css中屬性值為數值資料時，一般都要加機關px
px機關指的是像素
在css中不能出現html标簽
書寫方式
三種：嵌入式，外鍊式，行内式
嵌入式
使用html中 的style标簽将css嵌入到html網頁中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css快速入門</title>
<style type="text/css">
/*在這裡書寫css代碼*/
p{
color:#FF0000;
font-size:100px;
}
</style>
</head>
<body>
<p>由選擇器和一對大括号（一條一條的聲明語句）組成
每條聲明由屬性和值組成，每條用英文分号隔開
css中的屬性值一般不加引号（不同于html）
css中屬性值為數值資料時，一般都要加機關px
px機關指的是像素
在css中不能出現html标簽</p>
</body>
</html>
如果我們使用的是html5的話，則type屬性可以省略不寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css快速入門</title>
<style type="text/css">
/*在這裡書寫css代碼*/
div{
width: 100px;
height: 100px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<style></style>标簽可以放在html的任何地方，但通常放在<head></head>中
外鍊式
以.css為擴充名的檔案
然後在
<head></head>
标簽中使用
<link />
标簽，将css檔案連結到html中
css檔案不能單獨運作，必須依賴于html檔案
確定css檔案已經被正确引入成功
代碼舉例
這是html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外鍊式</title>
<!--将單獨的css檔案連結到目前html中-->
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
<p>外鍊式</p>
</div>
</body>
</html>
這是css檔案
/*書寫css代碼*/
body{background-color: #f00;}
div{width: 100px;
height: 100px;
background-color: #00f;
}
p{font-size: 30px;}
行内式
将css代碼書寫在html标簽的style屬性中
style是一個通用屬性，每一個标簽中都有該屬性
文法格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内式</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: #00f;"></div>
<p style="font-size:50px;color: #f00;">我可以</p>
</body>
</html>
注釋
css中的注釋格式：
/*之間寫上注釋
也可以跨行*/
sublime中的注釋快捷鍵在mac上為command+/
css中隻能使用自己的注釋，不能用html中的
<!--注釋-->
基本選擇器
通用選擇器
<style type="text/css">
/*通用選擇器，所有的文字都會變成紅色*/
*{
color:#FF0000;
}
</style>
标簽選擇器
類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>類選擇器</title>
<style type="text/css">
/*隻要是class屬性的值為h的标簽，不管他是什麼标簽，都會設定成以下樣式*/
.h{color: #f00;}
h3.h{color: #00f;} /*這裡隻規定了h3的h才能設為藍色*/
</style>
</head>
<body>
<h2 class="h">看我能不能變成紅色</h2>
<h3 class="h">heehjdhjsbdj</h3>
<h3 class="h1">kanwonengbuneng</h3>
</body>
</html>
id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id選擇器</title>
<style type="text/css">
/*#id的屬性值{屬性:值;}*/
/*給擁有指定id屬性的标簽中的文本設定樣式，在一個html中各個id的值是唯一的*/
#h{color: #00f;}
</style>
</head>
<body>
<h3 id="h">看看看</h3>
</body>
</html>
尺寸樣式屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>尺寸樣式屬性</title>
<style type="text/css">
/*使用類選擇器設定樣式*/
.box{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<span></span>
标簽不可以設定寬度高度，因為他是一個行内元素
隻有塊級元素能設定長寬高
文本與字型屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本屬性</title>
<style type="text/css">
.hu{color: rgb(255,0,0);
text-decoration: overline;}
h2{text-align: center;
text-decoration: underline;
color: red;
}
.yu{text-decoration: line-through;}
u{text-decoration: none;}
.cap{
text-transform: capitalize; /*英文字母首字母大寫*/
}
.upper{
text-transform: uppercase; /*變成全大寫*/
word-spacing: 4px; /*設定單詞間距*/
}
.lower{
text-transform: lowercase; /*變成全小寫*/
letter-spacing: 2px; /*設定字元間距*/
}
p{
text-indent: 2em; /*1個em表示一個漢字的位置，可以表示縮進*/
line-height: 30px; /*設定行高,設定文本的垂直方向居中對齊*/
border: 10px solid #f00; /*設定邊框為1px，實線 紅色*/
}
.lh{
height: 30px;
line-height: 30px;/*想要居中對齊，設定div邊框的高度和行高一緻即可*/
border: 1px solid #f00;
}
</style>
</head>
<body>
<h2>zhzuhzu</h2>
<p>Grammarly線上文法檢測工具是<span class = "hu">網際網路</span>中比較準确的工具，适合于學生、教師、作家和專業人士使用，擁有250多種常見的<span class = "yu">文法規則</span>，可以在日常<u>英文寫作</u>中很好地幫助您。Grammarly線上文法檢測工具是網際網路中比較準确的工具，适合于學生、教師、作家和專業人士使用，擁有250多種常見的文法規則，可以在日常英文寫作中很好地幫助您。</p>
<div class="cap">cascading style sheet</div>
<div class="upper">cascading style sheet</div>
<div class="lower">CASCADING STYLE SHEET</div>
<div class="lh">ahhahahahahahh</div>
</body>
</html>
字型屬性
關于字型：是否能夠顯示字型，是根據使用者電腦中是否有對應的字型檔案。沒有檔案就顯示為宋體。一般很特殊的字型電腦會用圖檔顯示
文本與字型的綜合屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本與字型的綜合屬性</title>
<style type="text/css">
h2{
color: skyblue;
font-size: 36px;
font-family: "黑體";
}
.p1{
color: #444;
font-size: 12px;
font-family: 楷體;
}
.p2{
color: #00f;
}
.first{
font-size: 36px;
color: #0f0;
}
.sec{
font-size: 36px;
color: #faa;
font-style: italic;
}
.p3{
font-weight: bold;
font-family: 黑體;
color: #0ff;
}
</style>
</head>
<body>
<h2>表示學習</h2>
<p class="p1">什麼是表示學習呢？在自然語言進行中，常用的表示方式是1-hot Representation，每一個詞都可以表示成一個非常長的向量，這個向量的長度就是詞彙的數量，例如漢語常用詞有6000個，我們就把每個詞表示成6000維的向量。每個詞對應的向量中有一維設定為1，其他次元設定為0，這樣很自然地就把人類語言中的所有詞都獨一無二地表示成一個向量，這樣計算機就可以很好的區分某個詞跟另外一個詞是不一樣的。但是這種表示方法忽視了兩個向量之間的語義關系。比如太陽和月亮，它們之間具有相關性，但是這種表示方法将它們表示成兩個獨立的向量。</p>
<p class="p2"><span class="first">表示學習</span>的另一種思想是提出一種所謂的Distributed Representation，或者是Embedding，用一個<span class="sec">低維的向量空間</span>，把每個詞都表示到空間裡面的某一個位置。這樣，我們就可以利用詞和詞之間在這個空間中的距離來衡量詞與詞之間的語義關系，這就是表示學習的基本目标。</p>
<p class="p3">在TransE中，将每個實體和關系都表示成低維向量，給定任何一個三元組，都将中間的relation看成是從head到tail的一個翻譯過程，也就是說把head的向量加上relation的向量，要讓它盡可能地等于tail向量（head+relation=tail）。在學習過程中，通過不斷調整、更新實體和關系向量的取值，使這些等式盡可能實作，并且通過對每個三元組替換頭結點或尾結點來添加負例元組，使負例元組的head的向量加上relation的向量，使其盡可能的遠離tail向量。</p>
</body>
</html>
多元素選擇器
選擇器1，選擇器2，選擇器n{}
給列出的所有選擇器設定樣式
後代元素選擇器
後代包括兒子，孫子等等
.box h2{
color: #f00;
text-decoration: overline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>後代元素選擇器</title>
<style>
.box h2{
color: #f00;
text-decoration: overline;
}
</style>
</head>
<body>
<div class="box">
<h2>html</h2>
<div>
<h2>css</h2>
</div>
<h2>php</h2>
</div>
</body>
</html>
子元素選擇器
隻比對兒子（一級元素），不比對孫子等等
.box>h2{
color: #f00;
text-decoration: overline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子元素選擇器</title>
<style>
.box>h2{
color: #f00;
text-decoration: overline;
}
</style>
</head>
<body>
<div class="box">
<h2>html</h2>
<div>
<h2>css</h2>
</div>
<h2>php</h2>
</div>
</body>
</html>
相鄰元素選擇器
比對所有緊随E元素之後的同級F元素（改變的是F元素的樣式）
要求必須是同級的兄弟關系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相鄰元素選擇器</title>
<style>
.box + p{
color: #f00;
text-decoration: overline;
}
h1 + h3{
color: #00f;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h1>html</h1>
<h3>php</h3>
<div>
<h2>css</h2>
</div>
</div>
<p>css3</p>
</body>
</html>
以上代碼的效果如下圖所示：
清單樣式屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清單樣式屬性</title>
<style>
/*後代元素選擇器*/
.box ul{
color: #f00;
list-style: circle inside url();
/*去除清單前的符号用的最多*/
}
.box ul li{
border: 1px solid red;
height: 35px;
line-height: 35px; /*這樣就能垂直方向居中對齊了*/
}
.box h1{
color: #00f;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h1>請列出中國的四大名著</h1>
<ul>
<li>西遊記</li>
<li>紅樓夢</li>
<li>水浒傳</li>
<li>三國演義</li>
</ul>
</div>
</body>
</html>
清單案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清單樣式屬性案例</title>
<style>
/*div設定邊框且居中顯示*/
.box{
width: 500px;
border: 1px solid #ccc;
/*外邊距 html中的表格标記屬性*/
margin-left: auto;/*左外邊距*/
margin-right: auto;
}
.box h2{
border: steelblue 1px solid;
height: 40px;
line-height: 40px;
color: teal;
font-weight: normal;
}
.box li{
list-style: none url();
height: 30px;
line-height: 30px;
border: orange 1px solid;
}
</style>
</head>
<body>
<div class="box">
<h2>新聞頻道</h2>
<ul>
<li><a href="#"></a>【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</li>
<li><a href="#"></a>【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</li>
<li><a href="#"></a>【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</li>
<li><a href="#"></a>【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</li>
<li><a href="#"></a>【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</li>
</ul>
</div>
</body>
</html>
僞類選擇器
來給不同狀态的超級連結設定樣式
僞類選擇器設定是有順序的！！！
要遵守l v h a 順序
“愛恨準則 love hate”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>僞類選擇器</title>
<style>
/*正常狀态 完全沒通路過的網頁*/
a:link{
color: orangered;
}
/*通路過後狀态 該連結已經被通路，隻要浏覽器有通路記錄*/
a:visited{
color: orchid;
}
/*滑鼠放上狀态*/
a:hover{
color: palegoldenrod;
}
/*激活狀态 滑鼠按下去了但沒有松開的瞬間*/
a:active{
color: palegreen;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.163.com">163</a>
<a href="http://www.sina.com">sina</a>
</body>
</html>
對超級連結進行美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清單樣式屬性案例</title>
<style>
/*div設定邊框且居中顯示*/
.box{
width: 500px;
border: 1px solid #ccc;
/*外邊距 html中的表格标記屬性*/
margin-left: auto;/*左外邊距*/
margin-right: auto;
}
.box h2{
border: steelblue 1px solid;
height: 40px;
line-height: 40px;
color: teal;
font-weight: normal;
}
.box li{
list-style: none url();
height: 30px;
line-height: 30px;
border: orange 1px solid;
}
/*對超級連結進行美化*/
a:link,a:visited{
text-decoration: none; color: rgb(221, 27, 27);
}
a:hover{
color: palegreen;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h2>新聞頻道</h2>
<ul>
<li><a href="#">【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</a></li>
<li><a href="#">【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</a></li>
<li><a href="#">【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</a></li>
<li><a href="#">【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</a></li>
<li><a href="#">【秦時明月】張良的兩段旁白（翟大聲音的渲染力啊~~）</a></li>
</ul>
</div>
</body>
</html>
屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>屬性選擇器</title>
<style>
/*通過屬性選擇器來比對元素*/
[align = "right"] /*比對标簽的屬性為某個值的标簽*/
{
color: palevioletred;
}
[align ^= "cen"] /*比對标簽中屬性的值為某字元開頭*/
{
color: peru;
}
font[color $= "00"]{ /*比對标簽中屬性的值為某字元結尾*/
border: powderblue 1px solid;
}
font[color *= "dd"]{ /*比對标簽中屬性的值包含某字元*/
border: rgb(19, 208, 233) 2px solid;
}
</style>
</head>
<body>
<p align="center">黑馬程式員1</p>
<h2 align="center">黑馬程式員2</h2>
<p align="right">黑馬程式員3</p>
<font color="#ff0000">顔色</font>
<font color="#ffaa00">顔色</font>
<font color="#ffaadd">顔色</font>
</body>
</html>
繼承性
- 外層元素身上的樣式會被内層元素所繼承
- 當内層元素身上的樣式與外層元素相同時，内層元素會覆寫外層元素
- 隻有文本與字型樣式屬性會被繼承
實際工作中，我們通常會給body标簽設定字型大小和字型顔色，因為body是最外層标簽，便于讓内層标簽繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>繼承性</title>
<style>
body{
color: red; /*外層元素身上的樣式會被内層元素所繼承*/
font-size: 36px;
}
div{
color: rebeccapurple; /*當内層元素身上的樣式與外層元素相同時，内層元素會覆寫外層元素*/
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<h2>你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯</h2>
<p>你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯你們江南人士連打架都這麼風緻嗎？
︱李歸年個人賞顔剪輯你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯
</p>
</div>
</body>
</html>
優先級
行内樣式>id選擇器>類選擇器>标簽選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>優先級</title>
<style>
#dd{ /*id選擇器 優先級計算為100*/
color: chartreuse;
}
.d{ /*類選擇器 10*/
color: burlywood;
}
div{ /*标簽選擇器 1*/
color: brown;
}
div h2{ /*1+1=2*/
color: cornsilk;
}
.d h2{ /*10+1=11*/
color: crimson;
}
#dd h2{ /*100+1=101*/
color: darkblue;
}
</style>
</head>
<body>
<div class = "d" id = "dd" style="color:cornflowerblue;"> <!--行内樣式 1000-->
<h2>你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯</h2>
<p>你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯你們江南人士連打架都這麼風緻嗎？
︱李歸年個人賞顔剪輯你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯你們江南人士連打架都這麼風緻嗎？︱李歸年個人賞顔剪輯
</p>
</div>
</body>
</html>
!important
!important不能提升繼承繼承過來的權重！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>!important</title>
<style>
p{
color: darkblue !important; /*把該屬性的權重變得無窮大，顯示為這個顔色*/
font-size: 20px;
}
.p1{
color: darkcyan;
}
#p2{
color: darkgoldenrod;
font-size: 100px;
}
</style>
</head>
<body>
<p class="p1" id="p2">黑馬程式員</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: darkgoldenrod !important;/*!important不能提升繼承繼承過來的權重！！！*/
/*這裡的顔色仍然是darkgreen綠色*/
}
p{
color: darkgreen;
}
</style>
</head>
<body>
<div>
<p>黑馬程式員</p>
</div>
</body>
</html>
一個标簽内可以攜帶多個類名
類名：class屬性的值
一個标簽内可以攜帶多個類名指的是class的屬性值可以有多個，每一個屬性值之間用空格分隔
舉例
多個類名的優點：
- 減少css的代碼量
- 多個類名的樣式會疊加到目前元素上面
注意⚠️多個類名中設定的樣式若有一樣的，會形成樣式沖突
此時看css代碼，誰寫在下面就聽誰的（和html代碼中的類名順序div1 div2也無關）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多個類名</title>
<style>
.div1{
font-weight: bold;
color: rebeccapurple; /*形成樣式沖突*/
}
.div2{
color: red; /*red寫在下面，黑馬程式員3顯示為紅色加粗*/
}
/* .div3{
font-weight: bold;
color: red;
} */
</style>
</head>
<body>
<div class="div1">黑馬程式員1</div>
<div class="div2">黑馬程式員2</div>
<div class="div1 div2">黑馬程式員3</div>
<!-- 一個标簽内攜帶多個類名，可減少代碼量同時有同樣效果 -->
</body>
</html>