一，-div和span标签和字体实体
1.无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
div:独占一行
span:不换行
<div>div标签，独占一行</div>
<span>span 标签，不换行</span>
练习，在浏览器中查看
2.字符实体
作用：在网页中显示预留字符
先来看空格，不管代码中敲几个空格，网页中都只识别一个
使用 标签就可以识别多个空格
再来看大于小于号
如果在写网页的过程中，需要在网页中原样展示"<p>",就使用<； 和 >；
二、综合案例1-体育新闻列表
三、综合案例2-注册信息
大家可以根据以下页面进行练习，学会如何将所学知识使用在实际应用中
附带代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综合案例2-注册信息</title> </head> <body> <h1>注册信息</h1> <form action=""> <!-- 表单控件 --> <h2>个人信息</h2> <label>姓名：</label><input type="text" placeholder="请输入真实姓名"> <br><br> <label>密码：</label><input type="password" placeholder="请输入密码"> <br><br> <label>确认密码：</label><input type="password" placeholder="请输入确认密码"> <br><br> <label>性别：</label> <label><input type="radio" name="gender">男</label> <label><input type="radio" name="gender" checked>女</label> <br><br> <label>居住城市：</label> <select> <option>北京</option> <option>上海</option> <option>深圳</option> <option>甘肃</option> <option>杭州</option> </select> <h2>教育经历</h2> <label>最高学历：</label> <select> <option>博士</option> <option>硕士</option> <option>本科</option> <option>大专</option> </select> <br><br> <label>学校名称：</label><input type="text"> <br><br> <label>所学专业：</label><input type="text"> <br><br> <label>在校时间：</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> </select> -- <select> <option>2019</option> <option>2020</option> <option>2021</option> </select> <h2>工作经历</h2> <label>公司名称：</label><input type="text"> <br><br> <label>工作描述：</label> <br> <textarea></textarea> <br><br> <input type="checkbox"><label>已阅读并同意以下协议：</label> <ul> <li><a href="#">《用户服务协议》</a></li> <li><a href="#">《隐私政策》</a></li> </ul> <br><br> <button>免费注册</button> <button type="reset">重新填写</button> </form> </body> </html>
