当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 23:41:43

一，-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>