HTML、CSS、JavaScript基础学习

1、基础知识学习

HTML5 JS CSS http://www.w3school.com.cn/

VUE https://cn.vuejs.org/v2/guide/ 官网上面看完基础部分就可以

2、开发工具

Webstrorm vue开发工具

IDEA STS 服务端开发工具

Android Studio ， Eclipse Android开发工具

1.什么是HTML5？

HTML5将成为 HTML、XHTML 以及 HTML DOM 的新标准。增加了一些新特性新功能等。

为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

减少对外部插件的需求（比如 Flash）

更优秀的错误处理

更多取代脚本的标记

HTML5 应该独立于设备

开发进程应对公众透明

基础学习：

1.《video》

video 元素支持三种视频格式：Ogg、MPEG4(mp4)、WebM。

controls 属性供添加播放、暂停和音量控件。

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：

Your browser does not support the video tag.

</video>

HTML5 <video> 元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

<video> 标签的属性

autoplay如果出现该属性，则视频在就绪后马上播放。

controls如果出现该属性，则向用户显示控件，比如播放按钮。

height设置视频播放器的高度。

loop如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src要播放的视频的 URL。

width设置视频播放器的宽度。

2.《audio》

audio 元素支持三种音频格式：Ogg 、MP3、Wav。

control 属性供添加播放、暂停和音量控件。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

属性：autoplay、controls、loop、src、preload同上video

Your browser does not support the audio tag.

</audio>

3.《拖放Drag 和 drop》

#div1, #div2

{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

//dataTransfer.setData() 方法设置被拖数据的数据类型和值：

}

function drop(ev)

{

ev.preventDefault();//阻止对元素的默认处理方式

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

//被拖数据是被拖元素的 id ("drag1")

//把被拖元素追加到放置元素（目标元素）中

}

</script>

//放到何处 - ondragover

//默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

//进行放置 - ondrop

//设置元素为可拖放：draggable="true"

//拖动什么 - ondragstart 和 setData()：

</div>

4.《画布canvas元素用于在网页上绘制图形》

通过 JavaScript来绘制canvas元素本身是没有绘图能力的。

Your browser does not support the canvas element.

</canvas>

5.《SVG指可伸缩矢量图形 (Scalable Vector Graphics)》

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

6.Canvas 与 SVG 的比较

Canvas

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

不适合游戏应用

7.在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

HTML5 使用 JavaScript 来存储和访问数据

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

8.《应用缓存》

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

Cache Manifest 基础

如需启用应用程序缓存<html manifest="demo.appcache">

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

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

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

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

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

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存

manifest 文件被修改（参阅下面的提示）

由程序来更新应用缓存

9.HTML5表单

《Input 类型》这些新的输入类型：type="email、url、number、range[range类型显示为滑动条。]、search、color、Date pickers (date, month, week, time, datetime, datetime-local)"

《表单元素》

新的表单元素：

datalist：

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

Webpage: <input type="url" list="url_list" name="link" />

</datalist>

******

****** 元素的作用是提供一种验证用户的可靠方法。

****** 元素是**对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

output：output 元素用于不同类型的输出，比如计算或脚本输出

10.HTML5 的新的表单属性

新的 form 属性：autocomplete、novalidate

新的 input 属性：

autocomplete、autofocus、form、

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

height 和 width【只适用于 image 类型的 <input> 标签】、list、min, max 和 step、multiple、pattern (regexp)、placeholder、required

11.什么是CSS？：

CSS 指层叠样式表 (Cascading Style Sheets)：定义如何显示HTML元素（渲染页面达到美观效果）。

12.样式表的种类？

外部样式表（.css外部文件）、内部样式表（<style标签>）、内联样式（style属性）

优先权：外部<内部<内联样式表

外部样式表

<head>

</head>

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

<head>

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}

</style>

</head>

内联样式

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

13.选择器的种类？

ID选择器（#）、类选择器（.）、标签选择器（属性选择器[属性]或者[属性=值]、派生类选择器、锚伪类选择器等等）

选择器的定义格式：

HTML、CSS、JavaScript基础学习

HTML、CSS、JavaScript基础学习

外部样式表

内部样式表

内联样式

在 HTML5 中不再支持 <script> 元素的type属性

相关推荐