HTML5+CSS3+移动web 前端开发入门笔记（一）

千古前端图文教程

千古前端图文教程

git的使用

Git是一个分布式版本控制系统，它的作用主要包括以下几个方面：

1. 版本管理：Git可以跟踪文件的修改历史，记录每次提交的内容、时间和作者等信息。通过Git，开发人员可以轻松地查看和比较不同版本之间的差异，回滚到历史版本或者创建新的分支。

2. 多人协作：Git可以支持多人协同开发，通过远程仓库进行代码的共享和同步。开发人员可以将自己的代码推送到远程仓库，也可以从远程仓库拉取他人的代码，并进行合并、解决冲突等操作。

3. 分支管理：Git具有强大的分支管理功能，开发人员可以创建新的分支，在不影响主线开发的情况下独立进行特性开发、bug修复等工作。分支可以合并到主线或其他分支，方便团队成员进行并行开发和版本控制。

4. 回滚与撤销：Git可以轻松地回滚到历史版本，恢复之前的代码状态。同时，Git还提供了撤销暂存、撤销修改等命令，使得开发人员可以快速纠正错误或者取消不需要的变更。

5. 高效开发：通过使用Git，开发人员可以更加高效地进行代码开发和管理。不仅可以减少手动备份和版本管理的繁琐工作，还能够提供方便的代码共享、合并与冲突解决等功能，从而提高开发效率和团队协作能力。

Git作为一种强大的版本控制系统，可以帮助开发人员更好地管理代码、进行多人协作、追踪修改历史、回滚和撤销操作等，为软件开发过程提供了便利和高效性。

Git是一个版本控制系统，用于跟踪文件的变化并协同开发。下面是Git的基本使用方法：

1. 初始化一个Git仓库：在要进行版本控制的项目目录下执行命令git init，创建一个新的Git仓库。

2. 添加文件到暂存区：使用命令git add 将文件添加到暂存区，可以一次性添加多个文件或者使用git add .添加所有文件。

3. 提交变更到版本库：使用命令git commit -m "commit message"将暂存区的变更提交到版本库，并附上一个描述性的提交信息。

4. 查看仓库状态：使用命令git status可以查看当前仓库的状态，包括修改、添加和删除的文件等信息。

5. 查看提交历史：使用命令git log可以查看提交历史，包括提交者、提交时间和提交信息等。

6. 切换分支：使用命令git checkout 可以切换到指定的分支，可以使用git branch命令查看当前存在的分支。

7. 创建分支：使用命令git branch 可以创建一个新的分支。

8. 合并分支：使用命令git merge 可以将指定分支的修改合并到当前分支。

9. 远程仓库操作：使用命令git remote add origin 可以将本地仓库与远程仓库关联，使用git push命令将本地提交推送到远程仓库，使用git pull命令将远程仓库的修改拉取到本地。

10. 克隆远程仓库：使用git clone 可以克隆远程仓库到本地。

11. 分支管理：使用git branch命令可以查看当前存在的分支，并使用git branch 命令创建一个新的分支。使用git checkout 可以切换到指定的分支。使用git merge 将指定分支的修改合并到当前分支。使用git branch -d 可以删除指定的分支。

12. 撤销操作：使用git checkout -- 可以撤销对某个文件的修改，恢复到最后一次提交的状态。使用git reset HEAD 可以将已经add到暂存区的文件移出暂存区。

13. 查看差异：使用git diff可以查看工作区与暂存区之间的差异。使用git diff HEAD可以查看工作区与最新的提交之间的差异。

14. 标签管理：使用git tag命令可以查看当前存在的标签，并使用git tag 命令创建一个新的标签。使用git tag -a -m "tag message"可以创建一个带有描述信息的标签。使用git tag -d 可以删除指定的标签。

15. 远程仓库操作：使用git remote add origin 可以将本地仓库与一个远程仓库关联。使用git push origin 将本地提交推送到远程仓库的指定分支。使用git pull origin 将远程仓库的修改拉取到本地的指定分支。

Web、网页、浏览器

Web是指全球广域网，也称为万维网。它是一个通过互联网进行信息交流和共享的系统。Web端指的是网页端，即我们在浏览器上访问的网页。

网页是构成网站的基本元素，由文字、图像和超链接等元素组成。除了这些常见元素，网页还可以包含音频、视频和Flash等多媒体内容。每当我们在浏览器中输入网址并打开一个页面时，就是在访问一个网页。

浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。浏览器负责解析和呈现网页的内容，同时支持用户与网页之间的交互操作。

Web 标准

Web标准指的是一系列的网页设计技术规范，包括HTML、CSS和JavaScript等。这些技术规范由W3C（World Wide Web Consortium，世界网页联盟）制定，旨在确保不同浏览器在解析网页时能够一致地显示页面内容，并提高网页的可访问性、可用性和可维护性。

具体来说，Web标准主要分为三个方面：

