网页制作案例教程HTML5+CSS3 课件 项目1 网页制作入门_第1页
网页制作案例教程HTML5+CSS3 课件 项目1 网页制作入门_第2页
网页制作案例教程HTML5+CSS3 课件 项目1 网页制作入门_第3页
网页制作案例教程HTML5+CSS3 课件 项目1 网页制作入门_第4页
网页制作案例教程HTML5+CSS3 课件 项目1 网页制作入门_第5页
已阅读5页，还剩34页未读， 继续免费阅读

下载本文档

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

文档简介

HTMLCSS项目1网页制作入门网页制作案例教程（HTML5+CSS3）教学目标了解网页基本概念及Web标准。1了解熟悉熟悉掌握2熟悉HTML语言的发展历史。3掌握VSCode

工具的使用。能够使用VSCode创建简单的网页熟悉HTML5页面文档结构。41Web的基本概念2HTML和HTML53Web前端开发工具4制作简单HTML5页面任务分解5HTML5页面基础PART0101Web的基本概念Web的基本概念网页网页是网站中的一个页面，是Internet用于展示信息的一种形式。网页主要由文字、图像和超链接等元素构成。图像文字超链接Web的基本概念开发者眼中的网页？一般人见到的网页？Web的基本概念网站多个页面集合在一起组成网站。Web的基本概念网站每个网站有一个站点文件夹（又称站点根目录），里面包含了内容相关的网页文件、网页中使用的图像文件、样式文件以及脚本文件。为了分类管理，站点文件夹下可以有很多子文件夹。Web的基本概念浏览器浏览器是用来检索、展示以及传递Web信息资源的应用程序。主流的浏览器分为IE、Chrome、Firefox、Safari、Opera等几大类。Web的基本概念W3CW3C（英文WorldWideWebConsortium的缩写）中文译为“万维网联盟”，是一个国际标准化组织。W3C最重要的工作是发展Web规范，制定了一系列标准，HTML、XML、CSS的标准就是由W3C来定制的。Web开发者遵循这些标准。Web的基本概念Web标准Web标准是由W3C和其他标准化组织制定的一系列标准的集合。包含HTML、XHTML、CSS、JavaScript等等。结构标准表现标准行为标准结构标准用于对网页元素进行组织和分类，主要包括XML、HTML和XHTML。表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。行为标准是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript。Web的基本概念相关名词名词名词释义WWWWWW（英文WorldWideWeb的缩写）中文译为“万维网”，是Intertnet提供的一种网页浏览服务。URLURL（英文UniformResourceLocator的缩写）中文译为“统一资源定位符”URL其实就是Web地址，俗称“网址”。DNSDNS（英文DomainNameSystem的缩写）是域名解析系统。HTTPHTTP(英文Hypertexttransferprotocol的缩写)中文译为超文本传输协议，规定了浏览器和万维网服务器之间互相通信的规则。http信息是明文传输，https则是加密传输协议。PART0202HTML和HTML5HTML和HTML5HTML(HyperTextMarkupLanguage)，译为“超文本标记语言”，是一种用于创建网页的标准标记语言。HTML网页主要是通过HTML标记对网页中的文本、图片、超链接等内容进行描述。<img>是一个图像标记，它定义了在网页中要显示一副图像，并通过src属性指定了图像的位置，width属性指定了图像的宽度。HTML和HTML5HTML2.01995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布。HTML3.21997年1月14日，W3C推荐标准。HTML4.01997年12月18日，W3C推荐标准。HTML4.011999年12月24日，W3C推荐标准。HTML52008年1月22日公布第一份正式草案，2014年10月底定稿。由于各个浏览器支持的不是很统一，所以还没有得到广泛应用。HTML语言发展至今，经历了六个版本，这个过程中新增了许多HTML标记，同时也淘汰了一些标记。任务实现

HTML5是超文本标记语言的第5代版本，是最新的HTML标准，HTML5由不同的技术构成，在互联网中得到了非常广泛的应用。HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代产生的。HTML和HTML5HTML和HTML5良好的用户体验增加了许多实用的特性化繁为简的优势解决了跨浏览器问题新的语义元素：<header>,<footer>,<nav>,<aside>...新的表单控件：数字、日期、时间...媒体和画布功能：<video>、<audio><canvas>强大的新API：本地存储取代cookie...之前由于各个浏览器不统一，因为修改浏览器兼容引起的bug浪费了大量的时间。在HTML5中视频、音频、图像、动画都会标准化，会解决浏览器兼容这个问题。HTML5规范以“用户至上”为原则。简化了DOCTYPE和字符集的声明。新增了部分功能，这些功能可以代替JavaScript，代码页面更简洁。HTML5的优势HTML和HTML5文档结构变化HTML4文档结构HTML5文档结构VS<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>无标题文档</title></head><body></body></html><!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body></body></html>HTML和HTML5

