一、
1. form: 声明表单
action：表单数据发送的地址
method: 发送数据的方式
GET(默认的)
POST
下面的作为了解
PUT
HEAD
DELETE
2.input标签 涵盖了几乎所有样式的输入框
①type: 设定输入框的样式
② text 文本输入框(input标签默认的)
③value：它是表单标签特有的属性 设定表单标签的默认值
④name：如果你想将该表单标签数据发送出去 必须添加name属性
⑤maxlength：允许输入的最大字符数
⑥size：设置输入框的尺寸
⑦password:将你输入的文本形式按照密文的形式进行显示
⑧data时间可以用来选择时间
⑨name：除了能够支持表单数据发送之外 在单选按钮上可以实现互斥效果
⑩checked：用于单选按钮和复选框的默认选中效果
①checkbox复选框
②file文件域。可以用来浏览本地文件
③number数值输入框，max最大值，min最小值，step步进 数据之间的间隔
④email邮箱的输入框但是检验邮箱的格式不是很正确
⑤url网址的检测正确与否
⑥search查找块
⑦tel电话号码的查询
⑧rangge滑块的设置
3.
input系列
type：
submit 提交按钮 可以将表单数据发送到指定目标地址
reset 重置按钮 可以重置输入的内容
button 没有任何效果 只有按钮点击样式 未来和JS配合使用
image 图片按钮 等价于submit
4.
button系列
type：
submit（默认）
reset (重置)
button（按钮）
5.
<form action="" method="post">
<p>
下拉框：
<select>
<!-- 选项 -->
<option>选项1</option>
<!--
selected 默认选中
-->
<option selected>选项2</option>
<option>选项3</option>
</select>
</p>
<p>
<!--
文本域 不要在文本域内添加内容
CSS样式：resize 设置为none可以取消边框拖拽
-->
<textarea cols="" rows="" style="resize: none;"> asdas</textarea>
</p>
</form>
6.
<body>
<div id="content">
<div>
用户登录
</div>
<div>
<!--
method：
get：submit.html?username=admin&pwd=12345
不安全 不推荐将重要信息以get形式传递 而且get请求无法上传文件
也无法传输比较大的数据 一般浏览器最大的URL允许大小为4kb左右(其实get请求没有限制大小)
post：是通过请求体来传输数据的 不会在URL显示传输的数据
安全 理论上没有数据大小限制 也可以传输文件内容(特别设置)
-->
<form action="submit.html" method="post">
<p>
昵称：<input type="text" name="username" value="admin" />
</p>
<p>
密码：<input type="password" name="pwd" value="12345" />
</p>
<input type="radio" name="gender" value="0" checked/>男
<input type="radio" name="gender" value="1" />女
<br/>
<select name="sel">
<!-- 往往我们传输数据时 使用option的value来作为值 -->
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<input type="submit" value="登录"/>
</form>
</div>
</div>
</body>
7.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="submit.html">
<!--
需求：我除了发送用户名信息之外 还需要一些额外的数据 这些数据又不需要用户查看
type:hidden 隐藏域
-->
<input type="hidden" name="hiddenName" id="" value="hiddenValue" />
<!--
readonly：可以设定表单标签为只读效果
-->
用户名：<input type="text" name="username" value="admin" readonly/>
<br/>
<!--
disabled 禁用表单标签
-->
<input type="button" name="" id="" value="普通按钮" disabled/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<!--
1.后代选择器 选择对应的标签下的对应子子孙孙元素 （空格）
2.子选择器 选择对应的标签下的对应直接子元素 （>）
3.相邻兄弟选择器 选择对应的标签后紧邻的对应兄弟元素 (+)
4.通用兄弟选择器 选择对应的标签后的所有对应兄弟元素（~）
-->
<style type="text/css">
/* 利用后代选择器 将body下的所有p元素背景颜色设置为红色 */
/*body p{
background-color: red;
}*/
/*ul p{
background-color: red;
}*/
/* 利用子选择器 将body下的子元素p背景颜色设置为粉色 */
/*body>p{
background-color: pink;
}
*/
/* 利用相邻兄弟选择器 将class=active的p标签的兄弟元素背景设置为卢瑟 */
/*.active+p{
background-color: green;
}*/
.active~p{
background-color: yellow;
}
/*
场景：
在本页面中 大量标签应用了class=active
但是现在要求将body下的直接子元素为p的且class=active的标签进行效果设置。
* */
</style>
</head>
<body>
<!--
需求： 1.使用后代选择器将p元素背景颜色设置为红色
2.使用子选择器将p元素背景颜色设置为粉色
3.使用相邻兄弟选择器将类名为active后紧挨着的兄弟P元素背景颜色设置为绿色
4.使用通用兄弟选择器将类名为active后的所有兄弟元素背景颜色设置为黄色
-->
<p class="active">1</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>2</p>
<p>3</p>
</body>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3复合选择器</title>
<!--
1.并集选择器 多个选择器的范围都会生效
2.交集选择器 多个选择器的范围相交的会生效
-->
<style type="text/css">
/*p{
background-color: blue;
}
ul{
background-color: blue;
} */
/*p,ul{
background-color: blue;
}*/
/*ul.active{
background-color: yellow;
}*/
ul.active{
background-color: yellow;
}
</style>
</head>
<body>
<!--
需求： 1.使用并集选择器将p选择器和ul选择器的范围内背景颜色都设置为蓝色
2.使用交集选择器将p选择器和.active选择器的范围内公共的交集部分颜色设置为蓝色
-->
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul class="active">
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3属性选择器的使用</title>
<style type="text/css">
/*此段代码只是让结构更美观，后续章节会详细讲解*/
.demo a {
/*设置左浮动*/
float: left;
/*将行级标签转换块级标签*/
display: block;
/*高度*/
height: 50px;
/*宽度*/
width: 50px;
/*设置圆角*/
border-radius: 10px;
/*设置文本居中*/
text-align: center;
/*背景颜色*/
background: #aac;
/*字体颜色*/
color: blue;
/*字体设置*/
font: bold 20px/50px Arial;
/*消除a标签下划线*/
text-decoration: none;
/*设置外边距*/
margin: 5px;
}
/* 1.将所有拥有id属性的元素背景颜色设置为黄色*/
/*a[id]{
background-color: yellow;
}*/
/*2.将id属性值为first的元素背景颜色设置为红色*/
/*a[id="first"]{
background-color: red;
}*/
/*3.将所有拥有class属性且属性值中包含links字符串的元素背景颜色设置为红色*/
/*a[class*=links]{
background-color: blue;
}*/
/*4.将所有拥有title属性并且属性值是以web开头的元素背景颜色设置为红色*/
/*a[title^=web]{
background-color: red;
}*/
/*5.将所有拥有title属性并且属性值是以site结尾的元素背景颜色设置为红色*/
a[title$=site]{
background-color: green;
}
</style>
</head>
<body>
<!--
需求： 1.将所有拥有id属性的元素背景颜色设置为黄色
2.将id属性值为first的元素背景颜色设置为红色
3.将所有拥有class属性且属性值中包含links字符串的元素背景颜色设置为红色
4.将所有拥有title属性并且属性值是以web开头的元素背景颜色设置为红色
5.将所有拥有title属性并且属性值是以site结尾的元素背景颜色设置为红色
-->
<p class="demo">
<a href="#" class="links item first" id="first">1</a>
<a href="#" class="links active item" title="test website">2</a>
<a href="#" class="links item">3</a>
<a href="#" class="links item"> 4</a>
<a href="#" class="links item">5</a>
<a href="#" class="links item" title="website link">6</a>
<a href="#" class="links item">7</a>
<a href="#" class="links item">8</a>
<a href="#" class="links item">9</a>
<a href="#" class="item links last" id="last">10</a>
</p>
</body>