Skip to content

Latest commit

 

History

History
executable file
·
2252 lines (1520 loc) · 62.6 KB

前端学习计划.md

File metadata and controls

executable file
·
2252 lines (1520 loc) · 62.6 KB
Raw

学习计划

[TOC]

基础

浏览器发展

世界上第一个浏览器 WorldWideWeb（后改名Nexus）

第一个网页服务器httpd

Web之父 Tim Berners-Lee

主流浏览器

时间 名称 发表人/组织
1996 IE 微软
1996 Opera Telenor公司
2003 safari 苹果公司
2004 firefox Mozilla组织
2008 chrome 谷歌公司

主流浏览器内核介绍

名称 开发公司 使用的浏览器
Trident（IE内核） 微软公司 IE、360
Gecko（Firefox 内核） Mozilla组织 火狐
Webkit（Safari 内核） 苹果公司 safari、360极速、chrome高速、搜狗高速
手机浏览器：safari，安卓默认浏览器
blink Google和Opera Software联合开发 Chrome（28及往后版本），Opera（15及往后版本），Yandex，vivaldi

内核家谱

浏览器内核（Rendering Engine）

内核可以分为两部分：渲染引擎和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS 引擎：解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果

一、Trident 内核

​ 又称MSHTML，微软内核。由于长时间没有更新Trident内核，导致Trident 内核几乎与W3C标准脱节，于是大量的BUG等安全性问题涌现，给后起之秀很多机会。

二、Gecko 内核

​ 火狐内核。

三、Webkit 内核

​ 苹果内核，也是safari浏览器的内核。

四、Blink 内核

​ Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分

五、Presto 内核

​ 由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。特点：渲染速度的优化达到了极致，目前公认最快的浏览器内核，代价是牺牲了网页的兼容性。

HTML

简介

一、HTML是什么？

​ HTML是用来描述网页的一种语言。HTML指的是超文本标记语言，它是一种标记语言，而不是编程语言。标记语言是一套标记标签，HMTL使用标记标签来描述网页。

二、HTML标签

​ 标签是由尖括号包围的关键词，标签通常是成对出现，分为开始标签、结束标签，也称为开放标签、闭合标签。

三、HTML文档 = 网页

​ HTML文档描述网页，包含HTML标签和纯文本，也被称为网页。

HTML基础

标题

<h1>h1标题</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

段落

<p>This is a paragraph.</p>

链接

<a href="http://www.dange.lol">This is a link.</a>

图像

<img src="test.jpg" width="200" height="120" />

HTML元素

元素

​ 元素是指从开始标签到结束标签的所有代码。

元素语法

​ 以开始标签起始，以结束标签终止，内容是标签之间的内容，空内容允许存在，空元素在开始标签中进行关闭，可拥有属性。

嵌套的HTML元素
<html>

<body>
	<p>This is my first paragraph.</p>
</body>

</html>

实例讲解

<!-- <p>元素是一个段落</p>-->
<!--<body>文档主体</body>-->
<!--<html>定义整个文档</html>-->

不要忘记结束标签

空的HTML元素

​ 没有内容的HTML元素被称为空元素，空元素在开始标签中关闭。

<!-- <br /> 换行 -->
使用小写标签

HTML属性

标签可以拥有属性，属性总以名称/值对的形式出现，在开始标签中规定。

<a href="http://www.w3school.com.cn">This is a link</a>
使用小写属性

​ 大小写不敏感

始终为属性值加引号
HTML标题

​ h1——h6

<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
HTML水平线
<hr />

创建水平线，用于分割内容

HTML注释
<!-- 这是注释 -->

合理的注释对代码编辑工作有帮助。

HTML段落
<!--p标签定义段落，浏览器自动在段后添加空行，<p>是块级元素</p>-->
HTML折行
<br />标签br换行
HTML样式

style属性勇于改变HTML元素的样式。

作用：提供一种改变所有HTML元素的样式的通用方法。

可以直接添加到HTML元素中，也可以间接地在独立的样式表中定义。

字体、颜色、尺寸

​ font-family、color、font-size

文本对齐

​ text-align

引用
<q>短引用</q>

<blockquote>
    长引用
    1
    2
    3
</blockquote>

<abbr title="WorldWideWeb">WWW缩略词</abbr>

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

<address>
内容是斜体<br/>
</address>

<cite>The Scream</cite> 著作的标题

<bdo dir="rtl">This text will be written from right to left</bdo> 双向重写 right to left
计算机代码

键盘格式 定义键盘输入

样本格式 定义计算机输出示例

代码格式 定义编程代码示例，不保留多余的空格和折行

代码格式 

 包含代码，保留格式


变量格式化  定义数学变量


注释


注释标签


<!-- 注释 -->

<!-- 条件注释 -->
<!--[if IE 8]>
	定义只有IE8 才能执行的HTML标签
	...some HTML here
