计算机与信息技术基础 课件 第3章 Web前端基础_第1页
计算机与信息技术基础 课件 第3章 Web前端基础_第2页
计算机与信息技术基础 课件 第3章 Web前端基础_第3页
计算机与信息技术基础 课件 第3章 Web前端基础_第4页
计算机与信息技术基础 课件 第3章 Web前端基础_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

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

文档简介

第3章web前端基础01Web技术概述02HTML基础04盒子模型03CSS基本语法目录Content3.1Web技术概述3.1.1

Web相关概念

WWW（World

Wide

Web）是万维网的简称，是基于超文本和超媒体的信息系统，通过网页链接实现信息的快速访问和共享。它由蒂姆·伯纳斯-李于1989年发明，极大地推动了互联网的普及和发展，成为现代信息传播的重要平台。1.WWW（1）超文本传输协议HTTPHTTP(Hypertext

Transfer

Protocol)，是一种详细规定浏览器和万维网服务器之间互相通信的规则。（2）超文本传输安全协议HTTPSHTTPS(Hypertext

Transfer

Protocol

over

Secure

Socker

Layer),在http传输中加入了

SSL层，是由SSL+HTTP构建的可进行加密传输、身份认证的网络协议，比http更安全。2.协议序号服务(协议)类型含义1http超文本传输协议2https用加密传送的超文本传输协议3ftp文件传输协议4mailto电子邮件地址5NewsUsenet新闻组6File当地计算机或网上分享的文件/xxgk/xxjj.htm:5051/111014/index.htm3.

URL

统一资源定位符URL(UniformResourceLocator)。即“网页地址”。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。主机域名或IP地址

4.

域名域名解析系统DNS(DomainNameSystem)。是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识。任何一个连接在因特网上的主机或路由器，都有一个层次结构的名字，即域名。域名与IP地址一一对应，域名便于用户记忆。域名采用层次结构：…

.

三级域名

.

二级域名

.

顶级域名

教育

中国域名代码用途域名代码用途com商业组织cn中国edu教育机构ca加拿大gov政府部门de德国mil军事部门fr法国org非营利组织jp日本net网络支持中心uk英国int国际组织us美国常用的顶级域名和部分国家代码表网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。结构网页“是什么”表现网页“什么样”行为网页“做什么”CSSHTMLJavascript5.

Web标准（1）

网站、网页和主页网站：网站是由多个网页组成的集合，用于展示特定主题或服务的信息。网页：网站的基本单元。主页：网站的入口页面，通常包含网站的主要信息和导航链接。（2）静态网页和动态网页静态网页特点：静态网页内容固定，不随用户操作而改变，加载速度快，适合展示固定信息。例如，企业介绍页面通常采用静态网页形式。动态网页特点：动态网页可以根据用户输入或数据库数据动态生成内容，具有更强的交互性，适合复杂的Web应用。例如，用户登录系统、在线购物车等功能需要动态网页实现。应用场景：静态网页适用于内容更新频率低的场景，动态网页适用于需要实时交互的场景，如社交网络、在线教育平台等。6.网站与网页3.1.2

Web基本工作原理客户端（通常是浏览器）向服务器发送请求，请求中包含用户想要访问的资源信息，如网页、图片等。请求通过HTTP或HTTPS协议发送到服务器，服务器根据请求内容进行处理。服务器接收到客户端请求后，会根据请求内容查找相应的资源。如果资源存在，服务器会将资源内容和状态码一起返回给客户端。如果资源不存在，服务器会返回404等错误状态码，提示用户资源无法访问。1、客户端请求2、服务器响应浏览器接收到服务器返回的HTML文档后，会从上到下解析文档内容，构建DOM树（文档对象模型）。浏览器在解析HTML文档的同时，会加载和解析CSS样式表，根据CSS规则对DOM树中的元素进行样式渲染。最终，浏览器将解析后的DOM树和CSS样式结合，生成最终的页面布局，并将其显示在屏幕上。3、浏览器渲染3.1.3Web开发工具Dreamweaver是一款所见即所得的网页设计工具，适合初学者快速上手，支持可视化布局和代码编辑。它提供了丰富的模板和组件，可以快速生成网页，但灵活性相对较低。DreamweaverHBuilderX是基于HTML5的轻量级开发工具，支持多种编程语言和框架，具有强大的代码提示和调试功能。它专注于前端开发，适合有一定基础的开发者进行HTML5开发，能够提高开发效率。HBuilderXVisualStudioCode是微软推出的一款开源代码编辑器，功能强大，插件丰富，适用于各种前端和后端开发场景。它支持多种编程语言，具有智能代码补全、语法检查、调试等功能，是目前最流行的开发工具之一。VisualStudioCode3.2HTML基础3.2.1HTML发展历程1．起源与早期版本2．标准化与规范化3．功能扩展4．‌XHTML与HTML5的兴起5．持续演进与未来展望3.2.2HTML文档结构和基本语法(1)标记

HTML使用标记（也称为标签）来定义文档的结构和内容，标记分为单标记和双标记。双标记由首标记和尾标记组成，内容位于首尾标记之间。(2)属性

标记的属性用于定义标记的额外信息，通常位于首标记中，用于控制标记的行为和外观。属性的合理使用可以增强网页的交互性和可维护性。(3)元素的嵌套

HTML元素可以嵌套使用，通过嵌套可以构建复杂的文档结构。嵌套时需要注意标记的闭合顺序，确保文档结构的正确性。(4)注释

