表单和css基础
1.表单标签
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 来设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.表单标签：form
form
-->
<form action="" method="">
</form>
</body>
</html>2.input标签
多数情况下被用到的表单标签是输入标签（）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- input标签会因为type属性值不同功能完全不一样 -->
<!-- 1.文本输入框: text
name属性：对输入框输入的数据进行说明和区分的(类似字典的key)
value属性：就是输入框中输入和显示的内容(和输入框中的内容是双向绑定)
placeholder属性：输入框中的提示信息
maxlength属性：最大输入的文字的个数
-->
<label for="tel">手机号:</label>
<input id="tel" type="text" name="tel" value="15300022703" placeholder="请输入手机号码" maxlength="11"/>
<br>
<br>
<label for="uname">用户名:</label>
<input id="uname" type="text" name="username" value="" placeholder="请输入用户名"/>
<br>
<br>
<!-- 2.密码输入框：password
name属性：对输入框输入的数据进行说明和区分的(类似字典的key)
value属性：就是输入框中输入和显示的内容(和输入框中的内容是双向绑定)
placeholder属性：输入框中的提示信息
maxlength属性：最大输入的文字的个数
-->
<label for="pw">密码:</label>
<input id="pw" type="password" name="pw" value="123456" placeholder="请输入密码"/>
<br>
<br>
<!-- 3.单选按钮: radio
name属性：同一组选项的name属性必须相同，才能做到单选的效果
value属性：指定按钮选中的时候对应的值
checked属性：设置默认选中
-->
<font>性别：</font>
<input checked="checked" type="radio" name="sex" value="男" id="boy"/><label for="boy">男</label>
<input type="radio" name="sex" value="女" id="girl"/><label for="girl">女</label>
<br><br>
<!-- 4.复选按钮: checkbox
name属性：同一组选项的name属性必须相同
value属性：指定按钮选中的时候对应的值
checked属性：设置默认选中
-->
<font size="" color="">爱好：</font>
<input type="checkbox" name="hobby" id="b" value="篮球" /><label for="b">篮球</label>
<input checked="checked" type="checkbox" name="hobby" id="p" value="乒乓球" /><label for="p">乒乓球</label>
<input type="checkbox" name="hobby" id="y" value="羽毛球" /><label for="y">羽毛球</label>
<input type="checkbox" name="hobby" id="w" value="网球" /><label for="w">网球</label>
<br><br>
<!-- 5.按钮：button
-->
<input type="button" name="" id="" value="确定" />
<input type="button" name="" id="" value="取消" />
<br><br>
<!-- button标签 -->
<button type="button">确定</button>
<button type="button"><img src="./img/baidu.ico" ><br>百度</button>
<br><br>
<!-- 6.重置按钮 和 提交按钮
重置：重置当前form标签中所有的相关标签的状态
提交：将当前form标签中所有设置了name属性的相关标签以: name=value 形式对应数据进行提交
-->
<input type="reset" name="" id="" value="重置1" />
<br><br>
<br>
<form action="" method="get">
<input type="text" name="username" placeholder="用户名"/>
<br><br>
<input type="password" name="password" id="" value="123" placeholder="密码"/>
<br><br>
<input type="reset" value="重置2"/>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>3.select和texarea标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.select标签
select - 整个下拉列表
option - 下拉列表中的选项
注意：name和value属性都需要赋值
-->
<form action="" method="get">
<!-- 基本的下拉列表 -->
<select name="province">
<option value ="四川">四川省</option>
<option value ="辽宁">辽宁省</option>
<option value ="吉林">吉林省</option>
<option value ="山东">山东省</option>
</select>
<select name="city">
<option value="成都">成都市</option>
<option value="绵阳">绵阳市</option>
</select>
<br><br>
<!-- 内容进行分类 -->
<select name="city">
<!-- optgroup添加分组 -->
<optgroup label="四川省"></optgroup>
<option value="成都">成都市</option>
<option value="绵阳">绵阳市</option>
<option value="德阳">德阳市</option>
<optgroup label="辽宁省"></optgroup>
<option value="大连">大连市</option>
<option value="沈阳">沈阳市</option>
<option value="铁岭">铁岭市</option>
</select>
<input type="submit" value="提交"/>
</form>
<br><br>
<!-- 2.textarea标签
rows属性：最能显示的行数（控制高度）
cols属性：列数（控制宽度）
name属性：区分和提交数据的时候用
placeholder属性：
maxlength属性
注意：textarea不需要value属性,标签内容就相当于value
-->
<textarea rows="4" cols="40" name="comment" placeholder="请输入你的建议" maxlength="200">没有意见！</textarea>
<!-- div标签
无语义标签， 一般用来对标签进行分组和分块而存在
span标签也是无语义的标签
-->
<div id="">
</div>
</body>
</html>
4.CSS基础语法
<!--
1. 什么是CSS
CSS又叫层叠样式表
是web标志中的表现标准,负责标签(内容)样式和布局
2.CSS代码写在哪儿
内联样式表 - 将css代码写在标签的style属性中（样式只针对一个标签有效）
内部样式表 - 将css代码写style标签中（样式可以针对整个html中所有的标签）
外部样式表 - 将css代码写在css文件中，然后在html中用link标签去导入（样式可以针对所有的html中所有的标签有效）
内联样式表的优先级最高, 内部样式表和外部样式表谁后出现谁的优先级高
3.CSS代码怎么写
语法：
选择器{属性名1:属性值1;属性名2:属性值2;...}
说明:
选择器 - 选中当前需要添加样式的标签
{} - 固定写法(注意:内联样式表中 选择器{} 需要省略)
属性 - 以 属性名:值 的形式存在，一个属性结束后要分号；
CSS中有哪些属性，每个属性干嘛的都是固定(CSS3中有200多个属性)
常用属性：color(文字颜色)、background-color(背景颜色)、font-size(字体大小)、width(宽度)、height(高度)、
属性值：a.数字大小需要添加单位(px)
b.颜色值有三种方法：颜色的英文单词(red)、#6位的十六进制数(#ff0000)、rgb或者rgba值(rgb(255,0,0))
rgba(255,0,0,1) -最后一个参数是透明度，取值范围是0~1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
<!-- 内部样式表 -->
<style type="text/css">
#b1{
color: blue;
background-color: rgba(255,0,0,0.5);
}
#b2{
background-color: gold;
width: 200px;
}
#p1{
color: green;
background-color: greenyellow;
}
</style>
</head>
<body>
<!-- 内联样式表 -->
<p id="p1" style="color: red; font-size: 20px;">我是段落1</p>
<h1 id="b1">我是标题1</h1>
<h1 id="b2">我是标题2</h1>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>5.选择器
<!--
1. 常用选择器
1)标签选择器(元素选择器) - 直接将标签名作为选择器，选中当前页面中所有指定的标签
p{} - 选中当前页面中所有的p标签
a{} - 选中所有的a标签
2)id选择器 - 在id属性值前加#作为一个选择器，选中当前页面中id值是指定值的标签(id一般是唯一的)
#p1{} - 选中id属性值为p1的标签
3)类选择器(class选择器) - 在class属性之前加.作为一个选择器，选中当前页面中所有class值是指定值的标签
.p1 - 选中class属性值为p1的标签
注意：不同的标签的class值可以相同，同一个标签可以同时拥有多个不同的class值(多个之间用空格隔开)
4）后代选择器 - 将多个独立的选择器用空格隔开作为一个选择器
div #p1{} - 选中div标签中id是p1的标签(最终选中的是id是p1的标签，但是这个标签必须是div的后代)
5）父子选择器 - 将多个独立的选择器用>隔开作为一个选择器
div>.c1{} - 选中div中class值是c1的子标签
6) 群组选择器 - 将多个独立的选择器用逗号隔开作为一个选择器，同时选中每个选择器选中的标签
p,a{} - 选中所有的p标签和所有的a标签
#p1,.c1,a{} - 选中id是p1的标签和class是c1的标签以及所有的a标签
7）通配符 - 将*作为选择器，选中当前页面中所有的标签
*{}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 1.标签选择器 */
/* p{
color: red;
} */
/* 2.id选择器 */
/* #p1{
color: #0000FF;
} */
/* 3.类选择器 */
/* .p1{
color: #008000;
}
.c1{
background-color: #FFD700;
} */
/* 4.后代选择器 */
/* div #p1{
background-color: #ADFF2F;
} */
/* div>.c1{
background-color: #ADFF2F;
color: red;
} */
*{
color: red;
}
</style>
</head>
<body>
<!-- 1.标签选择器示例 -->
<!-- <h1>我是标题1</h1> -->
<!-- <p>我是段落1</p>
<a href="https://www.baidu.com">我是超链接1</a>
<p>我是段落2</p>
<div id="">
<h2>我是标题2</h2>
<p>我是段落3</p>
</div> -->
<!-- 2.id选择器 -->
<!-- <p>我是段落1</p>
<a href="https://www.baidu.com">我是超链接1</a>
<p id="p1">我是段落2</p>
<div id="">
<h2>我是标题2</h2>
<p>我是段落3</p>
</div> -->
<!-- 3.class选择器 -->
<!-- <p class="p1">我是段落1</p>
<a class="c1" href="https://www.baidu.com">我是超链接1</a>
<p class="c1">我是段落2</p>
<div id="">
<h2 class="p1">我是标题2</h2>
<p class="c1 p1">我是段落3</p>
</div> -->
<!-- 4.后代选择器 -->
<!-- <p id="p1">我是段落1</p> -->
<!-- <div id="">
<p id="p1">我是段落1</p>
</div> -->
<!-- <div id="">
<p>
我是段落1
<p id="p1">我是段落2</p>
</p>
</div> -->
<!-- 5.父子选择器 -->
<h1 class="c1">我是标题1</h1>
<div id="">
<p>我是段落1</p>
<p class="c1">我是段落2</p>
<p>
<font class="c1">我是文字1</font>
</p>
<div id="">
<a href="" class="c1">我是超链接</a>
</div>
</div>
</body>
</html>6.选择器的优先级
<!--
选择器的优先级：选择器的优先级看选择器的权重值，谁的权重值大谁的优先级就高，如果权重值相同谁后执行谁的优先级就高，内联样式
表的优先级最高。
标签选择器：1
class选择器：2
id选择器：4
可以在某个属性后加 !important 让当前属性的优先级最高(内联也比不上)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c2{
color: green;
}
#p1{
color: red;
}
p{
color: blue;
}
#div2 p{
background-color: #ADFF2F;
}
.c2 .c3 .c4 p{
background-color: yellow !important;
}
</style>
</head>
<body>
<div id="div1" class="c1">
<p class="c2" id="p1">我是段落1</p>
</div>
<div id="div2" class="c2">
<div class="c3">
<div class="c4">
<p style="background-color: #FFA500;">我是段落3</p>
</div>
</div>
</div>
</body>
</html>7.伪类选择器
<!--
1.什么是伪类选择器
伪类选择器选中的是标签的状态，可以让同一个标签在不同的状态下有不同的样式
普通选择器:伪类选择器
2.常见的伪类选择器
link - 链接没有成功访问过对应的状态;（只针对超链接有效）
visited - 链接已经访问过的对应的状态；（只针对超链接有效）
hover - 鼠标悬停在标签上对应的状态；（针对所有可见标签有效）
active - 鼠标按下没有弹起来的时候对应的状态;（针对所有可见标签有效）
focus - 成为焦点对应的状态(正在操作某一个标签对应的状态)；（一般用于表单相关标签）
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
a:link{
color: #008000;
}
a:visited{
color: darkgray;
}
a:hover{
color: red;
}
a:active{
color: yellow;
}
#div1{
width: 100px;
height: 100px;
background-color: yellowgreen;
}
#div1:hover{
width: 60px;
height: 60px;
}
img:active{
border: solid red 1px;
}
input{
border: none;
border-bottom: solid gray 1px;
}
input:focus{
outline: none;
border-bottom: solid blueviolet 2px;
}
</style>
</head>
<body>
<a id="a1" href="https://www.baidu.com">我是超链接</a>
<div id="div1">
</div>
<img src="img/luffy.jpg" >
<input type="password" name="" />
</body>
</html>
扫一扫
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