<![endif]-->


CSS


如何使用样式？


外部样式表


<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


内部样式表


<head>
    
    <style type="text/css">
        body {
            background-color: red;
        }
        p {
            margin-left: 20px;
        }
    </style>
</head>


内联样式


<p style="color: red; margin-left: 20px">
This is a paragraph
</p>


链接


超链接


<a href="url">a标签在HTML中创建链接</a>
<a name="label">创建锚</a>


链接语法


<a href="http://www.w3school.com.cn/">Visit W3School</a>
<!-- 链接文本不必一定是文本，也可以是图片或者其他HTML元素 -->


target属性


<!-- 定义被链接的文档在何处显示 -->
<a href="http://www.w3school.com.cn/" target="_blank">[新窗口]Visit W3School!</a>
<a href="/index.html"
target="_top">[跳出框架外]请点击这里！</a> 


name属性


<!-- 锚 anchor -->
<!-- 命名锚 -->
<a name="label">锚（显示在页面上的文本）</a>
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">[同一个文档中]有用的提示</a>
<!-- 将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了 -->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">[其他页面中]有用的提示</a>


href属性


<a href="mailto:[email protected]?subject=Hello%20again">发送邮件</a>

<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

<!-- %20代表空格 -->


HTML图像


图像标签和源属性


<img src="url" />


替换文本属性


<!-- alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的 -->
<img src="boat.gif" alt="Big Boat">


图像映射Map / 可点击区域Area


<!-- map 带有可点击区域的图像映射 -->
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>


HTML表格


table定义表格 [table]


tr定义行 [table row]


td定义单元格[table data]


table 属性


边框 border


表头 th [table head] 粗体剧中


空单元格 <td></td>, 为了加载边框属性，添加空格符占位<td>$nbsp;</td>


框架 frame属性：box，above，below，hsides，vsides


th 横跨多行/列属性：colspan，rowspan


HTML列表


无序列表


ul li


有序列表


ol li


定义列表


dl dt dd


HTML块


块元素


h1，p，ul，table，div


内联元素


b，td，a，img，span


div元素 块级元素，可用于组合其他HTML元素的容器


span元素 内联元素，可用于作为文本的容器


HTML类


class属性


通用类样式


.cities {
	background-color: black;
	color: white;
	margin: 20px;
	padding: 20px;
}


特定元素类样式


span.red {
    color: red;
}


HTML布局


div 常作为布局工具


HTML5网站布局语义元素






标签
定义






header
定义文档或者节的页眉




nav
定义导航链接的容器




section
定义文档中的节




article
定义独立的自包含文章




aside
定义内容之外的内容[比如侧栏]




footer
定义文档或者节的页脚




details
定义额外的细节




summary
定义details元素的标题






HTML响应式Web设计


什么事响应式Web设计？


    

  • RWD指的是响应式Web设计[Responsive Web Design]
    • 

  • RWD能哦股以可变尺寸传递网页
    • 

  • RWD对于平板和移动设备是必要的
    • 



创建响应式设计


.city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
} 


使用Bootstrap框架


最流行的响应式Web框架


HTML框架


框架可以在同一个浏览器中显示不止一个页面


框架结构标签 （frameset）：属性包括 rows，cols，示例：rows="50%,50%"


框架标签（Frame）属性包括src，url地址


<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>


如何使用<noframes>标签：为不支持框架的浏览器添加 <noframes> 标签，会显示body内容


<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>


如果frame中包含noresize属性为“noresize”，则不可拖动改变此框架


<frameset cols="50%,*,25%">
  <frame src="/example/html/frame_a.html" noresize="noresize" />
  <frame src="/example/html/frame_b.html" />
  <frame src="/example/html/frame_c.html" />
</frameset>


导航框架


<frameset cols="120,*">

  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">

</frameset>


内联框架（iframe）


<body>

<iframe src="/i/eg_landscape.jpg"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>


</body>


HTML内联框架


<iframe src="URL"></iframe>


height 和 width 属性用于规定 iframe 的高度和宽度，默认单位像素，可以用百分比


frameborder 属性规定是否显示 iframe 周围的边框。设置0，即删除。


HTML背景


背景颜色：bgcolor="#000000"


背景图像：background="<img-url>"


HTML脚本


JavaScript使HTML页面具有更强的动态和交互性。


<script type="text/javascript">
document.write("Hello World!")
</script>


<noscript>标签浏览器不支持或者禁用脚本时显示


HTML头部


head元素:<title>、<base>、<link>、<meta>、<script> 以及 <style>。


title元素：定义文档的标题


base元素：为页面上所有的链接规定默认地址或者默认目标（target）


<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>


link元素：定义文档与外部资源之间的关系


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


style元素：为HTML文档定义样式信息


<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>


meta元素：metadata[元数据]是关于数据的信息，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其它元数据，始终未愈head元素中。


