HTML 前端 实例与教程 7_第1页
HTML 前端 实例与教程 7_第2页
HTML 前端 实例与教程 7_第3页
HTML 前端 实例与教程 7_第4页
HTML 前端 实例与教程 7_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

单元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搭建网页结构【商业实例】“仿写淘宝首页”项目——编写网页元素任务三编写分类、轮播图和用户信息模

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论