Web前端开发任务式教程（HTML5+CSS3）（微课版）课件 模块1、2 Web开发概述、常用HTML元素.pptx

《Web开发任务式教程》 模块1Web开发概述

《Web开发任务式教程》Web开发概述本模块介绍前端开发的基础知识，包括Web标准、网页结构、网页开发环境，以及HTML元素及简单HTML元素的用法。任务1.1书写一封家信任务1.2设计一个公告

《Web开发任务式教程》Web开发概述学习目标【知识目标】1）了解Web标准的内涵。2）掌握HTML文件的结构。3）掌握注释、HTML头部元素、常用简单元素、实体的用法，以及HTML元素的通用属性。4）熟悉HBuilderX开发环境。【能力目标】1）能够使用HBuilderX开发环境创建HTML项目。2）能够使用HTML元素设计简单网页。3）能够书写格式规范的HTML文件。

《Web开发任务式教程》请使用文本格式化元素设计一封书信，跟父母交流一下在学校的情况。1）首行顶格书写，加粗显示，以示尊重，正文斜体字书写，增加亲切感。2）有签名和日期，且符合书信基本格式规范要求。Web开发概述任务1.1书写一封家信图1-1 一封家信

《Web开发任务式教程》Web开发概述1.1.1Web标准结构标准结构标准对应结构化标准语言，主要包括可扩展标记语言XML（ExtensibleMarkupLanguage）和可扩展超文本标记语言XHTML（ExtensibleHyperTextMarkupLanguage）。目前XML主要用于网络数据的转换和说明，结构化标准语言主要使用HTML和HTML5。表现标准表现标准对应层叠样式表CSS（CascadingStyleSheets），是一种用来表现HTML或XML文件的计算机样式语言，用于对网页元素进行格式化，能够对网页中元素的大小和位置排版进行像素级的精确控制，支持几乎所有的字体和字号样式，主要有CSS和CSS3两个版本，CSS定义元素的基本样式，CSS3定义一些实用的新样式。3.行为标准行为标准主要指文档对象模型DOM（DocumentObjectModel），DOM是万维网联盟W3C组织推荐的、处理可扩展标记语言的标准编程接口，是一种与平台和语言无关的应用网页接口API（ApplicationProgrammingInterface）。使用DOM能够动态地访问网页，更新网页内容、结构和文件风格，是一种基于树的API文件。

《Web开发任务式教程》Web开发概述1.1.1Web标准4.Web标准的作用Web标准将网站建设从结构、表现和行为进行了分层，为网站重构、升级与维护带来了极大的方便。1）结构化的开发模式使得代码重用和网站维护更为容易，降低了网站开发和维护的成本。2）开发完毕的网站对用户和搜索引擎更加友好。3）文件下载与网页显示速度更快，内容能被更广泛的设备访问。4）数据符合标准，更容易被访问。

《Web开发任务式教程》Web开发概述1.1.2HTML文件1.HTML元素(1)标签由尖括号（）包围起来的具有特殊含义的关键词，如html表示html文件。标签通常成对出现，由标签开头和标签结尾组成。由尖括号括起来的关键词是标签开头，如html，标签开头加单斜杠“/”组成标签结尾，如标签开头html的标签结尾是/html。(2)标签对HTML标签对由标签开头、标签内容和标签结尾组成。标签内容可以是文本或标签对，如果是标签对，属于标签嵌套，嵌套层数不受限制，但是不能发生交错。图1-2a为内容为文字的标签对，图1-2b为内容为标签对的标签嵌套。文本内容标签b)标签嵌套图1-2 标签对组成

《Web开发任务式教程》Web开发概述1.1.2HTML文件(3)单标签部分标签没有标签结尾，称为单标签。规范的单标签必须用单斜杠“/”结束，但HTML并不严格检查单标签是否有“/”，往往缺少后也不影响网页显示效果，常用单标签有imgmetalink等。以下代码定义了img单标签。imgsrc=img1.jpg/标签名不区分大小写，如body和BODY都表示网页体，HTML中一般推荐使用小写标签名。(4)HTML元素定义标签对和单标签统称为HTML元素，HTML元素是一种语义化元素。(5)HTML元素的作用根据元素的标签名就能判断出元素的内容和作用，有助于网页内容的阅读，具有以下作用。1）元素的标签嵌套规范，能够清晰网页内容的层次结构。2）元素的标签能够使网页内容更容易被搜索引擎收录。3）元素的标签能够使屏幕阅读器更容易读出网页内容。

《Web开发任务式教程》Web开发概述1.1.2HTML文件2.HTML元素的属性如果元素有属性，属性必须在HTML元素的标签开头中规定。总是以“属性名/属性值”对的形式出现，如属性src=img1.