<!--注释内容--> <h1></h1>:标题标签 <hr />:水平线
<font size=”2” color=”” face="黑体"></font>字体标签 <b><b />粗体 <i><i />:斜体
<p ></p>:段落标签 <br />:换行 <center></center>:文本居中
图片标签<img src=”” width=”10px” height=”” alt=”” /> alt:图片无法显示是替代文本
列表标签:<ul><ol>
<ul type=””>无序列表 disc:实心圆 square:方块 circle:空心圆
<li></li>
</ul>
<ol type=””>有序列表 A a i I 1
<li></li>
</ol>
空格 版权©: ©
超链接标签<a href=”” target=””> _blank _self
语义化标签:html5中为了提高程序的可读性,提供了一些标签
页面:<header></header>
页脚:<footer></footer>
表格标签<table> <tr> <td>
<table border=”1px” cellspacing=”0px” bgcolor=”” align=”” cellpadding=””>
bgcolor表示背景颜色
cellspacing表示边与边框的距离
cellpadding表示边框与内容的距离
<tr >
<th></th> 表头
<td colspan=”” rowspan=””></td> 跨行跨列的操作
<td></td>
</tr>
<table>
<caption></caption>
<tr >
<td ></td>
<td></td>
</tr>
<table>
<caption></caption>:表格标题
<thead></thead>:表格的头部分
<tbody></tbody>:表格的体部分
<tfoot></tfoot>:表格的脚部分
相对路径:同级./ 上一级../
网站后台<frameset cols=”25%,*”> <frame src=””> <frame name=””> name通常和超链接的target属性来确定最终的显示位置 注意:要将body标签去掉
cols:进行垂直切割划分 rows:进行水平切割划分
表单标签:
<form action=”” method=””>
隐藏字段<input type=”hidden” name=”” value="">
用户名:<input type=”text” name=”username” maxlength=”5” placeholder=”请输入用户名” required=“required” readonly=”readonly”/> <br/>
placeholder用户提示信息
密码:<input type=”password” name=“password” /> <br/>
确认密码:<input type=”password” name=”repassword” /> <br/>
性别:<input type=”radio” name=”sex” value=”男” checkd=“checked” />男
<input type=”radio” name=”sex” value=”女” />女 <br/>
爱好:<input type=”checkbox” name=”hobby” value=”打电动” />打电动
头像:<input type=”file” name=”file”/>
籍贯:<select name=”province”>
<option >--请选择--</option>
<option value=”0” selected=”selected”>北京</option>
<option value=”1”>上海</option>
</selectd>
自我介绍:<textarea name=”zwjs” cols="20" cols="5" >
</textarea>
<input type=”submit” value=“注册”>注册 <input type=”reset” value=重置>重置
<input type=”button” value="">普通按钮</form> <input type=”image” src=图片的地址>
H5特有的标签
<input type="date" name="birthday">
效果:
邮箱:<input type="email" name="email"> 数字:<input type="number" name="age">
</form>
单选框 下拉框和复选框提交到后台是value,别的提交到后台是name
label:指定输入项的文字描述信息
<label for="username">用户名</label> <input type="text" name="username" id="username">
lable的for属性一般会和input的id属性值对应
css的使用
background:url("img/logo.jpg") no-repeat center
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
标签选择器:
元素选择器: 所有的
类选择器 . 部分的
id选择器 # 单个的
层级选择器:
属性选择器:
css引入方式
内部引入:<style> </style> 在head标签里面定义style标签
行内引入:<div style="font-size:40px;color:blue;"> 注意一个是冒号 一个是分号
外部引入:<link rel="stylesheet" href="style.css" type="text/css"></link> 在head标签内,定义link标签,引入外部的资源文件
让div水平居中 margin:auto
设置边框圆角 border-radius
清除浮动
#son1{
float:left;
}
#clear{
clear:both;
}
<div id=”father”>
<div id=”son1”>aaaaaaaaaaaaa</div>
<div id=”clrear”>bbbbbbbbbbb</div>
</div>
div+css布局:
padding margin
ul li { display :inline } 显示一行
超链接的下划线:a{text-decoration:none}
定位技术:
#son1{
position: relative;(相对于原来的位置)
position: absolute
left:60%;
}
<div id=”father”>
<div id=”son1”>aaaaaaaaaaaaa</div>
<div id=”clrear”>bbbbbbbbbbb</div>
</div>
相对定位没有脱离文本流(意思就是它本来的位置还在那里)
绝对定位脱离文本流 (后面的会补上来)
绝对定位的时候看他的爸爸有没有设置相对定位,如果有,那就是相对于爸爸绝对定位,若没有,则相对于浏览器边框定位
margin:0px 10px 5px: 上边框0,下边框5px,左右边框都是10px
margin:0px 1px 2px 3px: 上右下左
body{
margin:0px;
padding:0px;
font-size:12px; 设置整个网页字体
color: yellow; 设置网页字体颜色
overflow:hidden; 去掉页面滚动条
text-align:center;
border:1px solid red;
}
#id:hover {
background-color:red; 鼠标上去,改变div背景
cursor:hand 鼠标上去,变成手
}
练习:
1.实现效果
2.实现效果
3.实现效果
4.使用div和css实现此效果
5.使用元素选择器 类选择器 id选择器 层级选择器 元素选择器 实现此效果
6.使用浮动来实现
7.删除浮动效果
练习1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格跨行跨列操作</title>
</head>
<body>
<table border="1px" width="200px" height="100px" cellspacing="0px" bgcolor="red">
<tr>
<td colspan="2" align="center">11</td>
<td bgcolor="blue">13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">22</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
练习2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="20%,*">
<frame src="top.html"></frame>
<frameset cols="20%,*">
<frame src=left.html></frame>
<frame name=right></frame>
</frameset>
</frameset>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>欢迎XXX进入后台管理系统</h1>
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<a href="right.html" target="right">会员管理</a><br/><br/>
<a href="#">品牌管理</a><br/><br/>
<a href="#">商品管理</a><br/><br/>
<a href="#">分类管理</a><br/><br/>
</ul>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
我是右边的信息
</body>
</html>
练习3:
<html>
<head>
<title>表单注册</title>
</head>
<body>
<table border="1px" align="center" width="1300px" height="800px" cellspacing="0px" cellpadding="0px">
<tr>
<td background="./img/regist_bg.jpg" height="800px">
<form action="#" method="GET">
<table border="1px" align="center" width="1000px" height="600px" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="2" height="60px">
<font size="5" color="blue" >会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>用户名</td>
<td ><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td ><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码</td>
<td ><input type="password" name="repassword"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="text" name="birthday"></td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma">
<img src="./img/yanzhengma.png">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
练习4:
<html>
<head>
<title>div的练习</title>
<style>
div{
border: 1px solid red;
width: 200px;
height: 200px;
font-size: 26px
}
</style>
</head>
<body>
<div>
div结合css练习
</div>
</body>
</html>
练习5:
<html>
<head>
<title>div的练习</title>
<style>
div{
font-size: 26px;
color:red;
}
.hh{
font-size: 26px;
color:gray;
}
#cainiao{
font-size: 26px;
color:yellow;
}
p span{
font-size: 26px;
color:green;
}
input[type='text']{
background: red;
}
input[type='password']{
background: blue;
}
</style>
</head>
<body>
<div>
我是菜鸟 11
</div>
<div class="hh">
我是菜鸟 21
</div>
<div id="cainiao">
我是菜鸟 31
</div>
<div>
我是菜鸟 41
</div>
<div class="hh">
我是菜鸟 51
</div>
<p>
<span>
我是菜鸟 61
</span>
</p>
用户名<input type="text" name="username"><br>
密码<input type="password" name="password">
</body>
</html>
练习6
<html>
<head>
<title>浮动</title>
<style>
#one{
border: 1px solid red;
width: 300px;
height: 200px;
float:right;
}
#two{
border: 1px solid green;
width: 300px;
height: 200px;
float:right;
}
#three{
border: 1px solid blue;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="one">
浮动1
</div>
<div id="two">
浮动2
</div>
<div id="three">
浮动3
</div>
</body>
</html>
<html>
<head>
<title>删除浮动</title>
<style>
#one{
border: 1px solid red;
width: 300px;
height: 200px;
float:right;
}
#two{
border: 1px solid green;
width: 300px;
height: 200px;
float:right;
}
#three{
border: 1px solid blue;
width: 300px;
height: 200px;
}
/* 清除浮动 */
#clear{
border: 1px solid green;
width: 300px;
height: 200px;
clear: both;
}
</style>
</head>
<body>
<div id="one">
浮动1
</div>
<div id="two">
浮动2
</div>
<div id="clear">
删除浮动
</div>
<div id="three">
浮动3
</div>
</body>
</html>