html5学习笔记

html5视频

1.<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

2.实例：

   <video width="320" height="240" controls="controls">

  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

controls 属性供添加播放、暂停和音量控件。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

3.

 

 

4.play(),pause()方法

<button onclick="playPause()">播放/暂停</button>

function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

 

 

HTML 5 Canvas

什么是 Canvas？

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

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素,规定元素的 id、宽度和高度：

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

通过 JavaScript 来绘制

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

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);      在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

 

HTML5 内联 SVG

什么是SVG？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG 的优势

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

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

 

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

 

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

 

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

 

 

HTML5 语义元素

什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

HTML5中新的语义元素

 <header>    <nav>     <section>    <article>   <aside>   <figcaption>  <figure>  <footer>

<header>元素描述了文档的头部区域、<header>元素主要用于定义内容的介绍展示区域.  在页面中你可以使用多个<header> 元素.

<nav> 标签定义导航链接的部分。<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<article> 标签定义独立的内容。.

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。aside 标签的内容应与主区域的内容相关.

<figcaption> 标签定义 <figure> 元素的标题.            <figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

 <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。     <figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。        

<footer> 元素描述了文档的底部区域.  <footer> 元素应该包含它的包含元素      一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等    文档中你可以使用多个 <footer>元素.

 

说说你对语义化的理解？

语义化的优点有:

    • 代码结构清晰，易于阅读，利于开发和维护
    • 提高用于体验，在样式加载失败时，页面结构清晰
    • 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
    • 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
      语义化标签主要有
      title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark

HTML5有哪些新特性？

  1. 语义化标签
    语义化标签使得页面的内容结构化，见名知义
标签描述
<header></header> 定义了文档的头部区域
<footer></footer> 定义了文档的尾部区域
<nav></nav> 定义文档的导航
<section></section> 定义文档中的节（section、区段）
<article></article> 定义页面独立的内容区域
<aside></aside> 定义页面的侧边栏内容
<detailes></detailes> 用于描述文档或文档某个部分的细节
<summary></summary> 标签包含 details 元素的标题
<dialog></dialog> 定义对话框，比如提示框
  1. 增强型表单
    新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
输入类型描述
color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime 选择一个日期（UTC 时间）
datetime-local 选择一个日期和时间 (无时区)
email 包含 e-mail 地址的输入域
month 选择一个月份
number 数值的输入域
range 一定范围内数字值的输入域
search 用于搜索域
tel 定义输入电话号码字段
time 选择一个时间
url URL 地址的输入域
week 选择周和年

新增表单元素：

表单元素描述
<datalist> 元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定
<keygen> 提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
<output> 用于不同类型的输出

新增表单属性

  • placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
  • required 属性，是一个 boolean 属性。要求填写的输入域不能为空
  • pattern 属性，描述了一个正则表达式用于验证 元素的值。
  • min 和 max 属性，设置元素最小值与最大值。
  • step 属性，为输入域规定合法的数字间隔。
  • height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
  • autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
  • multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。
    1. 新增视频 和音频 标签
    2. Canvas绘图
    3. SVG绘图
    4. 地理定位
    5. 拖放API
    6. Web Worker
    7. Web Storage
    8. WebSocket

 

 

比较 GET 与 POST

 

 

  • 1、Get 是用来从服务器上获得数据，而 Post 是用来向服务器上传递数据。
  •  2、Get 将表单中数据的按照 variable=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post 是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向 URL。
  •  3、安全性：Get 是不安全的，因为在传输过程，数据被放在请求的 URL 中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post 的所有操作对用户来说都是不可见的。
  •  4、对数据长度的限制：Get 传输的数据量小，这主要是因为受 URL 长度限制；而 Post 可以传输大量的数据，所以在上传文件只能使用 Post（当然还有一个原因，将在后面的提到）。
  •  5、Get 限制 Form 表单的数据集的值必须为 ASCII 字符；而 Post 支持整个 ISO10646 字符集。
  •  6、Get 是 Form 的默认方法。

 

     使用 Post 传输的数据，可以通过设置编码的方式正确转化中文；而 Get 传输的数据却没有变化。在以后的程序中，我们一定要注意这一点。

 

posted @ 2020-09-12 23:35  前端小白白又白  阅读(189)  评论(0)    收藏  举报