HTML注释使用<!--和-->包裹，注释内容不会被浏览器解析。注释可以用于解释代码的作用，提高代码的可读性。1.HTML基本语法2.HTML文件结构制作第一个网页：<html><head><title>我的第一个网页</title></head><body>厉害了，我设计的网页！</body></html>title标记设定网页标题头标记：提供关于当前文档的信息主体标记：提供文档要显示的内容3.2.3HTML常用标记1.文本排版类标记标题标记<h1>…<h6>段落标记<p>与换行标记<br>水平分隔线标记<hr>字体属性标记<font>其它文字样式的设置标记2.文本修饰类标记3.特殊文字符号的添加4.列表标记无序列表<ul>…<li>有序列表<ol>…<li>5.超链接标记参考第4章相关章节3.2.4 插入图像等多媒体元素gif无损压缩可使用透明色动画Gif文件容量小支持8位索引色（最多256色）png无损压缩支持透明度容量小不支持动图jpg有损压缩颜色更丰富不支持透明度1.常用的web图像格式2.

在HTML中插入图像元素3.在HTML中插入音频、视频等多媒体元素在网页中可使用<embed>标记插入多媒体文件，直接在Web文档中播放音频、视频和Flash动画。支持mp3、mp4和swf、avi、wav格式等。格式为：<img>标记可以在网页中插入图片。格式如下：<img

src=“路径/图像文件名”

alt=“说明性替代文字”>

<embed

src="路径/多媒体文件名"></embed>3.3CSS基本语法

3.3.1构造CSS规则CSS样式表由若干条规则组成，这些样式规则可以应用到不同的元素或文档中定义它们的显示效果。CSS的样式规则分为两部分：选择器和声明。选择器{声明；}选择器---样式的名称声明---样式的具体描述#ID选择器名{

}

先声明后应用。ID在一个页面中唯一，只能应用一次，针对性更强。.类选择器名{}

先声明后应用。可应用于多个不同标记，在应用的标记上生效。3.3.2基本CSS选择器基本选择器1.标记选择器2.类别选择器3.ID选择器HTML标记名{}在页面中所有与选择器同名的标记上生效定义：直接在HTML元素的style属性中定义样式。特点：优先级最高，便于临时调整。示例：<pstyle="color:red;">定义：将CSS代码放在HTML文档的<head>标记中的<style>标记内。特点：作用范围是整个HTML文档。示例：<style>p{color:red;}</style>内嵌样式表（InternalStylesheet）定义：将CSS代码保存在一个单独的.css文件中，通过链接或导入引入HTML文档。特点：便于代码复用和维护。示例：<linkrel="stylesheet"href="styles.css">外部样式表（ExternalStylesheet）行内样式（InlineStyles）

3.3.3 在html中使用CSS的方法2.交集选择器1.并集选择器3.后代选择器选择器1,选择器2,……选择器n{}选择器1选择器2……选择器n{}选择器1选择器2……选择器n{}多个选择器取并集，只要满足其中任何一个选择器，样式即可生效多个选择器取交集，必须满足所有选择器的要求，样式才生效满足后一个选择器是前一个选择器的后代，样式即可生效（后代包括子代、孙代等）3.3.4复合选择器继承是指某些CSS属性可以从父元素传递给子元素，如font-size和color等属性具有继承性。继承可以减少重复的样式定义，提高代码的简洁性。继承层叠是指当多个CSS规则同时作用于同一个元素时，浏览器会根据一定的规则决定最终应用的样式。层叠规则包括选择器的优先级、样式定义的先后顺序等。层叠CSS优先级规则决定了在多个样式冲突时，哪个样式会被应用。优先级从高到低依次为：行内样式>内嵌样式表>外部样式表>浏览器默认样式。优先级4.CSS的主要特性可以使用相对长度单位，或绝对长度单位。在网页制作中默认以像素为单位，如果需要其他单位必须注明，如2em，5cm,

8in等等。相对长度单位说明px像素，最常用，推荐使用em以目前字符的高度（font-size大小）为参考依据，若没有font-size属性，以浏览器默认字符高度为参考。绝对长度单位说明in英寸cm厘米mm毫米pt点3.3.5 用CSS设置文本样式1．长度单位颜色值有三种形式：2．颜色的定义颜色值，例：red、yellow#十六进制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)3．设置字体属性4．设置文本属性3.4盒子模型CSS盒子模型（Box

Model）是一种概念模型。在这个概念中，所有的文档元素都可以看成一个盒子（矩形框）。一个盒子是由内容（content）、边框（border）、内边距（padding）、外边距（margin）组成。3.4.1盒子基本概念3.4.2设置盒子的结构类属性1．宽度和高度（height、width）2．内边距（padding）3．外边距（margin）4．边框（border）5．复合属性padding:5px10px;border:solid2pxgreen;在页面中以区域块的形式出现。每个块元素通常都会独自占据一整行或多整行。可以对其设置宽度、高度、对齐等属性。块级元素不占有独立的区域。仅仅靠自身的字体大小和图像尺寸来支撑结构。一般不可以设置宽度、高度、对齐等属性。行内元素3.4.3块级元素与行内元素3.4.4用CSS设置图像和背景效果设置背景颜色（background-color）设置背景图像图像源文件(background-image)图像平铺(backgrou

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

温馨提示

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

最新文档

评论

0/150

提交评论