大家好，这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
1、什么是前端
前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。
前端设计一般可以理解为网站的视觉设计，比如 UI 设计；
前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
前端开发的核心部分主要是：HTML，CSS，JavaScript 三个部分。
HTML 是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构；
CSS 部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等；
JavaScript 是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。
2、网页组成
一个网页的组成部分主要包括下面几个部分：文字、图片、输入框、视频、音频、超链接 等。
3、Web 标准
说道 Web 标准，不能不说 W3C 组织（World Wide Web Consortium），全程为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。简单的说就是就是确定 Web 页面的语法格式和规范的。
与之类似的一个组织是「European Computer Manufacturers Association」（ECMA组织），这个组织制定了标准的脚本语言规范 ECMAScript ，而 JavaScript 就参照的这个规范。
那么 Web 标准规范了下面三个部分：
- HTML 标准（结构标准 ），相当人的骨架结构。
- CSS 样式（表现）标准 ， 相当于给人化妆变的更漂亮。
- JavaScript 行为标准 ， 相当与人在唱歌，页面更灵动。
4、浏览器内核
浏览器内核是一个浏览器的核心部分，也就是「渲染引擎」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
这里涉及到一个「兼容性问题」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。
5、认识 HTML
HTML 全程为：超文本标记语言（Hyper Text Markup Language）。这里超文本就是超链接的意思，就是可以实现页面的跳转。
6、HTML 结构标准
HTML 基本结构如下：
< !doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
-
<!DOCTYPE html>是告诉浏览器，以下文件用 HTML 哪个版本解析，这里是 HTML5 版本。 -
<html></html>标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。 -
<head></head>是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入 JavaScript 脚本，CSS 格式等。 -
<body></body>是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。
7、html 标签分类
单标签 <! Doctype html>
双标签 <html> </html> ，<head></head>， <title></title>
8、html 标签关系分类
包含（嵌套关系） <head><title></title></head> 父子关系
并列关系 <head></head><body></body> 兄弟姐妹
9、开发工具
前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是 Windows 系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。
那么我推荐大家使用的是「Sublime Text 3」 代码编辑器，它虽小巧精致，但有着炫酷的界面，并且有大量的插件可以使用，大大提高了代码的编写效率。
提到 Web 开发工具不得不提到 JebBrain 全家桶的「 Webstorm 」软件。目前已经被广大 Web 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它令人称到的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。
建议初学者初期使用Sublime等文本编辑器，太过于智能的编辑器确实会带给我们极大地便利，但是在带给我们便利的同时，也会削弱我们对基础知识的掌握，只有自己一个单词一个单词敲出来的代码，才会让我们记得更加牢固。
10、小结
今天的内容大部分都是一些理解性的基础知识，算是开胃小菜，明天我们将进入真正的 HTML 基础知识干货的学习。
从零开始学 Web 之 HTML（一）认识前端的更多相关文章
-
从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...
-
从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
-
从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
-
从零开始学 Web 之 Vue.js（六）Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
-
从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
-
从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
-
从零开始学 Web 之 HTML（三）表单
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
-
从零开始学 Web 之 CSS（一）选择器
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
-
从零开始学 Web 之 CSS（二）文本、标签、特性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
随机推荐
-
facebook 用curl获取用户资料
用facebook获取用户信息 $graph_url= "https://graph.facebook.com/me?scope=email&fields=id,name,email ...
-
SearchLookUpEdit
参考资料: 慧都控件网-DevExpress开发资源 在GridControl控件中使用SearchLookUpEdit构建数据快速输入
-
for...in也反复执行语句，但它是用来操作对象的
for...in也反复执行语句,但它是用来操作对象的
-
DOS命令行下mysql 基本命令
第一招.mysql服务的启动和停止 net stop mysql net start mysql 第二招.登陆mysql 语法如下: mysql -u用户名 -p用户密码 键入命令mysql -uro ...
-
SQL Server session故障排查
--根据作业名 查找session id select a.spid,a.blocked,b.name,substring(replace(a.PROGRAM_NAME,'SQLAgent - TSQ ...
-
ASP.NET 学习小记 -- “迷你”MVC实现(1)
ASP.NET 由于采用了管道式设计,具有很好的扩展性.整个ASP.NET MVC应用框架就是通过扩展ASP.NET实现的.通过ASP.NET的管道设计,我们知道,ASP.NET的扩展点主要是体现在H ...
-
云方案，依托H3C彩虹云存储架构，结合UIA统一认证系统，实现了用户数据的集中存储和管理
客户的声音 资料云项目在迷你云基础上二次开发,通过使用云存储技术及文件秒传技术,对文件进行统一存储与管理,以达到节约文件管理成本.存储成本目的:通过有效的文件版本控制机制,以达到风险管控的目的:通过多 ...
-
poj3308 Paratroopers --- 最小点权覆盖-&;gt;最小割
题目是一个非常明显的二分图带权匹配模型, 加入源点到nx建边,ny到汇点建边,(nx.ny)=inf建边.求最小割既得最小点权覆盖. 在本题中因为求的是乘积,所以先所有取log转换为加法,最后再乘方回 ...
-
django Table doesn&#39;t exist
1146 django Table '' doesn't exist 一:出错原因 手动在数据库中drop了一张表,重新执行python manage.py migrate时出错,提示不存在这 ...
-
【洛谷p1605】迷宫
(还记得我昨天大概没人看到的博客(我删辽)吗qwq,2019.4.14下午交的qwq 那篇博客大致内容就是:我提交楼上这道题,交了好久好久好久好久 现在我告诉你,那次评测还N/A着呢qwq) tqlq ...