<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML表單標籤：form input select textarea</h1>
<form action="a.html" method="post">
<input type="hidden" name="id" value="100"/>
姓名：<input type="text" disabled name="uname" maxlength="8" size="10" value="lisi" /> <br/><br/>
密碼：<input type="password" name="upass" /> <br/><br/>
性別：<input type="radio" name="sex" value="1" />男
<input type="radio" checked name="sex" value="0" />女<br/><br/>
愛好: <input type="checkbox" name="likes" value="1"/>看書
<input type="checkbox" checked name="likes" value="2"/>爬山
<input type="checkbox" name="likes" value="3"/>游泳
<input type="checkbox" checked name="likes" value="4"/>唱歌<br/><br/>
頭像：<input type="file" name="pic"/><br/><br/>
郵箱：<input type="email" placeholder="請輸入你的郵箱" name="pic"/><br/><br/>
年齡：<input type="number" min="18" max="80" name="pic"/><br/><br/>
指數：<input type="range" min="18" max="80" name="pic"/><br/><br/>
網址：<input type="url" value="http://www.baidu.com" readonly name="pic"/><br/><br/>
日期：<input type="date" name="pic"/><br/><br/>
顏色：<input type="color" name="pic"/><br/><br/>
學歷: <select name="education" id="">
<option value="1">大專</option>
<option value="2" >本科</option>
<option value="3">碩士</option>
<option value="4" selected>研究生</option>
<option value="5">博士</option>
</select><br/><br/>
簡介: <textarea rows="10" cols="100" name="contents">Hello World!</textarea>
<br/><br/>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="普通按鈕"/>
<input type="image" src="./images/reg.gif"/>
</form>
</body>
</html>
在html 中使用css 樣式
(1). 內聯方式（行內樣式）
就是在HTML的標籤中使用style屬性來設置css樣式
格式： <html標籤 style="屬性:值;屬性:值;....">被修飾的內容</html標籤>
<p style="color:blue;font-family:隸書">在HTML中如何使用css樣式</p>
<!-- 特點：僅作用於本標籤。-->
(2). 內部方式（內嵌樣式）
在head標籤中使用<style type=“text/css”>....</style>標籤來設置css樣式
<style type="text/css">
....css樣式代碼
</style>
<!-- 特點：作用於當前整個頁面 -->
（3）外部導入方式（外部鏈入）
3.1 (推薦）就是在head標籤中使用<link/>標籤導入一個css文件。在作用於本頁面，實現css樣式設置
<link href="文件名.css" type="text/css" rel="stylesheet"/>
3.2 還可以使用import在style標籤中導入css文件。
<style type="text/css">
@import "style.css";
</style>
<!-- 特點：作用於當前整個網站 -->
css 常見選擇器
css 樣式,選擇器優先級： id 選擇器>class 類選擇器> html選擇器
1.html 選擇器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1.html 選擇器*/
h1{color:red}
</style>
</head>
<body>
<h1>My Html Test Page!</h1>
</body>
2.類選擇器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*2.類選擇器,只針對li 中class=cc 的生效*/
li.cc{color: blue}
</style>
</head>
<body>
<h1>My Html Test Page!</h1>
<ul>
<!-- 只針對li 中class='cc' 的生效 -->
<li class="cc">CSS 層疊樣式表1</li>
<li>CSS 層疊樣式表2</li>
</ul>
</body>
3.id 選擇器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*3.id 選擇器,只針對id='hid' 的生效*/
#hid{color: yellow}
</style>
</head>
<body>
<!-- 只針對id='hid' 的生效 -->
<h2 id="hid">什麼是css 呢？</h2>
</body>
4.包含選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*4.包含選擇器，只針對 ol 中的li 生效，而ul 中的li 不生效，li 必須在 ol 中*/
ol li{color: aqua}
</style>
</head>
<body>
<h1>My Html Test Page!</h1>
<h2 id="hid">什麼是css 呢？</h2>
<ul>
<!-- 只針對li 中class='cc' 的生效 -->
<li class="cc">CSS 層疊樣式表1</li>
<li>CSS 層疊樣式表2</li>
<li>CSS 層疊樣式表3</li>
<li>CSS 層疊樣式表4</li>
<li>CSS 層疊樣式表5</li>
</ul>
<ol>
<!-- 只針對li 中class='cc' 的生效 -->
<li class="cc">CSS 層疊樣式表1</li>
<li>CSS 層疊樣式表6</li>
<li>CSS 層疊樣式表7</li>
<li>CSS 層疊樣式表8</li>
<li>CSS 層疊樣式表9</li>
</ol>
</body>
</html>
5.組合選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*5.組合選擇器,h1 h2 h3 同時生效*/
h1,h2,h3{
font-size: 50px;
}
</style>
</head>
<body>
<h1>My Html Test Page!</h1>
<h2 id="hid">什麼是css 呢？</h2>
<h3>你好，css 樣式---</h3>
</body>
6.僞類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*6. 僞類選擇器 */
a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */
a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */
</style>
</head>
<body>
<h1>My Html Test Page!</h1>
<h2 id="hid">什麼是css 呢？</h2>
<h3>你好，css 樣式---</h3>
<ul>
<li><a href="../0407/demon08.html">CSS語法實例</a></li>
<li><a href="../0407/demon10.html">CSS樣式使用方式</a></li>
</ul>
</body>
