1 form
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<!--
1、form标签（表单）
专门用来进行用户信息收集的一个标签，一般要结合表单相关的标签使用才有意义
表单相关标签：input、select、textarea等
主要提供form中子标签的内容的提交和重置功能
action属性：提交路径（接口）
methods属性：提交方式（post/get）
2、input标签
input标签是表单相标签，可以在form标签中使用，也可以单独使用
type属性：input标签会因为type的不同，功能完全不一样
name属性：区分；提交（相当于字典的key），要不要给属性赋值
主要看1）需不需要区分不同内容；2）需不需要提交input标签的值
value属性：value的意义会根据type值的不同而不一样，但是表单提交时提交的都适合value值
-->
<form action="" method="get">
<!--
1)文本输入框 - text
a. value属性 - 给这个属性赋值是在设置输入框的默认值
修改输入框中的内容会改变这个属性的值
b. placeholder - 输入框为空时的默认显示信息
c. maxlength - 输入框最多能输入的内容的长度
-->
<font>账号</font>
<input type="text" name="账号" id="" value="" placeholder="请输入账号"/><br />
<!--
2)密码输入框 - password
a. value属性 - 输入框的默认值
b. placeholder - 输入框为空时的默认显示信息
c. maxlength - 输入框最多能输入的内容的长度
-->
<font>密码</font>
<input type="password" name="密码" id="" value="" placeholder="请输入密码" maxlength="5"/>
<br />
<!--
3)单选按钮（radio）
a. name属性 - 如果多个选项是一组数据，必须保证他们的name属性一样
才能多个选项单选
b. value属性 - 不能显示，只是用来提交的
c.checked属性 - 给这个属性赋值为checked，让按钮处于默认选中状态
补充：可以通过将label的for属性和input的id属性保持一致；
让label和input关联在一起
-->
<font>性别：</font>
<input type="radio" name="性别" id="11" value="男" /><label for="11">男</label>
<input type="radio" name="性别" id="22" value="女" checked="checked"/><label for="22">女</label>
<br />
<!--
4)复选框 - checkbox
-->
<input type="checkbox" name="爱好" id="11" value="餐饮" /><label for="11">餐饮</label>
<input type="checkbox" name="爱好" id="12" value="游戏" /><label for="12">游戏</label>
<input type="checkbox" name="爱好" id="13" value="旅游" /><label for="13">旅游</label>
<br />
<!--
5)普通按钮 - button
a. value属性 - 按钮上显示的内容（input只能提供文字按钮）
button双标签可以使用图片按钮
-->
<input type="button" name="" id="" value="登录" />
<button><img src="img/aaa.ico"/></button>
<!--
6）重置按钮 - reset
重置当前重置按钮所在form便签中所有的相关标签的值
-->
<input type="reset" name="" id="" value="重置" />
<!--
7）提交按钮 - submit
以‘name=value’值的方式提交当前form标签的内容
-->
<input type="color" name="" id="" value="" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
2 下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--
下拉菜单
select标签 - 整个下拉列表
option - 列表中的选项
optgroup - 一个列表选项分组，通过label属性来设置分组名
（只是在显示上对选项进行分区，不影响提交结果）
-->
<select name="city">
<option value="四川">四川省</option>
<option value="湖南">湖南省</option>
<option value="湖北">湖北省</option>
<option value="福建">福建省</option>
</select>
<br />
<select name="">
<optgroup label="四川省"></optgroup>
<option value="四川">成都</option>
<option value="湖南">绵阳</option>
<option value="湖北">南充</option>
<option value="福建">德阳</option>
<optgroup label="广东省"></optgroup>
<option value="四川">广州</option>
<option value="湖南">深圳</option>
<option value="湖北">东莞</option>
<option value="福建">佛山</option>
</select>
<br / >
<!--
2、多行文本域 - textarea
提供一个可以换行输入的输入框
rows属性 - 行数，影响输入框的默认高度
cols属性 - 列数，影响输入框的默认宽度
maxlength属性 - 输入的最大宽度
autofocus属性 - 加载时，自动处于编辑状态
-->
<textarea name="comment" rows="" cols="" maxlength="10"></textarea>
<input type="submit" value="提交"/>
</form>
</body>
</html>
3 无语意标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div便签和span标签都是无语义标签
使用div一般用于对网页中的内容分块和分组，
div会分行显示，span不会换行
-->
</body>
</html>
4 CSS基础
<!--
1、什么是css
css又叫样式表（层叠样式表），是web标准中的表现标准，专门用来针对网页中的内容
的布局和样式。现在绝大部分使用的是css3
2、怎么写css
1）.语法
选择器{属性1:属性值2;属性2:属性值2}
2）.说明
a.选择器 - 选中需要设置样式的标签；在内联样式表中选择需要省略
b.{} - 固定写法
c.属性 - 属性以'属性:属性值'的形式成对出现，多个属性要用分号隔开。
d.值 - 如果是数字表示大小，数字后面必须加单位：px(像素)，em(空格数)
颜色值：颜色的英文单词（red,white）;#十六进制颜色值；rgb(r,g,b);rgba(r,g,b,a),a是透明度
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,255) == #0000ff == 'blue'
rgb(0,0,0) == #000000 == 'black'
rgb(255,255,255) == #ffffff == 'white'
透明度 - 0(完全透明) ~ 1(完全不透明)
3）写在哪
内联样式表：将样式写在标签的style属性中
内联样式表只作用于一个固定的标签
内部样式表：将样式写在style标签中
内部样式表只作用于当前html文件中的所有标签
外部样式表：将样式写入css文件中，然后再html中通过link标签导入
可以作用于所有的html中的所有标签
复用性：外部>内部>内联
优先级：内联样式表的优先级不管什么情况都是最高、内部和外部的优先级谁先写谁高
4)常见属性
color - 设置标签中的字体颜色
background-color - 设置标签的背景颜色
font-size - 字体大小
width - 标签宽度
height - 标签高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style type="text/css">
/*这个里面写css代码*/
div{
color: orange;
}
h1{
color: purple;
}
</style>
<!--3、外部样式-->
<link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
</head>
<body>
<!--1、内联样式-->
<p style="color: red;font-size: 30px;">hello CSS</p>
<div id="">
我是div
</div>
<h1 style="color: dodgerblue;">我是标题</h1>
</body>
</html>
5 选择器
<!--
1、什么是选择器
通过选择器选中标签
2、选择器的写法
1）元素选择器（标签选择器）
直接将标签名作为选择器，选中当前html中对应的所有标签
列入：a{} - 选中当前html中所有的a标签
2）id选择器
（所有标签都有一个id属性，值是自己设置，但是要保证一个html中id的值唯一）
将标签的id属性的值前面加#作为选择器，选择id属性值时指定值的标签
例如：#a - 选中当前html中id值是a的标签
3)类选择器（class选择器）
将标签的class属性的值前加.作为选择器，选中class属性值是指定值的标签
例如：.a - 选择当前html中class值是a的所有标签
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">
p{
color: red;
}
/*标题选择器*/
#a1{
font-size: 90px;
color: #800080;
}
.c1{
color: yellow;
}
.c2{
font-size: 50px;
}
</style>
</head>
<body>
<!--class属性
1.一个html中相同的class值可以有多个
2.同一个标签的classs属性值可以多个
-->
<p class="c1">我是段落1</p>
<div id="">
<div id="">
<p id="a1">我是段落2</p>
<!--这儿的h1标签有两个值，分别是c1和c2-->
<h1 class="c1 c2">我是标题1</h1>
</div>
</div>
<p>我是段落3</p>
<br />
<br />
<br />
<a href="">超链接1</a>
<div id="">
<a href=""></a>
<div id="">
<a href=""></a>
</div>
</div>
</body>
</html>
6 伪装选择器
<!--
1、伪类选择器
普通选择器选中的是html中不同的标签；伪类选择器选择的是标签的不同状态
2、语法
普通选择器:状态{属性1:属性值1；属性2:属性值2}
1）link - 初始状态；一般针对超链接（a标签）中进行设置
对a标签来说，link对应的状态是a标签从来没有访问过的状态
2）visited - 超链接成功访问过的状态
3)hover - 鼠标悬停在标签上对应的状态（不止针对超链接，其他标签也常用）
4)active - 鼠标按住标签不放对应的状态（主要作用在超链接和按钮上）
3、选择器的权重值
权重越大优先级越高，内联选择器的优先级永远最高
元素选择器的权重：0001 == 1
class选择器的权重：0010 == 2
id选择器的权重：0100 == 4
伪类选择器的权重：0100 == 1
群组选择器的权重：看单独每个选择器的权重
后代选择器的权重：所有选择器的权重之和
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1)link*/
a:link{
color: rgb(150,150,150);
}
a:visited{
color: green;
}
a:hover{
color: red;
}
button:active{
background-color: #800080;
}
</style>
</head>
<body>
<a id="a1" href="http://www.baidu.com">百度一下</a>
<p>段落</p>
<button>按钮</button>
<a href="05-选择器.html" target="_blank">打开选择器</a>
</body>
</html>