针对搜索引擎的关键词


<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />


name 和 content 属性的作用是描述页面的内容


script元素：定义客户端脚本，如JavaScript


HTML字符实体


&entity_name 或者 &#entity_number






名称
字符实体






空格
&nbsp;




小于号
&lt;




大于号
&gt;




和号&
&amp;




引号"
&quot;




版权©️
&copy;






HTML统一资源定位器


URL也被称为网址，语法规则：


scheme://host.domain:port/path/filename


解释：


scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称


scheme有：http，https，ftp，file


HTML URL 字符编码


URL编码：URL只能使用ASCII字符集来通过因特网进行发送。


HTML Web Server


因特网服务提供商ISP


HTML颜色/颜色名


HTML <!DOCTYPE>


<!DOCTYPE>声明帮助浏览器正确地显示网页。


常见的声明：HTML5，HTML 4.01，XHTML 1.0


HTML 表单


<form>元素：定义HTML表单


表单元素：input元素、复选框、单选按钮、提交按钮等等；


<input>元素






类型type
描述
要点






text
常规文本输入





radio
单选按钮输入
name相同，value不同




submit
提交按钮（提交表单）
在form外层写上action






Action属性：定义在提交表单时执行的动作


Method属性：提交表单时所用的HTTP方法


GET（默认方法）：无敏感信息时使用，表单数据在地址栏可见


POST：包含敏感信息，安全性更佳，提交数据在地址栏不可见


Name属性：必须要给每个输入字段设置一个name属性


<fieldset>组合表单数据，<legend>定义标题


Form属性






属性
描述






accept-charset
在被提交表单中使用的字符集（默认：页面字符集）




action
向何处提交表单的地址（URL）




autocomplete
自动完成表单




enctype
被提交数据的编码（默认：url-encoded）




method
HTTP方法（默认：GET）




name
识别表单的名称




novalidate
规定浏览器不验证表单




target
规定action属性中地址的目标（默认：_self）






HTML表单元素


<input>元素


<select>元素（下拉列表）


<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>


<option>定义待选项，通常把首选项显示为被选选项，也可以直接添加selected属性定义预定义选项


<option value="fiat" selected>Fiat</option>


<textarea>元素（多行输入文本）


<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>


<button>元素（可点击按钮）


<button type="button" onclick="alert('Hello World!')">Click Me!</button>


HTML5表单元素


<datalist>：为<input> 元素规定预定义选项列表，<input> 元素的 list 属性必须引用<datalist>元素的 id 属性


<form action="/demo/demo_form.asp">

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>注释：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 标签。</p>


<keygen>


<output>


HTML输入类型


<input>元素的输入类型


text


<form>
 First name:<br>
    <input type="text" name="firstname">
    <br>
 Last name:<br>
    <input type="text" name="lastname">
</form> 


passsword


<form>
 User name:<br>
    <input type="text" name="username">
    <br>
 User password:<br>
	<input type="password" name="psw">
</form> 


submit


<form action="action_page.php">
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> 


radio


<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 


checkbox


<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form> 


button


<input type="button" onclick="alert('Hello World!')" value="Click Me!">


HTML5输入类型，增加了：


    

  • color
    • 

  • date
    • 

  • datetime
    • 

  • datetime-local
    • 

  • email
    • 

  • month
    • 

  • number
    • 

  • range
    • 

  • search
    • 

  • tel
    • 

  • time
    • 

  • url
    • 

  • week
    • 



注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。


number


<form action="action_page.php">
  Quantity:
  <input type="number" name="points"
   min="0" max="100" step="10" value="30">
  <input type="submit">
</form>

<p><b>Note:</b>type="number" is not supported in IE9 and earlier.
</p>


输入限制：disabled，max，maxlength，min，pattern，readonly，required，size，step，value


date


<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>


color


<form action="action_page.php">
  Select your favorite color:
  <input type="color" name="favcolor" value="#ff0000">
  <input type="submit">
</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer.</p>


range


<p>
根据浏览器支持：<br>
输入类型 "range" 可显示为滑动控件。
</p>

<form action="/demo/demo_form.asp" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>

<p><b>注释：</b>IE9 及早期版本不支持 type="range"。</p>


month


<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="/demo/demo_form.asp">
  生日（月和年）：
  <input type="month" name="bdaymonth">
  <input type="submit">
</form>

<p><b>注释：</b>Firefox 或者
Internet Explorer 11 以及更早版本不支持 type="month"。</p>


week


<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="action_page.php">
  Select a week:
  <input type="week" name="year_week">
  <input type="submit">
</form>

<p><b>注释：</b>
Internet Explorer 不支持 type="week"。</p>


time


<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="/demo/demo_form.asp">
  请选取一个时间：
  <input type="time" name="usr_time">
  <input type="submit">
</form>

