网页基础开发教程 2_第1页
网页基础开发教程 2_第2页
网页基础开发教程 2_第3页
网页基础开发教程 2_第4页
网页基础开发教程 2_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

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

文档简介

项目1创建第一个HTML5网页HTML5基础了解Web前端开发技术了解Web相关概念熟悉常用的浏览器了解常用的网页编辑软件能够创建简单的HTML5网页项目描述知识准备项目实现项目小结测试与考核实训创建第一个HTML5网页创建一个空文件夹，作为目录文件夹，文件夹名称为“chapter01”；启动VSCode，打开目录文件夹；在该文件夹中创建一个HTML文件，文件名为“demo01.html”；在网页上显示：“这是我的第一个HTML5网页”。网页浏览效果如图1-1所示。项目描述图1-1第一个网页项目描述知识准备项目实现项目小结测试与考核实训认识Web网页浏览器Web标准网页制作工具什么是网页?什么是HTML?网页的形成?知识准备1.认识网页1.什么是网页网站：是指在因特网上根据一定的规则，使用

HTML

等制作的用于展示特定内容相关的网页集合。网页：是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页：是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm

或

.html

后缀结尾的文件，是通过HTML语言创建出来的，因此将其俗称为

HTML文件。1.认识网页2.什么是HTMLHTML

：超文本标记语言(HyperTextMarkupLanguage)

，它是用来描述或创建网页的一种语言。HTML

不是一种编程语言，而是一种标记语言

(markuplanguage)。

标记语言：一套标记标签(markuptag)，由标签组成的，又称为超文本标签语言。超文本，2层含义：可以加入图片、声音、动画等内容（超越了文本限制

），都由对应的标签创建（标记）。

例如，网页中有图片，通过图像标签去创建将图片放到网页中。2.可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本

）。1.认识网页3.网页的形成网页的形成：本质上是开发者用代码编写指令，浏览器执行并渲染指令的过程。

它主要涉及三个环节：（1）前端开发：前端工程师在.html文件中，使用各种HTML标签来定义和描述网页的结构与内容元素。（2）浏览器解析：浏览器内核会读取并解析这些HTML标签，识别出其中的文本、图片、链接等元素。（3）页面渲染：解析完成后，浏览器会将代码“翻译”成可视化的图形界面，最终将完整的网页呈现给用户。前端人员开发代码->浏览器执行代码（解析、渲染）----->生成Web页面浏览器图标浏览器名称开发主体

/内核核心特性与优势夸克浏览器阿里巴巴优视科技（Chromium+自研U4双核）1.以“轻、快、简”为设计原点；2.融入AI智能内核，重构信息获取交互逻辑；3.双核驱动保障兼容性与性能。谷歌浏览器谷歌公司（Blink引擎）1.开源架构，稳定性、安全性与响应速度优异；2.界面简约，广告屏蔽功能强大；3.开发者工具成熟完善。火狐浏览器Mozilla公司（Gecko引擎）1.开源且可开发程度高；2.严格执行Web标准，HTML5支持度良好；3.网页调试功能强大。Edge浏览器微软公司（Chromium内核）1.功能全面，支持扩展程序；2.界面简洁实用，适配主流Web技术；3.Windows10自带，用户基数稳定。Opera浏览器Opera软件公司（Blink引擎）1.速度快、体积小，节省系统资源；2.安全性高，插件生态丰富（广告拦截、网页翻译等）；3.适配Blink引擎标准。浏览器是网页显示、运行的平台。常用的浏览器有夸克、谷歌（Chrome）、火狐（Firefox）、Edge浏览器和Opera浏览器等，如表所示。2.浏览器目前国内一般浏览器都会采用

Webkit/Blink

内核，如

360、UC、QQ、搜狗等，不单独开发内核，既节省成本，又能投入使用。开发测试：优先使用Chrome和Firefox的开发者工具3.Web标准（重点）1.什么是Web标准定义：Web

标准是由万维网联盟（W3C）

等国际组织制定的一系列技术规范与准则的集合。目标：确保网页内容在任何浏览器、设备或平台上都能长期、稳定、可访问地呈现和工作。核心思想：

将网页的内容（结构）、样式（表现）和行为（交互）分离开来。3.Web标准（重点）2.为什么需要Web标准——“浏览器大战”的教训过去（非标准时代）网景（Netscape）与微软（IE）各自为政，创建私有语法。开发者痛点：

同一网页需要为不同浏览器编写多套代码，开发和维护成本极高。用户痛点：

网页在某些浏览器中布局错乱、功能失效，体验极差。<html><body>

HelloWorld</body></html>3.Web标准（重点）3.

Web标准的构成主要包括：结构（Structure）

、表现（Presentation）和行为（Behavior）三个方面。标准维度核心技术说明主要任务结构HTML对网页元素进行整理与分类搭建内容骨架、语义化标记表现CSS设置网页元素的外观样式（版式、颜色、大小等）美化页面、实现视觉效果行为JavaScript定义网页模型并编写交互逻辑响应用户操作、控制页面行为Web

标准提出的最佳体验方案：结构、样式、行为相分离。简单理解：

结构写到

HTML

文件中，

表现写到

CSS

文件中，

行为写到

JavaScript

文件中。3.Web标准（重点）4.

Web标准的优势4.网页制作工具网页制作工具种类较多，其中常见的网页编辑工具有VisualStudioCode、HbuilderX、Dreamweaver、SublimeText等。4.网页制作工具VSCode

