自学第一天 html+css
html部分
学习了表单的标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签属性介绍</title>
</head>
<body>
<form action="#" method="get">
隐藏字段:<input type="hidden" name="id" value="" /><br />
用户名:<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
密码:<input type="password" name="password" required="required"/><br />
确认密码:<input type="password" name="repassword"/><br />
性别:<input type="radio" name="sex" value="男" checked="checked"/>男的
<input type="radio" name="sex" value="女" />女的<br />
爱好:<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
<input type="checkbox" name="hobby" value="打电动" checked="checked"/>打电
<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
头像:<input type="file" name="file"/><br />
籍贯:<select name="province">
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select><br />
自我介绍:
<textarea name="zwjs">
</textarea><br />
提交按钮:<input type="submit" value="注册"/><br />
普通按钮:<input type="button" value="zhuce"/><br />
重置按钮:<input type="reset" />
</form>
</body>
</html>
以及checked=“checked” required=“required” selected="selected" 图下是这绑定标签的值的应用
、
css部分
div块--span 可以当成一块块的板组成整个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div效果演示</title>
<style>
div{
border: 1px solid red;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div id="">
<!--内容-->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span演示</title>
<style>
span{
font-size: 30px;
}
</style>
</head>
<body>
<span>
文字
</span>
</body>
</html>
运行结果如下:
元素选择器是用来选中同一元素区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
div{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
</body>
</html>
运行结果:
类选择器的是用来选择指定类名的块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
</head>
<body>
<div>
内容
</div>
<div class="div2">
内容
</div>
<div>
内容
</div>
<div class="div2">
内容
</div>
<div>
内容
</div>
</body>
</html>
运行结果:
idi选择器用来选中指定类的名字的块:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#div5{
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div>
1
</div>
<div class="div2">
2
</div>
<div>
3
</div>
<div class="div2">
4
</div>
<div id="div5">
5
</div>
</body>
</html>
结果如下:
层次选择器 对应的层被选中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div>
11111
</div>
<div>
22222
</div>
<div>
33333
</div>
<div>
<p>
44444
</p>
</div>
<div>
55555
</div>
<p>
666666
</p>
</body>
</html>
结果如下:
属性选择器 对相应的属性进行选择格式的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>
</head>
<body>
用户名;<input type="text" name="username"/><br />
密码:<input type="password" name="password"/>
</body>
</html>
运行结果:
css的引进方式有三 :内部引进 ,行内引进,外部引进。内部和行内引进都是在同一个页面
内部引进
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
div{
font-size: 30px;
color: pink;
}
</style>
</head>
行内引进
<div style="font-size: 20px;color: blue;">
5555
</div>
外部引进
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
css浮动块 在网页上设置某一块区域的格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one{
border: 1px solid red;
width: 600px;
height: 150px;
float: right;
}
#two{
border: 1px solid black;
width: 600px;
height: 190px;
float:left;
}
#three{
border: 1px solid blue;
width: 600px;
height: 150px;
float: right;
}
/*清除浮动*/
/* #clear{
clear: both;
}*/
</style>
</head>
<body>
<div id="one">
</div>
<div id="clear">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
</html>
运行如下:
经过基础的元素标签和div + css学习,对网站的布局基本掌握了...