<p><b>注释：</b>Firefox 或者
Internet Explorer 11 以及更早版本不支持 type="time"。</p>


datetime


<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="action_page.php">
  生日（日期和时间）：
  <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

<p><b>注释：</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。</p>


datetime-local


<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="/demo/demo_form.asp">
  生日（日期和时间）：
  <input type="datetime-local" name="bdaytime">
  <input type="submit" value="Send">
</form>

<p><b>注释：</b>Firefox 或者
Internet Explorer 不支持 type="datetime-local"。</p>


email


<form action="/demo/demo_form.asp">
  E-mail:
  <input type="email" name="email">
  <input type="submit">
</form>

<p>
<b>注释：</b>IE9 及更早版本不支持 type="email"。</p>


search


<form action="/demo/demo_form.asp">
  搜索谷歌：
  <input type="search" name="googlesearch">
  <input type="submit">
</form>


tel


<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>


url


<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>


file


<form action="/example/html5/demo_form.asp" method="get">
选择图片：<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>请尝试在浏览文件时选取一个以上的文件。</p>


HTML5


什么是HTML5？


HTML5 是最新的 HTML 标准。


HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。


HTML5 拥有新的语义、图形以及多媒体元素。


HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。


HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。


新内容


文档类型声明<!DOCTYPE html>


HTML5 中默认的字符编码是 UTF-8


新特性


    

  • 新的语义元素，比如 , , , and 
    。
    • 

  • 新的表单控件，比如数字、日期、时间、日历和滑块。
    • 

  • 强大的图像支持（借由  和 ）
    • 

  • 强大的多媒体支持（借由 
    • 

  • 强大的新 API，比如用本地存储取代 cookie。
    • 



HTML5 浏览器支持


把HTML5元素定义为块级元素


HTML5定义了8个新的语义HTML元素，所有都是块级元素


可以利用CSS display属性设置为 block，以确保老式浏览器中正确的行为：


header,section,footer,aside,nav,main,aritcle,figure {
    display: block;
}


向HTML添加新元素


向HTML添加新元素


Internet Explorer 的问题


IE 8 以及更早的版本，不允许对未知元素添加样式


幸运的是，有个解决方案 Shiv


完整的Shiv解决方案


<!DOCTYPE html>
<html>

<head>
  <title>Styling HTML5</title>
  <!-- IE9 的早期版本会读取它（并理解它） -->
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

<h1>My First Article</h1>

<article>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</article>

</body>
</html>


引用 shiv 代码的链接必须位于  元素中，因为 Internet Explorer 需要在读取之前认识所有新元素。


HTML5 新元素


新的语义/结构元素






标签
描述






article
定义文档内的文章




aside
页面内容之外的内容




bdi
定义与其他文本不同的文本方向




details
用户可查看或隐藏的额外细节




dialog
定义对话框或窗口




figcaption
定义figure元素的标题




figure
自包含内容，比如图示、图表、照片、代码清单等




footer
文档或节的页脚




header
文档或节的页眉




main
文档的主要内容




mark
重要或强调的内容




menuitem
用户能够从弹出菜单调用的命令/菜单项目




meter
已知范围（尺度）内的标量测量




nav
文档内的导航链接




progress
定义任务进度




rp
定义在不支持ruby注释的浏览器中显示什么




rt
定义关于字符的解释




ruby
定义 ruby注释




section
定义文档中的节




summary
定义details元素的可见标题




time
定义日期/时间




wbr
定义可能的折行






新的表单元素






标签
描述






datalist
输入控件的预定义选项




keygen
定义键对生成器字段




output
定义计算结果






新的输入类型






新的输入类型
新的输入属性






color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
autocomplete、autofocus、form、formaction、formenctype、formmethod、formnoavalidate、formtarget、height、width、list、min、max、multiple、pattern、placeholder、required、step






HTML5 语义元素


拥有语义的元素：form、table、img——清晰的定义其内容






标签
描述






<article>
定义文章。




<aside>
定义页面内容以外的内容。




<details>
定义用户能够查看或隐藏的额外细节。




<figcaption>
定义  元素的标题。




<figure>
规定自包含内容，比如图示、图表、照片、代码清单等。




<footer>
定义文档或节的页脚。




<header>
规定文档或节的页眉。




<main>
规定文档的主内容。




<mark>
定义重要的或强调的文本。




<nav>
定义导航链接。




<section>
定义文档中的节。




<summary>
定义 
 元素的可见标题。





<time>
定义日期/时间。






HTML5 迁移


从HTML4迁移到HTML5


    

  1. 

    更改Doctype：从<!Doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd>"修改为<!DOCTYPE html>
    

    2. 

  2. 

    更改编码：从<meta http-equiv="Content-Type" content="text/html;charset=utf-8">改为<meta charset="utf-8">
    

    3. 

  3. 

    添加shiv：让所有浏览器都支持HTML5语义元素，为IE支持而添加的shiv：
    

    <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

    

    4. 



