01表单标签和input
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表单标签（form）
作用：收集用户信息 - 实质是将表单标签作为容器来收集表单标签中其他标签的信息
本身没有任何显示效果
action属性-设置提交地址
method属性-提交方式（post/get）
点提交按钮提交的时候，将表单中所有相关标签以name=value的形式，按照method属性停供的提交方式
提交给action属性对应的接口
form标签有两大功能：1.提交 2.重置
-->
<form action="">
</form>
<!--2.input标签
既可以放在form标签中，也可以不放在form标签中单独使用
type属性-type对应值不一样，input体现的功能就不一样
-->
<form action=""method="get">
<!--a.text-文本输入框
name属性-做提交和区分不同的信息，相当于字典的key
value属性-标签内容：指向输入框里的内容，设值其实是设文本输入框的默认值
placeholder属性-输入框中没有内容时的提示信息
maxlength属性-最大输入个数
password - 密码
-->
<font>账号</font><input type="text" name="Tel"/value="123456"maxlength="11"><br />
<font>邮箱</font><input type="text" name="email"placeholder="输入邮箱..."/><br />
<font>密码</font><input type="password" name="password" id="password" value="" /><br />
<!--c.radio-单选按钮
name属性-同一组的name属性必须一样才能单选
value属性-不可见的，专门用来提交或者区分被选中的值
checked="checked" - 默认选中状态
-->
<input type="radio" name="性别" id="" value="男" checked="checked"/><font>男</font>
<input type="radio" name="性别" id="" value="女" /><font>女</font><br />
<!--d.checkbox - 复选按钮
name属性-同一组的name属性必须一样才能单选
value属性-不可见的，专门用来提交或者区分被选中的值
checked="checked" - 默认选中状态
-->
<input type="checkbox" name="h" id="" value="" /><font>1</font>
<input type="checkbox" name="h" id="" value="" /><font>2</font>
<input type="checkbox" name="h" id="" value="" /><font>3</font>
<input type="checkbox" name="h" id="" value="" /><font>4</font>
<input type="checkbox" name="h" id="" value="" /><font>5</font>
<!--e.button - 普通按钮
value属性决定按钮上显示文字
-->
<input type="button" name="" id="" value="注册" />
<!--f.submit - 提交按钮
点击后自动提交form中所有设了name属性的值
以name=value形式提交
-->
<input type="submit" name="" id="" value="提交" />
<!--g.reset- 重置按钮
将当前form标签中所有的标签状态设置为初始状态
-->
<input type="reset" name="" id="" value="重置" />
<input type="color" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="datetime" name="" id="" value="" />
<input type="file" name="" id="" value="" />
</form>
<!--3.按钮标签（button）
-->
<!--文字按钮-->
<button>登录</button><br />
<!--图片按钮-->
<button><img src="img/ufo2.png"/><p>空投</p></button>
</body>
</html>
02-下拉菜单和多行输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<!--1.下拉菜单（select-option）
a.select标签 - 创建下拉菜单
name-区分和提交
b.option标签 - 菜单中选项
内容 - 显示部分
value属性 - 提交的内容
selected - 设置默认选中
-->
<select name="学科">
<optgroup label="理科"></optgroup>
<option value="1">数学</option>
<option value="2">物理</option>
<option value="3">化学</option>
<optgroup label="文科"></optgroup>
<option value="4">英语</option>
<option value="5">政治</option>
</select>
<select name="city">
<option value="1">四川</option>
<option value="2">重庆</option>
<option selected="selected" value="3">广东</option>
<option value="4">湖北</option>
<option value="5">云南</option>
</select>
<select name="city">
<option value="">成都</option>
<option value="">重庆</option>
<option value="">深圳</option>
<option value="">长沙</option>
<option value="">昆明</option>
</select>
<input type="submit" value=""/>
<!--2.多行文本输入框（textarea）
可以输入多行内容，超出范围可以上下滚动
name - 提交和区分
rows - 一次性可以显示的行数(高度)
cols - 列数 - 一行最多可以显示多少文字(宽度)
placeholder-提示信息
内容 - 相当于value
maxlength - 最大输入量
-->
<textarea name="" rows="5" cols="20"placeholder="123456"></textarea>
</form>
</body>
</html>
03-css基础
1.什么是css
css是web标准中的表现标准，专门负责网页中内容的布局和样式
目前使用的是css3
css代码又叫样式表
2.css语法（怎么写）
基本结构：
选择器{属性名1：属性值1；属性名2：属性值2....}
b.说明
选择器{} - 通过选择器决定样式是针对哪个标签写的（在内联样式表中没有这个结构）
属性 - 属性名不是随便写的,必须是css提供的两百多个属性中的一个；属性名和属性值之间用冒号隔开，
多个属性之间用分号隔开（没有分号后面所有属性无效）
3.css代码写在哪儿
a.内联样式表
将样式表作为html标签的style属性值
只对一个标签有效
b.内部样式表
将样式表作为style标签的内容
c.外部样式表
将样式表写在一个css文件中，再通过link导入
可以针对所有html标签
优先级：内联的最高，另两个谁后写谁优先级高
常用属性：
color-字体颜色
font-size - 字体大小
background-color - 背景颜色
width - 宽度
height-高度
css中颜色：a.直接写英语单词 b.rgb的十六进制值
c.rgb(r,g,b),rgba(r,g,b,a)-a代表透明度alpha：0-1（0完全透明1完全不透明）
数字：如果数字表示大小，必须加单位：px（像素） em（空格）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<!--2.内部样式表
style中的内容只能是css代码
-->
<style type="text/css">
/*可以写多个样式表
style标签可以放在body中*/
a{
color: yellowgreen;
background-color: red;
}
div{
color: yellowgreen;
background-color: red;
}
</style>
<!--3.外部样式表
a.link标签：导入外部样式表
rel属性：确定导入文件的功能；stylesheet-设置样式表 icon-设置网页图标
type属性：确定文件类型；文件类型/文件后缀
href属性：文件路径
-->
<link rel="stylesheet" type="text/css" href="css/css基础.css"/>
<link rel="icon" type="image/ico" href="img/jd.jpg"/>
</head>
<body>
<!--body中每个有显示效果的标签都有style属性，用来设置当前标签的属性
style属性值的引号中，写的是css代码
-->
<p style="color:red;font-size: 25px;">我是内联样式表</p>
<a href="www.baidu.com">百度</a>
<div id="">
div
</div>
<h1>wonwu</h1>
</body>
</html>
04选择器
选择器{属性名1：属性值1；属性名2：属性值2...}
css提供的选择器的写法大概十多种
1.标签选择器：直接将标签名作为选择器，选中所有指定标签
例如;a{}-选中所有a标签
2.id选择器：将标签的id属性值前面加#作为选择器，选中所有指定id的标签
例如：#text{} - 选中id属性值是text的所有标签
3.class选择器（类型选择器）：将标签的class属性值前面加.作为选择器，选中...
例如：.text{}-选中class属性值是text的所有标签
4.群组选择器：将多个选择器用逗号隔开作为一个选择器，同时选中每个单独的选择器中的所有标签
5.后代选择器：多个选择器之间用空格隔开，作为一个选择器，从前往后一层一层的找，找到最后一个选择器对应的标签
例如：div .text #text{} - 选中div中class属性名为text标签中id值是text的标签
就是标签中找子标签
6.通配符：将*作为选择器，选中所有标签
<!--style标签可以写在html文件中任何位置-->
<style type="text/css">
/*1.标签选择器*/
#text{
background: yellow;color: red;
}
.text1{
color: royalblue;width: 56px;height: 65px;background: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="text">
dcwebc
<div id=""class="test">
div2
</div>
</div>
<div id=""class="text1">
div3
</div>
</body>
</html>
05-伪类选择器
伪类选择器
是用来选中标签中不同的状态（为不同状态设置不同样式）
1.基本格式
普通选择器：伪类选择器
2.伪类选择器
link - 标签的初始状态（一般作用域a标签，表示a标签中的链接没有成功访问过对应的状态）
标签：link{}-标签是通过各种选择器来选中的标签
visited - 超链接被访问过的状态
hover - 鼠标悬停在标签上的时候对应的状态
active - 鼠标按住不放
3.爱恨原则：当同一个标签需要同时给多个状态添加样式的时候，
要遵守爱恨原则，不然可能失效
LoVeHAte
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{color: red;}
a:visited{color:yellow;}
a:hover{text-decoration: none;}
a:active{text-decoration: line-through;}
</style>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--div和span都是无语义标签；
一般用来将网页中其他标签进行分组和分模块使用；
-->
<div id="">
</div>
</body>
</html>
网友评论