一、认识浏览器
谷歌浏览器（chrome）:Webkit内核（v8引擎）
火狐浏览器（firefox）：Gecko内核
IE浏览器：Trident内核
欧朋浏览器 (opera):Presto内核
safari (苹果浏览器)
大部分国产浏览器（360、搜狗、QQ、UC、猎豹、百度）
认知的浏览器世界
浏览器因为内核不同，将会导致很多问题，比如说js的适配问题，解决es6的兼容问题，比如说css3的兼容问题，这些势必都会成功很多比较麻烦的问题。;因为最早期的设计中，在我的认知中，div+css的拼图模式。但是根据移动端的出现，和各自的核心浏览器适配问题，而又没有统一的局势和方案。
加上最近的node(v8)环境的出现，js代码的生存空间(解释器)的扩张，面对前端的适配问题，也将层出不穷。
二、认识html标签
2.1. 入门篇
世界观
在张鑫旭大神将前端的世界比喻成一个王国，而我认为可能这就分为3个部队，差不多可以理解成为，html部队，css部队，js部队。有一个叫产品经理的怪，需要三家合理才能打赢。
这第一仗就是html，负责把骨架搭好了，再上颜料和动态效果。骨架搭的好，有什么好处呢，大家都知道只要div+css，那么这个页面除了几个特殊标签，比如a，viode啊，其他的都可以伪装出来。这个牵扯到一个标签语义化的作用，语义化有两种好处。
1.权重(蜘蛛)
骨架好，百度蜘蛛会爬取收录。这个作用，可以帮助很多公司，获取百度权重的排名。百度蜘蛛，它的功能其实就和抄书一样。那么就意味着他不能解析css。所以，他看到了img就知道是图片，但是你写一个div+background:url('./img.png')。它可就不认识了。
2.障碍解析器
使用特殊的阅读器。
那么如何判断骨架的好坏呢？
我们拿慕课网举例子，原图如下
我们把网页的css删除了，标签的格式还不乱，这就是好的骨架。
改呗收录的都被收录了这就是语义化。
按下不表: 接下来我们将根据 html，css，js的基本和升级探究，前端的世界。
2.2. 一场升级
从XHTML 1.1 到 htm5 这个故事要从 DOCTYPE 开始
从html部队的第一代长官之后，历经了几代长官，一代代升级迭代。最终市面上留下的也就是html4与html5,老百姓喜欢称他们为h4与h5。
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 5
<!DOCTYPE html>
在这场标签的战役中，首领的不同，也就意味着使用的html的版本设置不同，这也就是html的标签不同。
这场战役中，也要出现一些不能出现，但是舍不得删的。
<!-- -->
快捷键: ctrl + /
在这里我们认识一个编译工具。
工欲善其事必先利其器，所以先下个vscode总是没错的，我辈总有些人是说记事本也能，但是有人和你说了，别别理他了，工作场合。没人那么用。也有人和说过webstorm，在jetbrains公司大旗下，也不错，但是我觉得功能太重，不好用。sublime在vscode出现之前绝对是神器，但是插件上还是慢慢逊了一筹。
2.3 队列站好
是时候讲讲html的队列了，我们让它们从a到z站好。我们发现每一个标签都会带上自己的技能。我们这边只交流常用的属性。（没有提及的属性，不代表不重要，只能说明作者也是个初学者，也就熟悉部分）
a 出列
<a> 定义锚。
download="w3logo" 下载 （但是这个我感觉浏览器的兼容性问题不小）
href="" 链接
| target 属性 | 翻译 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
| 为什么特别写target,因为用的地方特别多！！ |
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<address> 定义文档作者或拥有者的联系信息。
<applet> 不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
src 路径
autoplay 设置或返回是否在就绪（加载完成）后随即播放音频。
loop 设置或返回音频是否应在结束时再次播放。
b 出列
<b> 定义粗体字。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<body> 定义文档的主体。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
c 出列
<canvas> 定义图形。
<caption> 定义表格标题。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
<command> 定义命令按钮。
d 出列
<datalist> 定义下拉列表。
<dd> 定义定义列表中项目的描述。
<del> 定义被删除文本。
<details> 定义元素的细节。
<dir> 不赞成使用。定义目录列表。
<div> 定义文档中的节。
<dfn> 定义定义项目。
<dialog> 定义对话框或窗口。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
e 出列
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
f 出列
<fieldset> 定义围绕表单中元素的边框。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<font> 不赞成使用。定义文字的字体、尺寸和颜色。
<footer> 定义 section 或 page 的页脚。
<form> 定义供用户输入的 HTML 表单。
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
h 出列
<h1> to <h6> 定义 HTML 标题。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<html> 定义 HTML 文档。
i 出列
<i> 定义斜体字。
<iframe> 定义内联框架。
<img> 定义图像。
<input> 定义输入控件。
<ins> 定义被插入文本。
<isindex> 不赞成使用。定义与文档相关的可搜索索引。
k 出列
<kbd> 定义键盘文本。
<keygen> 定义生成密钥。
l 出列
<label> 定义 input 元素的标注。
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目。
<link> 定义文档与外部资源的关系。
m 出列
<map> 定义图像映射。
<mark> 定义有记号的文本。
<menu> 定义命令的列表或菜单。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<meta> 定义关于 HTML 文档的元信息。
<meter> 定义预定义范围内的度量。
n 出列
<nav> 定义导航链接。
<noframes> 定义针对不支持框架的用户的替代内容。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
o 出列
<object> 定义内嵌对象。
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output> 定义输出的一些类型。
p 出列
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
q 出列
<q> 定义短的引用。
r 出列
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
s 出列
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section> 定义 section。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source> 定义媒介源。
<span> 定义文档中的节。
<strike> 不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary> 为 <details> 元素定义可见的标题。
<sup> 定义上标文本。
t 出列
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期/时间。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track> 定义用在媒体播放器中的文本轨道。
<tt> 定义打字机文本。
u 出列
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
v 出列
<var> 定义文本的变量部分。
<video> 定义视频。
w 出列
<wbr> 定义可能的换行符。
x 出列
<xmp> 不赞成使用。定义预格式文本。
2.4 开始分队
反正只要不管你英文好不好，反正队伍已经列给你了，没错可能这辈子也就背这些标签单词了，真是个快乐的事情。
残酷的现实呢，放在你的面前啥玩野？就是你还要搞清楚人家是怎么分队的。
2.4.1 行内元素
简介
例子: span a b strong i em s br u textarea input select lable img sup big small
内联元素是指本身属性为display:inline 的元素。因为它自身的特点，我们通常使用行内元素进行文字、小图标（小结构）的搭建。
行内元素的特点
1.不独占一行
2.排列方式:从左往右
3.设置宽高不起作用 如要起作用 需要转换为块/行内块
4.不设置宽高是它的本身内容的宽高
5.天数自带 display:inline
6.行内元素里不能嵌套块级元素（特殊a）
2.4.1 块级元素
简介
例子: div h1-h6 hr menu ol ul li dl dt dd table p form
本身属性为 display:block的元素；因为它自身的特点，我们通常使用块级元素进行大布局（大结构的搭建）
块级元素的特点
1.独占一行,每一个块级元素都会从新的一行重新开始
2.排列方式:从上往下
3.可以设置宽高以及盒子模型的其他属性
4.不设置宽高的情况下 他的宽度和父元素的宽度 它的高度是本身内容的高度
5.天生自带display：block
6.ul ol 下面只能是li dl 下面只能是dt dd
7.p里面不能嵌套任何的块级元素 包括它自己本身 可以嵌套行内元素
2.4.3 元素之间的互相转换
行内元素 => display:inline
块级元素 => display:block
行内块元素 => display:inline-block
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