HTML5 Canvas


什么是Canvas？


HTML5的canvas元素使用JavaScript在网页上绘制图像。


画布是一个矩形区域，可以控制每一个像素。


canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。


创建Canvas元素


向HTML5页面中添加canvas元素。


<canvas id="myCanvas" width="200" height="100"></canvas>


通过JavaScript来绘制


canvas元素本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成


<script type="text/javascript">
	var c = document.getElementById("myCanvas"); 	// js通过id寻找canvas元素
    var cxt = c.getContext("2d");					// 创建context对象
    cxt.fillStyle = "%FF0000";						// 绘制红色矩形 颜色
    cxt.fillRect(0,0,150,75);						// 绘制红色矩形 形状
</script>


绘制直线


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>


HTML5 内联SVG


什么是SVG？


SVG是可伸缩矢量图形，在放大或改变尺寸的情况下图像质量不会有损失。


SVG的优势


可通过文本编辑器来创建和修改，可被搜索、索引、脚本化或压缩，可伸缩，任何分辨率下都可高质量打印，无失真放大


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>


HTML5 地理定位


Geolocation 地理定位：用于定位用户的位置


浏览器支持：IE 9，Firefox，Chrome，Safari，Opera


拥有GPS的设备，定位更加精确


使用实例


<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>


HTML5 拖放


Drag、Drop


元素设为可拖放：<img draggable="true">


拖放内容 - ondragstart 和 setData()


function drag(e) {
    // 设置被拖动数据的数据类型和值，数据类型：text，值：可拖动元素id("drag1")
    e.dataTransfer.setData("text", d.target.id);
}


拖到何处 - ondragover


event.preventDefault()


进行放置 - ondrop


放开被拖数据时，会发生drop事件


function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

/**
调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素中
*/


HTML 本地存储


window.localStorage - 存储没有截止日期的数据


window.sessionStorage - 针对一个session来存储数据（关闭网站会丢失）


localStorage 对象


localStorage.setItem("name", "Gates"); // 存入
document.getElementById("result").innerHTML = localStorage.getItem("name"); // 调用

// 也可这样写
// 存入
localStorage.name = "Gates";
// 调用
document.getElementById("result").innerHTML = localStorage.name; 

// 删除
localStorage.removeItem("name");


sessionStorage 对象


// 存入
sessionStorage.key = "value";
// 调用
sessionStorage.key;
sessionStorage.getItem("key");
// 删除
sessionStorage.removeItem("key");


HTML5 应用程序缓存


使用应用程序缓存，通过创建 cache manifest 文件，可轻松创建web应用的离线版本。


优势：1. 离线浏览 - 用户可在应用离线时使用它们；2. 速度 - 已缓存资源加载的更快；3. 较少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源；


HTML Cache Manifest 实例


<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>


每个指定了manifest的页面在用户对其访问时都会被缓存。


manifest文件的建议文件扩展名是 .appcache


manifest 文件需要设置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置


Manifest 文件


有三个部分：


    

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存；
    • 

  • NETWORK - 在此标题下列出的文件需要与服务器的链接，且不会被缓存；
    • 

  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面；
    • 



# 第一行必须是 CACHE MANIFEST
CACHE MANIFEST
# 下面文件会被缓存，离线使用，除非更新
/main.js
/theme.css
/logo.gif

# NETWORK 规定永远不会被缓存的文件
NETWORK:
login.asp

# FALLBACK 规定如果无法建立因特网连接
FALLBACK:
/html/  /offline.html



浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）。


HTML Web Workers


Web Workers 是运行在后台的JavaScript，不会影响页面的性能。


什么是 Web Worker？


当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。


Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。


HTTP Server-Sent 事件


允许网页自动从服务器获得更新


接受Server-Sent事件通知：EventSource 对象用于接收服务器发送事件通知：


var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};
// 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
// 每当接收到一次更新，就会发生 onmessage 事件
// 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中


CSS


CSS简介


CSS指层叠样式表，定义如何显示HTML元素，样式通常存储在样式表中，解决内容与表现分离的问题，外部样式表可以极大提高工作效率，多层样式将层叠为一个。


所有的主流浏览器均支持层叠样式表。


层叠顺序：


    

  1. 浏览器缺省设置
    2. 

  2. 外部样式表
    3. 

  3. 内部样式表（在head标签内部）
    4. 

  4. 内联样式（在HTML元素内部）
    5. 



CSS基础语法


CSS语法


组成：选择器，以及一条或多条声明 selector {declaration1;declaration2;...;decalrationN;}


选择器通常是需要改变的HTML元素


每条声明由一个属性和一个值组成，冒号分开这两个


值中包含空格的要使用引号包裹


CSS高级语法


选择器分组


