一 form标签和input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.form标签
专门用来进行用户信息收集的一个标签，一般要结合表单相关的标签来使用才有意义。
表单相关的标签：input，select，textarea等
主要提供form中子标签的内容的提交和重置功能
action属性：提交路径（接口）
method属性：提交方式（post/get）
-->
<form action="" method="post">
</form>
<!--2.input标签
input标签是表单相关标签，可以在form中使用，也可以单独使用
1）type
input标签会因为type的不同，功能完全不一样
2）name --区分不同的内容；提交（相当于字典的key）
要不要给这个属性赋值，主要看：1.要不要区分不同的内容。2.需不需要提交这个input标签的值
3）value
value的意义会根据type值得不同而不一样；但是表单提交的时候提交的都是value的值
-->
<form action="" method="get">
<!--1)文本输入框 --- text
a.value属性 -- 给这个属性赋值是在设置输入框的默认值；修改输入框的内容，会改变这个值。
b.placeholder --- 输入框为空的时候默认显示的信息
c.maxlength ---- 输入框最多能输入的内容的长度
-->
<font><strong>账号：</strong></font>
<input type="text" name="tel" value="" placeholder="请输入手机号码" maxlength="5"/><br />
<!--2）密码输入框 ---password
a.value属性 -- 给这个属性赋值是在设置输入框的默认值；修改输入框的内容，会改变这个值。
b.placeholder --- 输入框为空的时候默认显示的信息
c.maxlength ---- 输入框最多能输入的内容的长度
-->
<font>密码：</font>
<input type="password" name="pw" id="" value="" placeholder="密码" maxlength="6"/>
<!--3）单选按钮 -- radio
a.name属性 --- 如果多个选项是一组数据必须保证他们的name属性值一样，才能做到多个选项单选。
b.value属性 -- 不能显示，只是用来提交的
c.checked -- 给这个属性赋值为cheked让按钮处于默认选定状态
补充：可以通过将label的for属性和input的id属性保持一致，让label和input关联
-->
<br />
<font>性别：</font>
<input type="radio" name="sex" id="sex1" value="男" checked="checked"/>
<label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="女" />
<label for="sex2">女</label>
<br />
<!--4）复选按钮 -- checkbox
a.name属性 --- 如果多个选项是一组数据必须保证他们的name属性值一样，才能做到多个选项单选。
b.value属性 -- 不能显示，只是用来提交的
c.checked -- 给这个属性赋值为cheked让按钮处于默认选定状态
-->
<input type="checkbox" name="interest" id="a" value="游戏" /><label for="a">游戏</label>
<input type="checkbox" name="interests" id="b" value="旅游" /><label for="b">旅游</label>
<input type="checkbox" name="interest" id="c" value="餐厅" /><label for="c">餐厅</label>
<br />
<!--5)普通按钮
value属性 --- 按钮上显示的内容
补充：button标签
-->
<input type="button" name="" id="" value="登陆" />
<button>登陆</button>
<button ><img width='20' height="20" src="img/luffy1.png"></button>
<!--6)重置按钮 -- reset
重置当前重置按钮所在的form标签中所有相关标签里面
-->
<input type="reset" name="" id="" value="重置" />
<!--7）提交按钮 -- submit
以‘name = value’值得方式提交当前form标签中的内容
-->
<input type="submit" value="提交"/>
<input type="color" name="1" id="" value="颜色" />
</form>
</body>
</html>
二 下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--下拉菜单
seclect标签 -- 整个下拉列表
option标签 -- 列表中的选项
optgroup标签 -- 列表选项分组，通过label属性值来设置分组名
（只是在显示上对选项进行分区，不影响提交值）
-->
<select name="provice">
<option value="四川省">四川省</option>
<option value="湖南省">湖南省</option>
<option value="福建省">福建省</option>
</select>
<select name="city">
<option value="南充市">南充市</option>
<option value="成都市">成都市</option>
<option value="绵阳市">绵阳市</option>
</select>
<br />
<select name="city">
<optgroup label="四川省"></optgroup>
<option value="成都">成都</option>
<option value="南充">南充</option>
<option value="绵阳">绵阳</option>
<optgroup label="广东省"></optgroup>
<option value="珠海">珠海</option>
<option value="佛山">佛山</option>
<option value="惠州">惠州</option>
</select>
<br />
<!--2）多行文本域 --- textarea
提供一个可以换行输入的输入框
rows属性 -- 行数，影响输入框的默认高度
cols属性 -- 列数，影响输入框的宽度
maxlength -- 输入内容的最大长度
autofocus -- 值设为autofocus,刷新的时候自动成为焦点
-->
<textarea autofocus="autofocus" name="comment" rows="10" cols="20" maxlength="100" placeholder="输入你的想法"></textarea>
<input type="submit" value="提交"/>
</form>
</body>
</html>
三 无语义标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div标签和span标签都是无语义标签，
使用div一般用于对网络中的内容分块和分组
-->
<div id="">
<a href="http://www.baidu.com">百度一下</a>
</div>
<div id="">
<a href="http://www.baidu.com">百度一下</a>
</div>
<span>
<a href="http://www.baidu.com">百度一下</a>
</span>
<span>
<a href="http://www.baidu.com">百度一下</a>
</span>
</body>
</html>
四 css
<!--
1.什么是css
css又叫样式表（层叠样式），是web标准中的表现标准，专门用来针对网页中内容的布局和样式
现在绝大部分使用的是css3
2.怎么写css
1）.语法
选择器{属性1：属性值1；属性2：属性值2}
2）.说明
选择器 -- 选中需要设置样式的标签；在内联样式表中选择器需要省略
{} -- 固定写法
属性 -- 属性是以‘属性：属性值’的形式成对出现，多个属性之间用分号隔开
值 -- 如果是数字表示大小，数字后面必须加单位：px（像素），em（空格数）
颜色值：颜色英文单词、#十六进制颜色值、rgb（r，g，b）、rgba（r，g，b，透明度）
rgb颜色:r-red（0-255），g-green（0-255），b-blue（0-255）
rgb（255,0,0） ==#ff0000==red
rgb（0,255,0）==#00ff00==green
rgb（0，0，0） ==#00000==black
rgb（255，255，255）=#ffffff==white
透明度 --- 0（完全透明）~1（完全不透明）
3.写在哪儿
1)内联样式表:将样式写在标签的style属性中
只作用于一个固定的标签
2)内部样式表：将样式写在style标签中
作用于当前html文件
3)外部样式表：将样式写在css文件中，然后在html中通过link标签导入
复用性：外部>内部>内联
优先级：不管什么情况内联的优先级最高、内部和外部的优先级看顺序，谁后写谁的优先级高
4.常见属性
color：设置标签中的字体颜色
background——color：设置标签的背景颜色
font——size:字体大小
width：标签宽度
heigth：标签高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--2.内部样式-->
<style type="text/css">
/*这个里面写css代码*/
div{
color: orange;
background: darkblue;
}
h1{
color: palegoldenrod;
background: yellow;
}
</style>
<!--3.外部样式-->
<link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
<h2>人</h2>
</head>
<body>
<!--1.内联样式-->
<p style="color: red; font-size:30px;">nihao</p>
<h1>我是神</h1>
</body>
</html>
五 选择器
<!--
1.什么是选择器
通过选择器选中标签
2.选择器的写法
1）元素选择器（标签选择器）
直接将标签名作为选择器，选中当前html中对应的所有标签。
例如：a{} --选中当前html中所有的a标签
2）id选择器
（所有的标签都有一个id属性，但是要保证一个html中的id值唯一）
将标签的id属性的值前面加#作为选择器，选中id属性值是指定值的标签
例如：#a -- 选中当前html中id值是a的标签
3)类选择器（class选择器）
将标签的class属性的值前面加.作为选择器，选中class属性值是指定值的标签
4）通配符
将*作为选择器，选中当前html中所有的标签
5)群组选择器
将多个选择器用逗号隔开来作为一个选择器，选中每个独立选择器对应的标签
p，a{} -- 选中所有的p标签和a标签
div，#a {} --选中所有的div标签和id值是a的标签
#p1,.c1,.c2{} --- 选中id值是p1，class值是c1，c2的所有标签
6）后代选择器
将多个选择器用空格隔开来作为一个选择器，
div p{} --- 选中所有div标签中的p标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1、元素选择器*/
h1{
color: red;
}
/*2.id选择器*/
#q{
background-color: green;
}
/*3.class选择器*/
.1{
font-size: 10px;
font-family: "微软雅黑";
font-weight: 200;
}
</style>
</head>
<body>
<!--class属性
1.一个html中相同的class值可以有多个
2.同一个标签的class属性值可以多个(多个之间用空格隔开)
-->
<p>我是标题</p>
<div id="">
<div id="">
<h1 class="1">人们</h1>
</div>
<h1 id="q" class="1 2">haha</h1>
</div>
<h1 class='2'>heihie</h1>
<hr />
</body>
</html>
六 伪类选择器
<!--
1.伪类选择器
普通选择器选中的是html中不同的标签，伪类选择器选中的是标签的不同状态。
2.语法
普通选择器：状态{属性1：属性值1；属性2：属性值2}
1）link -- 初始状态，对于a标签来说，link对应的状态是a标签中的链接从来没有成功访问过（一般只在超链接（a）标签进行设置）
2）visited -- 超链接已经成功访问过的状态，一般也是作用于a标签
3）hover -- 鼠标悬停在标签上对应的状态（不只针对超链接，其他标签也常用）
4）active-- 鼠标按住标签不放对应的状态（主要作用在超链接和按钮）
3.选择器的权重值
权重越大优先级越高，但是内联样式表的优先级永远最高。。。。
元素选择器的权重：0001 == 1
class选择器的权重：0010 == 2
id选择器的权重是：0100 == 4
伪类选择器的权重是：0001 ==1
群组选择器的权重是看每个单独选择器的权重
后代选择器的权重：所有选择器的权重之和
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: rgb(120,120,120);
}
a:visited{
color: yellow;
}
a:hover{
color: red;
font-size: 30px;
}
a:active{
color: gray;
}
button:active{
color: yellowgreen;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<p>段落</p>
<button>按钮</button>
<a href="05-css.html">打开文件</a>
</body>
</html>
