HTML5基础小结(一)——标签变化

随着Android,IOS手机,平板等各种App的不断扩增,加上对过去传统HTML的的各种不完善,例如视频依靠Flash,对手机和桌面的不兼容等等。HTML5来了,来解决这些问题了。

Html5是W3C(World Wide Web  Consortium,万维网联盟)与WHATWG(

Web Hypertext Application Technology Working Group)合作的结果。WHATWG 致力于web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML 。为HTML5建立的一些规则:

  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  • 减少对外部插件的需求(比如 Flash)
  • 更优秀的错误处理
  • 更多取代脚本的标记
  • HTML5 应该独立于设备
  • 开发进程应对公众透明

看了两天的HTML5资料,简单总结一下,这里重点从标签的角度进行总结。先看下思维导图:

一,好,先看一下标签的变化:

1,文档的声明,在HTML5中都需要在最开始加入<!doctype html>,相当于HTML5的一个标记吧。

2,新增标签,这也是HTML5功能强大的一部分,这里从使用上,分为了四类:

a,结构标签,主要是用来对页面结构进行划分的,就像我们以前都会将页面分为标题,左侧栏,内容部分,页脚等。看一下HTML5都给我提供了这些标签:

b,多媒体标签,这是为了解决以前都是通过Flash等进行视频的一些展示,这些标签使HTML的功能更加强大了:

c,web应用标签:

d,input标签,主要是智能表单的一些标签,使验证更加方便:

  • email 
    必须输入email
  • url 
    必须输入url地址
  • number 
    必须输入数值
  • range 
    必须输入一定范围内数值
  • Date Pickers(日期选择器) 
    拥有多个可供选取日期和时间的新输入类型: 
    date - 选取日、月、年 
    month - 选取月、年 
    week - 选取周和年 
    time - 选取时间(小时和分钟) 
    datetime - 选取时间、日、月、年(UTC 时间) 
    datetime-local - 选取时间、日、月、年(本地时间)
  • search 
    用于搜索域,域显示为常规的文本域。
  • color

e,其它标签:

3,删除的标签:

4,重定义的标签:

5,崭新的布局,这里主要和结构标签结合起来,HTML5已经将页面的布局进行了布置,看个图吧:

这是HTML5标签的变化,也正是这些标签的变化,使一些基本的功能发生了变化。下篇博客,看一些这些标签的简单使用。

时间: 2024-10-06 23:43:39

HTML5基础小结(一)——标签变化的相关文章

HTML5基础小结(二)——标签小例

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1amlhaGFuNjI5NjI5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" /> 随篇博客的思维导图.继续: 二.看下标签的使用,这里看几个小样例(效果图不再给出): 1.结构标签的使用,这里来看一个页面的布局: <!doctype html> <html> &

html5基础学习(标签)

标签: <!--...-->注释 <!DOCTYPE>申明文档规范,在html5中是<!DOCTYPE HTML> <a>超链接,用法示例:<a href="https://www.baidu.com" target="_back">baidu</a> <a>的属性: <audio></audio>音频 <video></video>视

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结(一)——HTML5概要与新增标签

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

HTML5 学习笔记--------》HTML5概要与新增标签!

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结(一)——HTML5概要与新增标签(转载)

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

02 HTML5基本结构和语法变化

首先要明确的一点,HTML5并不是对HTML4.XHTML的歌名,也就是说,原来按HTML4开发的HTML网页同样可用:如果开发者受过严格训练,喜欢XHTML那种严格.规范的语法,同样可以按XHTML的严格要求来开发HTML5. HTML5完全遵守以下3点规则. a:兼容性:HTML5在老版本的浏览器上也可以正常运行: b:实用性:HTML5内部并没有特别复杂的功能,它只封装了哪些常用的简单功能: c:非革命性的发展:HTML5并不是革命性的发展,它只是一种“妥协式”的规范. 1. HTML5基

HTML5基础入门

HTML是HyperText Markup Language(超文本标记语言)的缩写,虽然说HTML也算是一种程序语言,但是实际上HTML并不像C++或Visual Basic语言那样记住大量的语法.正确的说,HTML是一种标记(tags),每个标记都是一个特定的指令,这些指令组合起来就是我们在浏览器上看到的网页. HTML语法的概念与架构  所有的HTML标记都有固定的格式,必须用"<"符号与">"符号括住,例如<html>.HTML有容器

HTML5 基础语法

HTML5 基础语法 HTML 概述 超文本 Web 是一个超文本文件的集合,超文本文件是 Web 的基本组成单元,也被称为网页或 HTML 文档.Web 页等,通常是以 .html 或 .htm 为后缀的文件.Web 页之间通过超文本中的超级链接组织在一起. 什么是 HTML? HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言,由浏览器解释执行.使用带有尖括号的"标记"将网页中的内容逐一标识出来.HTML 的主要作用是用来设计网页,