1. 结构标准（Structural standards）：指HTML和XML等标记语言规范，用于定义网页的结构和内容。

2. 展示标准（Presentation standards）：指CSS等样式表技术规范，用于定义网页的展示效果。

3. 行为标准（Behavioral standards）：指JavaScript等脚本语言规范，用于定义网页与用户之间的交互行为。

遵循Web标准可以提高网站的可访问性，确保页面在不同浏览器、设备和操作系统上都能够正确展示，同时也有助于提高页面的性能和优化SEO（搜索引擎优化）。

Web标准是建立在互联网上的万维网系统中的重要组成部分，它对于网站开发者、设计师和内容创作者来说都非常重要。

Web标准：制作网页要遵循的规范。

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

1、Web标准包括三个方面：

结构标准（HTML）：用于对网页元素进行整理和分类。

表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。

行为标准（JS）：用于定义网页的交互和行为。

根据上面的Web标准，可以将 Web前端分为三层，如下。

2、Web前端分三层：

HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

浏览器

浏览器由以下几个主要部分组成：

1. 用户界面（User Interface）：包括地址栏、菜单栏、工具栏等，用于展示和与用户交互。

2. 渲染引擎（Rendering Engine）：负责解析HTML、CSS等页面元素，并将它们渲染成可视化内容。

3. JavaScript解释器（JavaScript Interpreter）：用于解释JavaScript代码并执行它们。

4. 浏览器引擎（Browser Engine）：用于协调渲染引擎和JavaScript解释器之间的相互作用。

5. 数据存储（Data Storage）：包括浏览器缓存、Cookie等，用于存储网站数据、用户信息等。

6. 扩展框架（Extension Framework）：允许开发人员为浏览器编写扩展程序，添加自定义功能和服务。

7. 网络组件（Networking Components）：用于处理网络通信，包括HTTP请求和响应等。

8. 插件（Plugins）：用于支持浏览器中的多媒体文件，比如Flash、Java等。

浏览器的不同部分紧密相连，并协同工作以提供用户一个完整的互联网浏览体验。当用户输入一个网页URL时，浏览器会使用网络组件向服务器发送请求，然后解析并渲染页面内容，并且通过可视化界面，将这些内容呈现给用户。 同时，它还会处理JavaScript代码和插件等附加功能。

渲染引擎（即：浏览器内核）和JS 引擎

1. 渲染引擎（浏览器内核）：渲染引擎负责解析HTML、CSS等页面标记语言，并将其呈现为可视化的内容。它负责处理网页布局、样式、图像加载、字体渲染等任务。不同浏览器使用不同的渲染引擎，如WebKit（Safari和Chrome使用）、Gecko（Firefox使用）和Blink（Opera和新版Chrome使用）。

2. JavaScript引擎：JavaScript引擎用于解释和执行JavaScript代码。它将JavaScript代码转换为计算机能够理解和执行的指令。常见的JavaScript引擎有V8（Chrome和Node.js使用）、SpiderMonkey（Firefox使用）、JavaScriptCore（Safari使用）等。JavaScript引擎的性能对于浏览器的整体速度和用户体验非常重要。

渲染引擎和JavaScript引擎紧密合作，相互配合以显示网页内容和处理网页中的交互逻辑。用户在浏览器中打开网页时，渲染引擎首先解析HTML和CSS，并构建网页的文档对象模型（DOM）和渲染对象模型（Render Tree）。随后，JavaScript引擎解析和执行网页中的JavaScript代码，操作DOM并与渲染引擎交互。最终，渲染引擎根据DOM和CSS规则计算布局和样式，并将网页渲染到浏览器窗口中供用户查看和交互。

渲染引擎和JavaScript引擎在浏览器中通常是独立的模块。它们之间相互协作以实现页面的加载、解析、渲染和交互。

当用户在浏览器中输入网址或单击链接时，浏览器会使用网络组件向服务器发送HTTP请求并获取响应。如果响应包含HTML文档，那么浏览器就会把这个 HTML交给渲染引擎处理。

渲染引擎的主要任务是将 HTML 和 CSS 解析成可视化的文档。它会读取 HTML中的所有标签，然后使用规则来将标签转换为屏幕上的元素（如文字、图片、表格等）。同时，渲染引擎会通过CSS样式表定义的规则来计算每个元素的位置、大小、颜色和透明度等属性。

当渲染引擎解析到 JavaScript 代码时，它会将 JavaScript 代码交给 JavaScript 引擎处理。JavaScript 引擎会解释并执行 JavaScript 代码，根据 JavaScript 代码修改文档对象模型（DOM），以及更新渲染树（Render Tree）和网页的呈现。

同时，JavaScript 代码也可以触发其他操作，如发送 Ajax 请求、设置 Cookie、存储本地数据等。这些操作都可能会导致浏览器与服务器再次交互，重新加载或更新页面内容。

