1.html的结构//超文本语言
<!DOCTYPE html>文档声明 <head> 头部 （文档的描述信息） <meta charset=”utf-8” 文件编码声明需要文件编码 否则会相应的乱码 <meta name=”keywords” context=”关键字”> <meta name=”description” context=”描述”> <title> </title>标题 <style> <body> 主体（文档的主体内容）
2.html的注释
<!-- -->
3.标签
1）单标签如 <img /> <br/> <hr/>等 也是自结束标签
2）双标签如 <h1> </h1> <a> </a> <span> </span> 由开始和结束标签共同作用
备注：标签不能交叉嵌套
3.1常用基本标签
1）h标签 标题标签
H标签含 h1 h2 h3 h4 h5 h6 h7 说明 h1标签一般只写一个 h4 h5 h6 h7 不要写的太多（对搜索的优先级没有过多的作用）
2）p标签 文本段落标签
<p></p> 会自动的在前后插入一些空白
3）br标签
<br/> 换行标签
4）hr标签
<hr/>创建水平线标签
3.2 文本标签 常用（双标签）
1） b标签和strong标签 加粗字体 建议使用strong加强语义
2） i标签和em标签 斜体 建议使用em 加强
3） small标签 较左相邻的字体小一号
4） big标签 较左相邻的字体大一号
5） pre标签 保留显示文本空格和换行符
6） code标签 将书写其中的代码作为文本而非代码
7） u标签 添加下划线 不建议使用 因为a标签下有下划线的缘故 不便于区分
8） sub标签 下标
9） sup 标签 上标
10) del标签 添加删除线
3.3 布局标签常用（双标签）
1） span标签 行内块元素 不会独占一行
2） div标签 快标签 独占一行
3.4 链接标签（双标签）
1) a标签
常用属性
Href：必写 指向一个超链接 含外部链接 内部链接 和锚点链接
name：可写可不写 制定锚的名称 可创建一个内部的书签 完成自身网页的跳转 实现书签跳转的代码如下
<a href="#button" name="top">button</a>
<a href="#top" name="button">top</a>
target：_blank 新的页面 _parent _self自身页面 _top _framename
3.5 特殊符号常用
1）  空格
2）< <符号
3）> >符号
4）& &符号
4 绝对路径和相对路径
和java等类似
5 image
<img src=”” alt=”” title=””/>
常用属性
src:必写 指向一个资源地址
alt：文字说明 当没有找到相应的src时，显示alt
width：等比设置
titie：图片说明 当鼠标指向该图面的时候会显示相应的说明
6 audio
<audio src=”” autoplay=””></audio>
常用属性
src： 必写 指向一个资源地址
autoplay： 是否自动播放
loop：是否循环播放
controls：控制面板
preload：音频在页面加载是加载，当自动播放是此忽略
7 video
<video src=”” autoplay=””></video>
src： 必写 指向一个资源地址
autoplay： 是否自动播放
loop：是否循环播放
controls：控制面板
preload：音频在页面加载是加载，当自动播放是此忽略
height：等比设置
8 source
当找不到的时候会相应的向下继续寻找
<audio src=”” autoplay=””>
<source src=""></source>
<source src=""></source>
</audio>
8 ul标签 无序列表
无序标签
主要ul和li组成,li中可以放任何标签
<ul >
<li></li>
<li></li>
</ul>
一般回去出li前面的小圆点
<ul style=“list-style：none”>
<li></li>
</ul>
9 ol有序列表
<ol type="1">
<li></li>
</ol>
主要由Ol和li及type构成
type指定相应的序号类型
10 dl标签 自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
dt标题信息
dd 描述信息
11 table表格
<table cellpadding="" cellspacing="" border=""> <tr><caption></caption></tr> 表格的标题
<tr><head><th></th></head></tr> 头部 th名称 加黑居中
<tr><tbody><td></td></tbody></tr> 主体 td行
<tr><tfoot><td>合计</td></tfoot></tr> 尾部 用于合计
</table>
常用属性
Cellpadding：内边距
Cellspacing：外边距
Border：边框大小
Width：宽度
Colspan：横向合并
Rowspan：纵向合并
12 form表单
<form action="" method="" target=“”>
<input type="button" name=""/>
<input type="checkbox" name="" value="" />
<input type="radio" name="" value="" />
<input type="password" name="" />
<input type="submit" value="" />
<input type="reset" value=""/>
<input type="hidden" value=""/>
<input type="file" value=""/>
</form>
常用属性
Action：提交到该地址
Method：方法get 及post
Type：类型 text文本框 button 按钮 checkbox 多选框 radio 单选框 submit 提交至action reset 重置 password 密码框 hidden隐藏域 file文本选择
Name：名称 可用于java checkbox name 需要相同表示一组 radioname需要相同表示一组
Value：submit 和reset的表示显示名称 其余可用于java提取
Target：类似于a中的target
13 select下拉框
书写方式类似于列表
<select name="">
<option value=""></option>
</select>
常用属性
size :可见下拉框列数
multiple：设置可以多选
disable：禁用下拉列表
option标签
value 值
disabled 不可选
selected 选中状态
optgroud 标签 对option分组
<select name="">
<optgroup label=”爱好”>
<option value="">睡觉</option>
<option value="">游戏</option>
</ optgroup >
</select>
属性label必写
14 textarea文本域
常用属性
Disabled 禁用
Readonly 只读
Rows 可见行数
Cols 可见列数
15 活动框架
Iframe :可以连接一个页面
16 框架
Frameset ：不可以使用body标签 可以内嵌frameset
Rows 行数
Cols 列数
Frame 连接页面
17.练习
1）login页面
2）代码
.screen {
overflow: hidden;
}
.screen,
#imgBg {
100%;
height: 100%;
min- 960px;
}
#imgBg {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
z-index: -1;
}
.login-top-left {
100%;
margin: 0 auto;
text-align: center;
padding-top: 30px;
}
.login-top-left #img2 {
300px;
}
.login-top-left #img1 {
250px;
position: absolute;
left: 10px;
top: 40px;
}
#register{
position: absolute;
font-size: 18px;
text-decoration: none;
color: darkgrey;
top: 2%;
right: 2%;
transition: color 0.3s linear;
}
.login-container {
margin: 0 auto;
margin-top: 70px;
}
.input-group,
.box-group {
box-shadow: #000000;
border-radius: 8px;
margin: 0 auto;
margin-bottom: 10px;
330px;
}
.input-group,
.input-group input,
.account-iocn,
.box-group {
height: 50px;
}
.input-group {
border: 1px solid black;
background: white;
}
.input-group .input {
padding: 0;
margin: 0;
280px;
float: right;
border: none;
background: rgba(0, 0, 0, 0);
}
.icon {
background: url(../img/login-svg-sprite-97eb796f.svg) no-repeat;
display: inline-block;
}
.account-icon,
.password-icon {
20px;
height: 30px;
margin-left: 20px;
margin-top: 10px;
background-position-y: 103%;
}
.account-icon {
background-position-x: 25%;
}
.password-icon {
background-position-x: 38%;
}
.box-group {
text-align: center;
line-height: 50px;
}
.box-group,
.input,
.submit {
font-size: 18px;
}
#check-box {
color: lightgray;
float: left;
line-height: 50px;
}
#memory {
margin: 0;
padding: 0;
}
#forget {
float: right;
color: darkgray;
text-decoration: none;
transition: color 0.5s linear;
}
#check-icon {
margin-top: 15px;
margin-right: 10px;
float: left;
20px;
height: 20px;
background-position-x: 41.5%;
background-position-y: 70%;
}
.input-group input:focus,
.submit {
outline: none;
}
.submit {
display: block;
background: yellowgreen;
cursor: pointer;
transition: background-color 1s linear;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<link rel="stylesheet" href="../css/login1.css" />
<script src="../js/jquery1.11.3.js"></script>
<script type="text/javascript">
$(function() {
var flag = true;
$("#check-icon").click(function() {
if(flag) {
$(this).css({
"background-position-x": "27%"
});
$("#check-value").attr("value", "1");
flag = false;
} else {
$(this).css({
"background-position-x": "41.5%"
});
$("#check-value").attr("value", "0");
flag = true;
}
})
$("#submit").hover(function() {
$(this).css("background-color", "green")
}, function() {
$(this).css("background-color", "yellowgreen")
})
$("#forget").hover(function() {
$(this).css("color", "white")
}, function() {
$(this).css("color", "darkgrey")
})
$("#register").hover(function() {
$(this).css("color", "white")
}, function() {
$(this).css("color", "darkgrey")
})
});
</script>
<body>
<div class="screen" id="screen">
<img id="imgBg" src="../img/login_screen1_bg.jpg" />
<div class="login-top">
<div class="login-top-left ">
<img id="img1" src="../img/login-logo_2x.png" />
<img id="img2" src="../img/login_slogan.png" />
</div>
<a href="javaScript:;" id="register">注册账号</a>
</div>
<div class="login-container">
<form method="post" action="JavaScript:;">
<div class="input-group">
<i class="icon account-icon"></i>
<input type="text" class="input" placeholder="邮箱/手机号" />
</div>
<div class="input-group">
<i class="icon password-icon"></i>
<input type="text" class="input" placeholder="密码" />
</div>
<div class="box-group">
<div id="check-box">
<input type="hidden" class="check-value" value="0" />
<i class="icon" id="check-icon"></i>
<span id="memory">记住账号</span>
</div>
<a href="JavaScript:;" id="forget">忘记密码?</a>
</div>
<input type="submit" class="input-group submit" id="submit" value="登录" />
</form>
</div>
</div>
</body>
</html>