《Web前端开发基础》课件-1认识网页与网站_第1页
《Web前端开发基础》课件-1认识网页与网站_第2页
《Web前端开发基础》课件-1认识网页与网站_第3页
《Web前端开发基础》课件-1认识网页与网站_第4页
《Web前端开发基础》课件-1认识网页与网站_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

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

文档简介

《Web前端基础》课程认识网页与网站第一部分Knowledge支撑知识网页（WebPage）是网站中的一个基本单位，它是通过超文本标记语言（HTML）编写的，可以在浏览器中显示和访问，网页通常包含文本、图片、音频、视频等多媒体元素，以及链接到其他网页的超链接。网站（Website）是一个由多个网页（WebPage）组成的集合，通常包含一个或多个主题，提供相关的信息和服务，网站可以是个人的、企业的、政府的等各种类型，用于展示、交流、销售等多种目的。网页(web)与网站1按网页在网站中的位置进行分类，可以分为主页和内页；主页：用户进入网站时看到的第一个页面就是主页（homepage）。内页：通过主页中的超级链接，打开的网页就是内页。按网页的表现形式进行分类，可以分为静态网页和动态网页。静态网页：指用HTML语言编写的网页，其制作简单易学，但缺乏灵活性，在浏览网页时浏览者和服务器不发生交互。动态网页：使用ASP、PHP、JSP、ASP.NET等程序生成的网页，可以与浏览者进行交互，也称为交互式网页，如可以收集浏览者填写的表单信息等。网页的相关概念及基本要素1网页的基本要素（1）页面标题页面标题网页基本要素1（2）网站标志（3）网页尺寸1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。1440*900下，网页宽度保持在1420以内，页面居中，如果满框显示的话,高度是800-810之间.就不会出现水平滚动条和垂直滚动条。网页网站的相关概念及基本要素1（4）导航栏（5）版权区网页网站的相关概念及基本要素1网页与HTML1HTML是HyperTextMarkupLanguage的缩写，中文翻译为“超文本标记语言”，是制作网页的最基本语言。HTML的出现由来已久，1993年HTML首次以因特网的形式发布。随着HTML的发展，W3C（WorldWideWebConsortium，万维网联盟）掌握了对HTML规范的控制权，负责后续版本的制定工作。然而，在快速发布了HTML的4个版本后，HTML迫切需要添加新的功能，制定新规范。在2004年，一些浏览器厂商联合成立了WHATWG工作组。2006年，W3C组建了新的HTML工作组，明智地采纳了WHATWG的意见，并于2008年发布了HTML5的工作草案。

2014年10月29日，万维网联盟宣布，经过8年的艰辛努力，HTML5标准规范终于制定完成，并公开发布。HTML5优势1（1）解决了跨浏览器问题在HTML5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到不同的页面效果。在HTML5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需简单地添加JavaScript代码就可以使用新的元素。HTML5优势1（2）新增了多个新特性新的特殊内容元素，比如header、nav、section、article、footer。新的表单控件，比如calendar、date、time、email、url、search。用于绘画的canvas元素。用于多媒体的video和audio元素。对本地离线存储的更好的支持。地理位置、拖拽、摄像头等API。HTML5优势1（3）用户优先的原则安全机制的设计

为确保HTML5的安全，在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于来源的安全模型，该模型不仅易用，而且针对不同的API（ApplicationProgrammingInterface—应用程序编程接口）都通用。（4）表现和内容分离

为了避免可访问性差、代码高复杂度、文件过大等问题，HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题，一些陈旧的表现和内容的代码还是可以兼容使用的。HTML已经尽量将“网页的内容结构”与“网页的排版布局”分开，它的主要原则如下。(1)用标签元素描述网页的内容结构。(2)用CSS描述网页的排版布局。(3)用JavaScript描述网页的事件处理，即通过鼠标或键盘在网页元素上进行动作(如单击、双击、输入)后执行的程序。HTML5优势1（5）化繁为简的优势新的简化的字符集声明。新的简化的DOCTYPE。简单而强大的HTML5API。以浏览器原生能力替代复杂的JavaScript代码。

为了实现这些简化操作，HTML5规范需要比以前更加细致、精确。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。HTML5浏览器支持情况1现今浏览器的许多新功能都是从HTML5标准中发展而来的。

目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，通过对这些主流Web浏览器的发展策略的调查，发现它们都在支持HTML5上采取了措施。《Web前端基础》课程使用HTML5制作第一个页面任务：创建第1个HTML5页面第一部分Knowledge开发工具任务效果展示2网页制作过程中，为了开发方便，通常我们会选择一些较便捷的工具，如Editplus、notepad++、VScode、Dreamweaver等。实际工作中，最常用的网页制作工具是HBuilder，课程中的案例将全部使用HBuilderX。接下来使用HBuilder来创建一个HTML5页面。2Hbuilder的工作界面22Hbuilder的工作界面3HTML标记什么是HTML标记？3HTML标记带有“<>”符号的元素被称为HTML标记例如：<html>、<head>、<body>都是HTML标记也称为HTML标签或HTML元素3HTML标记通常将HTML标记分为两大类，分别是“双标记”与“单标记”双标记单标记双标记也称体标记，是指由开始和结束两个标记符组成的标记。单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。<标记名/>表示该标记的作用开始，一般称为“开始标记表示该标记的作用结束，一般称为“结束标记”<标记名>内容</标记名>HTML标记3HTML注释标记如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。基本语法格式<!--注释语句-->标记属性3标记的属性位置语法格式字体位置字号颜色<标记名属性1="属性值1"属性2="属性值2"…>内容</标记名><hrcolor="red"size="3px"width="80%"/>HTML标记31.<!DOCTYPE>标签<!DOCTYPE>声明必须位于HTML文档中的第一行，也就是位于<html>标签之前。该标签告知浏览器文档所使用的HTML规范。在所有HTML文档中规定!DOCTYPE是非常重要的，这样浏览器就能了解预期的文档类型。网页基本结构标签42.<html>标签此元素可告知浏览器其自身是一个HTML文档。xmlns属性：是用来定义xmlnamespace（命名空间）的，如果需要使用符合XML规范的XHTML文档，则应该在文档中的<html>标签中至少使用一个xmlns属性，以指定整个文档所使用的主要命名空间。

<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由<head>标签定义，而主体由<body>标签定义。网页基本结构标签43.<head>标记<head>标记用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用<title>标题、<meta/>元信息、<link>外部文件、<style>样式信息。文档的头部描述了文档的各种属性和信息，包括文档的、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。网页基本结构标签44.<meta>标签<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。5.<title>标签<title>标签定义文档的标题，它是head部分中唯一必需的元素。浏览器会以特殊的方式来使用标题，并且

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

温馨提示

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

最新文档

评论

0/150

提交评论