从零开始学 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 相关的知识 ...
随机推荐
- Python开发——解释器安装
Python(解释器)安装 Windows 1.Python(解释器)下载链接 2.选择好安装路径,点击安装即可 3.环境变量配置 [右键计算机]-->[属性]-->[高级系统设置]--& ...
- 更改angular的默认端口
一.现象 当本地同时运行了多个angular项目时,端口占用问题 Port 4200 is already in use. Use '--port' to specify a different po ...
- MAC系统上不能调试华为手机
调试问题: 使用MACOS会发现在android 开发环境完整的情况下,接入MOTO,SAMSUNG,HTC,ZTE等手机都可以自动识别,并可以在DDMS中查看LOGCAT,唯独华为的手机不可识别.U ...
- BZOJ1880或洛谷2149 [SDOI2009]Elaxia的路线
BZOJ原题链接 洛谷原题链接 显然最长公共路径是最短路上的一条链. 我们可以把最短路经过的边看成有向边,那么组成的图就是一张\(DAG\),这样题目要求的即是两张\(DAG\)重合部分中的最长链. ...
- 【APP测试（Android）】－－性能测试
- QT中报错collect2:ld returned 1 exit status的可能原因。
参考:https://blog.csdn.net/u014546553/article/details/78781547 1.编译成功的例子在后台执行,有时一闪而过,如果再次build ,则会提示上述 ...
- HTML中的table导出为Excel文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- drf7 分页组件
DRF的分页 数据库有几千万条数据,这些数据需要展示,不可能直接从数据库把数据全部读取出来, 这样会给内存造成特别大的压力,有可能还会内存溢出,所以希望一点一点的取,那展示的时候也是一样的,总是要进行 ...
- List 接口中ArrayList Vector LinkedList 比较
访问权限Arryist最快 其次Vector 最慢LinkedList
- Alpha冲刺 - （7/10）
Part.1 开篇 队名:彳艮彳亍团队组长博客:戳我进入作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 改用更易用的springboot+myb ...