零基础HTML5.1入门视频教程

系统学习HTML5技术,学习如何利用HTML5、CSS3相关技术开发移动web网站和web app等

38854人学习

初级27课时2017/01/10更新

二维码下载学堂APP缓存视频离线看

易君
    • 畅销套餐
    • 精选套餐
    • 人气套餐
    • 尊享套餐
    • 高薪套餐
前端开发攻城狮系列套餐
HTML+DIV+CSS零基础入门与制作企业站视频课程
78135人学习
¥1.00
Web开发之 - 运指如飞【Sublime Vim插件&Emmet插件学习】
2196人学习
¥49.00
jQuery在网站中的应用-零基础实战
15248人学习
¥69.00
更 多 7 门 课 程
Web前端:基础入门(套餐系列)
HTML零基础入门视频课程(适合初学者的教程)
39644人学习
¥29.00
CSS零基础入门视频课程(适合初学者的教程)
28799人学习
¥29.00
JavaScript零基础入门课程(适合初学者的教程)
84629人学习
¥49.00
更 多 3 门 课 程
跟我学之web前端入门知识储备系列套餐
跟我学之jQuery牛刀小试视频教程
64486人学习
¥129.00
跟我学之JavaScript初学专列视频教程
33536人学习
¥19.00
跟我学之HTML+CSS入门畅游视频课程
54273人学习
¥9.00
更 多 3 门 课 程
前端工程师基础与提升系列专题:实战之路
12步入门前端工程师视频教程【赵甲迪】
2598人学习
¥9.00
小白时代:WEB技术实战视频课程(DIV+CSS攻略)
5435人学习
¥19.00
前端工程师实战进阶视频课程——玩转JavaScript
2900人学习
¥16.00
更 多 9 门 课 程
前端工程师基础与提升系列专题:实战之路
12步入门前端工程师视频教程【赵甲迪】
2598人学习
¥9.00
小白时代:WEB技术实战视频课程(DIV+CSS攻略)
5435人学习
¥19.00
前端工程师实战进阶视频课程——玩转JavaScript
2900人学习
¥16.00
更 多 9 门 课 程
  • 课程介绍
  • 课程大纲

适合人群:

java工程师,web前端工程师,HTML5开发人员

你将会学到:

系统学习HTML5技术,学习如何利用HTML5、CSS3相关技术开发移动web网站和web app等

课程简介:

HTML5技术特点:
 
1、提高可用性和改进用户的友好体验;
2、有几个新的标签,这将有助于开发人员定义重要的内容;
3、可以给站点带来更多的多媒体元素(视频和音频);
4、可以很好的替代FLASH和Silverlight;
5、当涉及到网站的抓取和索引的时候,对于SEO很友好;
6、将被大量应用于移动应用程序和游戏;
7、可移植性好。

 
HTML5未来发展趋势:
       
     HTML5规范开发完成时,将成为主流。据统计2013年全球将有10亿手机浏览器支持HTML5,同时HTML Web研发者数量将达到200万。毫无疑问,HTML5将成为未来5-10年内,移动互联网领域的主宰者。据IDC的调查报告统计,截至2012年5月,有79%的移动开发商已经决定要在其应有程序中整 合HTML5技术。12月,万维网联盟宣布已经完成对HTML5标准以及Canvas 2D性能草案的制定,这就意味着开发人员将会有一个稳定的“计划和实施”目标。有很多的文章都在号召使用HTML5,并大力宣传它的好处。此前,站长之家曾经做过一期调查,调查显示只有36.16%的站长正在学习中,另外的63.76%表示正在观望中。作为站长,你是否准备开始学习HTML5?
 
    从性能角度来说,HTML5首先是缩减了HTML文档,使这件事情变得更简单。第一,从用户可读性上说,原先一大堆东西对初学者来说,第一次看到这些东西是看不懂的,而HTML5的声明方式对用户来说显然更友好一些。
 
  
  
课程目录 

课时1: 环境搭建和HTML概述
内容:
    什么是HTML?(What is HTML)
    HTML历史(HTML History)
    标签语法(Tag Syntax)
    创建第一个网页
    浏览器(Web browsers)


