表单标签和input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 1.表单标签:form
这个标签是作为一个容器，来收集和提交这个标签中的其他相关标签的数据
action属性:提交路径(接口)
method属性:设置请求方式(post/get)
-->
<form action="" method="post">
<!-- 2.input标签
input标签可以单独使用，也可以和form配合使用
type属性:这个值不一样，input功能就完全不一样
text，password，submit
-->
<!-- 2.1文本输入框(type:text)和密码输入框(type:password)
type:text(明文输入框)
type:password(密文输入框)
name - 随便命名，用来对输入的内容进行说明
提交数据的时候以name：value形式进行提交，name值回座位发送请求的参数名，value参数值
value - 指向的就是文本输入框中的内容
placeholder - 占位符(提示信息)
maxlength - 限制输入框能输入的最大个数
-->
<input type="text" name="username" value="张三" placeholder="用户名" maxlength="9"/>
<input type="text" name="tel" value="" placeholder="电话"/>
<input type="password" name="password" value = "" placeholder="密码">
<!-- 2.2 单选按钮
type - radio
name - 注意：同一类信息的name需要设置成一样的
value - 需要设置值，来告诉别人选中按钮对应值或者意义
checked - 设置默认选中状态
-->
<input type="radio" name="sex"value="man" />男
<input type="radio" name="sex"value="" />女
<input type="radio" name="marry"value="" />已婚
<input type="radio" name="marry"value="" />未婚
<br />
<!-- 2.3复选按钮
type - checkbox
name - 如果是同一类数据，name值应该设置成一样的
-->
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="socce">足球
<input type="checkbox" name="hobby" value="tennes">羽毛球
<input type="checkbox" name="hobby" value="pingpang">乒乓球
<br />
<!-- 2.4 普通按钮
type - button
value - 设置按钮上显示的文字
disabled -禁用
-->
<input type="button" value = "点我啊~">
<button>点我啊</button>
<br />
<!-- 2.5 提交按钮
type - submit
可以自动提交当前form标签中所有设置了name属性的标签的值
-->
<input type="submit">
<!-- 2.6 重置按钮
type - reset
可以让当前form标签中所有标签的值设置为初始状态
-->
<input type="reset" name = "" value = "重置" >
</form>
</body>
</html>
下拉菜单和多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" method="get">
<!-- 1.下拉菜单:select - option
name - 提交的时候用来区分不同的数据
value - 提交的时候提交的具体数据
内容 - 显示的文字
selected - 设置默认选中
-->
<select name="city">
<option value = "成都" selected="selected">成都</option>
<option value = "北京">北京</option>
<option value = "重庆">重庆</option>
</select>
<!-- 对下拉列表进行分组：optgroup
-->
<select name="">
<optgroup label="四川省"></optgroup>
<option>成都</option>
<option>德阳</option>
<option>绵阳</option>
<option>雅安</option>
</select>
<br />
<!-- 多行文本域
输入的内容可以多行显示
rows - 不滚动的时候偶默认一屏最多能显示的行数
cols - 设置一行最大列数
-->
<textarea name="message" rows="3" cols="30" placeholder="意见">你好</textarea>
</form>
</body>
</html>
div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
div和span标签都是无语义标签，一般用来对网页中标签进行分组和分块
一个div占一行；多个span可以在一行显示
-->
<div id="">
aaa
</div>
<div id = "">
bbb
</div>
<span>
aaaaaa
</span>
<span>
bbbbbbbbb
</span>
</body>
</html>
CSS基础
<!--
1.什么是CSS
CSS就是web标准中的表现标准，专门用来对网页标签进行布局和设置样式的一门语言
目前一般使用CSS3，又叫样式表
常用CSS属性
color - >设置字体颜色
background-color ->设置背景颜色
width ->宽度
height ->高度
2.CSS语法
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
说明：
选择器 - 用来选中需要设置样式的标签
{} - 固定写法
属性 - 必须是CSS支持的属性，总共200多个
属性值 - 根据属性赋不同的值，如过属性的值是用来表示大小的数字，后面必须加单位，例如px - 像素，em - 空格数
CSS中的颜色值：
a.颜色的英文单词
b.#颜色值对应的6位16进制值(#ff00)
c.rgb(r,g,b) rgba(r,g,b,alpha)r,g,b取值范围0-255，alpha取值范围0-1透明度
属性合数性质之间用冒号隔开，多个属性之间用分号隔开；属性的顺序除特殊情况外是任意的
3.在哪写CSS代码
a.内联样式：将样式表写在标签的style属性中 --- 只对一个标签有效
b.内部样式：写到样式表写在head中的style标签里 --- 样式只对当前html文件中标签有效
c.外部样式：将样式表写在外部的CSS文件中，然后再head中通过link标签导入 --- 样式可以作用域所有html文件
内联样式的优先级最高，内部样式和外部样式谁后写谁的优先级高
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入外部样式
link标签 - 导入外部文件
rel - 说明导入的文件的功能，stylesheet(添加样式表)，icon(设置网页图标)
type属性 - 对导入的文件类型进行说明:文件类型/文件后缀
href属性 - 导入的文件地址
-->
<link rel="stylesheet" type="text/css" href="04CSS基础.css">
<link rel="icon" type="image/ico" href="">
<!-- 内部样式 -->
<style type="text/css">
/* 这写的是CSS代码 */
p{
/* 设置文字颜色 */
color: green;
}
h1{
background-color: red;
/* 设置字体大小 */
font-size:20px;
}
</style>
</head>
<body>
<p>我是一个段落</p>
<p>我是一个段落2</p>
<h1>我是一个标题</h1>
<div id="" style="height: 100px;background-color: red;">
</div>
</body>
</html>
CSS选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 内部样式 -->
<style type="text/css">
/* 元素选择器 */
p{
color: gold;
}
/* id选择器 */
#p3{
background-color: plum;
}
/* class选择器
选中class值是p2的所有标签
*/
.p2{
background-color: peru;
}
</style>
</head>
<body>
<div id="">
<p>我是段落1</p>
</div>
<div id="">
<p class="p2">我是段落2</p>
</div>
<div id="">
<p id="p3">我是段落3</p>
</div>
</body>
</html>
伪类选择器
<!-- 伪类选择器是选中某个标签的不同的状态，可以给不同状态设置不同的样式
a.link
标签:link{} - 选中初始状态-(a标签的初始状态是指a对应的网址一次都没有访问成功的状态)
例如：a:link{};p:link{}; #a1:link{}
b.vistied：访问后的状态
c.hover：鼠标悬停在标签上对应的状态
d.activate:鼠标按住不放的状态
注意：使用伪类选择器的时候要遵守爱恨原则(LoVeHAte,即按LVHA的顺序写，如果不遵守可能导致某些状态的样式无效)
2.选择器的优先级
权重值越大，优先级越高，如果权重值相同，后写的优先级高
元素选择器权重值：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: gold;
}
/* 访问后的状态 */
a:visited{
color: seagreen;
}
/* 鼠标悬停的状态*/
a:hover{
color: darkred;
}
/* 鼠标按住不放的状态 */
a:active{
color: springgreen;
}
</style>
</head>
<body>
<div id="">
<p id="p1" class="p1">我是段落1</p>
</div>
</body>
</html>
