Web前端开发基础 课件 项目一 HTML基础知识.pptx

项目一HTML基础知识

【知识目标】1.了解Web技术的发展历程2.掌握HTML的基本语法3.掌握HTML常用标签的使用【技能目标】1.能使用HTML文档标签构建网页基本结构2.能使用文本标签、图像、列表、表格、表单等搭建静态网页3.能使用超链接完成页面跳转4.能使用iframe标签嵌入子窗口页面课程目标【素质目标】1．培养爱岗敬业的精神，让学生树立清晰的职业目标价值观，正确认识自己的时代责任和历史使命。2．培养学生坚定理想信念，具有正确的人生观、价值观和世界观。3．培养学生遵守行业基本道德规范和职业规范。

目录Contents初识HTML文字标签图像标签列表标签0102030405超链接标签06表格标签07div和span标签08iframe标签

1.1初识HTMLHTML（超文本标签语言）是一种用于制作网页的标签语言。它由一系列标签组成，这些标签用来定义网页的结构和内容。HTML标签可以包括文本、图像、链接、表格等元素，使网页能够呈现出丰富的内容和交互功能。HTML是Web开发中最基础的技术之一，它与CSS（层叠样式表）和JavaScript一起构成了Web开发的基础技术。通过学习HTML，可以创建各种各样的网页，并且掌握更高级的Web开发技能。

技能训练1-1下载HBuilderX1.1初识HTML【目标要求】通过训练，使学生能够熟悉网页制作的编辑环境，并能够自行完成HBuilderX的下载和安装。【方法步骤】打开浏览器，输入””.在百度页面输入dcloud，点击官方网址，进入DCloud官网在首页面，点击“HBuilderX”按钮，进入下载页面根据自己的电脑系统，选择合适的版本进行下载。打开下载后文件所在的文件夹（建议移动到存储软件的专属文件夹中），点击右键，进行解压缩。打开HBuilderX，进入软件页面。点击关闭按钮，退出程序。选择创建桌面快捷方式。

技能训练1-2创建一张网页1.1初识HTML【目标要求】通过制作第一张网页，让学生掌握网页制作的过程，熟悉网页的基本框架结构。【方法步骤】打开HbuilderX，点击“开始——新建”，选择“普通项目”，创建HTML模板项目，具体设置如右图所示。打开“index.html”文件，进行内容修改。1.!DOCTYPEhtml2.html3. head4. metacharset=utf-8/5. title我的第一张网页/title6. /head7. body8. 欢迎来到我的网页！9. /body10./html

技能训练1-2创建一张网页1.1初识HTML选择“运行”菜单，在下拉菜单中选择“运行到浏览器”命令，选择合适的浏览器运行网页4.浏览器中的运果如下：

【标签说明】1.1初识HTML标签含义!DOCTYPE?html?定义HTML文档类型html/html根标签，定义HTML文档head/head头部标签，定义关于HTML文档的信息，描述HTML文档的各种属性和信息，绝大多数文档头部包含的数据不会真正作为内容显示给读者。title/title??定义HTML文档标题meta?charset=?utf-8/定义HTML文档的字符编码body/body定义HTML文档主体

1.2文字标签HTML提供了h1-h66个级别的标题标签。h1定义最大的标题。h6定义最小的标题。在网页中合理地使用这些标题标签，可以使网页的层次结构更加清晰。 1.2.1标题标签hn”标题文本/hn基本语法格式：

技能训练1-3HTML标题标签1.2文字标签【目标要求】通过训练，掌握HTML标题标签的使用方法，熟悉Web前端开发对应岗位的名称。【方法步骤】打开HbuilderX，点击“开始——新建”，选择“普通项目”，新建普通项目chapter1。新建html文件，将该文件命名为ex1-1.html，具体关系如右图所示:打开ex1-1.html”文件，进行内容修改。!DOCTYPEhtmlhtml3. head4. metacharset=utf-85. titleHTML标题标签h1~h6/title6. /head7. body8. h1Web前端开发工程师/h19. h2Web前端开发工程师/h210. h3Web前端开发工程师/h311. h4Web前端开发工程师/h412. h5Web前端开发工程师/h513. h6Web前端开发工程师/h614. /body15./html3.标题标签网页运行效果如下图所示:

技能训练1-3HTML标题标签1.2文字标签【注意】?HTML标题标签只能用来定义标题，不可