从零开始学 Web 之 HTML（一）认识前端
大家好，这里是 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 相关的知识 ...
随机推荐
- [leetcode]25. Reverse Nodes in k-Group每k个节点反转一下
Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. k ...
- JavaSE基础知识（5）—面向对象（5.3访问修饰符）
一.说明 访问修饰符可以用于修饰类或类的成员(属性.方法.构造器.内部类) 二.特点 名称 本类 本包 其他包的子类 其他包的非子类 private 私有的 √ × × × 缺省 默认 √ √ × ...
- 找不到phpize
yum install php-devel 报错如下: 解决办法: yum install php71w-devel
- redis在游戏服务器中的使用初探(二) 客户端开源库选择
上文提到 搭建完成后 我们选择客户端的开源库进行连接 有以下三种选择 1 acl-redis 原因是支持VC 国产 作者博客 acl 框架库简介 用 acl 库编写高效的 C++ redis ...
- Mac 电脑设置显示路径
# 设置 defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Finder # 删除 defaults ...
- JSP内置对象application
application对象实现了用户间数据的共享,可存放全局变量 application开始于服务器的启动,终止于服务器的关闭 在用户的前后连接或不同用户之间的连接中,可以对application对象 ...
- 在Unity5.6.5f1中使用C#7语法
备忘,记忆力越来越差了,必需把这种琐碎的东西记下来,以防1年后想再用完全没头绪. 之前试过用C#6语法,但是怎么配置操作的完全没印象了. 首先去这下载扩展 https://bitbucket.org/ ...
- bgfx入门练习2——找出DX,OpenGL驱动切换实现原理
找到驱动切换的代码,自然而然就要找实现的位置了,简单搜了下,原来是GLSL Shader字节码转换到HLSL字节码,正好和Klayge做了相反的工作. 时间上似乎也差不多,Klyage是2014年搞的 ...
- [solution] JZOJ 5459. 密室
[solution] JZOJ 5459. 密室 Description 小X 正困在一个密室里,他希望尽快逃出密室. 密室中有$N$ 个房间,初始时,小X 在1 号房间,而出口在N 号房间. 密室的 ...
- PMP：3.项目经理角色
成员角色:整合指挥者 在团队中的职责:负终责 知识技能:综合技能&沟通 定义: 职能经理专注于对某个职能领域或业务部门的管理监督. 运营经理负责保证业务运营的高效性. 项目经理是由执行组织 ...