一、input
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" method="post">
<!--
input标签(单标签) --- text (文本输入框)
1.是表单标签
2.type属性
text - 普通文本输入框
3.name属性：必须设置
4.value属性：标签内容
5.placeholder属性：占位(提示信息)
6.maxlength:输入框最多输入的字符个数
7.readonly:不能输入内容
-->
<input type="text" name="username" value="" placeholder="请输入账号"/>
<!--
input标签 --- 密码输入框
1.type属性：password --- 密文显示
-->
<input type="password" name="password" id="password" value="" placeholder="请输入密码"/>
<!--
input标签 --- 单选框
1.type属性：radio
2.name属性：同一类型对应的多个选项的name相同
3.value属性：设置提交的值
4.checked属性：设置为checked，让按钮默认处于选中状态
-->
<input type="radio" name="radiobutton" id="radiobutton" value="boy" checked="checked"/>
<span>男</span>
<input type="radio" name="radiobutton" id="radiobutton" value="girl" />
<span>女</span>
<!--
input标签 --- 多选按钮
1.type：checkbox
2.name:同一类型对应的name也必须一样
-->
<input type="checkbox" name="hobby" id="" value="伊斯塔战灵" checked="checked"/>
<span>伊斯塔战灵</span>
<input type="checkbox" name="hobby" id="" value="伊斯塔萌道" />
<span>伊斯塔萌道</span>
<input type="checkbox" name="hobby" id="" value="伊斯塔援素" />
<span>伊斯塔援素</span>
<!--
input标签 --- 普通按键
disabled:让按钮处于失效状态
让当前所在的form表单中所有的表单相关标签对应的值，回到最初的状态
-->
<input type="reset" name="" id="" value="重置" />
<input type="submit" name="" id="" value="登陆" />
<!--
input标签 --- file文件选择器
-->
<input type="file" name="icon" id="icon" value="选择文件" />
</form>
</body>
</html>
二、表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="post">
<!--fieldset
一个fieldset标签对应一个表单分组
legend标签：分组名
-->
<fieldset id="">
<legend>略略略</legend>
<!--1.下拉菜单
selected:默认选中
-->
<select name="city">
<option value="成都">成都</option>
<option value="绵阳">绵阳</option>
<option value="德阳">德阳</option>
<option value="绵竹" selected="selected">绵竹</option>
</select>
<!--2.多行文本域(多行输入框)-->
<textarea name="message" rows="5" cols="100"></textarea>
</fieldset>
</form>
</body>
</html>
三、空白标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
html中标签分为两大类：
块级标签：一行只能有一个(不管标签的宽度是多少)
h1-h6
p
hr
div
ul
ol
dl
li
table
form
行内标签：一行可以多个
a
img
input
select(下拉列表)
textarea(多行输入框)
-->
<!--
div标签 --空白标签
没有任何特殊的意义(无语意标签)
-->
<div>
</div>
</body>
</html>
四、认识css
<!--
css
1.什么是css
css是web标准中的表现
2.写在哪儿
内联样式表：将css代码写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中的link标签进行关联
3.怎么写：
选择器(属性：属性值；属性：属性值)
选择器：用来选中需要设置样式的标签
属性：css属性(css中的属性有两百多个)
属性值：如果属性值是数字、表示的是大小要在后面加px
注意：每个属性之间要用分号隔开，否则属性无效
补充属性：color:设置字体颜色；background-color：设置背景颜色；
width；height；
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/004_css.css"/>
<!--
style标签
专门用来设置样式的标签
-->
<style type="text/css">
div{
background-color: yellow;
}
</style>
</head>
<body>
<!--
style属性：每个标签都有
-->
<div style="color: deepskyblue;">
第一个div
</div>
</body>
</html>
五、css选择器
<!--
0.元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签
1.id选择器：#id值
每个标签都有一个id属性，整个html中，id的值必须唯一
2.class选择器：.class属性值
每个标签都有一个class属性
3.通配符：*
选中所有的标签
4.层级选择器:选择器1 选择器2……
5.群组选择器：选择器1，选择器2，……
-->
<!--
css中的颜色值：
1.颜色名(英文)
2.16进制的颜色值
3.RGB值：rgb(红，绿，蓝)
4.rgba:rgba(红，绿，蓝，透明度) 透明度的值0-1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
font-size: 20px;
}
a {
background-color: deepskyblue;
}
#a1 {
color: #FFFF00;
}
#a2 {
color: rgb(255, 0, 0);
}
#p {
color: rgba(0, 255, 0, 0.2);
}
.c1 {
background-color: blanchedalmond;
}
div div p{
color: salmon;
margin-top: 50px;
}
</style>
</head>
<body>
<a href="" id="a1">i am a</a>
<a href="" id="a2">i am a2</a>
<p id="p" class="c1">i am p</p>
<div id="div" class="c1">
i am a div
</div>
<div>
<div>
<p>i am who i am</p>
<p>i am who i am</p>
<p>i am who i am</p>
<p>i am who i am</p>
</div>
</div>
</body>
</html>
六、伪类选择器
<!--
伪类选择器：选择器：状态
link：初始状态(一次都没有访问成功的状态)
visited：超链接访问后的状态
hover：鼠标悬停在标签上的状态
active：鼠标按下的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候要遵守爱恨原则(先要爱才有恨)
LoVe HAte
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同时设置a标签的所有状态*/
a {
color: black;
}
a:link {
color: blue;
}
a:visited {
color: palegoldenrod;
}
a:hover {
color: red;
font-size: 25px;
}
a:active {
color: black;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
网友评论