Web相关概念小记

一、前端技术基础

1、HTML

HTML——超文本标记语言，一种标准规范
（1）基本结构：

结构	标签
文档类型声明	<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
文档开始标记	根标签< html >
头部	首部标签< head >、网页标题标签< title >、元数据标签< meta >
主体	< body >
文档结束标记	< /html >

其中，< meta >标签包括：网页刷新与跳转设置、页面描述声明、字符集声明、关键词声明、作者声明。其他标签还有：基础地址标签< base >、样式标签< style >、
链接标签< link >、脚本标签< script >。
（2）特点：简易、通用、平台无关。
（3）文档规范：文件类型、元素标签格式、代码书写规范。
（4）网页中的文本：普通文本的添加、字符实体（& nbsp;   & quot;）的添加、使用HTML标签添加特殊文本。

标签名	标记
斜体字标签	< i >和< em >
粗体字标签	< b >和< strong >
上标标签	< sup >
下标标签	< sub >
删除线标签	< del >
下划线标签	< ins >
预格式化标签	< pre >

（5）结构化文本

标签名	标记
段落标签	< p >
标题标签	< h1 >
换行标签	< br >
水平线标签	< hr >
有序列表标签	< ol >
无序列表标签	< ul >
定义列表标签	< dl >

（6）多媒体网页
插入图像：JPEG、GIF或PNG格式。

< img src="../img/baidu" alt="百度链接图片">

常用的音频格式：wav，mp3，ogg；
视频格式：mpeg4、wehm、ogg；
设置背景音乐：< bgsound >、< embed >；
浏览器对音视频的支持情况不一，可将多个格式放一起。

<audio controls>
 <source src=”/song1.ogg” />
 <source src=”/song1.mp3″ />
 <source src=”/song1.wav” />
</audio>

检查浏览器支持情况：可使用和标签或JavaScript检测。

（7）表格

标签名	标记
表格	< table > < /table >
行单元格	< tr> < /tr>
列单元格	< td> < /td>
表头单元格	< th> < /th>
表格标题	< caption> < /caption>

单元格rowspan——跨行、colspan——跨列的设置用于合并单元格。

2、CSS

（1）层叠/级联样式表的三种使用方式：

• 行内样式

<div style=" margin:auto 35%;"></div>

• 内部样式

<style> .square{ width:50px;;height:20px;background:#FFF; } </style>

• 外部样式

<link rel="stylesheet" href="../CSS/Left.css"/>

（2）特点：内容与表现分离、易于应用与维护、提高浏览器加载速度。

3、JavaScript

（1）介绍：基于ECMAScript标准，前身为LiveScript，学习教程：W3school。

• 内部JS

<script type="text/javascript">document.write("hello!");</script>

• 外部JS

<script type="text/javascript" src="http://localhost:84/HTML/Index.html"></script>

JavaScript有3个组成部分：核心（ECMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM） 。

（2）特点：脚本语言、弱类型、跨平台、大小写敏感、、简单。

4、DOM

DOM是文档对象模型。
以下参考：HTML DOM 教程 菜鸟教程

图1 DOM树

5、BOM

浏览器对象模型，常见的：Window 对象、Navigator对象、Screen对象、History对象、Location 对象等。每种浏览器都有自己的BOM实现，无统一的BOM标准。

6、AJAX

核心为JavaScript对象XMLHttpRequest，页面不刷新，支持异步请求。

AJAX状态值	说明
0	未初始化
1	载入，调用send()方法发送请求
2	载入完成，send()方法执行完
3	交互，正在解析响应内容
4	完成，响应内容解析完成

（1）优点：在页面内以异步方式与服务器通信，用户体验好，响应迅速；减轻服务器和带宽的负担。
（2）缺点：不利于SEO；破坏浏览器的前进与后退功能；破坏异常机制，存在安全问题；违背了URL和资源定位的初衷；手机还不能很好地支持AJAX。

二、前端新技术

1、HTML5

新增对多媒体技术的支持。特点：改进元素标签、新增API、错误处理机制。

2、CSS

新增了动画技术，无需使用脚本代码可实现动画效果。特点：完全向后兼容、模块化的新增功能、变形与动画效果。

3、jQuery

一套跨浏览器的JavaScript库，简化HTML文档操作和JS编程。

<script type="text/javascript" src=" jquery-2.1.1.min.js "></script>

三、web原理

1、因特网（Internet）
（1）Internet的服务：WWW服务、FTP、E-mail、Telnet（远程登录服务）、Usenet、BBS。因特网使用TCP/IP进行网络互连，由许多网站组成。
（2）网站：拥有域名可提供网络服务的主机，通过浏览器访问；由网页、域名和服务器组成；通过域名访问。

• 域名：后缀为 .com 、.top、.net 、.org、.gov 等，域名级别包括：顶级域名、二级域名，三级域名等。
• 域名由DNS解析到对应的IP地址，便于访问互联网。
• IP地址：互联网协议地址，分为A、B、C、D类。

（3）静态网页和动态网页的区别：文件扩展名。

• 静态网页：文件格式为.html、.htm、.xml。只有HTML。
• 动态网页：文件格式为.php、.asp、.jsp。
• 浏览网页（从输入URL到页面加载）的过程：
  [1]通过DNS解析查询获得URL的IP地址（浏览器检查缓存是否存在及是否过期）。
  [2]浏览器通过TCP连接服务器。
  [3]浏览器发送HTTP请求。
  [4]服务器响应——处理请求并返回HTTP报文。
  [5]浏览器渲染页面——DOM构造、布局、绘制页面。
  [6]关闭TCP连接。

2、万维网（WWW）
（1）W3是Internet的一个重要服务，使用HTTP协议，用唯一的URI标记每个网络资源。
（2）URL（统一资源定位器）是URI的一部分，其组成：协议类型://服务器地址/路径/文件名。协议类型包括http、https、ftp、file、mailto（电子邮件地址）、Idap（轻型目录访问协议）、news（Usenet新闻组）、gopher（信息查找系统）。

世界上第一个网站是：http://info.cern.ch/

3、web架构及其工作原理
（1）常用的Web服务器有Apache、IIS、Nginx等。主流网络浏览器——IE、Firefox、Chrome、Oprea、Safari。

图2 web工作原理

Web开发工具——Sublime Text、Dreamweaver、EditPlus、VSCode。