HTML5跨平台开发基础与实战 王寅峰电子任务2 熟悉WebStorm开发环境，设计和开发个人网页 .ppt

《HTML5跨平台开发基础与实战 王寅峰电子任务2 熟悉WebStorm开发环境，设计和开发个人网页 .ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、跨平台HTML5实战软件学院王寅峰任务2熟悉WebStorm开发环境，设计和开发个人网页学习目标【知识目标】掌握HTML5的新特性：标签和表单；掌握网页设计基本流程；掌握文档结构相关的标记符；掌握页面布局相关的标记符；掌握文本标记符；掌握图形和超链接的实现。【技能目标】能独立实现图文混排的网页；能为特殊的网页选用合适的技术。引例描述随着公司业务的发展和新员工陆续报到，为了尽快让新员工上手，薛总工设计了初级网页设计的培训课题:HTML5快速入门指南。薛总工要求学员为动画片《冰河时代》的主角.希德创建个人主页。任务陈述希德的个人网站：布局

2、合理，层次分明，保持统一的风格，有助于加深访问者对希德网站的印象。要讲究组合、搭配来构成美观的页面，吸引访问者长时间的停留在网页，更重要的是多一些原创的内容，个性色彩可以起到画龙点睛的作用。1WebStorm工具2HTML5基本结构3HTML5常用标签的基本结构知识准备1WebStorm工具1WebStorm工具HTML5网页编辑：最直接的是采用记事本。通过选择“开始”菜单“所有程序”或“程序”“附件”打开记事本。网页预览：需要依赖各种浏览器，比如IE，Chrome或者Firefox等。采用专门的源码编辑工具：语法高亮，同时还有辅助设计命令，如自

3、动缩进、美化代码、提示出错信息等，从而使得源码易于阅读。比如JetbrainsWebStorm（简称：WebStorm）。1WebStorm工具(1).启动WebStorm并创建新项目。项目新建后，在打开的窗口中新建一个网页文件。操作：File->New…，在弹出的窗口中选择HTMLFile，并命名为main。如图所示，WebStorm在创建网页文件的同时会插入一个基本文件框架。需要注意的是，若此处采用index作为文件名，语法高亮失效，并且也无法自然弹出的浏览器选择条。1WebStorm工具(2).新建一个网页文件2HTML5基本结构2HTML5基

4、本结构一个HTML5文件的基本结构如下：//文件开始标签//文件头开始的标签……//文件头的内容//文件头结束的标签//文件主体开始的标签……//文件主体的内容//文件主体结束的标签2HTML5基本结构（1）HTML部分双标签标记符HTML的语法格式如下：…代码…标签还能帮助人们阅读HTML代码，以便于平常的文字处理工具能够识别出文档是网页文档。2HTML5基本结构（2）标签用于定义文档的头部，它是所有头部元素的

5、容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文件头部一般包含标题标签、标签、内联样式表及预定义脚本等。即title、meta、link、base、script等常用标签：2HTML5基本结构（3）主体部分双标记符定义了主体部分，它包含显示在Web浏览器中的所有信息。在与中放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。在HTML4中标签有很多自身的属性，如定义页面文字的颜色、背景的颜色、背景图片等，在HTML5中，删除了所有<

6、body>的特殊属性，减少不必要的标签。主体部分2HTML5基本结构DOCTYPE声明，该标记符必须以惊叹号开始，而且要放在文档的开始处，在其他的所有标记符之前。HTML5的语法中大多数标记符都不区分大小写，但DOCTYPE必须全部大写。meta定义好字型，从而支持中文显示title是网页唯一标题标签3HTML5常用标签行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像表格的基本结构3HTML5常用标签页面布局相关的标记符3HTML5常用标签单元格内容……

7、……