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 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》课件——第四章 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 Web前端设计基础教程PPT-Web App类页面的设计与实现
HTML5+CSS3
Web前端设计基础教程
Chapter/11 Web App类页面的设计与实现
【本章导读】 本章将从职业发展前景出发，立足职位需求，向读者介绍有关
Web前端所涉及的入门知识。
11.1 Web App开发基础知识
11.1.1 开发模式概述 目前，移动应用前端开发模式有Native App（原生APP）、Web
表11-2 常见Android设备屏幕参数
ldpi
mdpi
hdpi
xhdpi
xxhdpi
xxxhdpi
密度范围
常见屏幕分 辨率 倍率
<120dpi
已经绝迹 0.75
120dpi～ 160dpi
320×480 1倍
160dpi～ 240dpi
240dpi～ 320dpi
320dpi～ 480dpi
480dpi～ 640dpi
11.4 页面实现的详细过程
6．fixedfooter区域的实现
图11-14 “首页”最终预览效果
11.4 页面实现的详细过程
11.4.2 列表页的实现 1．List页面顶部区域的实现
图11-15 list页面顶部区域预览效果
11.4 页面实现的详细过程
2．列表内容的实现
图11-17 list页面内容区域预览效果
图11-4 首页
图11-5 列表页
图11-6 详细内容页
11.3 “宇泽鲜风商城”Web App页面分析与环境准备
固定的头部区域
可以上下滚动的内容区域
拟使用navbar-fixed-top类解决 固定在屏幕顶部问题 拟使用Swiper插件实现左右滑动 效果
拟使用栅格系统解决多列布局问题
Web前端设计基础教程
Chapter/11 Web App类页面的设计与实现
【本章导读】 本章将从职业发展前景出发，立足职位需求，向读者介绍有关
Web前端所涉及的入门知识。
11.1 Web App开发基础知识
11.1.1 开发模式概述 目前，移动应用前端开发模式有Native App（原生APP）、Web
表11-2 常见Android设备屏幕参数
ldpi
mdpi
hdpi
xhdpi
xxhdpi
xxxhdpi
密度范围
常见屏幕分 辨率 倍率
<120dpi
已经绝迹 0.75
120dpi～ 160dpi
320×480 1倍
160dpi～ 240dpi
240dpi～ 320dpi
320dpi～ 480dpi
480dpi～ 640dpi
11.4 页面实现的详细过程
6．fixedfooter区域的实现
图11-14 “首页”最终预览效果
11.4 页面实现的详细过程
11.4.2 列表页的实现 1．List页面顶部区域的实现
图11-15 list页面顶部区域预览效果
11.4 页面实现的详细过程
2．列表内容的实现
图11-17 list页面内容区域预览效果
图11-4 首页
图11-5 列表页
图11-6 详细内容页
11.3 “宇泽鲜风商城”Web App页面分析与环境准备
固定的头部区域
可以上下滚动的内容区域
拟使用navbar-fixed-top类解决 固定在屏幕顶部问题 拟使用Swiper插件实现左右滑动 效果
拟使用栅格系统解决多列布局问题
《HTML5+CSS3课件》
CSS3简介 CSS3将为你提供最新 和最流行的HTML与CSS规范— —将 CSS 与 JavaScript 结合， 可创建出动态交互效果的网站 设计。我们将重点涵盖它最流 行的技术，包括Flexbox，Grid 和自适应设计等。
HTML5语法和标签 HTML5语法 创造出能够改变互联网，流媒 体，搜索引擎等的松散性和变 革性。我们将重点讲解它的标 签与语法。了解优秀的代码结 构和组织的重要性。这能够让 我们更好地构建合适的的页面， 并有助于提高SEO表现。
HTML5 + CSS3的应用案例 We’ll showcase a plethora of eye-catching examples to demonstrate the scope of what you'll learn. Explore design examples that use decorative typography and unique interfaces. Discover how to optimize for mobile with responsive design. We’ll also examine graphic and web-page design from a business perspective.
HTML5+CSS3课件
掌握HTML5和CSS3的基础知识，了解众多应用案例，创建专业级网站！
课程介绍HTML5+CSS3课件将为你提供基 础知识和技能，让你可以创作出好看和 高效的网站页面。您将学到语法和标记、 优化和实践方法。这是精美浸润式学习 的时刻！
HTML5简介 我们将探讨最新的 HTML5标准。这门语言大大强 化了语义化标识化，还为开发 者开放了更加丰富的能力，包 括地理位置和多媒体编码能力， 这也是当前建站行业的高级应 用之一。我们将深入学习它的 标签和语法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 理解html5的元素、属性和值及其他的含义
• 熟悉寻找文件的目录命名方法
• 理解html5的语义化
第一章：网页的构造块
1.1 html思想 当我们打开橱柜，为每一份调料贴上一些标签，如：油、盐、醋等等， 我们就很容易认出它们；编写html跟这个贴标签的过程类似，不同的是编写html 并非向调料上贴标签，而是为网页内容打上能够描述他们的标签。这些标签名称 不需要我们自己创建。 html描述的不是内容，而是看起来是什么样。如我们在为调料贴名字的 时候是油、盐等，我们贴的是物质本身的名称，但在html里就是油腻的液体、白 色的小颗粒状粉末。
1.8 html：有含义的标记
html 描述的是网页内容的含义， 既语义。语义化的html指那些使用最 恰当的html元素进行标记的内容，在 标记的过程中并不关心内容显示。 语义化html的原因： 1 、提升访问性和互操作性（内容对 于借助辅助技术的残障访问者是可访 问的，同时对于台式机、手机、平板 电脑及其他设备上的浏览器都是可访 问的。 2、提升搜索引擎优化的效果。 3 、使维护代码和添加样式变得容易 。 4、使代码更少，页面加载更快。
在一个网页中，我们通常可以看到的不只是文字，还有图像和一些可 以点击的链接，外部文件（如图像）实际上并没有放在html文件中，而 是单独保存的，页面只是简单地引用了这些文件。
1.6 文件名和文件夹
1、文件名采用小写字母： mywebpage.html 2、使用正确的扩展名： .htm或.html 3、用短横线分割单词: -
/tofu/index.html
http是模式，为主机名，tofu为目录ቤተ መጻሕፍቲ ባይዱ，index.html为文件名。 绝对URL：包含了指向目录或文件的完整信息，包括模式、主机名和路径； 相对URL：包含url本身的文件位置为参照点，描述目标文件的具体位置；引用同一目 录下的文件时直接输入文件名，引用上层目录的文件时输入 ../,两层 ../../依次类推。例如： ../image/image.jpg
1.2 基本的html结构
1.3 标签：元素、属性、值及其他
1、元素 元素就是描述网页不同部分的小标签，title（标题）、p（段落）、nav（包含一组链接）等等 都是元素，有的元素包含一个或多个属性，属性用来进一步描述元素。 2、属性 属性包含了元素的额外信f就是a的一个属性。 3、父元素和子元素 如果一个元素包含另一个元素，他就是被包含元素的的父元素，被包含元素称为子元素。 <article> <p>这是一个段落</p> </article> 上述article元素就是p元素的父元素，p是article的子元素
HTML5+CSS3
本课程目标：
• 能制作界面美观大方、面向企业应用的静态商业网站，不含动态脚本功能。 主要内容包括： • 掌握基本标签以及一些常用的属性 • 链接 • 表单元素的使用，框架 • CSS3样式表 • 使用Dreamweaver6制作网页以及布局
本章目标：
• 理解html5思想 • 熟悉html5基本结构
1.7 URL
URL（Uniform Resource Locator,统一资源定位符）是地址的别名。它包含关于文件 存储位置和浏览器应如何处理它的信息。互联网上的每一个文件都有唯一的URL。 URL的第一个部分称为模式。模式告诉浏览器如何处理需要打开的文件。最常见的 模式是HTTP。URL的第二部分是文件所在的主机的名称，紧接着是路径。例如：
1.9 浏览器对网页的默认显示效果
每个web浏览器都有一个内置的css文件（一张样式表），它决定了每 个HTML元素的默认样式，可以自己创建css覆盖这些样式。 通常标题、段落和article这样的元素从新行开始显示，而短语内容（ 如em、a和small)则与外围内容的同一行显示。
1.4 网页的文本内容
元素中包含的文本是网页最基本成分，浏览器呈现HTML时，会把文本 中的多个空格或制表符压缩成单个空格，把回车符或换行符转换成单个 空格，或者将他们一起忽略。
Unicode极大的缓解了特殊字符问题，用UTF-8对页面进行编码并用 同样的编码保存HTML文件已成为一种标准做法。
1.5 链接、图像及其他分文本内容