课时2:HTML基础标签
内容:
    文档类型(DOCTYPE)
    网页结构(Web Page Structure)
    元数据标签(Meta)
    标题标签(Heading )
    段落标签(Paragraph)
    标尺线标签(horizontal rules)
    行打断(break)
    有序列表(ordered list)
    无序列表(unordered list)
    定义列表(definition list)

课时3:超链接和嵌入内容(图片,视频)
内容:
    超链接标签(Hyperlinks)
    链接选项(Link options)
    基础标签(Base)
    嵌入图片(Images)
    嵌入视频(Videos)
    嵌入音频(Audios)
    嵌入网页(iframe)
    嵌入画布(canvas)
    嵌入SVG(SVG)
    嵌入PDF,FLUSH等
    图片映射(image map)
课时4:表格
内容:
    表格/表格行/单元格(Table/Table Row/Table Data)
    表格头/表格体/表格脚(thead/tbody/tfoot)
    表格标题单元格(Table Heading)
    表格标题(Captions)
    表格列(colgroup/col)
    合并单元格(cell span)
课时5:表单
    表单(form)
    表单控件(Form controls)
    单行文本(input text),多行文本(textarea)
    密码框(passowrd)
    文件选择框(file)
    单选(radiobutton)/多选(checkbox)
    按钮(button)
    选择菜单(select menu)
    控件集(Fieldset)/lengend
    标注(lable)
    数据列表(DataList)

课时6:分区标签
内容:
    语义化的概念(semantics)、 Main、Article、Section、Aside、Header、Footer、Nav、Adress、 blockquote
课时7:文本语义
课时8:其他标签和已过时标签
 

展开更多

