HTML5的简介

HTML5是新一代的标准,其工作原理主要包括3部分:

1.不破坏web

在web中使用HTML5的标准不应该让已经存在的网页无法工作。

2.修补牛蹄子路

HTML5将使用频率很高,但是不是官方的技术作为一个目标,在某种程度上确实是最             实际解决问题的途径。

3.实用至上

1.1文档声明

虽然即使不加<html><head><body>  浏览器依旧能够识别html的标签元素,但是如果不加<!doctype  html> 文档说明,浏览器就会以一种混杂模式去渲染网页,不同的浏览器混杂模式不同,渲染页面差别很大,加入文档声明以后,浏览器会以 更严格的标准模式去渲染页面,以保证以一致的格式和布局显示网页。浏览器不关心你有哪种文档声明,它只要检测到文档声明即可。HTML5文档声明很简单

<!doctype  html> /<!DOCTYPE  html>   html5不区分大小写,大写小写无所谓。

1.2语言和编码

使用选择的语言,只需要在<html lang="en/zh-CN"> 中自己添加要使用的语言即可,en 代表英文,zh-CN代表中文。

编码建议采用utf-8 这种编码简单,转换速度快,支持任何非英文字符,当然包含中文。使用如下:

<meta charset="utf-8">

1.3 引入css样式和javascript

推荐外联式引入css,javascript,可以使html5页面结构清晰,便于修改和维护,css的引入内联式和行间样式不推荐使用,js的内联式也不推荐使用。

外联式 :

<link rel="stylesheet" href="css/1.csss">

<script src="js/1.js"></script>

css的引入只能在<head></head> 中,js用<script></script>引入,但是可以放在页面的任何部分,建议放在页面的底部,这样做是要页面加载完以后,再加载交互部分。

2.html5新增的元素

新增的元素有的是添加了功能,有的是形成语义元素,让页面结构更清晰,所有语义元素都有一个特点:不真正做任何事。但是却有一定的用处:容易修改和维护、无障碍性(现代web,让任何人都能无障碍的访问网页)、搜索引擎优化。

2.1构建页面的元素

<article></article>  一块文章、新闻区域。
       <aside></aside>  添加附注
       <figcaption></figcaption> 插图标题
       <figure></figure>  应用插图
       <footer></footer>     标示页脚
       <header></header> 头部

<hgroup></hgroup>  标题 里面放主标题、副标题,别的不放

<hgroup>

<h1>efgwerwq3</h1>

<h2>efgwerwq3</h2>

</hgroup>

<nav></nav>        标示一组导航
       <section></section>
       <details></details>
       <summary></summary>

对于不识别这些新元素的浏览器 ,浏览器默认是显示为line元素。对于不认识的元素,应该显示为块级元素。有两种方式:

1.自定义

article,aside,figure,figcaption,footer,header,hgroup,nav,section,summary{

display:block;

}

2.引入

这里是使用的boostrap中兼容的小于IE9以下的浏览器

 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

2.2标示文本

<mark>awfa</mark> 标记文本 ,默认是有黄色背景
<time>2017-7-1</time>  其实跟不同文本没区别,添加样式很方便

2.3web表单及交互

表单:就是一组文本框、列表、按钮及其他可以点击的小控件,通过这些小控件收集有关访客的某些信息。

2.3.1 input

<input type="text"> 添加了很多类型 button color  image email number url tel range datatime data month week time color等

用placeholder=""添加提示信息,默认为灰色

<input type="text" placeholder="请输入.....">

用autofocus 自动获取焦点,表单中只能有一个

<input type="text" autofocus>

用required 验证非空,此为必填的字段。若添加这个属性的表单元素为空,当提交后,会有提示信息。

<input type="text" required>

可添加样式,与伪类结合以体验更好的体验:

必填时的样式

input:required{  background:red;

}

当提交会,无效时显示的样式

input:required:invalid{  background:blue;

}

更好的验证方式是正则表达式

2.3.2     
   <datalist id="id"></datalist>  用作下拉框,与input 一起使用,input中 指定list="id",即可选择,又可以 自动输入

