- 畅销套餐
- 精选套餐
- 人气套餐
- 尊享套餐
- 高薪套餐
- 课程介绍
- 课程大纲
适合人群:
零基础 小白 新手 前端爱好者 大学生 技术转型 职业转型 WEB前端 美工
你将会学到:
PHP全栈开发工程师课程,挑战年薪30万,HTML5+CSS3移动端项目开发基础与提升,包含知识:HTML5,CSS3,移动端项目开发,百度地图API,通过20天的学习快速学习移动端项目开发和HTML5**知识技术。
课程简介:
WEB前端开发工程师 HTML5+CSS3移动端项目开发基础与提升视频课程(Head老师)
Head老师带你学习Web前端技术。
学习基本的HTM学习基本的HTML/HTML5+CSS/CSS3网页布局,以及JavaScript特效,最终可以独立开发出高颜值,多特效的前端PC网页L/HTML5+CSS/CSS3网页布局,以及JavaScript特效,最终可以独立开发出高颜值,多特效的前端PC网页
课程大纲-WEB前端开发工程师 HTML5+CSS3移动端项目开发基础与提升视频课程(Head老师)
第1章WEB前端开发工程师-HTML5超文本标记语言(4小时29分钟17节)
1-2
HTML5 格式1.Doctype文档类型声明(Document Type Declaration,也称 Doctype)。它主要告诉浏览器所查看的文件类型。在以往的 HTML4.01 和 XHTML1.0 中,它表示具体的 HTML 版本和风格。而如今 HTML5 不需要表示版本和风格了。<!DOCTYPE html> //不分区大小写2.html 元素首先,元素就是标签的意思,html 元素即 html 标签。html 元素是文档开始和结尾的元素。它是一个双标签,头尾呼应,包含内容。这个元素有一个属性和值:lang="zh-cn",表示文档采用语言为:简体中文。<html lang="zh-cn"> //如果是英文则为 en3.head 元素用来包含元数据内容,元数据包括:<link>、<meta>、<noscript>、<script>、<style>、<title>。这些内容用来浏览器提供信息,比如 link 提供 CSS 信息,script提供 JavaScript 信息,title 提供页面标题等。<head>...</head> //这些信息在页面不可见4.meta 元素这个元素用来提供关于文档的信息,起始结构有一个属性为:charset="utf8
「仅限付费用户」点击下载“笔记.docx”
[07:55]开始学习1-3
HTML5 新增标签结构性标签: 结构性标签(construct tag)主要负责Web的上下文结构的定义,确保 HTML文档的完整性,这类标签包括以下几个。1.section。用于表达书的一部分或一章,或者一章内的一节。在Web页面应用中,该标签也可以用于区域的章节表述。2.hgroup 对网页或区段(section)的标题进行组合。3.header页面主体上的头部,注意区别于head标签。这里可以给初学者提供一个判断的小技巧:4.head标签中的内容往往是不可见的,而header标签往往在一对body标签之中。5.footer页面的底部(页脚)。通常,人们会在这里标出网站的一些相关信息,例如关于我们、法律申明、邮件信息、管理入口等。6.nav是专门用于菜单导航、链接导航的标签,是navigator的缩写。7.article用于表示一篇文章的主体内容,一般为文字集中显示的区域
「仅限付费用户」点击下载“笔记.docx”
[08:11]开始学习1-4
HTML5 新增标签详解块级性标签: 块级性标签(block tag)主要完成Web页面区域的划分,确保内容的有效分隔,这类标签包括以下几个。1.aside 用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看就是侧边栏,可以在左边,也可以在右边。从一个页面的局部看,就是摘要。2.figure 标签规定独立的流内容,通常与figcaption联合使用。3.code 表示一段代码块。4.dialog 对话标签 配合dt dd标签使用
「仅限付费用户」点击下载“笔记.docx”
[19:42]开始学习1-5
HTML5 新增标签详解-2行内标签: 行内语义性标签(in-line tag )主要完成Web页面具体内容的引用和表述,是丰富内容展示的基础,这类标签包括以下几个。1.meter。表示特定范围内的数值,可用于工资、数量、百分比等 max表示最大值,min表示最小值,value代表当前值。2.time。表示时间值,属性datetime强调时间3.progress。用来表示进度条
「仅限付费用户」点击下载“笔记.docx”
[18:57]开始学习1-7
HTML5 拖放应用1. 创建拖拽对象首先,为了使元素可拖动,把 draggable 属性设置为 true 。draggable属性,它有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto:浏览器自己判断元素是否能被拖拽。2. 处理拖拽事件当我们拖拽对象的时候会触发拖拽事件包括:dragstart:当元素拖拽开始触发;drag:在元素拖拽过程中触发;dragend:元素拖拽结束时触发。3. 创建投放区当拖拽对象进入投放区的时候会触发相关的事件dragenter:当拖拽对象进入投放区时触发;dragover:拖拽对象在投放区内移动时触发;dragleave:拖拽对象没有投放到投放区,离开投放区的时候触发;drop:拖拽对象投放在投放区时触发。注意:dragenter、dragover可能会受到默认事件的影响,所以我们在这两个事件当中使用e.preventDefault();来阻止事件默认事件
「仅限付费用户」点击下载“笔记.docx”
[18:05]开始学习1-8
HTML5 多媒体标签1.在 HTML5 中, HTML5 规定了一种通过 video 元素来包含视频的标准方法。2.在html5之前,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。同时网页上显示视频也没有统一的标准。
「仅限付费用户」点击下载“笔记.docx”
[17:37]开始学习1-9
HTML5 新增的表单元素HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用,才能和服务器进行方便快捷的交互。
「仅限付费用户」点击下载“笔记.docx”
[14:23]开始学习1-10
HTML5 表单新属性HTML5 的 <form> 和 <input>标签添加了几个新属性.1.novalidatenovalidate 属性是一个 boolean(布尔) 属性.novalidate 属性规定在提交表单时不应该验证 form 或 input 域。2.Autocompleteautocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。3.autofocusautofocus 属性是一个 boolean 属性.autofocus 属性规定在页面加载时,域自动地获得焦点。
「仅限付费用户」点击下载“笔记.docx”
[17:05]开始学习1-11
HTML5 input类型HTML5 新的 Input 类型HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本章全面介绍这些新的输入类型:1.Colorcolor 类型用在input字段主要用于选取颜色,如下所示2.datedate 类型允许你从一个日期选择器选择一个日期。3.datetimedatetime 类型允许你选择一个日期(UTC 时间)。4.datetime-localdatetime-local 类型允许你选择一个日期和时间 (无时区).5.Emailemail 类型用于应该包含 e-mail 地址的输入域。6.Monthmonth 类型允许你选择一个月份。7.Numbernumber 类型用于应该包含数值的输入域。8.Rangerange 类型用于应该包含一定范围内数字值的输入域。9.Searchsearch 类型用于搜索域,比如站点搜索或 Google 搜索。10.Tel定义输入电话号码字段:11.timetime 类型允许你选择一个时间。12.urlurl 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。13.Weekweek 类型允许你选择周和年。注意:并不是
「仅限付费用户」点击下载“笔记.docx”
[12:28]开始学习1-12
HTML5 地理位置定位地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。
「仅限付费用户」点击下载“笔记.docx”
[16:37]开始学习1-14
HTML5 本地存储HTML5 web 存储,一个比cookie更好的本地存储方式。使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
「仅限付费用户」点击下载“笔记.docx”
[19:21]开始学习1-15
HTML5 内联SVG1.SVG 指可伸缩矢量图形 (Scalable Vector Graphics)2.SVG 用于定义用于网络的基于矢量的图形3.SVG 使用 XML 格式定义图形4.SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失5.SVG 是万维网联盟的标准
「仅限付费用户」点击下载“笔记.docx”
[12:43]开始学习1-16
HTML5 Canvas绘图HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
「仅限付费用户」点击下载“笔记.docx”
[21:29]开始学习1-17
HTML5 Canvas绘图应用HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
「仅限付费用户」点击下载“笔记.docx”
[17:43]开始学习第2章WEB前端开发工程师-CSS3层叠样式表(3小时7分钟14节)
2-1
CSS3概述CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
「仅限付费用户」点击下载“笔记.docx”
[07:57]开始学习2-3
CSS3背景属性属性值说明background-color颜色背景的颜色background-imagenone 或 url背景的图片background-repeatno-repeat 或repeat背景图片是否平铺background-size长度值或其他背景图像的尺寸background-position位置坐标背景图像的位置background-attachment滚动方式背景图片的滚动background-clip裁剪方式背景图片的裁剪background-origin位置坐标背景图片起始点background复合值背景图片简写方式
「仅限付费用户」点击下载“笔记.docx”
[12:08]开始学习
“申建明”老师的其他课程更多+