这篇博客介绍了前端开发的基础，包括HTML5、CSS和JavaScript，强调了它们在设计手机网页时的重要性。通过实例演示了一个选课系统的开发，讲解了HTML5的结构、CSS的属性、作用域以及JavaScript在前端和后端交互中的作用。此外，还介绍了uni-app框架，展示了如何使用uni-app进行跨平台开发，并提供了uni-app的目录结构和Vue页面的开发方法。
前端设计时，为了兼容微信内置浏览器，我们采用H5页面的方式进行设计，设计界面时，我们必须充分考虑当前界面是要适配手机操作的。
结合前面的介绍，本章结束时，我们能够完成一个简单的小项目（程序）——选课系统，这个项目是可以运行在微信浏览器中的，我们将该项目的演示界面和网址放到下面，读者可以通过微信扫一扫进行访问：
扫描上述二维码后，可以看到下面的界面（*程序图片元素来源于互联网，仅为教学展示使用，如有异议，请通知博主，我们将立即删除*）
读者可以选择一个角色进行模拟操作，例如点选“我是学生”，则出现下面选择你要扮演的学生
点击你要扮演的学生图标，则可以看到学生可以进行的操作。
在这个页面下，读者可以点击“选课”按钮对进行选课，切换选项卡至“已选课”，可以对已经选择的课程进行取消选课操作。
如果主页面中角色选择时，读者选择的是“我是教师”，则列出系统内容所有老师的列表。
点选某个教师的图标，则进入教师可以操作的界面。
教师的主要功能是领取教学任务。
上述就是本章全部内容学习完毕后，读者可以开发的一个简单的项目。它用到了本章的系统环境、MySQL数据库、PHP开发以及本节要讲到的内容。
下面，我们对本章内容进行介绍。
1.6.1 HTML5简介
这是时下设计手机网页比较流行的页面设计语言，全称为超文本标记语言，它是用一系列标签定义各种元素，用来描述文字、图形、动画、声音、表格和各种链接。html是可以直接被浏览器解释的，或者可以说，客户端的浏览器负责解释html。HTML5是html的一个最新的版本。
HTML5页面一般分为以下几个部分：
（1）顶部声明：一般为<!DOCTYPE html>表明文档类型为HTML。
（2）总体标记符：<html>…</html>。即整个HTML5除顶部声明外，都应在此标签范围之内。
（3）头部定义：<head>…</head>。此处包含页面的标题、序言、说明、样式等，它不作为主要内容在页面上显示，当时会影响页面整体的显示效果、总体样式，是十分重要的声明部分。它主要包含<title>（页面的标题）、<link>（页面文档与外部资源的关系）、<meta>（页面的元数据）、<script>（客户端脚本，一般为javascript）、<style>（样式文件，一般为CSS）。
（4）主体内容：<body>…</body>。这里面包含了需要呈现给用户的页面的内容。
另一方面，在实际页面编写时，我们常常使用<div>…</div>标签来对页面主体结构进行进一步细化，从而使得页面更加具有层次感，也便于维护。
使用div+css的方式，将每个div和css进行对应（通常通过div的class属性完成），使得页面每个层次都有不同的样式，便于页面的设计。
最低0.47元/天 解锁文章
扫一扫
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