h1,h2,h3,h4,h5,h6 {
    color: green;
}


继承及其问题


子元素从父元素继承属性


CSS派生选择器


通过依据元素在其位置的上下文关系来定义样式，可以使标签更简洁。


ul li strong {
    font-style: italic;
    font-weight: normal;
}


CSS id 选择器


以'#'定义，元素中属性为id


CSS 类选择器


以'.'定义，元素中属性为 class


CSS 属性选择器


IE6及以下版本不支持


[title] {
    color: red;
}

// ～适合于有空格分隔的属性值
[title~=hello] {
    color: red;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}


CSS 并列选择器


// div 标签中 class 属性值为 demo 的样式
div.demo {
    color: red;
}


CSS创建


如何插入样式表


    

  1. 

    外部样式表
    

    <head>
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
    

    2. 

  2. 

    内部样式表
    

    <head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>
    

    3. 

  3. 

    内联样式
    

    <p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
    

    4. 



CSS 权重


!important > 行间样式 > id > class|属性|伪类 > 标签选择器 > 通配符






样式
权重






!important
Infinity 正无穷




行间样式
1000




Id 选择器
100




class 选择器|属性选择器|伪类选择器
10




标签选择器|伪元素选择器
1




通配符选择器
0






权重进制：256 ， 计算时注意 [IE7.0测试结果]


CSS 样式


CSS 背景


CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。


CSS 在这方面的能力远远在HTML之上。


/* 背景色 background-color */ 
p {
    background-color: gray;
}

/* 背景图片 background-image */
body {
    background-image: url(/i/eg_bg_04.gif);
}

p.flower {
    background-image: url(/i/eg_bg_03.gif);
}

/* 背景重复 background-repeat */
body { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
}

