web前端基础知识

一、网页

网页可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。

网页主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。

百度首页的源代码，这是一个纯文本文件，仅包含一些特殊的符号和文本。而我们浏览网页时看到的图片、视频等，正是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。 

1. 静态网页

1.用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。

2. 静态网页更新不方便，但是访问速度快。

（内容不需要频繁更新的网页可以做成静态）

2. 动态网页

1.显示的内容会随着用户操作和时间的不同而变化。

2.动态网页可以和服务器数据库进行实时的数据交换。

（内容需要频繁更新的网页可以做成动态）

现在的网页基本都动静结合。

二、网页名词解释

①Internet网络：就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。

②WWW：WWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。

③URL：URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。

④DNS：DNS （英文Domain Name System的缩写）是域名解析系统。

⑤HTTP和HTTPS：HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输控制协议，是一种详细规定了浏览器和万维网服务器之间互相HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。 通信的规则。

⑥Web：Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。

⑦W3C组织：W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。

三、Web标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。 包含我们所熟悉的HTML、XHTML、CSS、Javascript等等。

1.结构标准

用于对网页元素进行整理和分类，主要包括：HTML、XML和XHTML。（如果把Web标准看做一栋房子，结构标准就相当于房子的框架）

2.表现标准

用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。（表现标准就相当于房子的装修，让房子看起来更美观）

3.行为标准

是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript。（行为标准相当于房间内部的设备，让房子具有功能性）

四、Web页面的组成

1. html

超文本标签语言，用于显示内容，搭建网页的结构。

2. CSS

层叠样式表，用于美化页面。

3. JavaScript

简称为js，脚步语言（不需要经过编译，可以直接用浏览器运行出效果的语言)。用于页面的行为(表单验证、用户的交互)。、

五、浏览器

按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。

1. PC端的浏览器

PC端的浏览器主要包括Google (谷歌）公司的Chrome浏览器、Mozilla公司的Firefox浏览器、和Edge浏览器等。浏览器内核主要包括Blink、WebKit和Trident等。

在传统的PC端Web开发中，一些旧版本的浏览器不符合W3C标准，有些不支持HTML5和CSS3的新特性，给开发人员带来了许多麻烦。——可以使用Normalize.css解决。

Google浏览器的优势：

• 市场占有率高，兼容性好，界面简洁、简单易用。基于强大的JavaScript v8引擎，速度很快。
• 可通过扩展插件增强功能,便于开发人员使用。内置防止网络钓鱼及恶意软件功能,更加安全。
• 跨平台，支持PC端的Windows、Linux和Mac系统，以及移动端的Android和iOS系统。

2. 移动端的浏览器

移动端设备主要包括Android、iOS等手机设备。屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。——Bootstrap可以适应不同尺寸。

移动端的浏览器主要包括Android Browser和Mobile Safari，以及国产浏览器。浏览器的内核主要是Webkit内核，对HTML5提供了很好的支持。

国产浏览器主要包括UC浏览器、QQ浏览器和百度浏览器等。

在移动Web开发中，几乎不用担心浏览器的兼容问题，因为移动端的浏览器基本上都是以WebKit内核为主，对HTML5和CSS3的支持非常好。

六、视口(viewport)

1. 概念

视口(Viewport)最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。

视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。

2. 分类

视口主要包括布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)

2.1 布局视口(layout viewport)

是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。

布局视口的默认宽度有可能是768px、980px或1024px等(取决于不同移动端设备的设置)，这个宽度并不适合在手机屏幕中展示。

当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。 

2.2 视觉视口(visual viewport)

是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。

2.3 理想视口(ideal viewport)

是指对设备来讲最理想的视口尺寸。

3. 视口的设置

在传统的PC端网页开发中，并没有使用过meta标签来设置视口，此时浏览器会按照默认的布局视口宽度来显示网页。如果希望网页在浏览器中以理想视口的形式呈现，就需要利用标签设置视口。

在标签中，将name属性设为viewport，即可设置视口。在终端中以理想视口打开网页。

在标签的基本语法中，将标签的content属性的值设置为"width=device-width”表示通知浏览器，布局视口的宽度应该与设备的宽度一致，示例代码如下:

在使用标签设置视口时，该标签的常用设置参数如下：

注：1.0是按原比例100%的打开。

七、分辨率

1. 分辨率概念

屏幕分辨率1920×1080表示水平方向含有1920个像素，垂直方向含有1080个像素，屏幕上总共有2073 600个像素点。

在屏幕的大小相同的情况下，如果屏幕的分辨率低(如640x480)，则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。

在屏幕的大小相同的情况下，如果屏幕的分辨率高（如1920×1080)，则屏幕上显示的像素多，单个像素点比较小，看起来会比较清晰。

图像分辨率500×200表示这张图片在屏幕上按1:1显示时，水平方向有500个像素点(色块)，垂直方向有200个像素点（色块)。

图片的分辨率越低，图片越模糊。图片的分辨率越高，图片越清晰。

当图片放大时，图片在屏幕上显示的像素变大，软件通过算法对图像进行了像素补充;当图片缩小时，也是通过算法将显示的图片像素进行减少。

2. 设备像素比

在传统的PC端和早期的普通手机中，屏幕上的一个像素和网页CSS中的一个像素是完全对应的。
随着技术的进步，为了提高屏幕显示的细腻度，高分辨率的屏幕开始流行，一块屏幕可以显示更多的像素。

随之产生了一个问题，就是同一个网页在不同分辨率的屏幕下显示效果会有大小差异，因为CSS中使用的像素是一个固定值，它不会因为屏幕分辨率而发生改变。

在屏幕尺寸相同的情况下，一个12px的文字在低分辨率的屏幕中的尺寸很大，但在高分辨率的屏幕中尺寸很小。

在分辨率非常高的屏幕中，文字会显得特别小，不利于浏览。
 

八、可缩放矢量图形(Scalable Vector Graphics，SVG)

网页中的图片可以分为两类，一类是小图标和简单的图形；另一类图片经常使用GIF、JPEG、PNG等格式，这些格式比较常见，但因为都是基于像素处理的，当放大时会失真，变得模糊。

可缩放矢量图形(Scalable Vector Graphics，SVG)是一种开放标准的描述矢量图形的语言，它基于XML(可扩展标记语言）。在2003年1月，SVG 1.1被确立为W3C(万维网联盟标准)。

SVG使用标签的方式定义各种图形，外层标签是