<!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>