/* 背景定位 background-position: center|top|bottom|right|left|水平方向50% 垂直方向50% */
body{ 
    background-image: url('/i/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* 背景关联 background-attachment fixed固定 scroll随之滚动 */
body {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
}






属性
描述






background
简写属性，作用是将背景属性设置在一个声明中。




background-attachment
背景图像是否固定或者随着页面的其余部分滚动。




background-color
设置元素的背景颜色。




background-image
把图像设置为背景。




background-position
设置背景图像的起始位置。




background-repeat
设置背景图像是否及如何重复。






CSS 文本


定义文本外观：颜色、字符间距、对齐文本、装饰文本、文本缩进






属性
描述






color
设置文本颜色




direction
设置文本方向。




line-height
设置行高。




letter-spacing
设置字符间距。




text-align
对齐元素中的文本。




text-decoration
向文本添加修饰。




text-indent
缩进元素中文本的首行。




text-shadow
设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。




text-transform
控制元素中的字母。




unicode-bidi
设置文本方向。




white-space
设置元素中空白的处理方式。




word-spacing
设置字间距。






缩进文本：text-indent: 5em|-5em|20%，向左|向右缩进5em，缩进相对父元素20%的宽度


水平对齐：text-align: center 与 <CENTER> 元素的作用一样






值
描述






left
把文本排列到左边。默认值：由浏览器决定。




right
把文本排列到右边。




center
把文本排列到中间。




justify
实现两端对齐文本效果。




inherit
规定应该从父元素继承 text-align 属性的值。






字间隔：word-spacing






值
描述






normal
默认。定义单词间的标准空间。




length
定义单词间的固定空间。




inherit
规定应该从父元素继承 word-spacing 属性的值。






字母间隔：letter-spacing






值
描述






normal
默认。规定字符间没有额外的空间。




length
定义字符间的固定空间（允许使用负值）。




inherit
规定应该从父元素继承 letter-spacing 属性的值。






文本装饰：text-decoration






值
描述






none
默认。定义标准的文本。




underline
定义文本下的一条线。




overline
定义文本上的一条线。




line-through
定义穿过文本下的一条线。




blink
定义闪烁的文本。




inherit
规定应该从父元素继承 text-decoration 属性的值。






处理空白符：white-space影响到用户代理对源文档中的空格、换行和 tab 字符的处理






值
描述






normal
默认。空白会被浏览器忽略。




pre
空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。




nowrap
文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。




pre-wrap
保留空白符序列，但是正常地进行换行。




pre-line
合并空白符序列，但是保留换行符。




inherit
规定应该从父元素继承 white-space 属性的值。






文本方向：direction






值
描述






ltr
默认。文本方向从左到右。




rtl
文本方向从右到左。




inherit
规定应该从父元素继承 direction 属性的值。






CSS 字体


字体属性






属性
描述






font
简写属性。作用是把所有针对字体的属性设置在一个声明中。




font-family
设置字体系列。




font-size
设置字体的尺寸。




font-size-adjust
当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）




font-stretch
对字体进行水平拉伸。（CSS2.1 已删除该属性。）




font-style
设置字体风格。




font-variant
以小型大写字体或者正常字体显示文本。




font-weight
设置字体的粗细。






指定字体：font-family






值
描述






family-name**generic-family
用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。




inherit
规定应该从父元素继承字体系列。






字体风格：font-size: normal, italic, oblique


字体变形：font-variant: normal, small-caps,inherit


字体加粗：font-weight: normal, bold, bolder, lighter, 100 - 900, inherit


字体大小：font-size: 像素|smaller|larger|10%| 1em


CSS 链接


设置链接的样式


链接的四种状态：


    

  • a:link - 普通的、未被访问的链接
    • 

  • a:visited - 用户已访问的链接
    • 

  • a:hover - 鼠标指针位于链接的上方
    • 

  • a:active - 链接被点击的时刻
    • 



文本修饰


text-decoration:none| underline 下划线


CSS 列表






属性
描述






list-style
简写属性。用于把所有用于列表的属性设置于一个声明中。




list-style-image
将图象设置为列表项标志。




list-style-position
设置列表中列表项标志的位置。




list-style-type
设置列表项标志的类型。






列表属性允许放置、改变列表项标志，或者将图像作为列表项标志


列表类型，标志类型，属性 list-style-type： none|disc|circle|square|decimal


列表项图像：list-style-image： url(xxx.gif)


简写列表样式：li {list-style : url(example.gif) square inside}


CSS 表格


CSS 表格属性可以帮助您极大地改善表格的外观。


table 标签， th，td


表格边框，属性：border: 1px solid blue;


折叠边框，属性：border-collapse: collapse;


表格文本对齐，属性：text-align: right | left | center; 水平对齐方式


vertical-align: top | bottom | center; 垂直对齐方式


表格内边距，padding，td、th设置padding


表格颜色，color


Table 属性






属性
描述






border-collapse
设置是否把表格边框合并为单一的边框。




border-spacing
设置分隔单元格边框的距离。




caption-side
设置表格标题的位置。




empty-cells
设置是否显示表格中的空单元格。




table-layout
设置显示单元、行和列的算法。






CSS 轮廓


outline 轮廓 是绘制与元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，可规定元素轮廓的样式、颜色和宽度。


CSS 边框属性


"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。






属性
描述
CSS






outline
在一个声明中设置所有的轮廓属性。
2




outline-color
设置轮廓的颜色。
2




outline-style
设置轮廓的样式。
2




outline-width
设置轮廓的宽度。
2






CSS 框模型


CSS 框模型概述


Box Model 框模型 即 盒子模型，规定了元素框处理元素内容、内边距、边框和外边距的方式。


盒子模型概述


CSS 内边距


padding 属性 定义元素边框与元素内容之间的空白区域


h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
}

div {
    /* 上下内边距 10px， 左右内边距 5px */
    padding: 10px 5px; 
}

span {
    /* pading 上 左 下 右 内边距 */
    padding: 1px 2px 3px 4px;
}


CSS 边框


border 是 围绕元素内容和内边距的一条或多条线。


CSS border 属性允许你规定元素边框的样式、宽度和颜色。






属性
描述






border
简写属性，用于把针对四个边的属性设置在一个声明。




border-style
用于设置元素所有边框的样式，或者单独地为各边设置边框样式。




border-width
简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。




border-color
简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。




border-bottom
简写属性，用于把下边框的所有属性设置到一个声明中。




border-bottom-color
设置元素的下边框的颜色。




border-bottom-style
设置元素的下边框的样式。




border-bottom-width
设置元素的下边框的宽度。




border-left
简写属性，用于把左边框的所有属性设置到一个声明中。




border-left-color
设置元素的左边框的颜色。




border-left-style
设置元素的左边框的样式。




border-left-width
设置元素的左边框的宽度。




border-right
简写属性，用于把右边框的所有属性设置到一个声明中。




border-right-color
设置元素的右边框的颜色。




border-right-style
设置元素的右边框的样式。




border-right-width
设置元素的右边框的宽度。




border-top
简写属性，用于把上边框的所有属性设置到一个声明中。




border-top-color
设置元素的上边框的颜色。




border-top-style
设置元素的上边框的样式。




border-top-width
设置元素的上边框的宽度。






CSS 外边距


margin 属性，接受任何长度单位、百分数甚至负值。






属性
描述






margin
简写属性。在一个声明中设置所有外边距属性。




margin-bottom
设置元素的下外边距。




margin-left
设置元素的左外边距。




margin-right
设置元素的右外边距。




margin-top
设置元素的上外边距。






CSS 外边距合并


外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。


合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。


注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。


CSS 定位


CSS 定位描述


CSS 定位（Positioning）属性允许对元素进行定位。


CSS 定位和浮动


一切皆为框


块级元素显示为一块内容，称为“块框”，行级元素显示在行中，称为“行内框”。


display 属性可以改变生成框的类型，block 块级元素，inline 行级元素，inline-block 行内块级元素，none 没有框


CSS 定位机制


三种基本的定位机制：普通流、浮动和绝对定位


CSS position 属性


属性值：


    

  1. static： 元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
    2. 

  2. relative：元素框偏移某个距离。元素仍保持其未定位前的形状，他原本所占的空间仍保留。
    3. 

  3. absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭。元素定位后生成一个块级框。
    4. 

  4. fixed：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。
    5. 

  5. 



CSS3


JavaScript


JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能。Web技术蛋糕第三层。


基本数据类型


    

  1. Number
    2. 

  2. String
    3. 

  3. Boolean
    4. 

  4. Symbol
    5. 

  5. null
    6. 

  6. undefined
    7. 

  7. BigInt     BigInt(value) or 100123n, 不能和Math方法一起用，不可与Number类型共用
    8. 



BigInt 与 Number 不严格相等，但是 宽松相等


还有一种 Object


变量声明


    

  1. var
    2. 

  2. let 块级作用域
    3. 

  3. const 块级作用域只读常量
    4. 



直接赋值 会产生全局变量，例如：a=0


变量提升


JS中可以先使用变量稍后再声明变量而不会引发异常，提升后的变量将返回undefined。


枚举一个对象的所有属性


    

  1. for … in 循环
    2. 

  2. Object.keys(o)
    3. 

  3. Object.getOwnPropertyNames(o)
    4. 



手写枚举对象属性方法


const listAllProperties = o => {
  let objectToInspect, result = []
  for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getProtoTypeOf(objectToInspect)) {
    result = result.concat(Object.getOwnPropertyNames(objectToInspect))
  }
  return result;
}


