版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
单元1Web前端开发基础HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】1.1网页概述1.1.1基本概念1.1.2静态网页与动态网页1.2技术介绍1.2.1HTML1.2.2CSS1.2.3JavaScript1.3浏览器介绍1.3.1常见浏览器1.3.2浏览器内核1.4VSCode编辑器介绍1.4.1安装VSCode编辑器1.4.2设置VSCode编辑器1.4.3利用VSCode编辑器创建HTML模板【商业实例】“仿写淘宝首页”项目——创建网页模板任务一创建HTML模板代码任务二修改title为“淘宝首页”任务三创建网页内容区域并填充内容【综合实训】安装与使用VSCode编辑器【单元小结】目录【学习导读】万维网（WorldWideWeb，WWW）也称为Web，它是一种基于超文本和超文本传输协议（HypertextTransferProtocol，HTTP）的、全球性的、动态交互的、跨平台的分布式图形信息系统。Web前端即给用户展示的网页，也就是网站的前台部分，包含网页布局、特效、用户交互等。大家生活中接触到的淘宝官网、网易官网、腾讯官网等都属于Web前端。Web前端开发是指使用HTML、CSS及JavaScript等技术创建和维护Web界面的过程。本单元将详细介绍进行Web前端开发所需要掌握的基础知识。学习导读【学习目标】知识目标1．了解网页的基本概念。2．了解Web前端开发的技术。3．了解浏览器的概念。4．认识Web前端开发工具。能力目标1．能够独立安装并使用VSCode编辑器。2．能够创建一个HTML网页。素质目标1．培养学生的信息收集能力。2．培养学生的探索精神。3．培养学生的动手能力。学习目标思维导图1.1网页概述网页是一种可以在互联网中传输，能被浏览器识别并显示出来的文件，是网站的基本构成元素。网站由多个网页组成，网页之间的排列并不是杂乱无章的，而是有序链接在一起的。1.1.1基本概念以CSDN（ChineseSoftwareDeveloperNetwork）首页为例，其中包含文字、图片等元素。1.1网页概述1.1.1基本概念代码中仅包含一些特殊的符号和文本。在浏览网页时看到的图片、视频等，正是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。静态网页无论用户何时访问，静态网页都会显示固定的信息，除非网页源代码被修改并重新上传。静态网页的优点是访问速度快，缺点是更新不方便。动态网页动态网页显示的内容会随着用户操作和时间的不同而变化。其优点在于可以实时展示用户想要查看的内容，缺点是不够统一，每个用户看到的内容可能存在差异。互联网上的大部分网站都是由静态网页和动态网页一起组成的。1.1网页概述1.1.2静态网页与动态网页1.2技术介绍1.2.1HTMLHTML是一种用于创建和组织网页内容的标记语言，它提供了一种跨平台和可访问的方式来呈现和共享信息。它使用标签（例如<h1>表示标题、<p>表示段落）来定义文本、图像、链接和其他元素的结构和语义。HTML提供了一种结构化的方式来描述网页的内容，并通过使用属性（如class和id）来为元素添加样式和行为。1.2技术介绍1.2.2CSSCSS是一种用于控制网页外观和布局的样式表语言。它通过选择器（如class选择器、id选择器）和属性（如颜色、字体、边框）来为HTML元素添加样式，以改变网页的颜色、布局、字体等，使网页更加个性化和美观。1.2技术介绍1.2.3JavaScriptJavaScript是一种用于为网页添加交互和动态功能的脚本语言，其前身叫作LiveScript，由Netscape公司开发。在Sun公司推出Java之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。JavaScript是一种面向对象的语言，提供了丰富的内置函数和方法，以及访问浏览器的应用程序接口（ApplicationProgramInterface，API），使开发人员能够创建复杂的交互性和动态性网页。JavaScript可以与HTML和CSS结合使用，以响应用户的操作、操作网页元素、验证表单数据等。JavaScript也可以用于服务器端开发（如Node.js），以及构建跨平台的移动应用程序（如ReactNative）等。0102031.3浏览器介绍1.3.1常见浏览器IE浏览器IE浏览器由微软公司推出，直接绑定在Windows操作系统中，无须下载安装。IE有6.0、7.0、8.0、9.0、10.0等版本。火狐（Firefox）和GoogleChrome火狐（Firefox）和GoogleChrome是目前较常用的3种浏览器，其他常见的浏览器还有Safari浏览器和Opera浏览器等。对于一般的网站，只要兼容IE浏览器、Firefox浏览器和GoogleChrome浏览器，就能满足绝大多数用户的需求。GoogleChromeGoogleChrome是由Google（谷歌）公司开发的开放源代码网页浏览器。该浏览器基于WebKit和Mozilla的源代码内核进行二次开发，目标是提升稳定性、速度和安全性，并呈现出简单有效的使用界面。Firefox浏览器Firefox浏览器是一个开源网页浏览器，使用Gecko引擎（非IE内核）。它是一款快速、轻量、注重隐私的浏览器，全平台可用，访问速度非常快。1.3浏览器介绍1.3.2浏览器内核浏览器内核是浏览器最核心的部分，负责对网页语法进行解释并渲染网页（也就是显示网页效果）。浏览器渲染引擎是浏览器内核的重要组成部分，主要负责解析HTML、CSS，计算网页布局和绘制网页等，并将解析后的CSS规则应用到HTML标签元素上，最后将HTML渲染到浏览器窗口中以显示具体的文档对象模型（DocumentObjectModel，DOM）内容。Trident内核：常用于IE浏览器。Gecko内核：常用于Firefox浏览器。WebKit内核：常用于Safari浏览器。Presto内核：常用于Opera浏览器。1.4VSCode编辑器介绍前端代码编辑器是一种专门为编写网页前端开发代码（如HTML、CSS、JavaScript等）而设计的软件工具，提供了一系列功能，如代码高亮、代码自动完成、错误检查、代码重构、版本控制集成、实时预览等，旨在提高开发效率、简化代码编写过程。VSCodeWebStormAtomSublimeTextWebStorm用于JavaScript和相关技术的集成开发环境（IntegratedDevelopmentEnvironment，IDE），可以帮助开发人员方便地进行Web前端开发。SublimeText是一款快速、轻量级的文本编辑器，支持多种语言和高亮显示。SublimeText有许多插件可供选择，可以通过PackageControl插件方便地管理插件。VSCode是微软推出的开源代码编辑器，支持Windows、macOS和Linux系统。它内置扩展功能，可以安装不同的插件。Atom是一个开源的文本编辑器，由GitHub开发。Atom具有高度可定制性和易于使用的API，使用户可以轻松地创建和分享自定义插件。1.4VSCode编辑器介绍1.4.1安装VSCode编辑器01OPTION选择编辑器安装地址02OPTION选择编辑器快捷方式的安装地址1.4VSCode编辑器介绍1.4.1安装VSCode编辑器03OPTION选择附加任务04OPTION开始安装1.4VSCode编辑器介绍1.4.1安装VSCode编辑器05OPTION安装进度界面04OPTION安装完成1.4VSCode编辑器介绍1.4.2设置VSCode编辑器01OPTION设置“常用设置”面板02OPTION安装扩展程序1.4VSCode编辑器介绍1.4.3利用VSCode编辑器创建HTML模板01OPTION选择“新建文件”命令02OPTION创建HTML文件1.4VSCode编辑器介绍1.4.3利用VSCode编辑器创建HTML模板03OPTION选择HTML文件保存的位置04OPTION输入代码<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8"><metaname="viewport"content="width=device-width,initialscale=1.0"><title>Document</title></head><body></body></html>【商业实例】“仿写淘宝首页”项目——创建网页模板任务一创建HTML模板代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initialscale=1.0"><title>Document</title></head><body></body></html>打开VSCode编辑器，选择菜单栏中的“文件”—“新建文件”命令，创建1-2.html文件。在正文中输入“!”，并按Tab键，这时会自动生成HTML的模板代码，如下所示。【商业实例】“仿写淘宝首页”项目——创建网页模板任务二修改title为“淘宝首页”<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initialscale=1.0"><title>淘宝首页</title></head><body></body></html>修改title为“淘宝首页”，这样在打开网页的时候浏览器标题就会变成“淘宝首页”，代码如下。【商业实例】“仿写淘宝首页”项目——创建网页模板任务三创建网页内容区域并填充内容<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initialscale=1.0"><title>淘宝首页</title></head><body><div>这里是网站内容部分</div></body></html>在<body>标签中插入一个<div>标签，<div>标签中的内容即为网页的主体内容，设置<div>标签中的内容为“这里是网站内容部分”，代码如下所示（实例位置：单元1/1-3.html）。网页效果【综合实训】安装与使用VSCode编辑器二、实训内容一、实训目的掌握VSCode编辑器的安装与配置方法。掌握VSCode插件的安装与使用方法。学会使用VSCode来编写网页代码并了解网页的基本构成。ACB安装VSCode编辑器安装VSCode插件编写代码并预览网页效果【单元小结】本单元首先介绍了网页的基本概念以及静态网页和动态网页，接着介绍了前端开发常用的技术（HTML、CSS和JavaScript），以及常用的浏览器和浏览器内核，最后介绍了Web前端开发的常用工具及如何安装VSCode编辑器等。通过本单元的学习，读者应该对Web前端有基础的认识和了解，掌握如何使用编辑器来开发前端网页，为前端开发奠定扎实的基础。THANKS单元2HTML5基础HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】2.1HTML5是什么2.1.1HTML5网页结构2.1.2HTML5元素2.2HTML5属性2.3HTML5标题2.4HTML5段落和换行【商业实例】“仿写淘宝首页”项目——
编写网页元素任务一开发顶部导航区域任务二编写搜索框区域的HTML5代码任务三编写分类、轮播图和用户信息模块的
元素【综合实训】设计黄山风景介绍网页【单元小结】目录【学习导读】HTML作为“前端三剑客”之一，是网页的重要组成部分。它是一种用于创建网页的标记语言，目前几乎所有的网站都是通过HTML技术开发的，例如我们熟知的百度、网易、腾讯的网站。浏览器将HTML解析成各种各样的网站内容，它通过使用不同的元素和属性来定义网页的结构和内容，并与其他技术（如CSS和JavaScript）一起实现网页的交互功能。HTML是进行前端开发必须要掌握的内容，也是前端开发的基础。本单元将详细介绍HTML5的网页结构、HTML5属性等。学习导读【学习目标】知识目标1．了解HTML5网页的基本结构。2．掌握HTML5属性和标题的使用方法。3．掌握HTML5段落的使用方法。能力目标1．能够给HTML5元素添加属性。2．能够开发不同级别的段落标题。素质目标1．培养学生的思维能力。2．培养学生的探索精神。3．培养学生良好的学习习惯。学习目标思维导图2.1HTML5是什么HTML5是HTML的第五个版本。HTML5是一种用于构建和呈现网页内容的标准，主要功能是控制网页显示的内容，它引入了许多新的功能和语义元素，以提供更好的网页体验。HTML5引入众多语义化标签，清晰描述页面结构，便于开发者编写与维护代码。HTML5无需第三方插件，借助<video>和<audio>标签可直接嵌入多种格式的音视频到网页中，增强多媒体展示效果。HTML5提供<canvas>元素用于编程绘图和创建动画，可创建高质量且无损缩放的图形与动画。HTML5提供了WebWorker，可在浏览器端创建独立后台线程处理复杂计算，不影响主线程运行，避免页面卡顿，提升网页性能。1234HTML5通过localStorage和sessionStorage在浏览器端存储数据，并有applicationcache支持离线应用，提升用户离线使用体验。52.1HTML5是什么2.1.1HTML5网页结构1．HTML5根元素HTML5文档的根元素是<html></html>，它包含整个HTML文档的内容。HTML5文档的头部包含一些元数据和定义，如文档标题、引入的外部资源等。头部用<head></head>标签表示。使用<title></title>标签来定义网页的标题，标签将显示在浏览器的标签页上。使用<link>标签来引入外部CSS。使用<script>标签来引入外部JavaScript脚本。2．头部部分3．网页标题4．引入外部样式表5．引入外部脚本2.1HTML5是什么2.1.1HTML5网页结构6．其他元数据可以使用<meta>标签来定义其他元数据，如字符编码、视口设置等。HTML5文档的网页内容位于<body></body>标签中。可以在其中添加各种HTML5元素来组织和展示网页的内容，如标题、段落、图像、链接等。HTML5元素由开始标签（Openingtag）、内容和结束标签（Closingtag）组成。开始标签使用尖括号（<>）括起来，结束标签使用尖括号和斜线（</>）括起来。一些元素可以省略结束标签，如<br>、<img>等。可以使用<!---->将HTML5中的注释括起来，以添加开发者的说明或解释代码的用途，注释不会被浏览器解析。7．网页内容8．HTML5元素9．HTML5注释2.1HTML5是什么2.1.2HTML5元素HTML5元素是构成HTML文档的基本构建块。它们用于定义和组织网页的结构和内容。每个HTML5元素由一个开始标签和一个结束标签组成，中间包含元素的内容。元素的基本格式为<元素>内容</元素>例如，<p>元素用于定义段落，其开始标签为<p>，结束标签为</p>。在开始标签和结束标签之间可以插入文本、其他元素和属性等。2.1HTML5是什么2.1.2HTML5元素HTML5元素可以嵌套在其他元素中，形成层次结构。例如，<div>元素可以包含多个<p>元素，形成一个段落的容器。代码如下所示（实例位置：单元2/2-1.html）。<body><div><h1>超文本标记语言</h1><p>欢迎来到HTML的世界</p></div></body>运行效果2.2HTML5属性HTML5元素具有属性，就像长方形具有长宽属性一样。每个元素的属性不一样，但有一些通用的属性，如id、name、class等。属性必须写在开始标签中，如“<palign="center">段落</p>”，属性总是以名称/值对的形式出现，如“name="value"”。HTML5属性具有以下作用。12给元素添加附加信息。控制元素显示的风格。运行效果2.3HTML5标题标签描述案例<h1>一级标题<h1>标题H1</h1><h2>二级标题<h2>标题H2</h2><h3>三级标题<h3>标题H3</h3><h4>四级标题<h4>标题H4</h4><h5>五级标题<h5>标题H5</h5><h6>六级标题<h6>标题H6</h6>在HTML5中，标题由<h1>到<h6>6个级别的元素表示，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。常用的HTML5标题标签2.3HTML5标题实例代码如下。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>文档标题</title></head><body><h1>标题H1</h1><h2>标题H2</h2><h3>标题H3</h3><h4>标题H4</h4><h5>标题H5</h5><h6>标题H6</h6></body></html>运行效果2.4HTML5段落和换行HTML5段落（paragraph）是用于展示文本内容的元素，用于将文本划分为不同的段落。在HTML5中，段落使用<p>标签表示。换行（linebreak）是指在文本中插入换行符。在HTML5中，空格和换行标记都会被自动忽略，可以使用<br>标签来实现换行。段落和换行标签标签描述案例<p>普通文字标签（段落标签）<p>这是一个段落</p><br>换行<br/>2.4HTML5段落和换行实例代码如下。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>文档标题</title></head><body><p>这是一个段落，从第一行开始</p>
<p>这是第二个段落，会自动换行，另起一行开始</p><br/><p>这是第三个段落，在这之前使用了br标签来换行，所以间隔变大</p><p>这是第四个段落，一个br标签只能换一行，换几行就需要几个br标签</p></body></html>运行效果【商业实例】“仿写淘宝首页”项目——编写网页元素任务一开发顶部导航区域01OPTION结构分析从下图我们可以发现淘宝首页顶部导航区域分为左右两个部分，左边包含登录注册入口等，右侧部分包含我的淘宝、购物车、收藏夹、商品分类和联系客服等入口。我们可以用<div>标签作为一个大的容器，将这些内容包裹在里面，左右两部分导航分别使用<ul>和<li>无序列表标签进行定义。【商业实例】“仿写淘宝首页”项目——编写网页元素任务一开发顶部导航区域02OPTION搭建网页结构【商业实例】“仿写淘宝首页”项目——编写网页元素任务二编写搜索框区域的HTML5代码01OPTION结构分析从下图我们可以发现搜索框区域包含3个部分，左边是淘宝的Logo，中间是搜索框内容区域，内容区域由输入框区域、“搜索”按钮和底部的快捷商品导航区域组成，右边部分是一个下载淘宝的二维码图片。左右两个部分可以分别用<div>标签来定义，然后使用<img>标签或者背景图片的方式来展示图片（本案例使用背景图片的方式）。中间部分使用<div>标签将输入框和导航内容包裹起来；使用<div>标签来定义输入框区域，使用<input>标签定义输入框，使用<button>标签定义“搜索”按钮；使用列表标签<ul>和<li>来定义底部的快捷商品导航区域。【商业实例】“仿写淘宝首页”项目——编写网页元素任务二编写搜索框区域的HTML5代码02OPTION搭建网页结构【商业实例】“仿写淘宝首页”项目——编写网页元素任务三编写分类、轮播图和用户信息模块的元素01OPTION结构分析用<div>标签分别定义这几个模块，用列表标签<ul>和<li>来定义分类和轮播图上方的导航。使用<img>标签来定义轮播图，轮播图导航圆点、“登录”按钮、“注册”按钮和“开店”按钮同样使用列表标签<ul>和<li>来定义。使用<div>标签分别定义用户信息模块的头像和昵称。通知栏信息外层使用<div>标签包裹，使用<p>标签来定义每一条公告信息。【商业实例】“仿写淘宝首页”项目——编写网页元素任务三编写分类、轮播图和用户信息模块的元素02OPTION搭建网页结构【商业实例】“仿写淘宝首页”项目——编写网页元素任务三编写分类、轮播图和用户信息模块的元素02OPTION搭建网页结构【综合实训】设计黄山风景介绍网页二、实训内容一、实训目的掌握HTML5网页结构。掌握标题、段落标签的用法。ACB创建HTML5模板创建网页标题和段落插入图片和超链接D预览网页【单元小结】本单元首先介绍了HTML5网页结构及HTML5元素的概念，接着介绍了HTML5属性和常用的标签。通过本单元的学习，读者应该掌握Web前端常用标签的使用方法，并能够使用这些标签开发出基础的网页。THANKS单元3HTML5排版HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】3.1HTML5表格3.1.1表格属性3.1.2<th>和<td>的属性3.2HTML5框架3.3HTML5列表3.3.1有序列表3.3.2无序列表3.3.3自定义列表3.3.4列表嵌套【商业实例】“仿写淘宝首页”项目——
编写“猜你喜欢”模块任务一开发商品卡片任务二开发商品列表【综合实训】制作新闻列表页【单元小结】目录【学习导读】每一个网站都有其独特的风格，良好的网页布局和排版是吸引用户浏览网站的重要因素之一。HTML5提供了一些现成的标签来控制文本的布局，只有合理运用这些标签才能搭建出干净整洁的网页。学习HTML排版是进行网页布局和设计的基础，HTML5排版涉及使用HTML5来控制文本、图像和其他内容在网页中的位置和样式。本单元将详细介绍HTML5的表格、框架和列表的使用方法。学习导读【学习目标】知识目标1．掌握HTML5表格的基本使用方法。2．掌握HTML5框架的使用方法。3．掌握HTML5列表的使用方法。能力目标1．能够独立开发HTML5表格。2．能够使用HTML5框架实现嵌套。3．能够创建有序列表和无序列表。素质目标1．培养学生排版组合的能力。2．培养学生良好的思维能力。学习目标思维导图3.1HTML5表格HTML5表格是一种用于展示和组织数据的强大工具。表格用<table>标签定义。每个表格均有若干行（用<tr>标签定义），每行被分割为若干单元格（用<td>标签定义）。字母td指tabledata（表格数据），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。常用的表格标签标签描述<table>表格<th>表格的表头单元格<tr>表格的行<td>表格单元格<caption>表格标题<thead>表格的头部区域<tbody>表格的中间主体部分<tfoot>表格的底部区域表格结构3.1HTML5表格创建一个2行3列的表格，第一行是表头，第二行是表格数据，表格默认是没有边框的。代码如下所示（实例位置：单元3/3-1.html）。运行效果3.1HTML5表格利用表格属性，我们可以定义表格的宽高、背景颜色和对齐方式等，让表格呈现出不同的视觉效果。3.1.1表格属性常用的表格属性属性值描述border像素，默认值1规定表格单元是否拥有边框。3.1HTML5表格3.1.1表格属性创建一个受理统计系统的表格，表头包括受理员、受理数、自办数、直接解答、同意、比例、数量、建议件、诉求件和咨询件，为表头和表格内容设置不同的背景颜色。代码如下所示（实例位置：单元3/3-2.html）。运行效果3.1HTML5表格3.1.2<th>和<td>的属性<th>和<td>常用属性属性值描述colspan列数规定单元格可横跨的列数rowspan列数设置单元格可纵跨的行数下面使用HTML5表格制作一个计算器，计算器包含数字、运算符和计算结果显示屏。代码如下所示（实例位置：单元3/3-3.html）。3.1HTML5表格3.1.2<th>和<td>的属性运行效果3.2HTML5框架HTML5中有很多框架标签，但是大多数都弃用了，沿用至今的是<iframe>标签。使用<iframe>
</iframe>可以将框架置于一个HTML文件内，实现HTML网页的嵌套展示。使用<iframe>时需要提供一个嵌套的网页地址，并将地址赋给src属性，语法如下。常用的表格标签<iframesrc="URL"></iframe>属性值描述namename规定<iframe>的名称。srcURL规定在<iframe>中显示的文档的URL。3.2HTML5框架我们可以修改<iframe>链接的网页，必须使用name属性来修改。比如可以动态改变<iframe>的src属性的值，在<iframe>标签上添加name属性，在<a>标签上设置target属性的值为name属性的值，并将<a>标签的href属性值设置为第三方网站的链接。代码如下所示（实例位置：单元3/3-4.html）。运行效果3.3HTML5列表3.3.1有序列表常用的有序列表标签标签描述<ol>有序列表<li>有序列表和无序列表的一个列表项有序列表的type属性值属性描述type="1"数字序号type="a"有小写字母序号type="A"大写字母序号type="i"小写罗马序号type="I"大写罗马序号3.3HTML5列表3.3.1有序列表例如设置不同类型的有序列表，前面的序号标识符会递增，代码如下所示（实例位置：单元3/3-5.html）。运行效果3.3HTML5列表3.3.2无序列表常用的无序列表标签无序列表的type属性值标签描述<ul>无序列表<li>有序列表和无序列表的一个列表项属性描述type="circle"空心圆type="disc"实心圆type="square"实心方块3.3HTML5列表3.3.2无序列表无序列表项前面的标识符有实心圆、空心圆和实心方块，例如分别设置3种不同类型的无序列表，代码如下所示（实例位置：单元3/3-6.html）。运行效果3.3HTML5列表3.3.3自定义列表常用的自定义列表标签标签描述<dl>自定义列表<dt>自定义列表的标题<dd>自定义列表的内容自定义列表前面没有标识符，但是有固定长度的间距。例如设置一个自定义列表，分别设置标题和内容，代码如下所示（实例位置：单元3/3-7.html）。3.3HTML5列表3.3.3自定义列表<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>定义列表</title></head><body> <dl> <dt>自定义列表</dt> <dd>自定义列表的内容（前面有固定长度的间距）</dd> </dl></body></html>运行效果3.3HTML5列表3.3.4列表嵌套运行效果列表和其他标签一样，可以相互嵌套，并且可以实现不同的效果，以满足不同的布局需求。例如在自定义列表中嵌入无序列表和有序列表，代码如下所示（实例位置：单元3/3-8.html）。【商业实例】“仿写淘宝首页”项目——编写“猜你喜欢”模块任务一开发商品卡片01OPTION结构分析从图中
我们可以发现商品卡片主要由3个部分构成，采用左右布局。左边展示商品的图片，右边为上下结构，上面是商品名称和商品活动标签，下面是商品的价格。可以用<div>标签作为商品卡片的容器，使用<img>标签插入商品图片。使用<div>标签定义商品名称，标题里面使用<img>标签在商品名称中插入商品活动标签图片，商品名称使用<a>标签包裹，因为单击商品名称可跳转到商品详情页。商品价格部分使用<div>标签定义，其中的货币符号使用<span>标签定义，因为货币符号字体比价格小，且这样方便后续采用不同的样式。【商业实例】“仿写淘宝首页”项目——编写“猜你喜欢”模块任务一开发商品卡片02OPTION编写代码<divclass="item_link"><imgsrc="imgs/goods.jpg_.webp"/><divclass="goods_info"><imgsrc="imgs/12_12.png"/><ahref="#"target="_blank">厚味小巷烤鱼料<br/>200g纸包鱼家用商用烤鱼酱三种口味万州烤鱼料</a></div><divclass="goods_price"><span>¥</span>14.6</div></div>【商业实例】“仿写淘宝首页”项目——编写“猜你喜欢”模块任务二开发商品列表01OPTION结构分析从图中我们可以发现淘宝“猜你喜欢”模块分为上下两个部分，上面是“猜你喜欢”标题和一个活动标签，下方是商品列表，而商品列表由一个个商品卡片组合而成。我们可以用<div>标签将整个“猜你喜欢”模块包裹在一起，“猜你喜欢”标题用<h3>标签定义，里面分别用<span>标签和<img>标签包裹标题文字和活动标签，因为它们的样式不一样，需要使用不同标签进行区分。商品列表部分使用<div>标签定义，将所有商品卡片的布局内容放在商品列表里面即可，商品列表中可以放任意数量的商品卡片。【商业实例】“仿写淘宝首页”项目——编写“猜你喜欢”模块任务二开发商品列表02OPTION编写代码【综合实训】制作新闻列表页二、实训内容一、实训目的掌握HTML5列表的排版方法。掌握无序列表标签的用法。ACB创建HTML5模板创建无序列表作为新闻列表的容器编写新闻，包括新闻标题、新闻内容和新闻图片等D预览网页【单元小结】本单元首先介绍了HTML5表格的使用方法，包括表格的常用标签和属性；接着介绍了HTML5框架的使用方法和其常用属性，以及如何利用框架嵌入第三方网页；最后重点介绍了HTML5列表的使用方法，包括有序列表、无序列表和自定义列表的使用。通过本单元的学习，读者应该掌握HTML5的表格、框架和列表标签的使用方法，并能够运用这些标签来搭建具有复杂排版布局的网页。THANKS单元4HTML5交互控件HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】4.1HTML5区块内联4.1.1区块元素4.1.2内联元素4.2HTML5表单4.2.1输入框4.2.2下拉列表框4.2.3单选按钮4.2.4复选框4.2.5文本域4.2.6按钮4.3HTML5音视频控件4.3.1embed控件4.3.2object控件4.3.3audio控件4.3.4video控件【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域任务一编写用户登录模块任务二编写规则与协议、新手上路、付款方式和淘宝特色的
模块说明任务三开发淘宝首页底部区域【综合实训】制作个人信息调查表【单元小结】目录【学习导读】HTML5为网页开发者提供了许多新的交互控件，使得网页更加智能。这些控件包括输入框、下拉列表框、复选框等。通过这些控件，开发者可以轻松地实现各种复杂的交互效果。在学习HTML5交互控件之前，我们需要知道标签有不同的类型，如text、password、checkbox、radio等。这些类型分别对应着不同的输入方式。使用交互控件是搭建多元化网页的重要途径，通过使用交互控件，网页可以与用户进行交互，从而让用户的体验更好。本单元将详细介绍HTML5交互控件的使用方法。的表格、框架和列表的使用方法。学习导读【学习目标】知识目标1．掌握HTML5表单和表单元素的使用。2．掌握HTML5音视频控件的使用。能力目标1．能够独立开发HTML5表单控件。2．能够在网页中嵌入视频和音频。素质目标1．培养学生交互应用的能力。2．培养学生的思维发散能力。学习目标思维导图4.1HTML5区块内联4.1.1区块元素常见的区块元素包括标题标签（<h1>～<h6>）、段落标签（<p>）、<div>标签、列表标签（<ul>、<ol>等）和表格标签（<table>）等。例如定义一些区块元素，代码如下所示（实例位置：单元4/4-1.html）。运行效果4.1HTML5区块内联4.1.2内联元素常见的内联元素包括超链接标签（<a>）、<span>标签、图像标签（<img>）、粗体标签（<strong>）、输入框标签（<input>）和下拉列表框标签（<select>）等。内联元素与区块元素的区别内联元素一般都是基于语义（semantic）的基本元素。内联元素只能容纳文本或者其他内联元素，最原始的内联元素是<span>。属性内联元素区块元素宽度标签内容的宽度和上级元素的宽度一样宽高度标签内容的高度标签内容的高度显示多个内联元素显示在同一行多个区块元素换行显示控制宽高不可控制宽高可控制4.1HTML5区块内联4.1.2内联元素例如定义一些内联元素，代码如下所示（实例位置：单元4/4-2.html）。运行效果4.2HTML5表单表单是一个包含表单元素的区域。表单元素是表单中具体内容的呈现，如输入框（input）、文本域（textarea）、下拉列表框（select）、单选按钮（radio）、复选框（checkbox）等。ABHTML5表单（form）在网页中主要负责数据采集，利用表单可以实现网页与用户的交互，收集不同类型的用户输入，并且提交数据。4.2HTML5表单常用的HTML5表单标签标签描述<form>供用户输入的表单<input
id=""
list="">输入域<textarea>文本域
(一个多行的输入控件)<label
for=""><input>
元素标签的输入标题<fieldset>一组相关的表单元素使用外框包含起来<legend><fieldset>
元素的标题<select>下拉选项列表<optgroup
label="标题">下拉选项列表的选项组<option>下拉选项列表中的选项<button>定义一个点击按钮<datalist
id="">指定一个预先定义的输入控件选项列表4.2HTML5表单<input>标签通过type属性来控制标签展示的具体形式，type属性的默认值为text，也就是输入框，常用的type属性值如表所示。4.2.1输入框值描述button定义可点击的按钮（大多与
JavaScript
使用来启动脚本）checkbox定义复选框。color定义拾色器。date定义日期字段（带有
calendar
控件）datetime定义日期字段（带有
calendar
和
time
控件）datetime-local定义日期字段（带有
calendar
和
time
控件）month定义日期字段的月（带有
calendar
控件）week定义日期字段的周（带有
calendar
控件）time定义日期字段的时、分、秒（带有
time
控件）email定义用于
地址的文本字段file定义输入字段和
"浏览..."
按钮，供文件上传hidden定义隐藏输入字段值描述image定义图像作为提交按钮number定义带有
spinner
控件的数字字段password定义密码字段。字段中的字符会被遮蔽。radio定义单选按钮。range定义带有
slider
控件的数字字段。reset定义重置按钮。重置按钮会将所有表单字段重置为初始值。search定义用于搜索的文本字段。submit定义提交按钮。提交按钮向服务器发送数据。tel定义用于电话号码的文本字段。text默认。定义单行输入字段，用户可在其中输入文本。默认是
20
个字符。url定义用于
URL
的文本字段。4.2HTML5表单例如定义输入框控件，代码如下所示（实例位置：单元4/4-3.html）。4.2.1输入框<!--单行输入框--><inputtype="text"/>在网页中打开的效果如下所示。4.2HTML5表单<select>标签表示下拉列表框，用<option>标签定义下拉列表中的选项。例如定义一个国家下拉列表框，代码如下所示（实例位置：单元4/4-4.html）。4.2.2下拉列表框<selectname="contry"><optionvalue="none">--选择国家--</option><optionvalue="usa">美国</option><optionvalue="en">英国</option><optionvalue="cn"selected="selected">中国</option></select>运行效果4.2HTML5表单将type属性的值设置为radio时展示出来的元素为单选按钮，使用单选按钮时必须定义name属性，用来表示哪些选项属于同一个分组，否则不能单选。例如定义一组单选按钮，代码如下所示（实例位置：单元4/4-5.html）。4.2.3单选按钮<inputtype="radio"name="a"/>选项1<inputtype="radio"name="a"/>选项2<inputtype="radio"name="a"/>选项3<inputtype="radio"name="a"/>选项4运行效果4.2HTML5表单将type属性的值设置为checkbox时展示出来的元素为复选框，使用复选框时必须定义name属性，用来表示选项属于同一个分组或属于不同分组。例如定义一组复选框，代码如下所示（实例位置：单元4/4-6.html）。4.2.4复选框<inputtype="checkbox"name="b"/>选项1<inputtype="checkbox"name="b"/>选项2<inputtype="checkbox"name="b"/>选项3<inputtype="checkbox"name="b"/>选项4运行效果4.2HTML5表单文本域也称为多行文本框，支持输入多行文字内容，并且可以通过设置属性或者拖曳改变文本域的大小。HTML5中一般使用<textarea>标签来定义文本域，代码如下所示（实例位置：单元4/4-7.html）。4.2.5文本域<textarea></textarea>运行效果4.2HTML5表单将type属性的值设置为button时展示出来的元素为按钮，在HTML5中也可以使用<button>标签来定义按钮。下面使用两种不同的方式来定义按钮（实例位置：单元4/4-8.html）。4.2.6按钮<button>按钮</button><inputtype="button"value="按钮"/>运行效果4.3HTML5音视频控件HTML5音视频控件提供了一种方便且高效的方式来将音频和视频内容嵌入Web网页中。这些控件基于HTML5的<audio>和<video>标签，它们使得开发者可以轻松地控制音频和视频的播放、暂停、音量等。HTML5音视频控件还支持字幕、封面图等，进一步提升了用户体验。由于HTML5音视频控件具有良好的跨平台性，因此它们已经成为Web开发中的重要组成部分。0102034.3HTML5音视频控件常用的音视频控件标签说明<embed>音视频，支持单一视频个数<object>音视频，支持单一视频个数<audio>音频，支持多种视频个数<video>
视频，支持多种视频个数4.3HTML5音视频控件4.3.1embed控件<embed>标签用于定义外部（非HTML）内容的容器。这是一个HTML5标签，在HTML4.01中无此标签，但是在所有浏览器中都有效。使用方法是将文件地址赋给src属性，如下所示。<embedheight="50"width="100"src="media/music.mp3">例如通过<embed>标签分别引入一个音频和视频文件，代码如下所示（实例位置：单元4/4-9.html）。4.3HTML5音视频控件4.3.1embed控件<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>音视频播放</title></head><body><embedheight="70"align="center"src="./media/music.mp3"/><br/><br/><embedsrc="./media/video.mp4"/></body></html>运行效果4.3HTML5音视频控件4.3.2object控件使用<object>标签也可以定义外部（非HTML）内容的容器。<object>标签用于包含对象，比如音频、视频、JavaApplet、ActiveX、PDF以及Flash文件等。使用方法是将文件地址赋给data属性，如下所示。<objectheight="50"width="100"data="media/music.mp3"/>例如通过<object>标签分别引入一个音频和视频文件，代码如下所示（实例位置：单元4/4-10.html）。4.3HTML5音视频控件4.3.2object控件运行效果<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>音视频播放</title></head><body><objectheight="70"data="media/music.mp3"></object><br/><br/><objectdata="media/video.mp4"></object></body></html>4.3HTML5音视频控件4.3.3audio控件audio控件只能用于播放音频文件，即使播放视频文件也是没有画面的。音频文件的格式非常多，而<audio>标签并不全部支持，当前<audio>标签支持3种音频格式。不同浏览器对音频文件的支持情况格式IE9Firefox3.5Opera10.5Chrome3.0Safari3.0OggVorbis
✅✅✅
MP3✅
✅✅Wav
✅✅
✅4.3HTML5音视频控件4.3.3audio控件使用方法是将音频文件地址赋给src属性，如下所示。<audioheight="50"width="100"src="media/music.mp3"/>为了兼容不同浏览器，可以利用<source>标签准备多种格式的音频文件，这样浏览器就可以选择它所支持的格式的音频文件进行播放。例如在<audio>标签下使用<source>标签准备多个格式的音频文件，代码如下所示（实例位置：单元4/4-11.html）。运行效果4.3HTML5音视频控件4.3.4video控件video控件只能用于播放视频文件，在HTML5中通过<video>标签来完成视频的插入。基本语法如下所示。不同浏览器对视频文件的支持情况<videosrc="文件地址"controls="controls"></video>格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No4.3HTML5音视频控件4.3.4video控件同音频控件audio一样，为了兼容不同浏览器，可以事先准备多种格式的视频文件，例如在<video>标签下使用<source>标签准备多种格式的视频文件，代码如下所示（实例位置：单元4/4-12.html）。运行效果<videowidth="320"height="240"controls> <sourcesrc="./media/video.mp4"type="video/mp4"> <sourcesrc="./media/video.ogg"type="video/ogg">
您的浏览器不支持video标签。</video>【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务一编写用户登录模块01OPTION结构分析从图中我们可以发现用户登录模块主要由3个部分组成：登录表单；微博和支付宝登录的快捷入口；忘记密码、忘记账号名及免费注册的链接导航。可以用<div>标签作为用户登录模块的容器。使用<form>表单标签设置登录表单，表单标签中用两个<input>标签分别作为用户名和密码的输入框，用<button>标签定义“登录”按钮。“微博登录”和“支付宝登录”可以使用<div>标签包裹，里面放两个<a>标签定义链接。使用<div>标签作为“忘记账号名”“忘记密码”“免费注册”的外层容器，里面使用<a>标签定义导航链接。表单上方还有一个提示登录信息错误的隐藏布局，使用<div>标签进行布局，当登录失败时将提示信息展示在表单上方。【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务一编写用户登录模块02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务一编写用户登录模块02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务二编写规则与协议、新手上路、付款方式和淘宝特色的模块说明01OPTION结构分析从图中我们可以发现布局主要分成4列，每一列中的布局都是上下结构，上面由一个图标和文字标题组成，下方为导航链接列表。可以用<div>标签作为整个模块的容器，在里面分别定义4个卡片，使用<div>标签定义卡片区域，里面使用一个<div>标签定义头部区域，内部使用<i>标签定义图标，使用<span>标签定义文字标题。使用<ul>和<li>标签定义导航链接列表，内部使用<a>标签作为链接容器。【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务二编写规则与协议、新手上路、付款方式和淘宝特色的模块说明02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务三开发淘宝首页底部区域01OPTION结构分析将底部区域拆分成6个部分，大部分都是导航链接，最下面的部分是图片列表。可以用<div>标签作为底部区域的容器，里面拆分成6个部分。每个部分使用<p>标签作为外部标签，内部使用<span>标签放置导航链接，使用<a>标签定义并添加链接地址。使用<span>标签定义最下面的图片列表，通过设置<span>标签将图片展示出来。【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务三开发淘宝首页底部区域02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务三开发淘宝首页底部区域02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务三开发淘宝首页底部区域02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务三开发淘宝首页底部区域02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务三开发淘宝首页底部区域02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务三开发淘宝首页底部区域02OPTION编写代码【综合实训】制作个人信息调查表二、实训内容一、实训目的掌握HTML5区块元素的用法。掌握各种表单控件的用法。ACB创建HTML5模板创建网页标题和介绍开发表单内容D预览网页【单元小结】本单元主要介绍了HTML5常用的区块元素和内联元素，还介绍了HTML5表单元素以及常用的表单类型控件，包括这些控件的属性和使用方法；另外介绍了HTML5中音视频控件的使用方法。通过本单元的学习，读者应该掌握HTML5中表单、音视频控件的使用方法，使用这些控件能够进一步丰富网页的交互行为和表现形式。THANKS单元5CSS3基础HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】5.1什么是CSS35.2CSS3语法5.3CSS3引入方式5.3.1外部样式表5.3.2内部样式表5.3.3内联样式5.3.4引入方式优先级5.4CSS3基础选择器5.4.1标签选择器5.4.2id选择器5.4.3class选择器5.4.4选择器优先级5.5CSS3复杂选择器5.5.1直接子元素选择器5.5.2相邻兄弟选择器5.5.3后续兄弟选择器5.5.4伪类选择器5.5.5属性选择器5.5.6后代选择器5.6CSS3基础属性5.6.1CSS3尺寸属性5.6.2CSS3背景属性5.6.3CSS3超链接属性【商业实例】“仿写淘宝首页”
项目——开发顶部
导航和搜索框区域的
样式任务一设置顶部导航区域的样式任务二设置搜索框区域的样式【综合实训】制作文章详情网页【单元小结】目录【学习导读】CSS用于控制网页样式和进行网页布局，通过CSS可以实现丰富的视觉效果。我们平时浏览的每个网页外观都是不一样的，有不同的布局和不同的颜色，这些效果都是通过CSS实现的，本单元将详细介绍CSS3的基础知识。学习导读【学习目标】知识目标1．掌握CSS3文件的引入方法。2．掌握CSS3选择器的使用方法。3．掌握CSS3属性的设置。能力目标1．能够独立开发CSS3样式。2．能够引入CSS3文件。3．能够熟练运用CSS3选择器。素质目标1．培养学生样式组合的能力。2．培养学生的思维能力。3．培养学生的创新能力。学习目标思维导图5.1什么是CSS3CSS是对万维网页面的样式进行设置的一种标记语言，不仅可以静态地修饰网页，还可以结合各种脚本语言动态地对网页元素进行格式化，拥有对网页对象和模型样式进行编辑的能力。CSS3是CSS的第三个版本，是用于控制网页外观和布局的标准样式表语言。CSS3引入了许多新的功能和属性，以丰富网页的样式，增强网页的交互效果。5.2CSS3语法CSS3的语法规则一般在<style>标签中定义，通过一个选择器来选择元素，并定义元素的属性和值，属性和值以键值对的方式出现。语法规则如下：选择器{
声明1；
声明2；}选择器通常是需要改变样式的HTML元素，每条声明由一个属性和一个值组成。属性是希望设置的样式属性（styleattribute），每个属性有一个值。属性和值用冒号分开。使用方法如下所示。body{ color:white; background:black;}5.3CSS3引入方式5.3.1外部样式表使用外部样式表是最常见的方式，即将CSS3代码保存在一个独立的CSS3文件中，然后在HTML文件中使用<link>标签将样式表链接到网页。例如使用<link>标签将CSS3文件先加载到网页中，再进行编译显示，代码如下。<head> <linkrel="stylesheet"type="text/css"href="style.css"></head>为了提升网站的性能，使网站便于维护，一般都使用外部样式表。当样式需要被应用到多个网页时，外部样式表是最理想的选择，我们可以通过更改一个CSS3文件来改变整个网站的外观。5.3CSS3引入方式5.3.2内部样式表直接在HTML5文件内部使用<style>标签引入内部样式表，通常放在<head>标签中，使用方法如下。<head><style> hr{color:sienna;} p{margin-left:20px;} body{background-image:url("images/back.gif");}</style></head>内部样式表的优点是便于在同网页中修改样式，缺点是不利于在多网页间共享代码，对内容与样式的分离也不够彻底。5.3CSS3引入方式5.3.3内联样式内联样式也是把CSS3代码和HTML代码放在同一个文件中，其跟内部样式表的不同之处在于，内联样式不是在标签对中定义，而是在标签的style属性中定义。使用方法如下。<pstyle="color:sienna;margin-left:20px">这是一个段落。</p>内联样式必须依赖于某个标签，不通用，但是优先级最高。5.3CSS3引入方式5.3.4引入方式优先级在CSS3中，引入方式的优先级决定了多个样式之间的应用顺序。内联样式具有最高的优先级，将覆盖其他任何样式，外部样式优先级最低。以下是CSS3引入方式的优先级从高到低的顺序。内联样式>内部样式>外部样式>浏览器默认样式5.4CSS3基础选择器标签选择器也称为元素选择器，使用HTML标签作为选择器的名称，以标签名作为样式应用的依据。标签选择器会对同一类标签的元素同时应用设置的样式。例如给<p>标签设置居中样式，代码如下。5.4.1标签选择器p{ text-align:center;}例如设置HTML文档中所有<p>标签的文字颜色为红色，代码如下所示（实例位置：单元5/5-1.html）。5.4CSS3基础选择器5.4.1
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 个性化推送式广告制作规范
- 华为公司战略布局顾问面试全解析
- 制造业生产技术部总经理的生产效率提升策略
- 制造业生产经理的招聘与选拔经验
- 政府采购专家评审团成员的选拔与培训经验
- 现代办公场所绿色改造及维护策略
- 首创科技公司行政主管的年度工作计划
- 介绍自己的物品作文
- 航空航天企业工程师面试技巧
- 京東電商平台數據分析的關鍵成功因素
- 新媒体编创-图文 短视频 直播（微课版）PPT完整全套教学课件
- 内蒙古自治区锡林郭勒盟高职单招2023年职业技能真题及答案
- 1-船舶碰撞应急预案(预案-001)
- 教育研究方法完整PPT
- 医疗器械相关压力性损伤及预防
- 广联达软件学习报告
- 任务3.3 空间数据误差校正
- GB/T 6533-2012原油中水和沉淀物的测定离心法
- GB/T 37612-2019耐蚀合金焊丝
- GB 28380-2012微型计算机能效限定值及能效等级
- 学前教育史全套课件
评论
0/150
提交评论