<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="get" action="">
<!--a.文本输入框：(text)
1.name属性：区分不同的input对应值,对标签的显示没有影响
2.value属性：input标签中的值，相当于内容(文本输入框中输入的内容就是value的值)
提交input中的数据给服务器的时候，是以name值=value值来提交的
3.placeholder属性：占位符(输入框的提示信息)
4.maxlength属性：约束输入框能输入的字符的最大个数
-->
<input type="text" name="username" value="aaa" placeholder="账号" maxlength="8"/>
<input type="text" name="tel" value="" placeholder="手机号"/>
<!--b.密码输入框:(password)
注意：value值是输入框中输入的内容
4.maxlength属性：约束输入框能输入的字符的最大个数
-->
<input type="password" name="password" value="" placeholder="密码" maxlength="8"/>
<br />
<!--c.单选按钮：(radio)
注意：
1.value值：设置为这个按钮选中提交对应的值
2.name值：如果多个按钮只能选中一个，那么这些按钮对应name值必须一致
3.checked属性：设置默认选中
3.一组(name值一样)单选按钮在提交的时候只提交被选中的按钮的name和value值
-->
<input type="radio" name="sex" value="boy" checked="checked"/> <span>男</span>
<input type="radio" name="sex" value="girl" /> <span>女</span>
<br />
<input type="radio" name="marry" value="已婚" checked="" /><span>已婚</span>
<input type="radio" name="marry" value="未婚" /><span>未婚</span>
<br />
<!--d.复选按钮:(checkbox)
注意：
1.name值：同一组的数据对应name值一样
-->
<input type="checkbox" name="hobby" id="" value="basketball" checked="checked" /><span>篮球</span>
<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>
<br />
<!--e.普通按钮:(button)
value值：按钮上显示的内容
-->
<input type="button" name="" id="" disabled="disabled" value="登录" />
<!--f.提交按钮:(submit)
自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action对应的接口
-->
<input type="submit" name="" id="" value="提交" />
<!--g.重置按钮
让当前form标签中的input标签的值回到初始状态
-->
<input type="reset" name="" id="" value="重置" />
<!--h.文件域:(file)-->
<input type="file" name="icon" id="" value="" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
2.多行文本域
-->
<select name="city">
<option value="成都">成都</option>
<option value="北京" selected="selected">北京</option>
<option value="重庆">重庆</option>
<option value="沈阳">沈阳</option>
</select>
<!--2.对下拉菜单进行分组
可以通过optgroup标签对下拉菜单进行分组, 通过label属性对分组进行命名
-->
<select name="city">
<optgroup label="四川省">
<option value="成都">成都</option>
<option value="德阳" selected="selected">德阳</option>
<option value="乐山">乐山</option>
<option value="眉山">眉山</option>
<option value="自贡">自贡</option>
</optgroup>
<optgroup label="广东省">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="中山">中山</option>
<option value="佛山">佛山</option>
</optgroup>
</select>
<!--2.多行文本域:textarea标签
name: 提交的数据对应的名字
rows：默认一屏的行数
cols：默认的列数
placeholder：设置占位符
disabled: 禁用
maxlength:约束能输入的最大的字符个数
-->
<textarea maxlength="200" name="message" rows="10" cols="20" placeholder="200字以内" disabled="disabled"></textarea>
<!--3.按钮：button标签-->
<!--文字按钮-->
<button>注册</button>
<!--图片按钮-->
<button><img src="img/luffy2.png" alt="" /></button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/04-CSS基础.css"/>
<style type="text/css">
#aaa{
background-color: red;
margin-left: 100px;
}
</style>
</head>
<body>
<img src="img/luffy4.jpg"/>
<!--
1.div和span
div和span标签是空白标签，没有语义。
一般用来做分组(将网页分块)
div:块级标签(一行只能放一个标签)
span：行内标签（一行可以放多个标签）
2.块级标签和行内标签
块级标签: 一个标签占一行
h1-h6, p, 列表标签(ul\ol\dl),table,hr等
行内标签：一行可以放多个行内标签
img, a, input,select,textarea等
-->
<span id="">
abc
</span>
<span id="">
abd
</span>
<div id="aaa">
<a href="">百度</a>
<a href="">谷歌</a>
</div>
<div id="">
<a href="">新浪</a>
<a href="">腾讯</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
background-color: rgba(0,255,0,0.2);
color: saddlebrown;
}
a{
font-size: 20px;
}
p{
background-color: red;
}
img{
width: 200px;
}
</style>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="css/04-CSS基础.css"/>
</head>
<body>
<!--内联样式表-->
<p style="background-color: cornflowerblue; color: yellow;">样式表的内容</p>
<p style="font-size: 30px;">样式表的语法</p>
<h1>我是标题1</h1>
<h1>我是标题2</h1>
<a href="">百度一下</a>
<img src="img/luffy4.jpg"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/注意：在这个标签中写的代码是CSS代码/
/1.元素选择器/
a{
color: salmon;
}
/id选择器/
#a1{
background-color: seagreen;
}
/*class选择器*/
.c1{
color: skyblue;
}
/*群组选择器*/
a,p{
font-size: 25px;
}
/*包含选择器*/
div .c1 p{
background-color: pink;
}
/**{
background-color: yellow;
width: 100px;
}*/
/*#p{
color: red;
}*/
body .p1{
color: blue;
}
.p1,a{
color: salmon;
}
</style>
</head>
<body>
<p style="color: saddlebrown;" id="p" class="p1">选择器的权重</p>
<a class="c1" href="">超链接1</a>
<div id="">
<a href="">超链接2</a>
</div>
<div id="">
<div id="">
<a href="">超链接3</a>
</div>
</div>
<p id="a1">我是段落1</p>
<h1 class="c1">我是标题1</h1>
<div id="">
<p>我是p0</p>
<div class="c1">
<a href="">我是a4</a>
<p>我是p1</p>
<p>我是p1</p>
<div id="">
<p>我是p3</p>
</div>
</div>
<div id="">
<div class="c1" id="">
<p>我是p4</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: gray;
}
a:visited{
color: seagreen;
}
a:hover{
color: red;
font-size: 30px;
}
a:active{
color: yellow;
}
p:hover{
color: red;
}
input:focus{
outline: none;
}
</style>
</head>
<body>
<a id="a1" href="http://www.github.com">新浪</a>
<p>我是段落</p>
<a href="">百度一下</a>
<input type="text" name="" id="" value="" />
</body>
</html>
网友评论