一、HTML標簽的簡單使用
HTML標簽其實是為了展示文檔而發(fā)明的，而標簽的出現(xiàn)是為了滿足文檔的展示效果。HTML 提供的標簽有很多，比如 div、span、a、img、p 等等，其中 div、span在語義上不表示任何特定類型的內容，適合用在沒有任何語義的場景。
圖1-1
圖1-2
下圖的demo就是HTML標簽和CSS的簡單使用，代碼放在Github。
圖1-3
二、CSS的三種使用方式
- 1.（最常用）通過
link的方式引用CSS樣式，即系外部引入，這種方式需要一個CSS文件路徑，比如在當前目錄下的CSS的名字是day5.css，可以如下引用，通常是一個CSS鏈接地址，這樣可以把樣式和HTML分離，方便維護。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="day5.css">
<title>CSS的三種使用方式</title>
</head>
<body>
<h1 class="head">《前端小課》</h1>
<h2 class="h2Head">一本幫你入門與進階的前端書</h2>
</body>
</html>
- 2.（偶爾用一下）內部引入，在
HTML中的head位置添加style標簽，CSS樣式放到style標簽中。這種方式把HTML和CSS樣式放到了一起，如果頁面太復雜將導致頁面代碼太龐大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS的三種使用方式</title>
<style>
#head{
color: white;
text-align: center;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="head">給自己一句鼓勵的話</div>
<div id="contents"></div>
<div id="button" onclick="btnClick()">鼓勵自己一下</div>
</body>
</html>
- 3.（能不用就不用，一般在瀏覽器調試的時候可能會用到）內聯(lián)樣式：直接用在標簽上，只會對一個標簽起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的三種使用方式</title>
</head>
<body>
<h1>《前端小課》</h1>
<p style="color: red; font-size: 18px;">給自己一句鼓勵的話</p>
</body>
</html>
所以推薦使用第一種方式，方便維護。
