HTML基础
开始
上周我已经学习了一些开发工具（Sublim Text、vscode），我学会了如何一些基础设置和如何新建文件并且能够保存预览（chrome、firefox），经过这几天对HTML基础的联系，也更加熟练。那么接下来我开始对网页开发进行再深入的学习。为了入门前端，我的第一步计划就是先学习HTML、CSS、JavaScript、jquery。
1.1 电脑配置
主机部分
1、CPU：中央处理器，计算机的运算核心和控制核心。主要功能是解释计算机指令以及处理计算机软件中的数据。
2、显卡：显示适配器，主要功能是电脑进行数模信号转换的设备，承担输出显示图形的任务。
3、内存：内存储器，主要作用是用于暂时存放CPU中的运算数据，以及与硬盘等外部存储器交换的数据。
4、硬盘：有固态硬盘（SSD 盘，新式硬盘）、机械硬盘（HDD 传统硬盘）、混合硬盘，计算机的所有文件均存储到此。
5、主板：计算机的各部件安插在主板上协同工作。
6、电源：给各部件供电。
7、机箱：用于保护机箱内部的所有部件。 外设部分： 1、显示器：用于显示电脑的图像。 2、键盘鼠标：用于操作电脑。 4、音响：用于输出声音。 5、摄像头：用于摄像、视频聊天、拍照等。 6、话筒：用于输入声音、语音聊天等。
电脑操作系统
Windows
Windows采用了图形化模式GUI，比起从前的DOS需要键入指令使用的方式更为人性化。随着电脑硬件和软件的不断升级，微软的Windows也在不断升级，从架构的16位、32位再到64位， 系统版本从最初的Windows 1.0 到大家熟知的Windows 95、Windows 98、Windows ME、Windows 2000、Windows 2003、Windows XP、Windows Vista、Windows 7、Windows 8、Windows 8.1、Windows 10 和Windows Server服务器企业级操作系统，不断持续更新，微软一直在致力于Windows操作系统的开发和完善。
UNIX和LINUX系统
UNIX操作系统（尤尼斯），是一个强大的多用户、多任务操作系统，支持多种处理器架构，按照操作系统的分类，属于分时操作系统，最早由KenThompson、Dennis Ritchie和Douglas McIlroy于1969年在AT&T的贝尔实验室开发。目前它的商标权由国际开放标准组织所拥有，只有符合单一UNIX规范的UNIX系统才能使用UNIX这个名称，否则只能称为类UNIX（UNIX-like）。
Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。
MAC的系统
Mac使用独立的[Mac OS](https://baike.baidu.com/item/Mac OS)系统，最新的OS X系列基于NeXT系统开发，不支持兼容。是一套完备而独立的操作系统。OS X操作系统界面非常独特，突出了形象的图标和人机对话(图形化的人机对话界面最初来自施乐公司的Palo Alto研究中心，苹果借鉴了其成果开发了自己的图形化界面，后来又被微软的Windows所借鉴并在Windows中广泛应用)。[Mac OS](https://baike.baidu.com/item/Mac OS)系统集合了Windows系统和Unix系统的特点。
1.2 Github与Coding的区别
1、Coding是中文，主打团队，项目协作，私有库免费。
2、Github是英文，主打开源，公开项目免费，缺点是得交钱才能开私有库。
1.3 前端开发流行的框架Vue、angular、React优缺点
1、Vue.js
1.1 优点：
（1）简单易学，比Anaular容易学。
（2） 快速：异步批处理方式更新 DOM。
（3） 组合：用解耦的、可复用的组件组合你的应用程序。
（4） 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
1.2缺点：
（1）Vue.js是一个新的项目，没有angular那么成熟。
（2）不支持IE8。
2、angularJS
2.1 优点：
（1）模板功能强大丰富，自带了极其丰富的angular指令。
（2） 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
（3） 自定义指令，自定义指令后可以在项目中多次使用。
2.2 缺点：
（1）angular 入门很容易 但深入后概念很多, 学习中较难理解。
（2）文档例子非常少, 官方的文档基本只写了api
（3）对IE6/7 兼容不算特别好
3、React
3.1 优点：
（1）速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新
（2）跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
（3）模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
（4）单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化
（5）同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
（6）兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
3.2 缺点：
（1）React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
1.4 后端语言node,php,java的优缺点
1、Node.js
1.1 优点：
（1）采用事件驱动、异步编程，为网络服务而设计。
（2）Node.js非阻塞模式的IO处理给Node.js带来在相对低系统资源耗用下的高性能与出众的负载能力，非常适合用作依赖其它IO资源的中间层服务。
（3）Node.js轻量高效。
1.2 缺点：
（1）可靠性低
（2）单进程，单线程，只支持单核CPU，不能充分的利用多核CPU服务器。一旦这个进程崩掉，那么整个web服务就崩掉了。
2、PHP
2.1 优点：
（1）开源、免费性，程序开发快，运行快，技术本身学习快。
（2）跨平台性强，效率高。
2.2 缺点：
（1）单线程。
（2）只支持web开发，不方便做 .exe文件,不方便做桌面应用程序. 不方便做手机程序。
（3）不适合做爬虫、自动运行脚本。
3、Java
3.1 优点：
（1）跨平台、稳定。
（2）一次编写，到处运行
（3）系统的多平台支持
3.2 缺点：
（1）需要JAVA虚拟机，运行环境。
1.5 HTML概述
HTML，超文本标记语言，超文本就意味着有多于文字的形式，比如包含超链接、图片、视频、动画等形式。HTML是应用在网站网页展现的一种语法结构。我们在使用浏览器浏览网页的时候，看到的界面都是由HTML代码表现出来的。HMTL可以说是一种展示文字图片视频等元素的一种方式。通过特定的标记就能展示出来自己想要的效果。怎么样展现效果？让我们一起一步一步探索。
1.6 HTML标记语言的特点
HTML是解释性语言，不需要编译，直接在编辑器上编写，就可以运行。
HTML纯文本类型语言，可以直接通过记事本编写。（不推荐，最好使用编辑器）
HTML具有平台无关性，任何平台任何一款浏览器，都可以打开HTML网页。
HTML代码在浏览器中运行，就是需要使用浏览器进行测试运行
HTML中有很多的标签，也有很多不同的功能，接下来就一起看看下面几个标签能实现什么效果？
1.7 HTML<!DOCTYPE>标签 (HTML5 <!DOCTYPE html>)
实例:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>
定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
1.8 HTML<style>标签
实例:
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
定义和用法
<style> 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
扩展补充：有三种CSS的样式需要我们注意。
CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式。
对CSS三种样式定义及其实例：
1.内联式css样式。
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里文字是红色。</p>
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开（英文状态下;）。
2.嵌入式css样式。
嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：
<style type="text/css">span{color:red;}</style>
嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。
3.外部式css样式。
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。
<link href="style.css" rel="stylesheet" type="text/css" />
4.注意事项：①css样式文件名称以有意义的英文字母命名，如 main.css。 ②rel=”stylesheet” type=”text/css” 是固定写法不可修改。 ③标签位置一般写在标签之内。
1.9 HTML <link> 标签
实例：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
定义和用法
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
2.1 HTML语义化
学习这些HTML标签，我们应考虑如何让HTML标签语义化。什么是语义化？
首先请注意，下面只是我个人的简单理解：其实简单说来语义化就是让机器可以读懂内容。就比如一台机器人想要听懂人类说的话，我们会有两个方法。第一个是让机器人本身能够提高读取人类语言的能力；第二个是让人类改变对机器人说的话，变得简单易懂一点。那两个方法比较起来肯定是第二种方法最简单。那么HTML语义化就是这个道理，HTML语言能改变的让计算机更加容易读懂。
想要更加专业的了解这个问题，可以看看大牛们专业的解释：
https://www.zhihu.com/question/20455165
2.2 HTML<b>标签和<strong>标签的区别
在HTML4.01中:
<b>是视觉要素,表示无意义的加粗，表现样式为 { font-weight: bolder }，仅仅表示「这里应该用粗体显示」。
<strong>是表达要素,表示强调文本。
在HTML5中：
< strong > 表示html页面上的强调。
<b>表示在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如：文档概要中的关键字，评论中的产品名。
2.3 HTML<iframe>标签
定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
实例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test-html</title>
<style type="text/css">
/*.a{text-align:left;}*/
</style>
</head>
<body>
<iframe src="[http://baidu.com](http://baidu.com)" width="100%" height="500" frameborder="0"> </iframe>
<script>
document.write("Hello World!")
</script>
</body>
</html>
2.4 HTML<form>标签
定义和用法
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和label 元素。
表单用于向服务器传输数据。
提示和注释
注释：form 元素是块级元素，其前后会产生折行。
实例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
2.5 HTML<script>标签
实例:
在 HTML 页面中插入一段 JavaScript:
<script type="text/javascript">
document.write("Hello World!")
</script>
定义和用法
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
提示和注释：
注释：假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。<frameset> 标签之后的脚本会被忽略。
2.6 HTML <frameset> 标签
实例:
简单的三框架页面：
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" /></frameset>
</html>
定义和用法
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
提示和注释：
注释：如果您希望验证某个包含框架的页面，请确保 DTD 被设置为 "Frameset DTD"。
重要事项：您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！
2.7 HTML 注释
注释标签 用于在 HTML 插入注释
HTML 注释标签
您能够通过如下语法向 HTML 源代码添加注释：
实例
image.png
注释：在开始标签中有一个惊叹号，但是结束标签中没有。
浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。
您可以利用注释在 HTML 中放置通知和提醒信息。
注释对于 HTML 纠错也大有帮助，因为您可以一次注释一行 HTML 代码，以搜索错误：
实例
image.png
条件注释
您也许会在 HTML 中偶尔发现条件注释：
image.png
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
软件程序标签
各种 HTML 软件程序也能够生成 HTML 注释。
例如 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。
作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。
2.8 HTML <code> 标签
定义和用法
<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和 W3School 的用户来说，这应该是十分熟悉的。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。
提示和注释
提示：如果只是希望使用等宽字体的效果，请使用 <tt> 标签。或者，如果想要在严格限制为等宽字体格式的文本中显示编程代码，请使用 <pre> 标签。
2.9 HTML <ul> 标签
实例
无序 HTML 列表：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
定义和用法
<ul> 标签定义无序列表。
3.1 HTML <ol> 标签
实例
有序 HTML 列表：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
定义和用法
<ol> 标签定义有序列表。
3.2 邮件的样式：
1.邮件使用table+css布局
2.邮件主要部分在body内部，所以样式一定要写成内嵌的，不能在head标签中写style，也不能外联。
3.3 什么是SEO？SEO有什么注意点？怎么做SEO？
SEO（Search Engine Optimization）:汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
SEO优化步骤：
1、 关键词分析（也叫关键词定位） 这是进行SEO优化最重要的一环，关键词分析包括：关键词关注量分析、竞争对手分析、关键词与网站相关性分析、关键词布置、关键词排名预测。
2、 网站架构分析 网站结构符合搜索引擎的爬虫喜好则有利于SEO优化。网站架构分析包括：剔除网站架构不良设计、实现树状目录结构、网站导航与链接优化。
3、 网站目录和页面优化 SEO不止是让网站首页在搜索引擎有好的排名，更重要的是让网站的每个页面都带来流量。
4、内容发布和链接布置 搜索引擎喜欢有规律的网站内容更新，所以合理安排网站内容发布日程是SEO优化的重要技巧之一。链接布置则把整个网站有机地串联起来，让搜索引擎明白每个网页的重要性和关键词，实施的参考是第一点的关键词布置。友情链接战役也是这个时候展开。
5、与搜索引擎对话 向各大搜索引擎登陆入口提交尚未收录站点。在搜索引擎看SEO的效果，通过site:你的域名，知道站点的收录和更新情况。通过domain:你的域名或者link:你的域名，知道站点的反向链接情况。更好的实现与搜索引擎对话，建议采用Google网站管理员工具。
6、建立网站地图SiteMap 根据自己的网站结构，制作网站地图，让你的网站对搜索引擎更加友好化。让搜索引擎能过SiteMap就可以访问整个站点上的所有网页和栏目。
7、高质量的友情链接 建立高质量的友情链接，对于SEO优化来说，可以提高网站PR值以及网站的更新率，都是非常关键性的问题。
8、网站流量分析 网站流量分析从SEO结果上指导下一步的SEO策略，同时对网站的用户体验优化也有指导意义。流量分析工具，建议采用Google流量分析。
3.4 ajax与form的区别是什么?
1、共同点: 都是客户端浏览器给后台发送数据的手段。
2、不同点：
2.1 ajax页面不刷新，用户是无感知的，体验更好。
2.2 form页面需要刷新，体验不好。 现在一般都是ajax。
3.5 爬虫
1、网络爬虫是一种自动获取网页内容的程序，是搜索引擎的重要组成部分。
2、网络爬虫为搜索引擎从万维网下载网页。一般分为传统爬虫和聚焦爬虫。
3、传统爬虫从一个或若干初始网页的URI开始，获得初始网页上的URI，在抓取网页的过程中，不断从当前网页上抽取新的URI放入队列，直到满足系统的一定停止条件。通俗的讲，也就是通过源码解析来获得想要的内容。
3.6 Emmet
Emmet的前身是Zen Coding，Zen Coding是一种快速编写HTML和CSS编码的工具。Zen Coding由两个核心组件组成：一个缩写扩展器（缩写为像CSS一样的选择器）和上下文无关的HTML标签对匹配器。
Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。
Emmet的下载地址在这：http://emmet.io/download/
想要了解更详细的Emmet，建议看下面大牛的博客：https://segmentfault.com/a/1190000007812543
结束
对HTML的学习今天就结束了，接下来一段时间我还是会发布学习HTML的文章，以后有什么心得体会都会发布，和大家分享也一起学习进步。
