如何書寫第一行代碼?
推薦編輯器:ATOM 或者 HBuilder
基本的H5模板
<!-- 告知瀏覽器使用最新Html版本解析文檔 -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
/* 書寫樣式 */
</style>
<title></title>
</head>
<!-- 書寫頁面內容 -->
<body>
</body>
<script type="text/javascript">
// 建議這裏書寫js語句
</script>
</html>H5標籤(舉例)
| 標籤 | 描述 |
|---|---|
| < a> | 定義超鏈接 |
| < div> | 定義文檔中的一個部分。 |
| < img> | 一個圖片元素 |
| < p> | 一個段落 |
| < table> | 一個表格 |
CSS基礎選擇器
CSS 書寫的幾種方式
1. 在< head >中 書寫
2. 外部引入< link rel=”stylesheet” href=”/css/test.css”> 引入一個test.css文件
3. 在標籤內寫(不推薦)< div style=”border: 1px red solid;”>我是div< /div>
- *全局選擇器
*{
/* css */
}應用於頁面上的所有元素
- #Id id選擇器
#first{
/* css */
}
<div id="first"></div>應用於被Id 標記的標籤
3. .class 類選擇器
.first{
/* css */
}
<div class="first"></div>應用於被class 標記的標籤
4. 標籤選擇器
div{
/* css */
}
<div></div>應用於相同名稱的所有標籤
5.子類選擇器
div a{
/* css */
}
<div> <a href="#"></a> </div>想設置div 中a 的標籤 如果用標籤選擇器的話 不免會對所有的a標籤產生影響 這裏使用子類選擇器就可以單獨設置div下面的a標籤 不會影響別的a標籤
6.僞類選擇器
a:hover {
/* css */
}
<a href="#"></a>通過僞類選擇器可以設置 鼠標在鏈接上懸停時候的狀態 僞類選擇器的方法有很多種這裏不再一一講述!
7.羣組選擇器
div, p, a {
/* css */
}
<div>我是div</div>
<p>我是段落</p>
<a href="#">我是超鏈接</a>通過羣組選擇器可以給選中的標籤全部加上樣式
選擇器優先級
行內樣式>ID選擇器 > 類選擇器 > 標籤
通過以上的學習 我們 基本掌握了 H5書寫的最基本規範和方法了 下一篇博客將重點介紹css中的一些樣式!