第1阶段HTML5CSS3初识.PPTVIP

第1阶段 HTML5+CSS3初识 以“够用”为原则，通过快速创建一个web页面并正确浏览，理解Web标准，熟悉html5的创建和使用，理解html5标记的含义。熟悉CSS3选择器的使用方法，理解CSS3的作用。为后续的理论知识的学习和实践能力的提高打下基础！ 主要内容 HTML5+CSS3基本概念 HTML5+CSS3文件的创建及浏览 HTML5文档结构 HTML5 中CSS3的使用 HTML5标记的规范 CSS3选择器的类型 综合实例的制作 1. HTML5+CSS3基本概念 Html，超文本标记语言 CSS，层叠样式表 2. HTML5+CSS3文件的创建及浏览 解释性语言，本质是文本文件 使用记事本编写 使用可视化工具编写（Dreamweaver CS5.5） 可视化工具中实践 浏览工具：浏览器 调试工具：查看源文件、Chrome浏览器 3. HTML5文档结构 文档类型说明 HTML标记 头标记head 主体标记body !DOCTYPE HTML html head meta http-equiv=Content-Type content=text/html; charset=utf-8 title网页标题/title /head body p这里是网页主体/p /body /html 标记的格式： 标记受标记影响的内容/标记 标记具有一系列的属性来控制信息的效果 标记 属性1=“属性值1” 属性2=“属性值2”受影响的内容/标记 标记 属性1=“属性值1” 属性2=“属性值2”。。。/ 4. HTML5 中CSS3的使用 CSS3基本语法 选择符 {属性1: 属性值1; …属性n:属性值n} Html5文件中直接创建CSS3 Html5文件链接外部已经创建好的CSS3文件 5. HTML5标记的规范 语法的变化 增加的标记 6. CSS3选择器的类型 标签选择器 类选择器 ID选择器 全局选择器 组合选择器 继承选择器 。。。 类(class)选择器 作用：可以为一种HTML标记定义不同的样式或者为不同的标记定义相同的样式 格式： 标记.类名称 {属性:属性值; 属性:属性值 …} .类名称 {属性:属性值; 属性:属性值 …} 使用方法： 标记 class=“类名称 标记 class=“类名称1 类名称2。。。” 7. 综合实例的制作 此时的任务 站点的创建 站点内不同资源的管理 Html5网页文件的创建 在html5网页内创建CSS3选择器 浏览网页效果 课后知识拓展 网页中文本元素的添加： 包含哪些文本？ 网页中文本元素的美化： 课后实践作业 小组分工合作，通过实例，讲解网页中文本元素的添加以及美化