整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
1 HTML初识
一般先学习html+css，这里我们先定一个小目标，先学HTML，后学习CSS。
HTML（英文 Hyper Text Markup Language的缩写）中文译为超文本标签语言"，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
<strong>我是加粗的字体</strong>
注：HTML就是一种文本标签语言，唯一的标签就是 < >
2 HTML骨架格式
日常生活的书信，我们要遵循共同的约定。
同理：HTML有自己的语言语法骨架格式：
<html> <head> <title></title> </head> <body> </body> </html>
3 我的第一个页面及其标签简介
用记事本写下如下代码，保存为html文件，用浏览器打开，即可展示。
<html> <head> <title>我的第一个网站</title> </head> <body> 我终于制作了自己的第一个页面！！ </body> </html>
html标签：所有html中标签的一个根节点。
head标签：用于存放：title ,meta, base， style， script， link
注意，在head标签中我们必须要设置的标签是title
title标签：让页面拥有一个属于自己的标题。
body标签：页面在的主体部分，用于存放所有的html标签：p， h， a， b， u， i， s， em， del， ins， strong， img
4 猪八戒版骨架记忆法
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
本章已结束，下篇文章将分享《04HTML常用标签》小伙伴们不要错过哟！
于想学习HTML5的同学都想了解，学习HTML5要学哪些内容？对于新手来说，如果学才能更好的掌握这些技术呢？今天给大家简单讲一下适合新手学习的方法步骤。
方法一：注重实践，由实践出真知在HTML5知识学习过程中，有些学员不喜欢动手，更喜欢听讲师讲或者自己背诵，这种学习方法是万万不可取的。因为代码的学习，是个需要动手的过程。掌握代码不仅仅只有记忆还有尝试。尝试自己去写代码，然后发现问题，最后进行归纳总结，同时形成理论并记忆。
方法二：由整体到局部，由骨架到血肉我们在学习HTML和CSS时，会涉及到网页的搭建等相关知识。在学习这部分知识时我们采取的是“由外及内”、“由整体到部分”、“由全局到细节”的学习方法。我们在接触某一个新的知识点时，一定要从主干到枝叶，不要拘泥于某一个细节而沉溺于其中。主干如同知识的一个主线，这种先找主干后添枝叶的学习方法能够让知识遗漏变成最少，也会比较容易建立起知识与知识间的关系。
方法三：记忆很重要我们刚才在方法一中提到注重实践，并不是让我们忽略记忆。记忆也是同样重要的，学习时我们通常会遇到需要记忆的知识点。如有哪些数据类型、有哪些标签元素等等。遇到这类知识点时我们一定要通过记忆将其熟练掌握，很多人在学习的过程中觉得还是理解是最重要的，这种想法是错误的。因为如果连记都记不住还谈什么理解呢?
方法四：类比在学习CSS引入方式这种知识点时，我们采用了另一种学习方法。类比，或者也可以叫做辨析。这种方法主要针对于区分相似的两种或多种事物。如strong与em，块元素与行元素，同步与异步等等此类知识具有相似性的知识，应多多思考，抓取几种事物的不同点，结合去记忆。
方法五：循序渐进的学习学习是一个日积月累的过程，不能一口吃成一个胖子。在学习的过程中我们通常会遇到一些大型的知识，这种知识是比较难啃的。当我们遇到此类知识时，不要急于求成，要脚踏实地一步一步的来，例如动画框架的学习就是一个典型的例子。在循序渐进的学习过程中，学习思路也是很重要的。换句话说，我们面对一个“大型”的知识点，知道要按部就班的一步一步的来完成，但是就是不知道该怎么开始，从哪儿开始。这时候就需要我们有明确的学习思路，在学习知识的过程中重点是关注思路，而具体的小知识点就是血和肉。
方法六：有一双善于发现的眼睛，利用生活辅助学习。
这种学习方法简单来讲就是利用生活中的实际事物辅助抽象知识的学习。利用这种方法能够让我们更快更好的理解和吸收知识，例如在讲解AJAX时我们利用了信件邮寄。在讲解构造函数时，我们利用了毛坯房和装修房。在讲解引用类型变量的时候我们借助了钥匙和仓库的关系等等。学习并不是一蹴而就的，在学习过程中有一个良好的学习方法这是至关重要的。掌握一套自己的学习方法，日后必定受益终生的。
重点学习哪些技术的的内容重点分享：
第一阶段：前端页面重构
内容包含了：（PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目）
第二阶段：JavaScript高级程序设计
内容包含：1）原生 JavaScript交互功能开发项目、面向对象进阶与 ES5/ES6应用项目、JavaScript工具库自主研发项目）
第三阶段：PC端全栈项目开发
内容包含：（jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目）
第四阶段：移动端项目开发
内容包含：（Touch端项目、微信场景项目、应用 Angular+Ionic开发 WebApp项目、应用 Vue.js开发 WebApp项目、应用 React.js开发 WebApp项目）
第五阶段：混合（Hybrid,ReactNative）开发
内容包含：（微信小程序开发、React Native、各类混合应用开发）
第六阶段：NodeJS全栈开发
内容包括：（WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库）
第七阶段：大数据可视化
内容包含：（大数据可视化化基础与实战、一、数据可视化入门、二、D3.js详解、三、其他JS库）
以下是福利时间：
HTML5近几年可以说是很火，所以想学现在就开始是很好的时期，想要学习的同学，可以留言或者私信我，可以免费分享全套HTML5的视频教程给大家。
篇目录
本篇目录
什么是HTML
HTML的作用
HTML发展史
IETF简介
W3C简介
网页的固定格式
html标签
head标签
title标签
body标签
head内部标签
meta标签
HTML标签
HTML标签分类
HTML标签关系分类
DTD文档声明
HTML和XHTML、HTML5区别
htm 和 .html扩展名区别
什么是HTML
HTML其实是HyperText Markup Language的缩写, 超文本标记语言
HTML的作用
1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为.html, 然后再利用浏览器打开
2.打开之后发现显示的格式不对, 不对的原因是因为在纯文本文件中所有文字都是同级别的, 浏览器不知道哪些文字代表什么意思. 也就是浏览器不知道哪些文字是标题, 哪些文字是段落…., 所以导致了显示的格式不正确
正是因为如此, 所以HTML应用而生. HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.
这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的
所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"
注意事项:
虽然我们利用H1标签描述一段文本之后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去我们是利用HTML的标签修改了被描述的那段文本的样式. 但是一定要记住, HTML只有一个作用, 它是专门用来给文本添加语义的, 而不是用来修改文本的样式的
H1标签它的作用是什么?
错误: H1标签可以用来修改文字的大小, 并且还可以将文字加粗
正确: H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义的
HTML发展史
IETF简介
IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是”互联网工程任务组”
IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等
W3C简介
W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。
Tim Berners-Lee（蒂姆·伯纳斯-李），万维网之父、html设计者、w3c创始人
百度百科
网页的固定格式
1.编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式
2.写信基本结构
3.编写网页的步骤:
3.1.新建一个文本文档
3.2.利用记事本打开
3.3.编写THML代码
3.4.保存并且修改纯文本文档的扩展名为.html
3.5.利用浏览器打开编写好的文件
4.网页基本结构:
5.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签html标签
作用:
用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档
注意点:
其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间
head标签
作用:
指定网站的标题 / 指定网站的小图片
添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
外挂一些外部的css/js文件
添加一些浏览器适配相关的内容
用于给网站添加一些配置信息
例如:
注意点:
一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到
title标签
作用:
专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
注意点:
title标签必须写在head标签里面
body标签
作用:
专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
注意点:
虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中
一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签
head内部标签
meta标签
1.为什么会有乱码现象?
因为我们在编写网页的时候没有指定字符集
2.如何解决乱码现象?
在head标签中添加<meta charset="GBK" />, 指定字符集
3.什么是字符集
字符集就是字符的集合, 也就是很多字符堆在一起. 其实字符集很像我们古代的”活字印刷术”, 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 所以导致了乱码问题
假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都需要去取”李”字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取”李”字的小章, 必然找不到,, 所以就导致了乱码问题
这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子
所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容
4.GBK(GB2312)和UTF-8区别
提交比较大
体积比较小
GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
UTF-8里面存储的世界上所有的文字
5.那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?
如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快
如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8
懒人推荐: 不管三七二十一, 一律写UTF-8即可
6.注意点:
在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题
HTML标签
HTML标签分类
单标签
只有开始标签没有结束标签, 也就是由一个<>组成的
双标签
有开始标签和结束标签, 也就是由一个<>和一个</>组成的
HTML标签关系分类
并列关系(兄弟/平级)
嵌套关系(父子/上下级)
DTD文档声明
什么是DTD文档声明?
由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页
DTD文档声明格式:
注意事项:
不写也能运行
H5网页里面用H4也能运行
<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前
<!DOCTYPE> 声明不是 HTML 标签
<!DOCTYPE> 声明没有结束标签
<!DOCTYPE> 声明对大小写不敏感
这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制
HTML5之前有2大种规范, 每种规范中又有3小种规范
| 大规范 | 小规范 |
|---|---|
| HTML | Strict (严格的) |
| HTML | Transitional(过度的,普通的,宽松的) |
| HTML | Frameset(带有框架的页面) |
| XHTML | Strict (严格的) |
| XHTML | Transitional(过度的,普通的,宽松的) |
| XHTML | Frameset(带有框架的页面) |
HTML的DTD文档声明和XHTML的DTD文档声明有何区别?
XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格
Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用
例如font标签/u标签等
font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签
u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签
Transitional表示普通的, 这种模式是没有一些别的要求
例如可以使用font标签、u标签等
但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用
Frameset表示框架, 在框架的页面使用
后面学到框架/NodeJS 再做详细了解
常见的DOCTYPE有如下几种
有这么多规范我们学习过程中到底使用哪一种比较合适呢?
www.baidu.com (B)
www.taobao.com (A)
www.qq.com (T)
www.sohu.com(大奇葩)
无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明
但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)
目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明
HTML和XHTML、HTML5区别
在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种情况下，HTML标准不是很规范，浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面
html语言本身有一些缺陷（例如： 内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们希望xml来弥补html的不足，但是目前有成千上万的网页都是用html编写的，所以完全使用xml来替代html还为时过早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是实现从html向xml的过度
为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，如果页面有HTML错误，就要显示错误信息。但是由于已有的web页面中已经有了大量的错误，很多开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准之后增加了一个附录C，允许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面
W3C随后在XHTML 1.1中取消了附录C，即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用
有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性，但是它最重要的一个特性是，不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>，它就成也一个HTML5页面，并且可以照样在浏览器里正常的展示。
简而言之
HTML语法非常宽松容错性强;
XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性
.htm 和 .html扩展名区别
DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
所以htm是为了兼容过去的DOS命名格式存在的
关于课程的疑问和讨论，可以登录http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。
*请认真填写需求信息，我们会在24小时内与您取得联系。
