HTML5的一些常用的新内容以及一些规范

1.canvas:canvas是针对于一些简单的图象进行页面绘制,而且方便了修改页面图片(只需要通过修改JS控制的坐标就可以),而使用img的话的不利于维护修改,而且使用canvas绘图会降低占用的空间,但是它的缺点也是非常的明显的,比如说一张非常精细的图片,如果你非要使用canvas来进行绘制的话,如果是非常精美的图片的话你需要使用非常大的时间来进行绘制,所以canvas在对于一些复杂的画面来讲并不是特别的好用。

2.video/audio(视频/音频):针对于之前页面在家在播放一些视频文件的时候会使用到flash之类的插件导致性能占用较高的问题,video标签可以很好的解决这个问题,直接src链接视频文件即可进行页面播放,并且还附带了很多播放的控件功能例如muted、autoplay、volume、currenttime等。但是它并不是在所有的浏览器上都可以兼容,而且可以使用的视频文件格式比较少,主要支持Ogg、mpeg4、webm这三种视频格式,所以针对这种情况下大部分都是用来制作一些小的视频短片,还有广告,如果是用来专门充当页面的播放器的话并不是特别的合适。

3.表单:在以往的表单元素使用中样式比较少,例如输入框基本就是text,password这两个,但是在Html5新增的一些属性是非常好使用的,例如在之前我们创建一个搜索框时,为了美观我们需要来使用一些别的复杂的方式来进行美化,而现在新添加的<input type=search>属性的就是专门用来做搜索框的,并且非常的好用,并且都是语义化的属性,time-时间,email-电子邮箱。

4.progress:可以通过此标签创建一个进度条,并且进度条可以使用JS脚本来进行控制。

5.data-list:通过此标签的与input一起应用可以定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。

6.语义化布局常用标签:

<header>.用于页面头部的容器

<nav>.用于页面的导航

<footer>.定义页面脚步容器

<section>.主题的容器

<article>.定义页面文章内容的容器

<aside>.定义主体之外的容器(常用语页面两侧的定位广告)

7.我对语义化的理解:用正确的标签去做正确的事,语义化能让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析,即使在没有样式CSS情况下也以一种文档格式来显示,并且是非常容易容易阅读的,而且搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO(类似与网络竞价排行,不过不需要花钱),并且呢,语义化标签使得人对网站的维护更加的便捷。

8.html5为什么只需要在头部声明<!DOCTYPE HTML>:HTML5不基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,让浏览器能够以HTML5的方式来运行,而HTML4基于SGML所以需要对DTD进行引用才能告诉浏览器文档所使用的文档类型是什么。

时间: 2024-11-08 21:20:37

HTML5的一些常用的新内容以及一些规范的相关文章

web前端之html5开发中常用的开发工具

正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下: 一.HTML5全栈开发工具之Adobe Dreamweaver 首先是大名鼎鼎的Adobe Dreamweaver,Adobe Dreamweaver 软件使设计人员和开发人员能充满自信地构建基于标准的网站.由于同新的 Adobe CS Live 在线

疯狂html5讲义(二):HTML5简的常用元素与属性(一):html5保留的常用元素

html5删除了少量的元素与属性:主要删除了文档样式相关的各种元素与属性,比如<font>.width等,html5规范推荐使用css样式单来控制html文档样式. 1.基本元素 <html>.<head>.<title>.<body>.<style>.<h1>到<h6>.<p>.<br>.<hr>(定义水平线).<div>.<span>~~~ <

疯狂html5讲义(二):HTML5简的常用元素与属性(二):html5新增的通用属性

1.contentEditable属性 true时可直接编辑html元素里面的内容,且具有"可继承"的特点. 编辑后不要刷新页面,否则编辑的内容会丢失,可以通过该元素的innerHtml属性来获取编辑后的内容. 2.designMode属性 此属性相当于一个全局的contentEditable属性 3.hidden属性 可以替代css中的display,hidden=true相当于display:none 4.spellcheck属性 针对于input.textarea等元素,可以对用

用angular方法简单实现了吃了么搜索小功能,还不太完善,后续会继续添加新内容。

最近接触了Angular框架,今天用里面的http请求方法做了一个小的案例,是一个查询地名获取附近美食的小案例.还不太完善,后面面有时间会继续添加新的内容.这个小案例没有用到任何的jQuery与原生js方法. 先上HTML结构代码与HTML结构中的angular指令. <body ng-app="app"> <div ng-controller="con" id="con"> <h1>吃了么</h1>

替换文件中某个字符串并写入新内容(Java代码实现)

import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.FileInputStream; import java.io.FileWriter; import java.io.InputStream; import java.io.InputStreamReader; /* * 替换文件(如果该文件含有子目录,则包括子目录所有文件)中某个字符串并写入新内容(J

添加新内容的四个 jQuery 方法:append,prepend,after,before

添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); //jQuery prepend() 方法在被选元素的开头插入内容. $("p").prepend("Some prepended te

HTML5增加的几个新的标签

HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来记录一下吧! 1.  <canvas>画布标签 HTML5的新标签 举例: 1 <html> 2 <head> 3 <title>canvas画布的应用</title> 4 <p align="center">画一个矩

Framework7学习笔记之 无限滚动(滚动到底部时加载新内容)

一:为页面添加无限滚动控件 在可滚动的容器上(一般为page-content)添加"infinite-scroll"类:在页面底部定义 加载指示器. <div class="page"> <div class="page-content infinite-scroll" data-distance="100"> ... <!-- 加载提示符 --> <div class="i

使用FileStream向txt格式的文本文件 &quot;追加&quot; 新内容并读取

原文:使用FileStream向txt格式的文本文件 "追加" 新内容并读取 1 //得到文件路径. 2 static string filePath = AppDomain.CurrentDomain.BaseDirectory+"\\TxtFile.txt"; 3 static void Main(string[] args) 4 { 5 //调用写入方法. 6 WriteTxtFile(filePath); 7 //调用读取方法. 8 Console.Writ