<progress></progress>
<command>
<menu></menu>
<output></output>  用于js计算后,放一些数据的占位符,通常用span,现在可以用output

2.4音频、视频、插件

<audio src=""></audio>
<video src=""></video>
<embed src="" type="">

2.5画布

<canvas></canvas>

时间: 2024-10-12 08:38:11

HTML5的简介的相关文章

HTML5:简介和文档基本结构

HTML(Hypertext Markup Language,超文本标记语言)诞生于20世纪90年代初,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,如标题.段落.列表.指向其他网页的链接等.HTML5是HTML的最新版本,它的大部分内容都可以兼容新旧浏览器,并新增了大量新的功能.HTML5还引入了原生的音频和视频播放功能.通过下面的网址可以查看HTML的最新规范: 1)HTML5:http://www.w3.org/TR/html5/ 2)HTML5.1:http://www.

HTML5标准简介

最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互.样式的时候,忘却了这一切的基础 – HTML. 其实我很喜欢HTML,觉得这个语言远比XML来得有趣,其灵活.轻便远非极端规范的XML可以比拟.同时又因为HTML的作用范围极小,规定的标签有限等说不上优点还是缺点的特色,使得HTML有着自己的确定性. 本系列的前面很大一部分会以非常短小的篇幅,介绍HTML5中的一些基本概念,并且: 只关心HTML这个语言,其他的javascript或者

HTML5实验室简介之Canvas图像处理(一)

作为一个前端,想必对HTML5都不陌生,特别是移动端,如今已经比较火了,捞金量远胜于PC端,与其说HTML5是一项Web新时代革命性的技术,不如说其是现代化Web应用的新理念:一方面结合JavaScript,前端的羽翼更加丰满:另一方面,跨终端将Web应用推向了一个新的高度:你看到的视觉将更加高端.大气.炫酷:你浏览时的交互体验将更加人性化:你的设备消耗大大降低,运行更流畅:总之,你会惊叹,同时你会很舒服!而这一切都是基于HTML5的! 作为一个小前端,才疏学浅,个人小站(花满楼:http://

2.1 HTML5元素简介及使用方法

1.元素 元素指的是从开始标签到结束标签的所有内容(由开始标签.元素内容.结束标签组成)<br/>空元素,起换行作用 2.HTML元素语法 元素的内容是开始标签与结束标签之间的内容 空元素在开始标签中进行结束 大多数HTML元素可拥有属性 3.嵌套的HTML元素大多数的HTML元素都是可以嵌套的

HTML5 WebAudioAPI简介(一)

一.常用对象 1.AudioContext对象 AudioContext是一个专门用于音频处理的接口,并且原理是讲AudioContext创建出来的各种节点(AudioNode)相互连接,音频数据流经这些节点并作出相应处理. 创建AudioContent对象 //普通写法 var audioContext=new window.AudioContext(); //为了兼容,也可以这样写 window.AudioContext = window.AudioContext || window.web

简介 jCanvas:当 jQuery遇上HTML5 Canvas

HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在这篇文章中,我将向你介绍 jCanvas,一个基于 jQuery的免费且开源的 HTML5的Canvas API. 如果你使用 jQuery 进行开发,jCanvas能够使用 jQuery更简单,更快速的完成一些非常炫酷的 canvas画布及交互效果. 什么是 jCanvas ? jCanvas 官网是这样解释的: "jCanvas is a JavaScript li

HTML5 WebAudioAPI(四)--绘制频谱图2

绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { alert('您的浏览器不支持AudioContext'); } else { //创建上下文 var atx = new AudioContext(); var source = null; //使用Ajax获取音频文件 var request = new XMLHttpRequest(); reque

HTML5 WebAudioAPI(三)--绘制频谱图

HTML <style> #canvas { background: black; } </style> <div class="container"> <button class="btn btn-primary" id="playBtn"> <i class="glyphicon glyphicon-pause"></i> </button>

HTML5 WebAudioAPI-实例(二)

简单播放实例1: var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { alert('您的浏览器不支持AudioContext'); } else { //创建上下文 var ctx = new AudioContext(); //使用Ajax获取音频文件 var request = new XMLHttpRequest(); request.open('GET', url, true); request.respons