的使用

双击打开软件。格式化（Alt+shift+f）。保存（Ctrl+S）,注意移动要保存为.html文件复制粘贴一行（Ctrl+D）

Ctrl

+

加号键

，Ctrl

+减号键

可以放大缩小视图

生成页面骨架结构。输入!

按下

Tab

键。

利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open

In

Default

Browser”。运行网页（Alt+B）网站：指在因特网上根据规则使用HTML等制作的网页集合，用于展示特定内容。网页：网站中的一“页”，是HTML格式的文件，通过浏览器阅读。它是网站的基本元素，由图片、链接、文字、声音、视频等组成。常见网页文件以

.htm

或

.html

结尾，由HTML语言创建。1.网页与网站HTML不是编程语言，而是标记语言，由标签组成。可加入图片、声音、动画等多媒体内容（超越文本限制）。支持超级链接，可从一文件跳转到另一文件，连接全球资源。2.

HTML（超文本标记语言）三个关键环节：前端开发、浏览器解析、页面渲染常用浏览器：Chrome、Firefox、Edge、Opera、夸克等。3.网页的形成过程核心思想：将网页内容（结构）、样式（表现）和行为（交互）分离。结构：HTML文件；表现：CSS文件；行为：JavaScript文件4.Web标准常用工具：VisualStudioCode、HbuilderX、Dreamweaver、SublimeText。快捷键与操作：格式化代码：Alt+Shift+F保存文件：Ctrl+S（注意保存为

.html

文件）复制一行：Ctrl+D视图缩放：Ctrl++（放大）、Ctrl+-（缩小）生成页面骨架：输入

!

后按

Tab

键预览页面：右键点击“OpenInDefaultBrowser”或使用

Alt+B

运行5.网页制作工具与操作总结单词速记英文中文HTML超文本标记语言CSS样式JavaScript脚本语言W3C(WorldWideWebConsortium)万维网联盟Chrome谷歌浏览器WebPage网页Website网站任务描述知识准备任务实现任务小结任务测试与考核实训项目实现：创建第一个HTML5网页1．创建目录文件夹实际工作中，文件不能随便乱放，否则使用时很难快速的找到指定文件，因此需要一个文件夹来管理项目文件。目录文件夹，就是普通文件夹，里面只不过存放了做页面所需要的相关素材，如html文件、图片等。在电脑指定位置创建文件夹，例如，在电脑D:\WebCode目录下创建文件夹，并命名为chapter01。2．启动VSCode双击Code.exe文件或桌面上的VisualStudioCode快捷方式，如图左所示，启动VSCode。打开软件界面，如右图所示。项目实现：创建第一个HTML5网页3.打开目录文件夹（1）从菜单栏中选择“File”|“OpenFolder…”选项，如图所示。（2）打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter01文件夹），单击“选择文件夹”按钮，如图所示。项目实现：创建第一个HTML5网页3.打开目录文件夹（3）弹出“安全提示”对话框，选择“Yes,Itrusttheauthors”，如图所示。注意：如果点击了不信任，会导致很多插件不能显示，如openinbrowser等。此时，一个项目打开完毕，在VSCode的左侧视图中显示了该项目，如图所示。。项目实现：创建第一个HTML5网页4．在项目中创建网页文件（1）在左侧视图中，单击目录文件名右侧的“NewFile”按钮，如图1-12所示。（2）在新增的文件命名框中输入文件名（如demo01.html），文件后缀名为.html，如图1-13所示。项目实现：创建第一个HTML5网页（3）文件名输入完成会自动打开一个空白文档，利用emmet的语法，输入半角感叹号!（如左图所示），接着按下tab键，自动生成一个html结构，如右图所示。项目实现：创建第一个HTML5网页5．输入网页代码在网页文件代码的<title>与</title>标签之间输入HTML文档标题，例如“第一个网页”。然后在<body>与</body>标签之间添加网页主体内容，例如“这是我的第一个HTML5网页”，如图1-16所示。项目实现：创建第一个HTML5网页6．运行代码，浏览网页在HTML文档编辑区域，单击“右键”弹出菜单，选择“OpenInDefaultBrowser（使用默认浏览器打开）”选项，如图左侧图所示。浏览器展示效果如图右侧图所示。至此，创建一个目录文件夹，并在其中新建名为demo01.html的网页文件，在网页文件中编辑代码，通过浏览器网页展示内容的项目完成。任务描述知识准备任务实现任务小结任务测试与考核实训任务小节任务描述知识准备任务实现任务小结任务测试与考核实训测试与考核4．下列选项中不属于Web标准构成部分的是（

）。A.结构标准 B.表现标准 C.行为标准 D.语法标准3．HTML网页文件的后缀扩展名是

。一、单选题1．HTML指的是（

）。A．文本传输协议 B．超文本传输协议 C．连接与文本标记语言D．超文本标记语言2.在HTML中，网页标题应放置在（

）。A．<title></title>标记之间 B．<body></body>标记之间C．<head></head>标记之间 D．HTML中的任意位置3.在HTML中，网页要显示的主体内容应放置在（

）。A．<title></title>标记之间 B．<body></body>标记之间C．<head></head>标记之间 D．HTML中的任意位置二、填空题1．

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

温馨提示

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

最新文档

评论

0/150

提交评论