前端web开发HTML+CSS3+移动web（0基础,超详细）——第4天

最新推荐文章于 2024-10-04 00:46:18 发布

晗涵￥-￥

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量178

点赞数 1

文章标签：前端 html css3

本文链接：https://blog.csdn.net/wh992610/article/details/140945392

版权

一，-div和span标签和字体实体

1.无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

div:独占一行

span:不换行

<div>div标签，独占一行</div>

<span>span 标签，不换行</span>

练习，在浏览器中查看

2.字符实体

作用：在网页中显示预留字符

先来看空格，不管代码中敲几个空格，网页中都只识别一个

使用&nbsp标签就可以识别多个空格

再来看大于小于号

如果在写网页的过程中，需要在网页中原样展示"<p>",就使用&lt；和 &gt；

二、综合案例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>