附上文档结构图，方便复习
传送门 - html就是描述语义的，啥也不是
Paste_Image.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
font-family: "Microsoft YaHei";
font: 14px;
}
.header{
width: 100%;
height: 60px;
background-color: #898989;
}
.header .logo{
float: left;
width: 20%;
height: 60px;
background-color: yellow;
}
.header .nav{
float: left;
width: 80%;
height: 60px;
background-color: red;
}
.banner{
width: 100%;
height: 400px;
background-color: orange;
}
.info{
width: 100%;
height: 100px;
background-color: skyblue;
}
.footer{
width: 100%;
height: 50px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<h3>无序列表</h3>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
<h3>li 是一个容器标签</h3>
<ul>
<li>
<h3>第一本书</h3>
<p>30￥</p>
<p>这本书是一本好书啊哈哈哈哈</p>
</li>
<li>
<h3>第二本书</h3>
<p>30￥</p>
<p>这也是一本好书哈哈哈</p>
</li>
<li>
<h3>第三本书</h3>
<p>40￥</p>
<p>这是一本好叔叔菽粟，哈哈哦好啊，就是有点贵！！！</p>
</li>
</ul>
<h3>多级列表</h3>
<ul>
<li>
吃的
<ul>
<li>饼干</li>
<li>面包</li>
<li>
巧克力
<ul>
<li>德芙</li>
<li>费列罗</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3>定义列表</h3>
<dl>
<dt>数学与计算机学院</dt>
<dd>数学与计算机学院是我们学校就业薪资最高的学院</dd>
</dl>
<dl>
<dt>机械学院</dt>
<dd>妹子太少了，不去！！！</dd>
</dl>
<dl>
<dt>服装与设计学院</dt>
<dd>美女多，哈哈->_->!!!</dd>
</dl>
<h3>div使用快划分</h3>
<div>
<h3>武汉主要高校</h3>
<ul>
<li>华中科技大学</li>
<li>华中师范大学</li>
<li>武汉纺织大学</li>
</ul>
</div>
<div>
<h3>北京主要高校</h3>
<ul>
<li>清华大学</li>
<li>北京大学</li>
<li>中国人民大学</li>
</ul>
</div>
<h3>span小区域划分</h3>
<ul>
<li>
<p>iphone9</p>
<p>iphone9怎么怎么好好怎么好，还是怎么怎么好<span><a href="">详细信息</a><a href="">加入购物车</a></span></p>
</li>
<li>
<p>iphone9</p>
<p>iphone9怎么怎么好好怎么好，还是怎么怎么好<span><a href="">详细信息</a><a href="">加入购物车</a></span></p>
</li>
<li>
<p>iphone9</p>
<p>iphone9怎么怎么好好怎么好，还是怎么怎么好<span><a href="">详细信息</a><a href="">加入购物车</a></span></p>
</li>
</ul>
<h3>div主要负责布局</h3>
<div class="header">
<div class="logo">这是logo</div>
<div class="nav">这是导航栏</div>
</div>
<div class="content">
<div class="banner">这是巨幕</div>
<div class="info">这是基本信息</div>
</div>
<div class="footer">这是页脚</div>
<div>
<h3>这是表单的使用</h3>
<form action="">
<p>
姓名:
<input type="text" value="张三" />
</p>
<p>
密码：
<input type="password" value="123456"/>
</p>
<p>
性别：
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" /> 你猜？
</p>
<p>
学历：
<input type="radio" name="xueli" /> 初中
<input type="radio" name="xueli" /> 高中
<input type="radio" name="xueli" checked="checked" /> 本科
<input type="radio" name="xueli" /> 硕士
<input type="radio" name="xueli" /> 博士
</p>
<p>
爱好：
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao" checked="checked" /> 篮球
<input type="checkbox" name="aihao"/> 乒乓球
</p>
<p>
技能：
<input type="checkbox" name="jineng" checked="checked" /> HTML
<input type="checkbox" name="jineng" /> CSS
<input type="checkbox" name="jineng" /> JS
</p>
<p>
籍贯：
<select>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</p>
<p>
个人介绍：
<textarea rows="4" cols="80"></textarea>
</p>
<p>
普通按钮：
<input type="button" value="我是一个普通按钮" />
</p>
<p>
提交按钮：
<input type="submit" />
</p>
<p>
重置按钮
<input type="reset" />
</p>
</form>
</div>
<div>
<h3>表单详细解释</h3>
<div>
<span>input type="text" value="这里是默认值"</span>
<p>
input的type类型有很多，如：</br>
button :表示按钮 </br>
checkbox ：表示复选框</br>
file ：文件</br>
hidden ：隐藏属性</br>
image ：图片</br>
password ：密码</br>
radio ：单选按钮</br>
reset ：重置</br>
submit ：提交</br>
text ：文本</br>
注：要学会自己查看W3C在线手册，多练习！！！！！
</p>
</div>
</div>
<div>
<h3>字符实体的使用</h3>
<p><'& lt ;表示< lt：less than的意思，就是小于'</p>
<p>>'& gt ;表示>' gt:great than的意思，就是大于</p>
<p>©'& copy ;'表示版权所有信息</p>
</div>
</body>
</html>
