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）
