《Web应用程序全栈开发》教学课件—02Web应用网页设计——HTML5
合集下载
《HTML5教程》课件
块级元素
如`<div>`、`<p>`、`<h1>`-`<h6>` 、`<ul>`、`<ol>`等，会在页面上占 据一定区域，并与其他块级元素并排 显示。
内联元素
语义化标签
如`<header>`、`<footer>`、 `<article>`、`<section>`等，用于描 述页面内容结构，使代码更具可读性 。
拖放API
HTML5提供了拖放API， 允许用户拖动元素并在目 标位置放下。
自定义拖放
开发者可以自定义拖放行 为，实现各种交互效果。
增强用户体验
拖放功能可以增强用户体 验，提高网页交互性和可 用性。
本地存储
Web存储API
HTML5引入了Web存储API，允 许在客户端存储数据，包括会话
数据和持久数据。
<html>标签是整个HTML文档的 根元素。
<head>标签内包含文档的元数 据，如<meta charset="UTF8">设置字符编码为UTF-8。
HTML5文档的基本结构包括 `<!DOCTYPE html>`、 `<html>`、`<head>`和 `<body>`等标签。
<body>标签内包含网页的可见 内容，如文本、图片、链接等。
HTML5性能优化
HTML5引入了许多新的技术和 特性，如Web Workers、Web Sockets和Server-Sent Events
等，可以实现更高效的网页性 能。
使用Web Workers可以在后台 线程中运行JavaScript，避免阻
如`<div>`、`<p>`、`<h1>`-`<h6>` 、`<ul>`、`<ol>`等，会在页面上占 据一定区域，并与其他块级元素并排 显示。
内联元素
语义化标签
如`<header>`、`<footer>`、 `<article>`、`<section>`等，用于描 述页面内容结构，使代码更具可读性 。
拖放API
HTML5提供了拖放API， 允许用户拖动元素并在目 标位置放下。
自定义拖放
开发者可以自定义拖放行 为，实现各种交互效果。
增强用户体验
拖放功能可以增强用户体 验，提高网页交互性和可 用性。
本地存储
Web存储API
HTML5引入了Web存储API，允 许在客户端存储数据，包括会话
数据和持久数据。
<html>标签是整个HTML文档的 根元素。
<head>标签内包含文档的元数 据，如<meta charset="UTF8">设置字符编码为UTF-8。
HTML5文档的基本结构包括 `<!DOCTYPE html>`、 `<html>`、`<head>`和 `<body>`等标签。
<body>标签内包含网页的可见 内容，如文本、图片、链接等。
HTML5性能优化
HTML5引入了许多新的技术和 特性，如Web Workers、Web Sockets和Server-Sent Events
等，可以实现更高效的网页性 能。
使用Web Workers可以在后台 线程中运行JavaScript，避免阻
《web应用开发》PPT课件
ServletContext接口
• Servlet context： • 存储在Servlet context中的信息,同一应用中的 servlet/JSP/JavaBean都可以访问。 • 通过ServletConfig对象上的getServletContext()方 法可获得servlet上下文对象 • ServletContext接口常用方法：
背景知识
• 常用的Web服务器
– IIS – Tomcat
• 通常的动态网页技术
– – – – – – CGI (Common GateWay Interface) API常用的有(NSAPI,ISAPI) ASP（Active Server Page) PHP（Personal Home Page) JSP（Java Server Page） Servlet
HttpServlet类中的方法
• javax.servlet.http.HttpServlet
public void doGet(HttpServletRequest req,HttpServletResponse res)
doGet() 方法处理客户端作出的 GET 请求。 public void doPost(HttpServletRequest req,HttpServletResponse res) doPost() 方法处理客户端作出的 POST 请求。 public void init() 初始化代码可写在此方法中 public void service() 客户端有请求过来,服务器会调用service()方法, service()方法根据请 求来决定调用doGet还是doPost方法 public void destory() 删除实例时会调用,释放资源的代码可写在此方法中
web应用程序开发第二讲精品PPT课件
</html>
例3:
<html> <head> <title>变量</title> <script language="vbscript"> <!— Dim YourName '定义了一个变量,名称叫YourName YourName = InputBox(“您好!请问您
的名字是?”) '要求用户输入名字这值来初始化变量 MsgBox YourName & " 您好!" & "能
YourName = InputBox(“您好!请问您的名字 是?”)
变量=InputBox(“显示信息”，“窗口标 题”)
用于在对话框中显示一条消息并等待用户输入数据文
本或者按在按钮.用户在对话框中输入的文本是被存放到 了变量中了. MsgBox 函数
MsgBox YourName & " 您好!" & "能见到您, 真好!"
</HTML>
变量、常量、数组、运算符
●变量和常量的命名规则
变量命名必须遵循 VBScript 的标准命名规则。 1.第一个字符必须是字母。 2.不能包含嵌入的句点。 3.长度不能超过 255 个字符。 4.在被声明的作用域内必须唯一。
变量、常量、数组、运算符
●数组
数组是由一组简单变量组合而成，数组中的元素在内存中 占据一块连续的空间，因此，我们可以依序为每个元素编号， 再依照编号来使用他们。
例3:
<html> <head> <title>变量</title> <script language="vbscript"> <!— dim score score=75 msgbox "你的成绩为" & score score=90 msgbox "你的成绩一改为" & score --> </script> </head> <body> </body>
例3:
<html> <head> <title>变量</title> <script language="vbscript"> <!— Dim YourName '定义了一个变量,名称叫YourName YourName = InputBox(“您好!请问您
的名字是?”) '要求用户输入名字这值来初始化变量 MsgBox YourName & " 您好!" & "能
YourName = InputBox(“您好!请问您的名字 是?”)
变量=InputBox(“显示信息”，“窗口标 题”)
用于在对话框中显示一条消息并等待用户输入数据文
本或者按在按钮.用户在对话框中输入的文本是被存放到 了变量中了. MsgBox 函数
MsgBox YourName & " 您好!" & "能见到您, 真好!"
</HTML>
变量、常量、数组、运算符
●变量和常量的命名规则
变量命名必须遵循 VBScript 的标准命名规则。 1.第一个字符必须是字母。 2.不能包含嵌入的句点。 3.长度不能超过 255 个字符。 4.在被声明的作用域内必须唯一。
变量、常量、数组、运算符
●数组
数组是由一组简单变量组合而成，数组中的元素在内存中 占据一块连续的空间，因此，我们可以依序为每个元素编号， 再依照编号来使用他们。
例3:
<html> <head> <title>变量</title> <script language="vbscript"> <!— dim score score=75 msgbox "你的成绩为" & score score=90 msgbox "你的成绩一改为" & score --> </script> </head> <body> </body>
第5讲 HTML5 应用程序PPT课件
12
❖ 拖放API
拖动对象：
<span draggable=″true″ id=″t_1″ ondragstart=″dragIt(this, event)″> <img src=”tower.jpg“>
</spagn=”center” width=”100″ id=”blue” ondrop=”dropIt(this, event)” ondragenter=”return false” ondragover=”return false”> …. </td>
2. conn.onopen = function(evt) { alert("Conn opened"); } // 链接建立时触发
3. conn.onmessage = function(evt) { alert("Read: " + evt.data); } //收到服务端消息时触发
4. conn.onclose = function(evt) { alert("Conn closed"); } //链接关闭时触发
<!DOCTYPE html> <html manifest='cache.manifest'> <head> <meta charset="UTF-8"> <title>离线缓存示例页面</title> <!-- CSS文件引用 --> </head> <body> <!-- 各种标签 --> </body> </html>
❖ 拖放API
拖动对象：
<span draggable=″true″ id=″t_1″ ondragstart=″dragIt(this, event)″> <img src=”tower.jpg“>
</spagn=”center” width=”100″ id=”blue” ondrop=”dropIt(this, event)” ondragenter=”return false” ondragover=”return false”> …. </td>
2. conn.onopen = function(evt) { alert("Conn opened"); } // 链接建立时触发
3. conn.onmessage = function(evt) { alert("Read: " + evt.data); } //收到服务端消息时触发
4. conn.onclose = function(evt) { alert("Conn closed"); } //链接关闭时触发
<!DOCTYPE html> <html manifest='cache.manifest'> <head> <meta charset="UTF-8"> <title>离线缓存示例页面</title> <!-- CSS文件引用 --> </head> <body> <!-- 各种标签 --> </body> </html>
WEB应用程序开发PPT课件
1.2.3 OSI参考模型 网络协议（Protocol) ：计算机之间的数据通信必须
遵守某种约定和规程，这些约定和规程就是网络通信 协议（翻译官）。协议三要素：
➢语法(syntax)：数据和控制信息的结构或格式 （“如何讲”） ➢语义(semantics)：需要发出何种控制信息，完成 何种动作和做出何种响应。 （“讲什么”） ➢时序(timing)：实体通信实现顺序的详细说明。 国际标准化组织(ISO)提出的“开放系统互连模型” 是计算机网络通信的基本协议。TCP/IP是Internet
FAX#...
尊 敬 的 John: 由 于 ...方 面
的原因
我们希望 退货
18
图 2-1 协 议 层 次 实 例
数据的实际传送过程
交换数据 单元名称
APDU
发送进程 应用层
PPDU
表示层
SPDU
会话层
TPDU
数据分组 (NPDU)
数据帧 (DPDU)
比特 (PPDU)
传输层
网络层 数据链路
层 物理层
– 网络病毒、保密、黑客(Huckman)
噢!
14
路由器 路由器
R
校园网子网
Internet体系结构
校园网
电子商务网站
R R
R
路由器 路由器
路由器
路由器
Internet
具有上网功能的手机 PDA掌上电脑 卫星接收系统
路由器
路由器
ISP网络
R R
路由器
路由器
企业子网
路由器
路由器
R
企业网
R
个人电脑
15
是一门宽范围技术应用课，以学会应用某一种 或几种技术完成实际应用开发为主
《Web全栈开发课程设计课件》
掌握ECMAScript6（ES6）
了解ECMAScript6（ES6）的新特性，如箭头函数、模板字面量、解构赋值和类等，并应用到实际项目中。
前端框架React
学习使用React框架构建高效、可维护的用户界面，并掌握组件化开发和状态管理。
前端框架Vue
学习使用Vue框架构建现代化的Web应用程序，掌握Vue组件、路由和状态管 理。
前端自动化构建工具
了解常用的前端构建工具，如Webpack和Gulp，以提高开发效率和项目部署。
Git与Github
学习使用Git版本控制工具和Github代码托管平台，提高团队协作和项目管理 效率。
Node.js与Express
掌握使用Node.js和Express框架开发服务器端应用程序，实现RESTful API和数据 交互。
Web全栈开发课程设计课件
探索Web全栈开发的精髓，从前端到后端，从基础到高级，让你成为一名全 面发展的Web开发者。
课程介绍
本课程旨在全面介绍Web全栈开发的各个方面，包括前端开发基础、HTML5与CSS3、JavaScript基础和高级编程 技巧等。
前端开发基础
学习前端开发的基础知识，如HTML标记语言、CSS样式表以及基本的Web开发工具。
HTML5与CSS3
深入了解HTML5和CSS3的最新特性与用法，掌握响应式设计和浏览器兼容性。
JavaScript基础
学习JavaScript的基本语法和概念，掌握DOM操作、事件处理和表单验证等技 巧。
JavaScript高级编程技巧
进一步提升JavaScript编程能力，学习闭包、原型继承、异步编程和模块化开 发等高级技巧。
使用WebRTC实现视频通话
Web应用程序全栈开发教学大纲
《Web应用程序全栈开发》课程教学大纲课程编码:15031626 课程类别:专业必修课学分:4 学时:72第一部分有关说明一,课程地性质Web 应用程序全栈开发是计算机有关专业地一门专业课程。
通过教学,使学生掌握以HTML5为主体,搭配CSS3,JavaScript,jQuery制作网页,再搭配jQuery Mobile制作手机APP应用等专业知识,并较熟练地进行手机Web APP项目地设计与制作,初步具备构建分布式应用系统开发与Web 全栈开发地思想与能力,为成为一个Web应用全栈开发程序员打下良好地基础。
该课程地先修课程为《C语言程序设计》,为后续《混合式手机应用开发》,《毕业设计（论文）》等课程打下坚实基础。
二,课程地基本要求（一）知识目的本课程主要讲授用HTML5制作手机应用与Web应用地差异;HTML5语法,标签及组件元素;HTML5制作地网页;CSS3样式表;HTML5+CSS3地综合应用;JavaScript地语法;jQuery Mobile 常用地函数与应用;网页存储;HTML5地数据存储,插件,地图等应用;HTML5+jQuery Mobile手机应用地开发等知识。
（二）能力目的通过本课程地学习,学生在掌握HTML5与jQuery Mobile地基础知识上,能把具体应用问题抽象成手机可以处理地模型,并完成界面设计与功能实现,掌握手机Web APP制作地基本操作技能,并能熟练应用于本地应用,网络应用,并进行软件设计,管理,实施地能力。
（三）素质目的具备能将课程能力应用到各类大创项目,创新创业活动,比赛,在项目实践提高地动手能力与创新能力,初步具备手机应用开发程序员地素质。
三,教学重点,难点（一）重点:HTML5应用开发平台及工具地应用;HTML5+CSS3地项目创建与应用;JavaScript地使用;jQuery Mobile地使用;数据存储等。
（二）难点:多线程,离线存储,定位与地图等。
《Web程序设计》课件
HTML链接
HTML链接用于在网页中创 建超链接，指向其他网页或
资源。
链接由`<a>`标签定义，通 过`href`属性指定链接的目
标地址。
链接可以是外部链接（指向 其他网站的地址），也可以 是内部链接（指向同一网站
内的页面）。
链接可以使用相对路径或绝 对路径来指定目标地址。
01
02
03
04
05
03
HTML表单
HTML表单用于收集用户输入的数据，如 文本框、单选框、复选框、下拉列表等 。
表单元素包括`<form>`标签、输入元素 （如`<input>`）、选择元素（如 `<select>`和`<option>`）等。
表单数据可以通过POST或GET方法发送 到服务器进行处理。
表单在Web应用程序中有着广泛的应用 ，如在线调查、在线注册等。
于Web开发。
02
它最初被设计用于给网页添 加交互性，但现在已经广泛 用于构建复杂的单页应用和
后端服务器端开发。
03
JavaScript是ECMAScript标 准的一门实现，最新的
ECMAScript标准是ES2023 。
JavaScript语法
01
JavaScript语法基于ECMAScript规范，由关键字、
04
属性选择器
属性选择器用于选择具有特定 属性或属性值的元素。例如， `[target="_blank"]`选择器将 选择所有具有“target”属性 且值为“_blank”的元素。
CSS样式属性
01
字体属性
02
字体属性用于设置文本的字体 、大小、粗细、行高等。例如 ，`font-family`用于设置字体， `font-size`用于设置字体大小， `font-weight`用于设置字体粗 细等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3．超文本传输协议——HTTP：是从WWW服务器传输超文本到本 地浏览器的传输协议。
2.1.1 HTML基本概念
4．超文本标记语言——HTML：是一种描述文本结构的标记语言， 是构成Web页面的主要工具，用于发布信息。不管是何种工ห้องสมุดไป่ตู้开发 的Web页面，最终都将转换为HTML文本，并通过浏览器体现。
<head> <meta charset="utf-8" /> <title></title>
</head> <body> </body> </html>
2.1.3 HTML5文件基本结构
1．<!DOCTYPE> 声明：声明文档的解析 类型，HTML文档第一行。
2．HTML代码区：
<html>…</html>标记对是最外层元素， 网页的所有内容、标记都包含在这里面。
1．万维网——WWW：中文是万维网，简称“Web”，是基于超文本 的信息查询和信息发布系统。
2．统一资源定位符——URL：中文是统一资源定位符，称为“网址 ”，是Internet上标准资源的地址，由资源类型、存放资源的主机域 名、资源文件名3部分组成，基本格式如下：
protocol://hostname[:port]/path/[;parameters][?query]#fragment
2.1.4 网站的建设
2．网页版式布局的基本类型
（1）骨骼型：采用横向或纵向分栏来布局页面。 （2）满版型：以大面积的视频或图像为主体，将少量的文本信息置于图像上。 （3）分割型：用线条、块状面积、渐变色或背景将整个页面分割成多个部分。 （4）中轴型：沿页面的中轴将页面做成水平或垂直方向排列。 （5）焦点型：通过对视线的引导，将浏览者视线向页面中心聚拢或向外辐射。 （6）自由型：是一种比较自由的网页版式，具有轻松、活泼的风格，通常用于强调艺 术个性化的网页。
元素。 ➢ <div>是块级标记，里面包含的元素会自动换行；而<span>是内联标
记，它的前后不会换行。
2.2.2 HTML属性与事件
1．全局属性
属性
值
说明
class classname
规定元素的类名
contextmenu menu_id
指定一个元素的上下文菜单
data-* value
用于存储页面的自定义数据
2.2 HTML5常用标记
2.2.1 HTML5文件结构与语义标记 2.2.2 HTML属性与事件 2.2.3 文字与段落标记 2.2.4 列表标记 2.2.5 图片标记 2.2.6 内联框架 2.2.7 注释与特殊符号
2.2.1 HTML5文件结构与语义标记
1．结构化的语义标记
标记 <header>
<nav> <section> <article> <aside> <footer> <hgroup> <address>
说明 标记头部区域的内容，包括网站名称、主题或主要信息 在页面中显示一组导航链接 将页面中的内容划分为独立的区域，用于显示章节或段落 标记页面中独立的主体内容区域，通常使用<section>标记进行划分 标记article内容外且与其内容相关的辅助信息，用于侧边栏 标记页面或一个区域的底部，放置版权声明、作者、联系方式等信息 为标题或子标题进行分组，通常与标题<hn>组合使用 标记文档中的联系信息，包括文档作者、电子邮箱、地址、电话等
5．浏览器：是用于检索、显示万维网信息资源并进行交互的应用程 序。这些信息资源包括网页、图片、影音等，由URL指定。
2.1.2 HTML标记格式
1．常用标记格式：HTML标记都必须用英文尖括号“<”和“>”括起 。
➢ 容器标记由成对的开始标记与结束标记组成，即<标记>…</标记>。 ➢ 单一标记只有开始标记，结束前加上一条斜线“/”，即<标记 />。
2．标记的属性：属性用以改变标记在网页上显示的方式，多个属性 则用空格隔开。
3．标记的特征：标记用“<”和“>”括起；大部分标记成对出现；标 记可以嵌套；开始标记和结束标记间的内容就是其所承载的数据信 息；标记不区分大小写，属性也不分大小写。
2.1.3 HTML5文件基本结构
<!DOCTYPE html> <html>
2.2.1 HTML5文件结构与语义标记
➢ HTML5结构化的语义标记可以自由 配置，并没有要求缺一不可或固定 的位置。
➢ HTML语法只显示网页结构与内容， CSS负责完成网页的布局和美化。
HTML5文件的结构图
2.2.1 HTML5文件结构与语义标记
2．<div>和<span>标记
➢ <div>标记和<span>标记都是用于定义样式的容器。 ➢ 层标记<div>是块级标记，用于文档布局和定义文档中的分区或节。 ➢ 区域标记<span>是内联标记，作为文本容器，用来组合文档中的行内
<head>…</head>标记对是文件头，描述 文档的一些基本数据或设置一些特殊功能。
<body>…</body>标记对是文件主体，用 于设置网页的全局效果。
2.1.4 网站的建设
1．网站设计制作流程
（1）明确目标：了解客户对网站设计所提出的目标和要求，以及所要展示对象的特点。 （2）设计草图：列出详细的栏目和子目录。 （3）实现蓝图：根据草图用网页设计软件实现设计蓝图。 （4）加工网页。明确主页的版式设计、色调处理及文字、图片和多媒体的组合。编排 页面时将页面上的每个元素组合成一个统一的整体。 （5）优化网页。从页面浏览速度、适应性和浏览者对网站的初步印象等方面进行优化。
第2章 Web应用网页设计—— HTML5
本章内容
➢ HTML5基础 ➢ HTML5常用标记 ➢ 在网页中嵌入多媒体内容 ➢ 超链接 ➢ 表格 ➢ 表单
2.1 HTML5基础
2.1.1 HTML基本概念 2.1.2 HTML标记格式 2.1.3 HTML5文件基本结构 2.1.4 网站的建设
2.1.1 HTML基本概念
dir
ltr、rtl
设置元素内容的文本方向：ltr从左到右、rtl从右到左
hidden hidden
规定对元素进行隐藏
id
id
规定元素的唯一id
style style_definition 规定元素的行内样式（inline style）
2.1.1 HTML基本概念
4．超文本标记语言——HTML：是一种描述文本结构的标记语言， 是构成Web页面的主要工具，用于发布信息。不管是何种工ห้องสมุดไป่ตู้开发 的Web页面，最终都将转换为HTML文本，并通过浏览器体现。
<head> <meta charset="utf-8" /> <title></title>
</head> <body> </body> </html>
2.1.3 HTML5文件基本结构
1．<!DOCTYPE> 声明：声明文档的解析 类型，HTML文档第一行。
2．HTML代码区：
<html>…</html>标记对是最外层元素， 网页的所有内容、标记都包含在这里面。
1．万维网——WWW：中文是万维网，简称“Web”，是基于超文本 的信息查询和信息发布系统。
2．统一资源定位符——URL：中文是统一资源定位符，称为“网址 ”，是Internet上标准资源的地址，由资源类型、存放资源的主机域 名、资源文件名3部分组成，基本格式如下：
protocol://hostname[:port]/path/[;parameters][?query]#fragment
2.1.4 网站的建设
2．网页版式布局的基本类型
（1）骨骼型：采用横向或纵向分栏来布局页面。 （2）满版型：以大面积的视频或图像为主体，将少量的文本信息置于图像上。 （3）分割型：用线条、块状面积、渐变色或背景将整个页面分割成多个部分。 （4）中轴型：沿页面的中轴将页面做成水平或垂直方向排列。 （5）焦点型：通过对视线的引导，将浏览者视线向页面中心聚拢或向外辐射。 （6）自由型：是一种比较自由的网页版式，具有轻松、活泼的风格，通常用于强调艺 术个性化的网页。
元素。 ➢ <div>是块级标记，里面包含的元素会自动换行；而<span>是内联标
记，它的前后不会换行。
2.2.2 HTML属性与事件
1．全局属性
属性
值
说明
class classname
规定元素的类名
contextmenu menu_id
指定一个元素的上下文菜单
data-* value
用于存储页面的自定义数据
2.2 HTML5常用标记
2.2.1 HTML5文件结构与语义标记 2.2.2 HTML属性与事件 2.2.3 文字与段落标记 2.2.4 列表标记 2.2.5 图片标记 2.2.6 内联框架 2.2.7 注释与特殊符号
2.2.1 HTML5文件结构与语义标记
1．结构化的语义标记
标记 <header>
<nav> <section> <article> <aside> <footer> <hgroup> <address>
说明 标记头部区域的内容，包括网站名称、主题或主要信息 在页面中显示一组导航链接 将页面中的内容划分为独立的区域，用于显示章节或段落 标记页面中独立的主体内容区域，通常使用<section>标记进行划分 标记article内容外且与其内容相关的辅助信息，用于侧边栏 标记页面或一个区域的底部，放置版权声明、作者、联系方式等信息 为标题或子标题进行分组，通常与标题<hn>组合使用 标记文档中的联系信息，包括文档作者、电子邮箱、地址、电话等
5．浏览器：是用于检索、显示万维网信息资源并进行交互的应用程 序。这些信息资源包括网页、图片、影音等，由URL指定。
2.1.2 HTML标记格式
1．常用标记格式：HTML标记都必须用英文尖括号“<”和“>”括起 。
➢ 容器标记由成对的开始标记与结束标记组成，即<标记>…</标记>。 ➢ 单一标记只有开始标记，结束前加上一条斜线“/”，即<标记 />。
2．标记的属性：属性用以改变标记在网页上显示的方式，多个属性 则用空格隔开。
3．标记的特征：标记用“<”和“>”括起；大部分标记成对出现；标 记可以嵌套；开始标记和结束标记间的内容就是其所承载的数据信 息；标记不区分大小写，属性也不分大小写。
2.1.3 HTML5文件基本结构
<!DOCTYPE html> <html>
2.2.1 HTML5文件结构与语义标记
➢ HTML5结构化的语义标记可以自由 配置，并没有要求缺一不可或固定 的位置。
➢ HTML语法只显示网页结构与内容， CSS负责完成网页的布局和美化。
HTML5文件的结构图
2.2.1 HTML5文件结构与语义标记
2．<div>和<span>标记
➢ <div>标记和<span>标记都是用于定义样式的容器。 ➢ 层标记<div>是块级标记，用于文档布局和定义文档中的分区或节。 ➢ 区域标记<span>是内联标记，作为文本容器，用来组合文档中的行内
<head>…</head>标记对是文件头，描述 文档的一些基本数据或设置一些特殊功能。
<body>…</body>标记对是文件主体，用 于设置网页的全局效果。
2.1.4 网站的建设
1．网站设计制作流程
（1）明确目标：了解客户对网站设计所提出的目标和要求，以及所要展示对象的特点。 （2）设计草图：列出详细的栏目和子目录。 （3）实现蓝图：根据草图用网页设计软件实现设计蓝图。 （4）加工网页。明确主页的版式设计、色调处理及文字、图片和多媒体的组合。编排 页面时将页面上的每个元素组合成一个统一的整体。 （5）优化网页。从页面浏览速度、适应性和浏览者对网站的初步印象等方面进行优化。
第2章 Web应用网页设计—— HTML5
本章内容
➢ HTML5基础 ➢ HTML5常用标记 ➢ 在网页中嵌入多媒体内容 ➢ 超链接 ➢ 表格 ➢ 表单
2.1 HTML5基础
2.1.1 HTML基本概念 2.1.2 HTML标记格式 2.1.3 HTML5文件基本结构 2.1.4 网站的建设
2.1.1 HTML基本概念
dir
ltr、rtl
设置元素内容的文本方向：ltr从左到右、rtl从右到左
hidden hidden
规定对元素进行隐藏
id
id
规定元素的唯一id
style style_definition 规定元素的行内样式（inline style）