html5+css3 PPT
合集下载
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 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="凤凰网是中国领先的综合门户网站，提供含文图音视频的全方位综合新闻资讯、深度访谈、观点评论、财经产品等服务。
第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+css3ppt课件
地标角色
如何使用及何时使用
role=”banner” (横幅）
将其添加到页面级的hgation” (导航）
与nav元素是对应关系。应将其添加到每一个nav元素，或 其他包含导航性链接的容器。
role=”main”
与main元素对应关系。最好将其添加到main元素，也可以
6
7
定义块区：section
• section元素代表文档或应用的一个一般的 区块。在这里section是具有相似主题的一 组内容，通常包含一个标题。
• section用在文章里的可以这样理解， article包含整个文章，section则包含一篇 文章的一个小节，若干个段落组成一个 section。
8
附注栏：aside
• 有时候，页面中有一部分内容与主题内容 相关性不强但可以独立存在，就可以使用 aside标签。
• 使用aside的例子还包括重要引述、侧栏， 指向相关文章的一组链接等等。
9
10
创建页脚：footer
• footer元素代表嵌套它的最近的 article、aside、blockquote、body 、details、fieldset、figure、nav、 section或td元素的页脚。只有当它 最近的祖先是body时，它才是整个 页面的页脚。
• 一个页面仅有一个部分代表其 主要内容。可以将这样的内容 包在main元素中，该元素在一 个页面中仅使用一次。
• 不能将main放置在article、 aside、footer、header或nav元 素中
5
文章：article
• article元素表示文档、页 面、应用或网站中一个独 立的容器，原则上是可独 立分配或可再用的，就像 聚合内容中的各部分。它 可以是一篇论坛帖子、一 篇杂志或报纸文章、一篇 博客条目、一则用户提交 的评论、一个交互式的小 部件或小工具，或者任何 其他独立的内容项。
HTML5CSS3精品PPT课件
• HTML5新增的事件
– onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload...
HTML5基本布局
<!DOCTYPE html> <htmlang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h 2></header> <nav><ul><li></li><li></li></ ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
网站标准的简单历史
XHTML 1 Content
CSS2.1 Presentation
2001-2006
– onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload...
HTML5基本布局
<!DOCTYPE html> <htmlang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h 2></header> <nav><ul><li></li><li></li></ ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
网站标准的简单历史
XHTML 1 Content
CSS2.1 Presentation
2001-2006
HTML5+CSS3任务驱动教程 模块五 应用表格布局页面PPT
1、colspan 属性 colspan 属性表示的是单元格在水平方向上合并，语法格式如下： <td colspan="数值">单元格内容</td>
任务2 课程表的制作
5.4 跨行跨列设置
HTML5+CSS3任务驱动教程
2、rowspan 属性 rowspan 属性表示的是单元格在垂直方向上合并，语法格式如下： <td rowspan="数值">单元格内容</td>
<tr valign="对齐方式">
其中，对齐方式取值为top、middle 或bottom。
任务3 学院首页页面的制作
5.7 宽度、高度的设置
HTML5+CSS3任务驱动教程
宽度、高度的设置分别使用的是width 属性和height 属性， 这两个属性属于公用属性，前面已经介绍过，这里不再赘述。
5.6 对齐方式的设置
5.7 宽度、高度的设置
5.8 背景图片的设置
引 入 知 识 点
任务3 学院首页页面的制作
5.6 对齐方式的设置
HTML5+CSS3任务驱动教程
Hale Waihona Puke 1、设置表格的对齐方式<table align="对齐方式">
设置整个表格在页面中的对齐方式，其中，对齐方式的取值为left、 center 或right。
任务1图书借阅详情页面的制作
HTML5+CSS3任务驱动教程
5.2创建表格
table 元素的常用属性
任务1图书借阅详情页面的制作
HTML5+CSS3任务驱动教程
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
附注栏：aside
• 有时候，页面中有一部分内容与主题内容 相关性不强但可以独立存在，就可以使用 aside标签。
• 使用aside的例子还包括重要引述、侧栏， 指向相关文章的一组链接等等。
大家有疑问的，可以询问和交流
可以互相讨论下，但要小声点
创建页脚：footer
• footer元素代表嵌套它的最近的 article、aside、blockquote、body 、details、fieldset、figure、nav、 section或td元素的页脚。只有当它 最近的祖先是body时，它才是整个 页面的页脚。
• 不能将main放置在article、 aside、footer、header或nav元 素中
文章：article
• article元素表示文档、页 面、应用或网站中一个独 立的容器，原则上是可独 立分配或可再用的，就像 聚合内容中的各部分。它 可以是一篇论坛帖子、一 篇杂志或报纸文章、一篇 博客条目、一则用户提交 的评论、一个交互式的小 部件或小工具，或者任何 其他独立的内容项。
标题：hn
• html提供了六级标题用于 创建页面信息的层级关系 。使用h1、h2、h3、h4、 h5和h6元素对各级标题进 行标记，其中h1最高,后面 依次递减。
• 如果页面中有一块包含一组 介绍性或导航性内容的区域 ，应该用header元素进行标 记。一个页面可以有任意数 量的header元素，它们根据 其含义不同位置也不同，处 于页面顶端或者接近这个位 置的header可能代表整个页 面的页眉。
地标角色：role
• WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications,无障碍网页协议-无障碍富互联网应用，简称ARIA)是 一种技术规范，在html提供相应的语义功能之前，它会使用属性来 填补一些语义上的空白。
定义块区：section
• section元素代表文档或应用的一个一般的 区块。在这里section是具有相似主题的一 组内容，通常包含一个标题。
• section用在文章里的可以这样理解， article包含整个文章，section则包含一篇 文章的一个小节，若干个段落组成一个 section。
元素的title属性
• 可以使用title属性（ 与title元素不同）为 网站上任何部分加上 提示标签。而且它们 并不只是提示标签， 加上它们之后屏幕阅 读器可以为用户朗读 title文本，因此使用 title可以提升无障碍 访问功能。
作业：
用Dreamweaver制作一个简单的网页。
要求：根据语义在合适地方用上今天所学到的标签， 包括：div、title、hn(可选任意数量)、header、 footer、nav、main、article、section、aside、role 、li.
页眉
标记导航：nav
• nav中的链接可以指向页面中的 内容，也可以指向其他页面或资 源，或者两者兼而有之。无论哪ቤተ መጻሕፍቲ ባይዱ种情况，应该仅对文档中重要的 链接群使用nav。
• 用法：<nav>一组链接</nav>
标记页面主要区域：main
• 一个页面仅有一个部分代表其 主要内容。可以将这样的内容 包在main元素中，该元素在一 个页面中仅使用一次。
• 如果一个footer包着它所在的区块的 所有内容，它代表的是像附录、索 引、版权、许可协议这样的内容。
• 不能再footer里面嵌套header或另 一个footer。同时，也不能将footer 嵌套在header或address元素里。
通用容器：div
• 有时需要在一段内容外围包一个容器，从而 可以为其应用css样式或者javascript效果。 如果没有这个容器，页面就会不一样。div 是一个完全没有任何语义含义的容器。