目前大部分主流的浏览器都支持HTML5特性，最新版本的

Safari、Chrome、Firefox以及Opera支持某些HTML5特性。InternetExplorer9及其以上版本将支持某些HTML5特性。HTML5的对浏览器的支持PART0303Web前端开发工具Notepad++是一款Windows环境下的免费的代码编辑器，记事本的增强版。支持HTML，CSS，JavaScript，Java，PHP等多种计算机程序语言。可以作为前端开发一个的入门工具。开发工具WebStorm是一个比较专业前端开发软件，支持代码高亮、智能补全、Git等功能，还支持代码调试、重构等功能，相对其他软件来说，体积比较大，功能也更复杂，在项目管理、团队协作开发中经常会用到。Dreamweaver是集网页制作和管理于一身的所见即所得网页代码编辑器。支持HTML、CSS、JavaScript、PHP等语言，使用可视化工具，可以快速制作和进行网站建设。可视化工具会产生冗余代码，适合做入门工具。VisualStudioCode简称“VSCode”，是由微软推出的一款跨平台、开源、免费的代码编辑器，支持多种编程语言和框架，由于其丰富的功能和良好的用户体验，成为了众多开发者的首选。开发工具开源免费开源免费的工具对于初学者来说非常方便。跨平台VSCode支持Windows、macOS和Linux等多种操作系统。简单易用VSCode具有语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。可扩展，插件丰富VSCode的插件扩展系统非常强大，通过安装插件，可以轻松扩展VSCode的功能。运行速度快VSCode的文件大小和占用内存较小，轻巧极速。VSCode特点开发工具VSCode官网下载地址下载开发工具如果下载速度慢，可以复制下载网址，使用国内镜像服务器。/stable/695af097c7bd098fbf017ce3ac85e09bbc5dda06/VSCodeUserSetup-x64-1.79.2.exe（原地址）。在浏览器地址栏中粘贴原地址，并修改为镜像服务器地址，按回车键进行下载：/stable/695af097c7bd098fbf017ce3ac85e09bbc5dda06/VSCodeUserSetup-x64-1.79.2.exe（镜像服务器地址）下载开发工具用户界面编辑区菜单栏标题栏侧边栏活动栏状态栏开发工具汉化

VSCodPART0404制作简单HTML5页面从火箭厂房到卫星车间，从天和遨游到行星探测，随着一项项追星逐月的重大航天工程的加速推进，中国航天开启了全面建设航天强国新征程。下面我们制作一个关于航天飞行任务的一个简单网页制作简单HTML5页面攀科技高峰，服务国家发展大局制作简单HTML5页面网页

分析标题水平线图像段落制作简单HTML5页面制作

步骤新建项目文件夹，准备素材1新建文件，生成页面基本代码3打开VSCode，打开项目文件夹24输入网页标题和内容制作简单HTML5页面<body>

<h2>神舟十三号载人飞船飞行任务</h2>

<hr/>

<imgsrc="img/ship.jpg"width="300px"alt="">

<p>2021年10月16日0时23分，搭载神舟十三号载人飞船的长征二号F遥十三运载火箭在酒泉卫星发射中心按照预定时间精准点火发射。

</p>

</body>制作简单HTML5页面欣赏源自中国载人航天网：/fxrw/PART0505HTML5页面基础HTML5页面基础HTML5文档基本格式文档类型声明语句用来向浏览器说明使用的是哪种HTML标准，<!DOCTYPEhtml>声明文档类型是html；meta标记<metacharset=“utf-8”>，声明使用utf-8字符集，也可以使用gb2312字符集；<title>标记定义网页的标题。根标记<html>，<html>标记文档开始，</html>标记文档结束；头部<head>标记，用于封装位于头部的标记：<meta>、<title>、<link>、<style>等；主体<body>标记，body标记里面包含要显示的网页内容；HTML5页面基础标记<h1>飞行任务</h1><hr><imgsrc="img/shenzhou.jpg"alt=""width="300px"><p><strong>发射时间:</strong>2021年10月16日0时23分</p>带有“<>”符号的元素被称为HTML标记，也称为HTML标签或HTML元素通常将HTML标记分为两大类：“双标记”与“单标记”。双标记由开始和结束两个标记符组成的标记。<标记名>内容</标记名>单标记指用一个标记符号即可完整地描述某个功能的标记。<标记名/>HTML5页面基础属性基本语法格式<标记名属性1="属性值1"属性2="属性值2"…>内容</标记名>在HTM

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

温馨提示

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

最新文档

评论

0/150

提交评论