第01章html5基础知识教学课件.pptx

第01章：HTML5基础知识;本章内容：;本章目标;第1节【 html概述】;HTML ：超文本标记语言 (Hyper Text Markup Language)，用于描述网页中存在哪些网页元素。 ;css ：层叠样式表(Cascading Style Sheets)是一种用来表现HTML元素显示方式的语言，包含元素的美观修饰、位置定位等。 ;ECMAScript ：通俗的叫法是javascript，浏览器可以解析并执行的语言，可以控制网页上元素，从而形成各种动态效果。 ;什么是HTML 超文本标记语言 (Hyper Text Markup Language)，在浏览器中配合CSS样式表显示网页，配合ECMAscript（javascript）完成网页特效。 ;Html等语言与浏览器的关系 浏览器是html、css、js的解析器、执行器。 ;Html是一种规范 Html是W3C制定的规范，规定了浏览器需要识别的html语法、html标签的基本功能，以及默认显示等。 ;Html规范的发展 1993年HTML1.0标准发布（由互联网工程小组IETF）。 1995年—1997年：HTML2/3/4标准发布（由W3C组织进行标准定义），每一个标准都不断完善了html的语法规范。 2014年HTML5标准发布（由W3C组织进行标准定义），增加了媒体播放、画图、定位等功能。(W3C介绍见备注) ;Html的兼容性 ;主流浏览器介绍;开发人员的调试方式 如果只是服务器开发人员配合编写少量前段程序，建议使用chrome 兼容性好、速度快、调试方式方便简洁、提供了更多功能（例如手机端真机运行插件）。Google放过我们这些无辜的程序员吧，开放服务器啊！！！ ;web前端的主流开发工具 Hbuilder：免费、轻量级，占用资源少，可作为移动端开发平台（打包工具），开发前端html、css、js、jquery等提示效果好，但对与nodejs需要下载插件，且下载后效果不佳。 Webstorm：收费、占用比较大内存资源，是流行的前端开发框架，开发html、css、js等提示效果好，但操作性稍差，对nodejs、angularjs等提示效果好。 Sublime：与hbuilder类似，对于nodejs提示少。;Hbuilder：DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 优点： 对原生的js、css、html的提供辅助编辑功能。 全中文界面，以eclipse为内核，上手快。 基于eclipse开发，具备插件安装功能。 内置html5打包工具与MUI显示组件。 对常用的js库如jquery提供辅助编辑功能。 下载地址：http://www.dcloud.io/ ;Hbuilder操作界面介绍;Hbuilder常用操作介绍： 新建项目：文件--》新建--》web项目 新建目录以及文件：右键--》新建--》目录或文件 编程辅助编辑快捷键： ALT+/ 插件安装：工具--》插件安装 （能安装默认插件与eclipse可以识别的插件） 快速运行配置：运行--》设置web服务器 快捷键列表：帮助--》快捷键列表;入门程序： 运行结果 ;Html的编写规范 在输入开始标签时同时输入结束标签 保证缩紧格式（一个tab键） 主动添加注释（快捷键 选中后 Ctrl+Shift+/） ;Html的调试 开发者工具（快捷键F12）是前端工程师调试程序的工具 通过检查功能可以快速定位选中的元素 ;第2节【 html基本结构】;标记（标签）语言 将数据、媒体、文本内容以固定的层级格式排列起来进行编程，html就是标记语言。 标记语言与纯文本对比 标记语言除了表示文字外可以表示图片、媒体等特殊信息。 标记语言具有层级关系。 ;标记（标签）语言的特点 封闭性 容器类标签要成对的出现。例如（div/div）。 非容器类标签需要特殊声明。例如(input /)。 嵌套性：标签存在层级关系。 支持内置属性 属性设置的格式为：属性名=“属性值” ;知识点2【 html基本结构 】-1;文档类型声明（DOCTYPE声明）:不属于HTML标签，标记语言的文档类型声明，通知浏览器以以下哪种方式解析标记语言。 严格模式(标准模式)：浏览器以其当前版本支持的最高标准呈现页面。 混杂模式（怪异模式）：页面以向后兼容的方式显示,防止老站点无法工作。 ;模式触发： DOCTYPE不存在或形式不正确会浏览器以混杂模式呈现网页。 只声明Doctype，不引用任何dtd文件，以严格模式呈现网页（html5标准）。 包含DTD和URI的DOCTYPE，严格模式呈现网页，以dtd文件对应的版本呈现网页。 ;头标签head：头标签包含当前网页的元数据描述，如搜索关键字、编码、引