从零开始学 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 基础知识干货的学习。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

Chrome、FF在swf处理中的问题小记

当时的需求是点击网页装扮的时候会弹出一个层,层内有很多TAB选项卡,而有一个对图片处理的swf(让用户选择一张图片、编辑图片)放在其中一个选项卡中,而当来回切换...

1343
来自专栏ml

JavaWeb学习之环境搭建

 1. HTML(Hyper Text Markup Language) , 超文本标记语言。 HTML文件的后缀名一般是: .htm , .html 表单(f...

2813
来自专栏岑志军的专栏

(1)越狱环境搭建

1634
来自专栏黒之染开发日记

微信开发中遇到的坑

1、 用微信的文件上传功能,一次只能上传一个文件,多个上传还要用setTimeout把前后时间设到100毫秒左右...

1592
来自专栏编程

网站代码优化我们必须要做的那些事

想必有很多的SEO小白只知道网站的优化要做内容、用户体验、站外这些优化,非也,代码优化也是很重要的,搜索引擎蜘蛛只能看懂网站的代码,另外网站代码优化的好坏也决定...

1908
来自专栏我有一个梦想

UE4新手编程之创建C++项目

 虚幻4中常用的按键和快捷键 虚幻4中有一些按键和快捷键很常用,牢记它们并运动到实际的项目开发中,将会大大地提高你的工作效率和使得工作更简便快捷。下面将列举它们...

2516
来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

2083
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(三)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

2976
来自专栏知晓程序

开发 | 掌握这 7 个要点,iOS 开发者也能快速入门小程序

1533
来自专栏林德熙的博客

为何使用 DirectComposition 创建更加迷人的界面流畅丰富的动画组合不同的位图通过集成 DWM 节省内存兼容原有代码

本文主要翻译Why use DirectComposition,介绍 DirectComposition 的功能和优点。

1961

扫码关注云+社区

领取腾讯云代金券