总而言之,这就是一篇用来记录我学习前端历程的日志,希望不要断更。
朝着优秀的前端工程师努力吧!
一、关于Web和Web标准的基础知识
Web、网页、浏览器
- Web——全球广域网,Web端即网页端
- 网页——构成网站的基本元素,输入网址后打开的任何一个页面都属于网页
- 浏览器——网页运行的平台
Web标准——制作网页要遵循的规范
包含三个方面:结构标准、表现标准、行为标准
根据以上三个标准,可以将Web前端分为三层:
- HTML(HyperText Markup Language):超文本标记语言。从语义的角度描述页面结构,相当于人体的身体结构。
- CSS(Cascading Style Sheets):层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
- JS(JavaScript):从交互的角度描述页面的行为。相当于人的动作,让人有生命力。
二、关于浏览器
浏览器分为两部分:渲染引擎(即浏览器内核)和JS引擎
渲染引擎解析HTML与CSS,决定浏览器如何显示网页内容及页面格式信息,它的作用就是:读取网页内容,计算网页的显示方式并显示在页面上。
渲染引擎是浏览器兼容性问题出现的根本原因。
五大主流浏览器:IE, Firefox, Google Chrome, Safari, Opera
四大浏览器内核:Trident (IE), Gecko , Webkit , Presto
四大浏览器内核优缺点
Trident : 因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug。
Gecko : 优点就是功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口,缺点是消耗很多的资源,比如内存。
Webkit : 优点就是Webkit拥有清晰的源码结构、极快的渲染速度,缺点是对网页代码的兼容性较低,会使一些编写不标准的网页无法正确显示。
Presto : Presto内核被称为公认的浏览网页速度最快的内核,同时也是处理JS脚本最兼容的内核,能在Windows、Mac及Linux操作系统下完美运行。
其实还有一个Blink内核,目前可查到的资料不足以让我妄下论断,明明是四大内核,五大浏览器中的好几个据说现在却用Blink而不用四大内核中的任何一个,甚至还有说法是Blink取代Presto的,我也不懂了属于是。
JS引擎也称为JS解释器,用来解析网页中的JavaScript代码,对其处理后再运行
浏览器 | JS 引擎 |
---|---|
chrome / 欧鹏 | V8 |
Safari | Nitro |
Firefox 火狐 | SpiderMonkey(1.0-3.0)/ TraceMonkey(3.5-3.6)/ JaegerMonkey(4.0-) |
Opera | Linear A(4.0-6.1)/ Linear B(7.0-9.2)/ Futhark(9.5-10.2)/ Carakan(10.5-) |
IE | Trident |
三、关于HTML
首先明确HTML是标记语言
而不是编程语言
HTML全称超文本标记语言,所谓超文本有两层含义:
(1)图片、音频、视频、动画、多媒体等内容,成为超文本,因为它们超出了文本的限制。
(2)不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件进行连接。即:超级链接文本。
而标记语言也有两层含义:
(1)标记语言是一套标记标签。比如:标签<a>
表示超链接、标签<img>
表示图片、标签<h1>
表示一级标题等等,它们都是属于 HTML 标签。
(2)编程语言是有编译过程的,而标记语言没有编译过程,HTML标签是直接由浏览器解析执行。
由HTML还衍生出了XHTML: Extensible Hypertext Markup Language,可扩展超文本标记语言。XHTML是严格的、纯净的HTML。
HTML的一些专有名词
- 网页 :由各种标记组成的一个页面就叫网页。
- 主页(首页) : 一个网站的起始页面或者导航页面。
- 标记: 比如
<p>
称为开始标记 ,</p>
称为结束标记,也叫标签。每个标签都规定好了特殊的含义。 - 元素:比如
<p>内容</p>
称为元素. - 属性:给每一个标签所做的辅助信息。
- XHTML:符合XML语法标准的HTML。
- DHTML:dynamic,动态的。
javascript + css + html
合起来的页面就是一个 DHTML。 - HTTP:超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP:邮件传输协议,FTP:文件传输协议。
HTML结构
1 |
|
以上代码是在VS Code中对一个拓展名为.html
的空文件输入html:5
后自动填充获得的内容,该内容即html页面的骨架
HTML标签通常是成对出现的(双边标记),也有少部分单标签(单边标记),如<br />
、<hr />
和<img src="images/1.jpg" />
等。
属性与标记之间、各个属性之间要以空格隔开。 属性值以双引号括起来
html骨架标签分类
标签名 | 定义 | 说明 |
---|---|---|
<html></html> |
HTML标签 | 页面中最大的标签,我们成为根标签 |
<head></head> |
文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<titile></title> |
文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> |
文档的主体 | 元素包含文档的所有内容,页面内容 基本都是放到body里面的 |
1、文档声明头
任何一个标准的HTML页面,第一行一定是一个以开头的语句,这一行就是文档声明头,简称DTD
DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
2、页面语言lang
1 | <html lang="en"> |
这行标签用于指定页面的语言类型,最常见的语言类型有两种:
- en:指定页面语言为英语
- zh-CN:定义页面语言为中文
3、头标签head
1 | <head> |
面试题:
- 问:网页的head标签里面,表示的是页面的配置,有什么配置?
- 答:字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
头标签内部的常见标签如下:
<title>
:指定整个网页的标题,在浏览器最上方显示。<base>
:为页面上的所有链接规定默认地址或默认目标。<meta>
:提供有关页面的基本信息<link>
:定义文档与外部资源的关系。<script>
:定义客户端脚本,比如JavaScript<style>
:为HTML文档定义样式信息
meta标签
meta表示“元”。“元”配置,就是表示基本的配置项目。
常见的几种meta标签如下:
(1)字符集charset
:
1 | <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> |
字符集用meta标签中的charset
定义,即网页的编码方式。
这行代码非常关键,是必须要写的代码,否则可能导致乱码。比如保存的时候meta写的和保存文件时的编码方式(VS Code右下角)不匹配,那么浏览器就会是乱码。
国内常见的编码方式有UTF-8
和gb2312
两种,前者是国际通用字符集,优点是它拥有几乎所有文字,缺点则是他过于臃肿,延长网页加载耗时。与之相反,gb2312
只拥有简体中文,但加载速度很快。
(2)视口viewport
:
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
width=device-width
:表示视口宽度等于屏幕宽度。
更多内容可能需要留待后续……
(3)定义“关键词”:
1 | <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" /> |
这些关键词,能告诉搜索引擎这个网页用来干嘛,可以提高搜索命中率。
(4)定义“页面描述”:
只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO(search engine optimization,搜索引擎优化)。
For Example:
1 | <meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" /> |
这样的代码就会有如下图所示的效果
有一个需要记住的meta
标签:
1 | <meta http-equiv="refresh" content="3;http://www.baidu.com"> |
这个标签的意思是在此页面停留三秒后跳转到百度
title标签
用于设置网页标题:
1 | <title>网页的标题</title> |
title标签也有助于SEO搜索引擎优化。
base标签
1 | <base href="/"> |
base标签用于指定基础的路径。指定后,所有的a链接都是以这个url为基准(目前还不清楚这是啥意思)
4、<body>
标签
<body>
标签的属性有:
bgcolor
:设置整个网页的背景颜色。background
:设置整个网页的背景图片。text
:设置网页中的文本颜色。leftmargin
:网页的左边距。IE浏览器默认是8个像素。topmargin
:网页的上边距。rightmargin
:网页的右边距。bottommargin
:网页的下边距。
一个有趣的例子:
1 | <body link="red" alink="blue" vlink="green"> |
上方代码中,当我们对
点我点我
这几个字使用超链时,link
属性表示默认显示的颜色、alink
属性表示鼠标点击但是还没有松开时的颜色、vlink
属性表示点击完成之后显示的颜色。
HTML规范
- HTML不区分大小写,但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
1、编写XHTML的规范:
(1)所有标记元素都要正确地嵌套,不能交叉嵌套。正确写法举例:<h1><font></font></h1>
(2)所有的标记都必须小写
(3)所有的标签都必须闭合
- 双标签:
<span></span>
- 单标签:
<br>
建议写成<br />
<hr>
建议转成<hr />
,还有<img src=“URL” />
(4)所有的属性值必须加引号<font color="red"></font>
(5)所有的属性必须有值
1 | <hr noshade="noshade">`、`<input type="radio" checked="checked" /> |
(6)XHTML文档开头必须要有DTD文档类型定义。
2、HTML的基本语法特性
(1)HTML对换行不敏感,对Tab也不敏感
也就是说,HTML不是靠缩进来表示嵌套的,而是看标签的嵌套关系
虽然不缩进对HTML没关系,但对人类有关系,所以建议正常缩进
(2)空白折叠现象
HTML的所有文字之间,如果有空格、换行、Tab都将被折叠为一个空格显示
(3)标签要严格封闭
1 |
|
注意以上代码的title标签没有闭合,就会导致“欢迎”以及以后的全部内容被当做标题显示。