表单标签和input标签
1.表单标签：form
这个标签作为一个容器，俩收集和提交这个标签中的其他
相关标签的数据，一般不会单独使用
action属性：设置提交路径（借口）
method属性：设置请求方式（post/get）
post：发送数据
get：接收数据
2.input标签
input是单标签
input标签可以单独使用，也可以和form配合使用
type属性：这个值不一样，input的功能完全不一样
a。文本输入框（type=text）和密码输入框（type=password）
type-text（明文输入框）
type- password（密文输入框）
name-随便命名，用来对输入内容进行说明。
数据提交的时候以name：value进行提交。name的值会作为发送请求
的参数名，value就是参数值
value - 指向的就是文本输入框中的内容
placeholder - 占位符，提示信息
maxlength - 限制输入框输入的最大字符个数
b。单选按钮
type-radio
name - 注意：同一类信息的name名需要设置成一样的值，
才能做到选择一个，其他选择取消
value - 需要设置值，来告诉对应的按钮对应值的意义
checked="checked"设置默认选中状态
c。复选按钮
type- checkbox
name- 如果是同一类数据，name值也要设置成一样的
value- 需要设置值，来告诉对应的按钮对应值或意义
d。普通按钮
type- button
value - 设置按钮上显示的文字
e。type - submit（提交）
可以自动提交当前form标签中的所有设置了name属性的标签值
f。重置按钮
type - reset
可以将当前form标签中所有的标签值回到初始值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form action="" method="get">
<input type="text" name="username" value="" placeholder="请输入用户名"
maxlength="8"/>
<input type="radio" name="sex" checked="checked" id="" value="男" />男
<input type="radio" name="sex" id="" value="女" />女
<input type="button" name="" id="" value="点我啊" />
<input type="submit" name="" id="" value="提交" />
<input type="password" name="password" id="" value="" placeholder="请输入密码"/>
<input type="checkbox" name="爱好" id="" value="网球" />网球
<input type="checkbox" name="" id="" value="篮球" />篮球
<input type="reset" name="重置" id="" value="重置" />
</form>
</body>
</html>
选择下拉菜单和多行文本域
1.下拉菜单： select
name - 提交的时候用来区分不同的数据
value - 提交的时候提交的具体数据
内容 - 显示的部分
selected - 设置默认选中
2.对下拉列表进行分组 optgroup
lable 设置分组名
3.多行文本域：textarea
输入的内容可以多行显示
rows 设置一屏最多显示的行数
cols 设置一行最大的列数
<form action="" method="get">
<select name="city">
<option value ="成都">成都</option>
<option value ="广州" selected="selected">广州</option>
<option value ="上海">上海</option>
</select>
<select>
<optgroup label="四川">
<option value ="成都">成都</option>
<option value ="字样">字样</option>
</optgroup>
<optgroup label="荷兰">
<option value ="洛阳">洛阳</option>
<option value ="郑州" selected="selected">郑州</option>
</optgroup>
<textarea rows="" cols="" name="不知道"
placeholder="你说哈">
span和div
div和span标签都是无语义标签，
一般用来对网页中的标签进行分组和分块用的
一个div占一行； 多个sapan可以在一行显示
css基础
1.什么是css
css就是web标准中的表现标准，专门用来 对网页标签进行布局和设置样式的一门语言。
目前是一般使用css3，css又叫样式表
color -- 设置字体颜色 background-color -- 设置背景颜色 width -- 宽度 height --- 高度
2.css基本语法
基本结构：
选择器{属性：属性值；属性2：属性值2；...}
说明：
选择器 -- 用来选中需要设置样式的标签
{} -- 固定写法
属性 -- 必须是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 a表示透明度，范围是0~1，0是完全透明
属性和属性值之间用冒号隔开， 属性和属性之间用分号隔开，属性的顺序除了特殊情况
其他的是任意的
3.怎么使用css
a。在哪里写css代码
内联样式：将样式表写在标签的style属性中， 只对一个标签有效
内部样式：将样式表写在head中的style标签中， 只对当前文件中的标签有效
外部样式：将样式表写在外部的css文件中，然后在head中通过link标签导入 ， 可以作用域所有的html文件
导入外部样式 link标签导入外部文件 rel - 说明导入文件的功能 stylesheet（样式表） icon（设置网页图标） type -- 对文件类型进行说明：文件类型/文件后缀 herf -- 导入文件的地址
内联样式的优先级最高， 内部样式和外部样式谁后写谁的优先级高。
常用的选择器：元素选择器，id选择器，class选择器，群组选择器，父子选择器，通配符
1.元素选择器： 将标签名作为选择器，选中指定的标签。
用法： 标签名{}
2.id选择器： 将标签中的id属性的值作为选择器， 选择id值对应的标签
用法： #id值{}
3.class选择器： 将标签器中的class属性的值作为选择器，选中class值对应的标签
用法：.class值{}
4.群组选择器： 多个选择器用逗号隔开作为一个选择器，同时选中所有选择器对应的标签
a，p{} -- 选中所有的a标签和p标签
.p1,img {}-- 选中所有的img和class值是p1的标签
#p1，#p2，#p3{} --- 选中所有的id值是p1，p2和p3的比起爱你
5.父子选择器：多个选择器用空格隔开作为一个选择器，按顺序依次往后找，找到最后一层
选择器对应的标签。
用法： div div p{} -- 选中div里面的div里面的p标签
#d1 a{} -- 选择id值是d1中的a标签
6.通配符：将*作为选择器，选中当前网页的所有标签
用法： *{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#p1{
color: #0000FF; background-color: #008000; font-size: 40px;
}
.s{
color: black; font-size: 30px;
}
</style>
</head>
<body>
<p style="color: red; background-color: #FF8C00;">我是段落1</p>
<h1 id="p1">我是标题1</h1>
<p class="s">
我是段落2
</p>
</body>
</html>
伪类选择器
伪类选择器是选中某个标签的不同状态可以给不同状态设置不同样式
- link
标签:link - 选中标签初始状态
a标签的初始状态指的是a标签对应的网址一次都没有访问成功的时候对应的状态
例如： a：link{}； p：link{}； #a2：link{}
2.visited; 访问后的状态
3.hover ： 鼠标放在上面时候的状态（悬停状态）
4.active ： 鼠标按住不放对应的状态
注意：使用伪类选择器的时候要遵守爱恨原则（LoVeHAte）
（link visited hover active 依次写），如果不遵守可能会导致某些样式的无效
2.选择器的优先级: 权重值越大，优先级越高
元素选择器的权重： 0001
class选择器的权重：0010
id选择器的权重： 0100
伪类选择器的权重： 0001
群组选择器权重： 单独看每个选择器的权重
父子选择器权重： 所有选择器权重之和
内联样式的优先级是最高的
<style type="text/css">
#p1{
color: #0000FF; background-color: #008000; font-size: 40px;
}
.s{
color: black; font-size: 30px;
}
a:link{color: #FF69B4;}
a:visited{color: black;}
a:hover{font-size: 30px;}
a:active{color: aqua;}
</style>
</head>
<body>
<p style="color: red; background-color: #FF8C00;">我是段落1</p>
<h1 id="p1">我是标题1</h1>
<p class="s">
我是段落2
</p>
<a href="http//:www.baidu.com">百度</a>
<a href="http://www.qq.com/">腾讯</a>
<a href="https://www.sina.com.cn/">新浪</a>
</body>
</html>
网友评论