错误的值


    

  • false
    • 

  • undefined
    • 

  • null
    • 

  • 0
    • 

  • NaN
    • 

  • ''
    • 



⚠️ 不要混淆布尔值true和false 与 Boolean对象的真与假


let b = new Boolean(false)
if (b) console.log('123') // true , 打印：123
if (b == true) console.log('123') else console.log('456') // false，打印：456


Promise


Promise对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。


new Promise(function(resolve, reject) { … } /* executor */) 


executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回所建promise实例对象前被调用）。resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。executor 内部通常会执行一些异步操作，一旦异步操作执行完毕(可能成功/失败)，要么调用resolve函数来将promise状态改成fulfilled，要么调用reject 函数将promise的状态改为rejected。如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。


状态：pending： 初始状态；fulfilled：操作成功；rejected：操作失败；


方法：


Promise.all(iterable): 返回一个新的Promise对象，只有iterable中所有的promise都成功执行时才会触发成功，将所有promise返回值的数组作为成功回调的返回值，顺序与iterable保持一致；promise触发失败时，将第一个失败的错误信息作为返回。


Promise.race(iterable)


Promise.reject(reason)


Promise.resolve(value)


ES5 与 ES6 不同点


ES7 / ES8 发展


数据可视化


状态管理（flux/Redux/Mobx）


前端工程化构建（Webpack，Gulp）


Webpack


为什么要用Webpack？


起步


管理资源


管理输出


开发


模块热替换


Tree sharking


生产环境构建


代码分离


懒加载


缓存


创建library


shimming


渐进式网络应用程序


TypeScript


环境变量


构建性能


内容安全策略


开发-Vagrant


管理依赖


公共路径


集成


HTTP、HTTPS协议


Web安全策略


性能调优


调试


FunDebug错误监控平台


编码规范


数据结构和算法


快速排序算法


堆排序算法


归并排序算法


二分查找算法


线性查找 BFPRT


深度优先搜索算法 DFS


广度优先搜索算法 BFS


Dijkstra算法


动态规划算法


朴素贝叶斯分类算法


A*搜索算法


集束搜索


分支界定算法


Buchberger算法


数据压缩


密钥交换算法


离散微分算法


欧几里得算法


期望-最大算法


快速傅里叶变换


梯度下降


Karatsuba乘法


LLL算法


最大流量算法


合并排序


牛顿法


学习算法


两次筛选


RANSAC


RSA


Strassen算法


单纯型算法


奇异值分解


求解线性方程组


Strukturtensor


框架


React🌟🌟🌟🌟🌟


源码解读


version：v16.6.1


解读路径：react/packages/react/index.js


jQuery🌟🌟🌟


Vue🌟🌟


Backbone🌟🌟


设计模式


单例模式


工厂模式


MVC


MVP


MVVM


观察者模式


原型模式


项目


Web网站——苏宁易购官网


H5网站


React-Native APP


应聘备选


小黑鱼


image-20181121195015041


苏宁易购


image-20181121195351760


image-20181121195711151


小米


image-20181121200101403


中国电子科技集团


image-20181121200627107


苏宁体育


image-20181121201249834