渲染引擎和 JavaScript 引擎在浏览器中扮演着重要角色。它们通过相互协作，将网页呈现出来，并且实现各种交互功能。

工作原理

1、User Interface（UI界面）：包括地址栏、前进/后退按钮、书签菜单等。也就是浏览器主窗口之外的其他部分。

2、Browser engine （浏览器引擎）：用来查询和操作渲染引擎。是UI界面和渲染引擎之间的桥梁。

3、Rendering engine（渲染引擎）：用于解析HTML和CSS，并将解析后的内容显示在浏览器上。

4、Networking （网络模块）：用于发送网络请求。

5、JavaScript Interpreter（JavaScript解析器）：用于解析和执行 JavaScript 代码。

6、UI Backend（UI后端）：用于绘制组合框、弹窗等窗口小组件。它会调用操作系统的UI方法。

7、Data Persistence（数据存储模块）：比如数据存储 cookie、HTML5中的localStorage、sessionStorage。

浏览器的工作原理：新式网络浏览器幕后揭秘

浏览器的工作原理：新式网络浏览器幕后揭秘

HTML

编辑器相关
前端开发的编辑器软件，我首先推荐 VS Code，其次推荐Sublime Text。

有人说 WebStorm 也不错？但真实情况是，自从VS Code 问世之后，用 WebStorm 的人越来越少了。

PS：文件的后缀名不能决定文件格式，只能决定打开文件打开的方式。

HTML全称为超文本标记语言（HyperText Markup Language），是一种描述性的标记语言，而非编程语言。

HTML的作用是描述文档的语义。超文本有两层含义：一方面，它包含图片、音频、视频、动画等超出纯文本限制的内容；另一方面，它可以通过超链接文本实现文件之间的跳转和与其他主机的文件连接。

标记语言指的是一套标记标签。例如，

 标签表示超链接， 标签表示图片，
标签表示一级标题等。
这些标签组成网页元素，通过浏览器解析后呈现给用户。

与编程语言不同，标记语言没有编译过程，HTML标签直接由浏览器解析执行。

HTML负责描述文档的语义，HTML格式的文件是一个纯文本文件（通常以.txt扩展名命名），使用标签描述语义。这些标签在浏览器页面上无法直观显示，因此被称为"超文本标记语言"。

在学习HTML时，需要了解各种标签，这些标签赋予文本不同的语义。例如，

HTML的专有名词

网页 ：由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记： 比如
称为开始标记 ，
称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：比如
内容
称为元素.
属性：给每一个标签所做的辅助信息。
XHTML：符合XML语法标准的HTML。
DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。

书写第一个 HTML 页面

这是一个包含三个基本元素的HTML页面：

1. : 定义页面使用的文档类型，通常简写为，表示这个页面符合 HTML5 标准。

2. : 标签定义页面的根元素，同时指定网页语言为英语（“en”）。

3. 元素包含一些可以用 meta 标签来定义的元数据，通常包括页面标题、字符集、视口设置等。在这个示例中，我们设置了标题为 “Document”，同时指定字符集为 UTF-8。

4. 元素包含了页面的主要内容。在这个示例中，我们添加了一个三级标题

   ，一个图片元素和一个超链接元素。

5. 元素用于在页面上显示图片。它有两个必需的属性：src和alt。src指定图片的 URL 地址，而 alt 提供了一个替代文本，在图片无法显示时会显示此文本。

6. 元素用于创建超链接。href属性指定链接目标的URL，用户点击时就会打开该URL对应的页面。

HTML结构详解

文档声明头

任何一个标准的HTML页面，第一行一定是一个以开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。

DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML4.01有以下6种规范：

1. HTML 4.01 Strict：严格模式，不允许使用任何表现性、排版或者结构性的标签和属性；
2. HTML 4.01 Transitional：过度模式，允许使用一些过渡标签和属性以便与之前版本的页面兼容；
3. HTML 4.01 Frameset：框架模式，专门用于页面中包含框架（frameset）的情况；
4. XHTML 1.0 Strict：严格模式，要求网页符合XML的语法规范；
5. XHTML 1.0 Transitional：过渡模式，允许使用一些过渡标签和属性以便与之前版本的页面兼容；
6. XHTML 1.0 Frameset：框架模式，专门用于页面中包含框架（frameset）的情况。

需要注意的是，XHTML 1.0规范要求页面中所有标签必须是小写形式，并且要有开始和结束标签。而HTML 4.01对大小写并没有限制，也可以使用自闭合标签。

页面语言 lang

下面这行标签，用于指定页面的语言类型：

最常见的语言类型有两种：

en：定义页面语言为英语。

zh-CN：定义页面语言为中文

头标签 head

HTML5的比较完整的骨架：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="厉害很厉害" />
    <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
    <title>Documenttitle>
head>
<body>

body>
html>

面试题：

问：网页的head标签里面，表示的是页面的配置，有什么配置？
答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。

头标签内部的常见标签如下：