1.表单
1)表单标签---form
- 可以提交表单中收集的信息
- action属性：设置提交信息的位置
- method属性：提交方式-post/get
2)input标签 ---文本输入框
- 是表单标签
- type属性：text普通的文本输入框
- name属性：必须设置(提交信息)
- value属性：标签内容
- placeholder:提示语言，当用户输入值时，会自动消失
3)input-密码输入框
- type属性：password---输入的值是密文显示
- name属性：必须设置(提交信息)
- placeholder:提示语言，当用户输入值时，会自动消失
4)input-单选按钮
- type属性：radio
- name属性：同一类型对应的name值必须一样
- value：设置选中按钮提交的值
- checked:设置checked，让按钮默认处于选中状态
5）input---多选按钮
- type属性：checkbox
- name:同一类型对应的name值必须一样
- value：设置选中按钮提交的值
- checked:设置checked，让按钮默认处于选中状态
6)input---普通按钮
- type属性：button
- value属性：显示按钮名称
input---重置按钮 - type:reset,让form中所有表单标签对应的值，回到最初状态
- value属性：显示按钮名称
8）input---文件选择器
- type属性：file
9）maxlength标签:输入框最多能输入的字符个数
10）readonly标签：让输入框只读(不能往里面输入内容)值readonly
11）disabled标签：让按钮不能点击
12)input-提交
- type属性：submit
- value属性：显示按钮名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
</head>
<body>
<!--
####1)表单标签---form
* 可以提交表单中收集的信息
* action属性：设置提交信息的位置
* method属性：提交方式-post/get
-->
<form action="" method="get">
<!--####2)input标签 ---文本输入框
* 是表单标签
* type属性：text普通的文本输入框
* name属性：必须设置(提交信息)
* value属性：标签内容
* placeholder:提示语言，当用户输入值时，会自动消失
-->
<input type="text" name="username" value="" placeholder="请输入姓名" maxlength="11"/>
<br />
<!--
####3)input-密码输入框
* type属性：password---输入的值是密文显示
* name属性：必须设置(提交信息)
* placeholder:提示语言，当用户输入值时，会自动消失
-->
<input type="password" name="password" value="" placeholder="请输入密码"/>
<!--
####4)input-单选按钮
* type属性：radio
* name属性：同一类型对应的name值必须一样
* value：设置选中按钮提交的值
* checked:设置checked，让按钮默认处于选中状态
-->
<br />
<input type="radio" name="sex" checked="checked" id="" value="男" /><span >男</span>
<input type="radio" name="sex" id="" value="女" /><span >女</span>
<!--
####5）input---多选按钮
* type属性：checkbox
* name:同一类型对应的name值必须一样
* value：设置选中按钮提交的值
* checked:设置checked，让按钮默认处于选中状态
-->
<br />
<input type="checkbox" checked="checked" name="interest" value="篮球" id=""/><span>篮球</span>
<input type="checkbox" name="interest" value="乒乓球" id=""/><span>乒乓球</span>
<input type="checkbox" name="interest" value="看电影" id=""/><span>看电影</span>
<input type="checkbox" name="interest" value="旅游" id=""/><span>旅游</span>
<!--
####6)input---普通按钮
* type属性：button
* value属性：显示按钮名称
-->
<br />
<input type="button" name="" id="" value="登录" />
<!--
####7)input---重置按钮
* type:reset,让form中所有表单标签对应的值，回到最初状态
* value属性：显示按钮名称
-->
<input type="reset" name="" id="" value="重置" />
<!--
input---文件选择器
type属性：file
-->
<br />
<input type="file" name="icon" id="icon" value="" />
<!--
####8）maxlength标签:输入框最多能输入的字符个数
####9）readonly标签：让输入框只读(不能往里面输入内容)值readonly
####10）disabled标签：让按钮不能点击
-->
<br />
<input type="button" disabled="disabled" name="" id="" value="登录" />
<input type="text" readonly="readonly" name="username" value="" placeholder="请输入姓名" maxlength="11"/>
<!--
####11)input-提交
* type属性：submit
* value属性：显示按钮名称
-->
<br />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
13)下拉菜单
- select标签
name属性：
size属性：设置最多显示，其他滑动 - option标签
value属性：
14)多行文本域(多行文本输入框)
- textarea标签
placeholder属性：默认提示
maxlength属性：最多输入
rows属性：行
cols属性：列
readonly属性：只读
disabled属性:禁止点击
15)fieldset标签，对表单内容进行分组
logend标签：设置分组名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="post">
<!--
下拉菜单
select标签
name属性：
size属性：设置最多显示，其他滑动
option标签
value属性：
-->
<select name="city" >
<option value="成都" >成都</option>
<option value="重庆">重庆</option>
<option value="北京" selected="selected">北京</option>
<option value="大连">大连</option>
<option value="青岛">青岛</option>
</select>
<!--
多行文本域(多行文本输入框)
textarea标签
placeholder属性：默认提示
maxlength属性：最多输入
rows属性：行
cols属性：列
readonly属性：只读
disabled属性:禁止点击
form
-->
<br />
<textarea name="mesage" disabled="disabled" rows="4" cols="30" placeholder="请输入意见..." maxlength="100" readonly="readonly"></textarea>
<!--fieldset标签，对表单内容进行分组
logend标签：设置分组名
-->
<fieldset id="">
<legend>下拉菜单</legend>
<select name="city" >
<option value="成都" >成都</option>
<option value="重庆">重庆</option>
<option value="北京" selected="selected">北京</option>
<option value="大连">大连</option>
<option value="青岛">青岛</option>
</select>
<input type="reset" name="" id="" value="重置1" />
</fieldset>
<fieldset id="">
<legend>多行文本</legend>
<textarea name="mesage" rows="4" cols="30" placeholder="请输入意见..." maxlength="100" ></textarea>
<input type="reset" name="" id="" value="重置2" />
</fieldset>
</form>
</body>
</html>
3.空白标签
HTML中的标签分为两大类
块级标签：一行只能有一个div(不管标签的宽度是多少)
h1-h6,p,hr,列表标签，table，form
行内标签：一行可以有多个span
a,img，inp，select(下拉列表)，textarea(多文本域)
1）div标签
- 是空白标签，没有任何特殊的意义(无语义标签)
- 块级标签：一个div独占一个整行，不管内容大小，一行只能有一个div
2）span标签
- 是空白标签，没有任何特殊的意义(无语义标签)
- 行内标签：一行可以有多个span
4.认识CSS
1)CSS是什么
CSS是web标准中的表现标准，用来设置网页上标签的样式(长什么样，在哪儿)
CSS代码或文件，也叫样式表
使用版本：CSS3
2)写在哪儿
内联样式表：将CSS写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中的link标签来关联
三种样式表的优先级：内联样式最高，内部样式表与外部样式表没有绝对的优先，主要看同一个属性
谁在后面赋值，谁的优先级高(谁就有效)
3)格式：
选择器(属性：属性值；属性：属性值)--内部和外部样式
选择器：用来选中需要设置样式的标签
属性：css属性(css2中的属性有两百多个)位置随意
属性值：如果属性值是数字，表示的是大小要在后面加px
注意：每个属性之间要使用分号隔开，否则属性无效
补充属性：color-设置字体颜色 background-color：设置背景颜色 width：标签宽度
height：标签的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
style标签
专门用来设置样式的标签
-->
<!--内部样式表-->
<style type="text/css">
div{
background-color: royalblue;
color: gold;
}
</style>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/04-css.css"/>
</head>
<body>
<!--style属性：每个标签都有-->
<div style="">
一个div
</div>
</body>
</html>
5.css选择器
1）元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签
2）id选择器：#id属性值
每个标签都有一个id属性，整个HTML中，id的值必须是唯一的
3）class选中器：.class属性
每个标签都有一个class属性
4)通配符：*
选中所有的标签
5)层级选择器：选择器1 选择器2...
6)群组选择器：选择器1，选择器，...
补充：
css中的颜色值：
颜色英语单词
16进制的颜色值 0-255--00-ff(#ff0000红色)
rgb值：rgb(红，绿，蓝)，rgb(红，绿，蓝，透明度)-透明度0-1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
font-size: 30px;
}
/*class选择器*/
.c1{
color: blue;
background-color: greenyellow;
}
/*元素选择器*/
a{
background-color: yellow;
}
/*id选择器*/
#a1{
color: red;
/*color: #ff0000;*/
/*color: rgb(0,255,0);*/
/*color: rgba(0,0,255,0.4);*/
}
/*层级选择器*/
#all_a a{
color: pink;
}
/*层级选择器*/
div div a{
text-decoration: none;
}
/*群组选择器，同时选中所有的h3和和所有的span标签*/
h3,span{
background-color: wheat;
}
</style>
</head>
<body>
<h3>标题</h3>
<span id="">
span标签
</span>
<div id="">
<div id="">
<p>你是p</p>
</div>
<div id="all_a">
<a href="">a3</a>
<a href="">a4</a>
<a href="">a5</a>
<a href="">a6</a>
</div>
</div>
<a id="a1" href="">我是a1</a>
<a href="">我是a2</a>
<p class="c1">我是p</p>
<div id="" class="c1">
我是div
<a href="">我是a3</a>
</div>
</body>
</html>
6)伪类选择器
伪类选择器---选择器：状态
1)link：初始状态---一次都没有访问成功时的状态
2)visited：超链接访问后的状态---已经访问成功后的状态
3)hover：鼠标悬停在标签上对应的状态
4)active：鼠标按住的状态
注意：给同一个标签的不同状态用伪类选择器设置不同的样式时，要遵守爱恨原则(先爱才能恨)
LoVe HAte
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同时设置a标签的所有状态*/
a{
color: black;
}
/*一次都没有访问成功时的状态*/
a:link{
color: red;
}
/*访问成功后的状态*/
a:visited{
color: mediumspringgreen;
}
a:hover{
color: yellow;
font-size: 40px;
}
a:active{
color: orchid;
}
#d1{
width: 100px;
height: 50px;
background-color:cyan ;
}
#d1:hover{
width: 50px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<a href="http://shouhu.com">百度一下</a>
<div id="d1" >
sdfs
</div>
</body>
</html>
网友评论