html5+css3课件
合集下载
html5+css3课件-4
➢ CSS2.1。2004年2月，CSS2.1正式推出，它在CSS2的 基础上略微做了改动，删除了许多诸如text-shadow等 不被浏览器所支持的属性。现在使用的CSS基本上都是 在1998年推出的CSS2的基础上发展而来的。
➢ 2010年开始，CSS3逐步发布。2011年6月成为W3C推荐。
第3章 CSS基础
第3章 CSS基础
返 回
语法：
<head>
<style type="text/css">
选择符{属性:属性值;…}
</style>
</head>
<body>…</body>
第3章 CSS基础
返 回
3.3.3 外部样式
使用外部样式文件时，可以利用<link>元素将其链接到 HTML文档中。
语法： <link rel=”stylesheet” href=”*.css” type=”text/css”> 描述：
*{property:value} 描述：
“*”在CSS中代表所有，是用来选择所有的HTML标记。 例如：
*{font-size:16px;} 表示将网页中所有元素的字体定义为16像素。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（2）标记选择符 标 记 选 择 符 是 CSS 选 择 符 中 最 常 见 且 最 基 本 的 选 择 符 ， HTML页面中的所有标记都可以作为标记选择符。
（1）-webkit：webkit核心浏览器，包括Chrome、Safari 等。 （2）-moz：火狐（Firefox）浏览器。 （3）-ms：IE浏览器。 （4）-o：Opera浏览器。
➢ 2010年开始，CSS3逐步发布。2011年6月成为W3C推荐。
第3章 CSS基础
第3章 CSS基础
返 回
语法：
<head>
<style type="text/css">
选择符{属性:属性值;…}
</style>
</head>
<body>…</body>
第3章 CSS基础
返 回
3.3.3 外部样式
使用外部样式文件时，可以利用<link>元素将其链接到 HTML文档中。
语法： <link rel=”stylesheet” href=”*.css” type=”text/css”> 描述：
*{property:value} 描述：
“*”在CSS中代表所有，是用来选择所有的HTML标记。 例如：
*{font-size:16px;} 表示将网页中所有元素的字体定义为16像素。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（2）标记选择符 标 记 选 择 符 是 CSS 选 择 符 中 最 常 见 且 最 基 本 的 选 择 符 ， HTML页面中的所有标记都可以作为标记选择符。
（1）-webkit：webkit核心浏览器，包括Chrome、Safari 等。 （2）-moz：火狐（Firefox）浏览器。 （3）-ms：IE浏览器。 （4）-o：Opera浏览器。
html5+css3课件
1.8 html：有含义的标记
html 描述的是网页内容的含义， 既语义。语义化的html指那些使用最 恰当的html元素进行标记的内容，在 标记的过程中并不关心内容显示。 语义化html的原因： 1 、提升访问性和互操作性（内容对 于借助辅助技术的残障访问者是可访 问的，同时对于台式机、手机、平板 电脑及其他设备上的浏览器都是可访 问的。 2、提升搜索引擎优化的效果。 3 、使维护代码和添加样式变得容易 。 4、使代码更少，页面加载更快。
1.9 浏览器对网页的默认显示效果
每个web浏览器都有一个内置的css文件（一张样式表），它决定了每 个HTML元素的默认样式，可以自己创建css覆盖这些样式。 通常标题、段落和article这样的元素从新行开始显示，而短语内容（ 如em、a和small)则与外围内容的同一行显示。
在一个网页中，我们通常可以看到的不只是文字，还有图像和一些可 以点击的链接，外部文件（如图像）实际上并没有放在html文件中，而 是单独保存的，页面只是简单地引用了这些文件。
1.6 文件名和文件夹
1、文件名采用小写字母： mywebpage.html 2、使用正确的扩展名： .htm或.html 3、用短横线分割单词: -
• 理解html5的元素、属性和值及其他的含义
• Байду номын сангаас悉寻找文件的目录命名方法
• 理解html5的语义化
第一章：网页的构造块
1.1 html思想 当我们打开橱柜，为每一份调料贴上一些标签，如：油、盐、醋等等， 我们就很容易认出它们；编写html跟这个贴标签的过程类似，不同的是编写html 并非向调料上贴标签，而是为网页内容打上能够描述他们的标签。这些标签名称 不需要我们自己创建。 html描述的不是内容，而是看起来是什么样。如我们在为调料贴名字的 时候是油、盐等，我们贴的是物质本身的名称，但在html里就是油腻的液体、白 色的小颗粒状粉末。
《HTML5 CSS3项目开发案例教程》教学课件 项目一《HTML5+css3项目开发案例教程》
（3）主要区域。
表示主要区域的元素是main，它用于标记一个页面的主要内容。一个页面中只能 包含一个main元素。main元素不能被放在header、nav、article、aside或footer元素中， 在<main>标签中设置role属性的值为main可以帮助阅读器定位页面的主要区域。
（4）文章块。
（3）注释标签是HTML5中一种特殊的标签。使用注释标签括起来的内容不会显示 在页面上，但是会保存在页面的源代码中。它的基本语法格式为：
<!--注释内容-->
在各功能模块的开头和结尾处添加注释可方便合作开发的人员修改和理解代码。
2．HTML5标签的属性
在HTML5中，可以根据需要为标签设置属性，比如在段落标签中设置该 段落的文本颜色或字号大小等。设置标签属性的语法格式为：
4．body元素
body元素用于标记HTML5文档所要显示的内容，也称为主体标记。页面
中的所有文本、图像、音频或视频等信息都必须写在<body>标签之内。 <body>标签中的信息才是最终展示给用户的内容。
html、head和body这3种元素在一个HTML5文档中只能各出现一次， 且<head>和<body>标签必须在<html>标签之内，<body>标签位于<head>标
2．HTML5的成功
就在失败的同时，HTML5的演化取得了 成功。因为HTML5在开发时就综合考虑了当 前与未来需要进行的开发任务，所以它向后 兼容，且包含了的全部特性，并进行了少量 的修改与完善。
2014年，W3C正式宣布，HTML5制作完 成并公开发布。目前HTML5已经得到主流浏 览器的良好支持。
HTML5+CSS3 Web前端设计基础教程PPT-HTML 5页面的构建与简单控制
HTML5+CSS3Web前端设计基础教程Chapter/02HTML 5页面的构建与简单控制【本章导读】本章除了介绍Dreamweaver的基本使用方法以外，还着重介绍HTML 5的文档结构和常见标签等内容。
2.1.1 界面介绍2.1.2 常用工具栏和面板1．工具栏图2-2 工具栏新版Dreamweaver的工具栏在整个操作界面的左侧，如图2-2所示，单击 按钮可以在弹出的“自定义工具栏”对话框中，增加或减少按钮的显示。
2．属性检查器图2-3 属性检查器（选定对象为文本）图2-4 属性检查器（选定对象为图像）3．插入面板图2-5 HTML类别图2-6 表单类别图2-7 Bootstrap类别5．CSS面板6．设置主、次浏览器图2-9 CSS面板 图2-10 设置主、次浏览器2.2.1 创建站点进行网页制作的第一步就是创建本地站点，站点管理会让用户的工作变得简单而富有成效，况且许多功能必须在站点中才能实现。
总之，如果不是仅编辑需要的单个页面，那么就必须创建站点。
图2-12 站点设置对象图2-13 创建“My Site”站点2.2.2 “文件”面板的使用方法1．新建文件夹和文件图2-14 右键菜单图2-15 新建文件夹图2-16 嵌套文件夹2.2.2 “文件”面板的使用方法图2-18 站点内的基本操作图2-19 更新文件2．站点内的基本操作2.2 创建和管理站点2.2.3 管理站点图2-20 “管理站点”对话框2.3.1 使用Dreamweaver构建“H5标准页面”图2-21 结构示意图1．标签的含义图2-22 标签2．元素的含义3．属性和值2.3.2 DOCTYPE文档类型与基本结构元素<!DOCTYPE html><html><head><meta charset="UTF-8"><title>凤凰网</title><meta content="凤凰,凤凰网,凤凰新媒体,凤凰卫视,凤凰卫视中文台,phoenix" name="keywords"/><meta name="description" content="凤凰网是中国领先的综合门户网站，提供含文图音视频的全方位综合新闻资讯、深度访谈、观点评论、财经产品等服务。
HTML5+CSS3网页布局任务教程课件汇总整本书电子教案全套课件完整版ppt最新教学教程
步骤1：获得软件
从官网上可以免费下载最新版的 该软件（英文安装版，带Emmet插件），如图1-8所示。 也可以下载网上共享的汉化解压版（注意要带Emmet插 件）。
图1-8 Sublime Text官网下载链接 Emmet插件是提供缩写扩展功能的一个软件包，大部分网页编辑器都自带该插件或支 持Emmet插件，有了该插件后网页编辑器才更方便于快速输入HTML和CSS代码。
步骤2：安装软件
下面介绍从官网下载的Sublime Text 3英文安装版的安 装步骤。
① 双击安装包（文件名如Sublime Text Build 3207 x64 Setup.exe），指定软件的安装位置，单击Next按 钮，如图1-9所示。
② 直接单击Next按钮，如图1-10所示。
图1-9 Sublime Text 3安装（一）
步骤1：获得软件
从官网https://www.dcloud.io/ 上可以免费下载新版 的该软件，下载步骤如图1-1~图1-3所示。
① 单击“HBuilderX极客开发工具”选项。
② 单击DOWNLOAD选项。
③ 单击“正式版”选项，“Alpha版”是还在测试中的 版本。然后，可以单击“标准版”（区分操作系统） 来下载“HBuilder X”的较新版本，可以单击“上一 代HBuilder下载”右边的链接（区分操作系统）来下 载“HBuilder”的较新版本，还可以单击“历史版本” 下载“HBuilder X”或“HBuilder”的历史版本。
步骤3：使用软件
① 双击HBuilderX.exe文件或桌面快捷方式即可启动 HBuilder X，关闭自述文件（可在帮助菜单项里单击 “自述文件”再次打开）。
② 选择“文件”菜单中的“新建”“打开”等命令， 可以新建和打开网站文件夹或各种文件，常用的几个 选项如图1-4所示。
第3章 HTML5的基本页面元素HTML5与CSS3 Web前端开发技术-PPT课件
HTML5+CSS3 Web 前端开发技术
图像例如
3.4 图像元素和多媒体元素
HTML5+CSS3 Web 前端开发技术
3.4 图像元素和多媒体元素
2. 多媒体文件标记<embed> ▪ 网页中的多媒体文件除了图像文件以外，还包括 音频和视频文件以及Flash文件等。要在网页中插 入这些文件就要使用<embed>标记，<embed> 标记用来定义嵌入的内容，利用<embed>标记可 直接调用多媒体文件。 ▪ <embed>标记的语法格式如下：
▪ title属性
title属性用于添加图像的替代文字。
▪ width/height属性
用来设置图像的宽度和高度，默认情况下，网页中显 示的图像保持原图的尺寸。
HTML5+CSS3 Web 前端开发技术
图像例如
3.4 图像元素和多媒体元素
图像例如
HTML5+CSS3 Web 前端开发技术
3.4 图像元素和多媒体元素
HTML5+CSS3 Web 前端开发技术
3.2 列表元素
2.无序列表标记<ul>
默认情况下，无序列表的每个列表工程前显示黑色实 心圆点。可以使用type属性修改无序列表符号的样 式，type属性的具体取值及说明如表3-2所示，其 中，type属性值必须小写。
表3-2
属性值 disc circle square
<embed src="url" autostart="" loop=""></embed>
HTML5+CSS3 Web 前端开发技术
《HTML5+CSS3》课件——第四章 CSS3选择器
✎ 4.1 属性选择器
4.1.3 E[att*=value]属性选择器
概念 E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值 包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略 则表示可以匹配满足条件的任意元素。
例如： div[id*=section]
概念 E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att 属性值包含前缀为value的子字符串。
例如： div[id^=section]
表示匹配包含id属性，且id属性值是以“section”字符串开头的 div元素。
✎ 4.1 属性选择器
4.1.2 E[att$=value]属性选择器
☞点击查看本小节知识架构
伪元素选Байду номын сангаас器
☞点击查看本小节知识架构
阶段案例——制作招聘页面
✎ 章节概要
选择器是CSS3中一个重要的内容，在上一 章中已经介绍过一些常用的选择器，这些选 择器基本上能够满足设计者常规的设计需 求。但在CSS3中还有一些选择器，使用这 些选择器可以大幅度提高设计者书写和修改 样式表的效率。
1
➢ :not选择器
2
➢ :only-child 选择器
3
➢ :first-child和:last-child选择器
4
➢ :nth-child(n)和:nth-last-child(n)选择器
5
➢ :nth-of-type(n)和:nth-last-of-type(n)选择器
6
➢ :empty选择器
7
✎ 4.3 结构化伪类选择器
html5+css3课件-6
第5章 CSS样式属性
返 回
例如：
5.1.3 CSS3新增字体属性
代码分析：
上例中，font-family属性指定字体名称为myFirstFon， src设置自定义字体的相对路径或绝对路径。在<div>元素中 通过font-family属性来引用字体的名称。
第5章 CSS样式属性
返 回
5.2 CSS控制文本的样式
font-family属性的语法格式如下：
font-family:”字体1”,”字体2”,”字体3”; 描述：
浏览器不支持第一个字体时，会采用第二个字体，以此 类推。如果浏览器不支持定义的字体，则采用系统的默认 字体。 例如：
p{font-family:Arial, 楷体;}
第5章 CSS样式属性
返 回
体；bolder表示特粗体；lighter表示特细体；number取值 范围为100~900，一般情况下都是整百的数，400等价于 normal，700等价于bold。
第5章 CSS样式属性
返 回
5.1.1 设置字体属性 5．字体变形（font-variant）
font-variant属性用来将英文字体设定小型的大 写字母，小型大写字母不是一般的大写字母，也 不是小写字母，而是采用不同大小的大写字母。
及单位组成表示字符间隔。
第5章 CSS样式属性
返 回
5.2.1 文本属性 4．文字修饰（text-decoration）
text-decoration属性主要是对文本进行修饰，有 多种修饰效果，如下划线、删除线等。
语法：
text-decoration:none | underline | overline |
《全面系统的HTML5+CSS3基础课件》
全面系统的HTML5+CSS3 基础课件
本课件旨在全面系统地介绍HTML5和CSS3的基础知识，帮助你打下良好的前 端开发基础，从而在未来的学习和工作中更为得心应手。
HTML5和CSS3的区别
1 HTML5
用于网页结构和内容的定义，新增了一些语义化标签。
2 CSS3
用于网页的样式和表现，新增了一些强大的样式选择器和效果。
HTML5和CSS3的一些特性，如音 视频处理、3D建模、WebGL等， 在虚拟现实技术中具有重要应用。
HTML5和CSS3的一些特性，如地 理位置标签、WebRTC等，在智 能交通领域中具有广泛应用。
HTML5表单和表格
表格
如<table>标签，支持表格的创建、合并单元格、 添加边框、设置列宽等操作，可以有效地展示有规 律的数据。
表单
如<form>标签，支持用户输入、选择、上传文件 等操作，可以有效地获取用户信息和行为。
实际案例和练习
案例
使用HTML5和CSS3实现一个简单的响应式网页， 调整窗口大小时，页面可以自适应地变化。
练习
编写一个HTML5表单，包含多种表单元素，添 加一些CSS3效果，如悬浮、变形、渐变等。
CSS3选择器和样式
1
P ro p erty
2
CSS3新增了一些属性，如border-radius、
box-shadow、text-shadow等，可以实现
更加精细的样式效果。
3
Selecto r
使用CSS3选择器，可以根据文档结构、 标签属性、伪类等选择元素，实现更加 精细的样式控制。
CSS框架
常用的CSS框架如Bootstrap、Materialize 等，提供了一系列预设样式和模板，可 以大大加快网页开发效率。
本课件旨在全面系统地介绍HTML5和CSS3的基础知识，帮助你打下良好的前 端开发基础，从而在未来的学习和工作中更为得心应手。
HTML5和CSS3的区别
1 HTML5
用于网页结构和内容的定义，新增了一些语义化标签。
2 CSS3
用于网页的样式和表现，新增了一些强大的样式选择器和效果。
HTML5和CSS3的一些特性，如音 视频处理、3D建模、WebGL等， 在虚拟现实技术中具有重要应用。
HTML5和CSS3的一些特性，如地 理位置标签、WebRTC等，在智 能交通领域中具有广泛应用。
HTML5表单和表格
表格
如<table>标签，支持表格的创建、合并单元格、 添加边框、设置列宽等操作，可以有效地展示有规 律的数据。
表单
如<form>标签，支持用户输入、选择、上传文件 等操作，可以有效地获取用户信息和行为。
实际案例和练习
案例
使用HTML5和CSS3实现一个简单的响应式网页， 调整窗口大小时，页面可以自适应地变化。
练习
编写一个HTML5表单，包含多种表单元素，添 加一些CSS3效果，如悬浮、变形、渐变等。
CSS3选择器和样式
1
P ro p erty
2
CSS3新增了一些属性，如border-radius、
box-shadow、text-shadow等，可以实现
更加精细的样式效果。
3
Selecto r
使用CSS3选择器，可以根据文档结构、 标签属性、伪类等选择元素，实现更加 精细的样式控制。
CSS框架
常用的CSS框架如Bootstrap、Materialize 等，提供了一系列预设样式和模板，可 以大大加快网页开发效率。
《Web前端技术》教学课件12HTML5+CSS3页面布局
性容器（flex container）和弹性项目（flex item）组成。
容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。
12.1.1弹性盒子基本概念
定义弹性容器和项目
12.1.2弹性容器属性
弹性容器提供了6个属性，用来设置容器中项目的排列方式和对齐方式。
12.1.2弹性容器属性
align-items属性定义项目在交叉轴上的对齐方式。属性取值包括：flex-start | flex-end | center | baseline | stretch
12.1.2弹性容器属性
align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性 不起作用。属性取值包括：flex-start | flex-end | center | space-between | space-around | stretch
12.1.2弹性容器属性
flex-direction属性决定项目沿主轴的排列方向，该属性可取值row | rowreverse | column | column-reverse。其中row为默认值，项目沿水平方 向从左向右进行排列，row-reverse表示项目沿水平方向从右向左进行排列， column表示项目沿垂直方向从上向下排列，column-reverse则表示项目沿 垂直方向从下向上排列。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖alignitems属性。该属性可取值auto | flex-start | flex-end | center | baseline | stretch，默认值为auto，表示继承父元素的align-items属性，如果没有父元素， 则等同于stretch。
容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。
12.1.1弹性盒子基本概念
定义弹性容器和项目
12.1.2弹性容器属性
弹性容器提供了6个属性，用来设置容器中项目的排列方式和对齐方式。
12.1.2弹性容器属性
align-items属性定义项目在交叉轴上的对齐方式。属性取值包括：flex-start | flex-end | center | baseline | stretch
12.1.2弹性容器属性
align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性 不起作用。属性取值包括：flex-start | flex-end | center | space-between | space-around | stretch
12.1.2弹性容器属性
flex-direction属性决定项目沿主轴的排列方向，该属性可取值row | rowreverse | column | column-reverse。其中row为默认值，项目沿水平方 向从左向右进行排列，row-reverse表示项目沿水平方向从右向左进行排列， column表示项目沿垂直方向从上向下排列，column-reverse则表示项目沿 垂直方向从下向上排列。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖alignitems属性。该属性可取值auto | flex-start | flex-end | center | baseline | stretch，默认值为auto，表示继承父元素的align-items属性，如果没有父元素， 则等同于stretch。
《HTML5+CSS3》课件——第三章-初识CSS3
✎ 3.3 CSS核心基础
行内式
内嵌式
链入式
导入式
链入式
链入式是将所有的样式放在一个或多个以.css为扩展名 的外部样式表文件中，通过<link />标签将外部样式 表文件链接到HTML文档中，其基本语法格式如下:
<head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>
✎ 3.2 CSS的优势
CSS3是CSS规范的最新版本，在CSS2.1的基础 上增加了很多强大的新功能，以帮助开发人员 解决一些实际面临的问题。使用CSS3不仅可以 设计炫酷美观的网页，还能提高网页性能。
与传统的CSS相比，CSS3最突出的优势主要体现在节约成本和 提高性能两方面，本节将做具体介绍。
本章将详细讲解CSS及其最新版本CSS3的相关知识。
✎ 3.1 结构与表现分离
什么是结构与表现分离？
✎ 3.1 结构与表现分离
结构与表现相分离是指在网页设计中，HTML 标签只用于搭建网页的基本结构，不使用标签 属性设置显示样式，所有的样式交由CSS来设 置。
✎ 3.1 结构与表现分离
如今大多数网页都是遵循Web标准开发的，即用 HTML编写网页结构和内容，而相关版面布局、文 本或图片的显示样式都使用CSS控制。HTML与 CSS的关系就像人的身体与衣服，通过更改CSS样 式，可以轻松控制网页的表现样式。
✎ 3.2 CSS的优势
CSS3的新功能帮我们摒弃了冗余的代码结构，远离很多Ja vascript脚本或者Flash代码。网页设计者不再需要花大把 时间去写脚本，极大的节约了开发成本。
html5+css3课件-10
第9章 利用JavaScript实现Canvas功能
返 回
绘图基本图形常用的方法和属性
方法与属性
描述
beginPath()
开始绘制一条新的路径
moveTo(int x,int y)
将画笔移动到指定坐标点(x,y)，该点作为路 径的起点。
lineTo(int x,int y)
从当前点到指定坐标点(x,y)定义一条直线
第9章 利用JavaScript实现Canvas功能
返 回
9.2.3 绘制矩形
strokeRect()、fillRect( )、clearRect( )
strokeRect(x,y,width,height)用于绘制一个矩形边框， 参数x、y定义该矩形的起点坐标，决定了矩形的位置； width定义矩形的宽度，是(x,y)向右的距离；height定义 矩形的高度，是(x,y)向下的距离。
第9章 利用JavaScript实现Canvas功能
返 回
9.3 图形的变换
方法 translate() scale() rotate(angle)
描述
重新定义画布上的(0,0)位置
缩放当前绘画，定位也会被缩 放。如scale(2,2)，是将绘画定 位于距离画布左上角两倍远的位 置，绘画也放大两倍。 旋转当前绘画，angle为旋转角 度，以弧度计
第9章 利用JavaScript实现Canvas功能
返 回
9.3.1 保存与恢复Canvas状态
Canvas状态是指当前画面所有样式、变形和裁切的一个快 照，以堆（stack）的方式保存，save和restore方法用于 保存和恢复Canvas状态
语法： context.save(); context.restore();
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
文章：article
• article元素表示文档、页 面、应用或网站中一个独 立的容器，原则上是可独 立分配或可再用的，就像 聚合内容中的各部分。它 可以是一篇论坛帖子、一 篇杂志或报纸文章、一篇 博客条目、一则用户提交 的评论、一个交互式的小 部件或小工具，或者任何 其他独立的内容项。
定义块区：section
通用容器：div
• 有时需要在一段内容外围包一个容器，从而 可以为其应用css样式或者javascript效果。 如果没有这个容器，页面就会不一样。div 是一个完全没有任何语义含义的容器。
地标角色：role
• WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications,无障碍网页协议-无障碍富互联网应用，简称ARIA)是 一种技术规范，在html提供相应的语义功能之前，它会使用属性来 填补一些语义上的空白。 地标角色
role=”banner” (横幅） role=”navigation” (导航）
如何ቤተ መጻሕፍቲ ባይዱ用及何时使用
将其添加到页面级的header元素，每个页面只用一次 与nav元素是对应关系。应将其添加到每一个nav元素，或 其他包含导航性链接的容器。
role=”main” (主体）
与main元素对应关系。最好将其添加到main元素，也可以 添加到其他表示主体内容的元素（可能是div),只能用一次
元素的title属性
• 可以使用title属性（ 与title元素不同）为 网站上任何部分加上 提示标签。而且它们 并不只是提示标签， 加上它们之后屏幕阅 读器可以为用户朗读 title文本，因此使用 title可以提升无障碍 访问功能。
作业：
用Dreamweaver制作一个简单的网页。
要求：根据语义在合适地方用上今天所学到的标签， 包括：div、title、hn(可选任意数量)、header、 footer、nav、main、article、section、aside、role 、li.
第三章
基本html结构
标题：hn
• html提供了六级标题用于 创建页面信息的层级关系 。使用h1、h2、h3、h4、 h5和h6元素对各级标题进 行标记，其中h1最高,后面 依次递减。
页眉
• 如果页面中有一块包含一组 介绍性或导航性内容的区域 ，应该用header元素进行标 记。一个页面可以有任意数 量的header元素，它们根据 其含义不同位置也不同，处 于页面顶端或者接近这个位 置的header可能代表整个页 面的页眉。
标记导航：nav
• nav中的链接可以指向页面中的 内容，也可以指向其他页面或资 源，或者两者兼而有之。无论哪 种情况，应该仅对文档中重要的 链接群使用nav。 • 用法：<nav>一组链接</nav>
标记页面主要区域：main
• 一个页面仅有一个部分代表其 主要内容。可以将这样的内容 包在main元素中，该元素在一 个页面中仅使用一次。 • 不能将main放置在article、 aside、footer、header或nav元 素中
• 使用aside的例子还包括重要引述、侧栏， 指向相关文章的一组链接等等。
创建页脚：footer
• footer元素代表嵌套它的最近的 article、aside、blockquote、body 、details、fieldset、figure、nav、 section或td元素的页脚。只有当它 最近的祖先是body时，它才是整个 页面的页脚。 • 如果一个footer包着它所在的区块的 所有内容，它代表的是像附录、索 引、版权、许可协议这样的内容。 • 不能再footer里面嵌套header或另 一个footer。同时，也不能将footer 嵌套在header或address元素里。
• section元素代表文档或应用的一个一般的 区块。在这里section是具有相似主题的一 组内容，通常包含一个标题。
• section用在文章里的可以这样理解， article包含整个文章，section则包含一篇 文章的一个小节，若干个段落组成一个 section。
附注栏：aside
• 有时候，页面中有一部分内容与主题内容 相关性不强但可以独立存在，就可以使用 aside标签。
role=”complementary” (补充性内容）
与aside元素对应关系。应将其添 加到aside或div（前提是该div中仅 包含补充性内容）中。可以在一个 页面多包含几个complementary,不 要过度使用
将其添加至整个页面的页脚，每个 页面仅使用一次。
role=”contentinfo” (内容信息）