专栏首页从零开始学 Web 前端从零开始学 Web 之 HTML(一)认识前端

从零开始学 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 条评论
登录 后参与评论

相关文章

  • 减少搜索头文件的目录数

    本文转自李云的博客: http://blog.csdn.net/hzliyun/article/details/9340843。

    Daotin
  • 从零开始学 Web 之 CSS3(八)CSS3三个案例

    而分辨率则一般用像素来度量 px,表示屏幕水平和垂直方向的像素数,例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

    Daotin
  • 从零开始学 Web 系列教程

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin
  • 第59节:Java中的html和css语言

    html是超文本标记语言,是网页语言的基础知识,html是通过标签来定义的语言,所有代码都是由标签所组成的,在html代码中不用区分大小写.

    达达前端
  • 深入理解ResNet原理解析及代码实现

    梯度消失和梯度爆炸的问题阻止了刚开始的收敛,这一问题通过初始化归一化和中间层归一化得到了解决。解决了收敛的问题后又出现了退化的现象:随着层数加深,准确率升高然后...

    于小勇
  • 58.Vue 使用render方法渲染组件

    在Vue中渲染组件的时候,不单单可以使用components来注册组件,还可以使用一个render方法来返回一个组件的html结构。

    Devops海洋的渔夫
  • Nginx+Tomcat实现动静分离

    为了提高网站的响应速度,减轻服务器的压力,对于图片、css、js等静态资源文件,我们可以在反向代理服务器中进行缓存,这样浏览器在请求一个静态资源时,代理服务器就...

    秃头哥编程
  • Python3网络爬虫快速入门实战解析

    Python版本: Python3.x 运行平台: Windows IDE: Sublime text3 一 前言 强烈建议:请在电脑的陪同下,阅读...

    Jack_Cui
  • Python3网络爬虫快速入门实战解析

    强烈建议:请在电脑的陪同下,阅读本文。本文以实战为主,阅读过程如稍有不适,还望多加练习。

    圆方圆PYTHON学院
  • Android原生绘图之一起画个表

    3----个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正 4----看到这里,我在此感谢你的喜欢与支持

    张风捷特烈

扫码关注云+社区

领取腾讯云代金券