课程大纲-零基础HTML5.1入门视频教程

  • 第1章开发环境搭建和HTML概述(4小时56分钟27节)

  • 1-1

    开发环境搭建和第一个网页一、开发工具介绍1)文本编辑工具     a)以记事本(notepad)为代表的等简单的文本编辑工具         如editplus,notepad++,UltraEdit,Sublime Text,两大神器(Emacs和VIM)等     b)集成开发工具         如HBuilder,Webstorm,Eclipse等2)网页浏览器(需支持html5)     a)基于Trident内核的浏览器         Microsoft的Internet Explorer 9+(IE)或Microsoft Edge     b)基于webkit内核的浏览器         如Google的chrome,360的360chrome浏览器,苹果公司的Safari浏览器,Opera (Opera)等     c)基于Gecko内核的浏览器         如Mozilla的Firefox(FF)         二、本课程使用开始的使用记事本,后面使用HBuilder测试浏览器使用360公司的360chrome

    「仅限付费用户」点击下载“所有源代码和笔记.rar”

    [05:53]
  • 1-2

    HTML概述一、什么是HTML?     HTML(全称:HyperText Markup Language 超文本标记语言),用来编写网页的     网页的组成:     1)HTML         ---定义网页的结构和内容     2)CSS         ---定义网页的外观     3)Javascript     ---定义网页的行为主:在浏览器上"右键"选择"查看网页源码",你看见的就是网页的源码,里面包含HTML+CSS+JS等

    「仅限付费用户」点击下载“note.rar”

    [12:49]
  • 1-3

    HTML标签语法一、文档类型(DOCTYPE)写在每个网页的第一行,告诉浏览器本网页遵守的规范html5的写法:     <!DOCTYPE html>其他html版本的写法请参考w3c(www.w3.org)或http://www.w3school.com.cn(w3c简体中文)二、HTML标签语法HTML主要由标签(tag)相互嵌套组成1)tag的语法两种     1.1)<标签名> ..内容..</标签名>-----标准标签写法         <div>..内容..</div>         <span>..内容..</span>     1.2)<标签名>------------空标签简写写法         <meta/> 进一步简写<meta>         <br/>   进一步简写<br>注:a)所有标签名小写,我们仅能使用w3c定义的哪些标签(即标签名不能乱写)b)标签总是成对出现的(即写了开始标签一定要写结束标签)c)有些标签在网页中可以使用多次,有的仅能使用1次d)没有标签内容的标签称为空标签,可以简写

    「仅限付费用户」点击下载“03HTML标签语法.rar”

    [18:03]
  • 1-4

    HTML语法练习题讲解HTML语法练习题

    「仅限付费用户」点击下载“04HTML标签属性语法.rar”

    [04:02]
  • 1-5

    HTML标签属性语法1)基础标签(网页结构标签)2)超链接标签3)嵌入内容标签4)表格标签5)表单标签6)分区语义标签7)文本语义标签8)head下子标签9)其他标签

    「仅限付费用户」点击下载“01标签分类.rar”

    [07:51]
  • 1-6

    网页基础标签讲解网页基础标签

    [09:20]
  • 1-7

    body中标签初体验讲解body中标签初体验

    [08:35]
  • 1-8

    HBuilder的使用一、HBuilder概述一款前端开发(网页开发,微信app,混合开发)的IDE工具官网:http://www.dcloud.io/二、HTML开发1)新建-web项目-选择"默认项目"2)项目默认结构项目     css -----放css文件     img -----放图片     js -----放js文件     index.html(网页)3)运行配置3.1)菜单-运行-运行配置3.2)选择网页浏览器     chrome 配置中指定chrome浏览器程序的路径3.3)菜单-运行-chrome即可

    「仅限付费用户」点击下载“02HBuilder的使用.rar”

    [14:10]
  • 1-9

    列表标签一、列表标签有三种有序列表无序列表定义列表二、有序和无序列表1)有序列表(ordered list)--<ol>语义:其中包含的内容是一个列表且有序属性:type 定义列表标记的类型     常用值:内容:仅能包含li(+)标签2)无序列表(unordered list)--<ul>语义:其中包含的内容是一个列表且无序属性:type 定义列表标记的类型     常用值:内容:仅能包含li(+)标签3)列表项(list item)--<li>语义:列表项属性:无内容:容器标签,可包含文本和大多数标签注:li标签中也可以再嵌套ol和ul标签

    「仅限付费用户」点击下载“03-列表标签.rar”

    [13:02]
  • 1-10

    链接到某个网页讲解链接到某个网页

    「仅限付费用户」点击下载“04-超链接和嵌入内容标签.rar”

    [09:24]
  • 1-11

    base标签讲解base标签

    [07:38]
  • 1-12

    锚点讲解锚点

    [07:27]
  • 1-13

    嵌入图片讲解嵌入图片

    [11:28]
  • 1-14

    图片映射讲解图片映射

    [06:12]
  • 1-15

    嵌入音频视频讲解嵌入音频视频

    [13:50]
  • 1-16

    嵌入网页讲解嵌入网页

    [10:28]
  • 1-17

    嵌入网页作业讲解嵌入网页作业

    [01:46]
  • 1-18

    嵌入PDF,FLUSH等嵌入PDF,FLUSH等

    [08:04]
  • 1-19

    表格标签1一、表格标签1)表格定义原理表格由table标签定义,然后在其中定义行tr(table row),然后确定每一行有几个单元格(cell)不同行的单元格数量可以不一致2)表格系列标签一览table 用于定义一个表格,不能包含文本,仅能包含     <caption><colgrourp><thead><tbody><tfoot><tr>     caption(?) 用于定义表格标题,仅能作为table的子标签     thead(?) 定义表格头,仅能作为table的子标签     tbody(*) 定义表格体,仅能作为table的子标签     tfoot(?) 定义表格脚,仅能作为table的子标签     tr(+) 定义一行,技能作为table,thead,tbody,tfoot的子标签         th   定义作为标题的单元格(table header cell )         td   定义数据的单元格(table data cell)         colgroup 用于组合col 仅能作为table的子标签         col   用于关联表格一列 仅能作为colgroup的子标签(column)

    「仅限付费用户」点击下载“05-表格标签.rar”

    [10:31]
  • 1-20

    表格标签2讲解表格标签2

    [06:56]
展开更多
在线
客服
APP
下载

下载Android客户端

下载iphone 客户端

官方
微信

关注官方微信

返回
顶部