HTML5系列:HTML5与HTML4的区别
1. 语法的改变
1.1 DOCTYPE声明
DOCTYPE声明在HTML文件中必不可少,位于文件第一行。
HTML4中声明方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5中声明方法:
<!DOCTYPE html>
1.2 字符编码
HTML4指定方式:
<metahttp-equiv="content-type"content="text/html;charset=utf-8" />
HTML5指定方式:
<metacharset="utf-8" />
1.3 元素标记
不允许写结束标记的元素:br、embed、hr、img、input、link、meta、param。
不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式,只允许使用<元素/>。
示例:
错误方式:<br></br> 正确方式:<br/>
1.4 具有boolean值的属性
<!--只写属性不写属性值,属性为true--> <inputtype="checkbox"checked/> <!--不写属性,属性为false--> <inputtype="checkbox" /> <!--属性值=属性名,属性为true--> <inputtype="checkbox"checked="checked" /> <!--属性值=空字符串,属性为true--> <inputtype="checkbox"checked="" />
2. HTML5新增元素
2.1 HTML5新增结构元素
在HTML5中新增的结构元素:
section元素
section元素表示页面中的一个内容区块,如章节、页眉或页面中的其他部分,可以与h1、h2、h3、h4、h5、h6等元素结合使用,标示文档结构。
<section></section>
article元素
article元素表示页面中的一块与上下文不相关的独立内容,如博客中的一篇文章或报纸中的一篇文章。
<article></article>
aside元素
aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。
<aside></aside>
header元素
header元素表示页面中一个内容区块或整个页面的标题。
<header></header>
hgroup元素
hgroup元素用于对整个页面中一个内容区块的标题进行组合。
<hgroup></hgroup>
footer元素
footer元素表示整个页面或页面中一个内容区块的脚注。一般会包含作者姓名、创作日期以及作者联系方式等。
<footer></footer>
section、article、aside、header、hgroup、footer都对应于HTML4中的div元素。
nav元素
nav元素表示页面中导航链接的部分。
HTML5示例:
<nav></nav>
HTML4示例:
<ul></ul>
figure元素
figure元素表示一段独立的流内容,一般表示文档主题流内容的一个独立单元。使用figcaption元素为figure元素组添加标题。
<figure><figcaption></figcaption><p></p> </figure>
2.2 HTML5新增的其他元素
video元素
video元素定义视频。
<videosrc=""controls="controls">Video元素</video>
audio元素
audio元素定义音频
<audiosrc="">audio元素</audio>
embed元素
embed元素用于插入各种多媒体,格式可以是Midi、wav、MP3等。
<embedsrc="" />
mark元素
mark元素主要用来在视觉上向用户呈现需要突出或高亮显示是文字。mark元素的一个比较经典的应用是在搜索结果中向用户高亮显示搜索关键词,与HTML4中span使用方式相同。
<mark></mark>
time元素
time元素表示日期、时间或同时表示日期时间。与HTML4中span使用方式相同。
<time></time>
canvas元素
canvas元素表示图形,如图表或图像。这个元素本身没有行为,仅提供一块画布,它把一个绘制API展现给JavaScript,以使JavaScript能够进行绘制。
<canvasid="id"width="200"height="200"></canvas>
details元素
details元素表示用户要求得到并且可以得到的细节信息。可以与summary元素配合使用。summary元素提供标题或图例。summary元素是details元素的第一个子元素。
<details><summary>HTML5</summary>Content</details>
datalist元素
datalist元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。
<datalist></datalist>
datagrid元素
datagrid元素表示可选数据的列表,可以树形列表的形式来显示。
<datagrid></datagrid>
menu元素
menu元素表示菜单列表。
<menu><li></li><li></li> </menu>
2.3 新增input元素的类型
email类型表示必须输入Email的文本输入框。
<inputtype="email" />
url
url类型表示必须输入URL的文本输入框。
number
number类型表示必须输入数值的文本输入框。
range
range类型表示必须输入一定范围内数字值的文本输入框。
Date Pickers
date 选取日、月、年
month 选取月、年
week 选取周、年
time 选取时间(小时、分钟)
datetime 选取时间、日、月、年(UTC时间)
datetime-local 选取时间、日、月、年(本地时间)
3. HTML5新增属性
3.1 新增表单属性
autofocus属性
对input(type=text)、select、textarea元素设置autofocus属性,让元素在页面打开时自动获得焦点。
<inputtype="text"autofocus/>
placeholder属性
对input(type=text)、textarea元素设置placeholder属性,提示用户可以输入的内容。
<inputtype="text"placeholder="请输入" />
required属性
对input(type=text)、textarea元素设置required属性,检查必须输入。
<inputtype="text"required="required" />
HTML5系列:HTML5与HTML4的区别相关推荐
- HTML5与HTML4的区别
HTML5与HTML4的区别 1.推出理由及目标 2.语法的改变 3.新增的元素和废除的元素 4.新增的属性和废除的属性 5.全局属性 1.推出理由及目标: HTML5 的出现,对于WEB来说意义是非 ...
- HTML的不同版本区别,HTML4.0、XHTML、HTML5每个版本之间有什么区别
HTML4.0.XHTML.HTML5每个版本之间有什么区别 一.基本概念: html:超文本标记语言 (Hyper Text Markup Language) xhtml:可扩展超文本标记语言,是一 ...
- html5跟html4有什么区别,Html5和Html4的区别
html5解决了:web浏览器之间的兼容性很低.文档结构不明确等功能.一.Html5和Html4的区别 (1)语法的改变: 内容类型:文件名还是 .html或 .htm:文件类型还是 texttype ...
- 【HTML5系列教程】
<HTML5系列教程>目录大纲: 介绍 内容包括HTML简介.服务器的概念.B/S.C/S软件架构.前端与后端的开发内容.HTML发展历程.浏览器内核介绍.Web标准.WebStorm工具 ...
- 视频教程-HTML + CSS零基础经典教程系列-HTML5/CSS
HTML + CSS零基础经典教程系列 全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node.JS.PHP.Ja ...
- 对html5的了解,HTML5——对HTML5的认识
首先非常感谢李刚老师出的这本书<HTML5/CSS3/JavaScript讲义>,今天读了第一章节的内容,趁热打铁,总结一下. HTML5的时代已经到来,它对所有的前端开发人员来说是一种福 ...
- html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生
原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生 十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...
- 免费html5代码,HTML5(示例代码)
一.什么是HTML5 1.1 HTML5 简介 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素.属性和行为 XHTML可扩展 ...
- 兄弟连html5在线画板,IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容
原标题:IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容 为了保证HTML5能与之前的HTML版本达到最大的兼容,HTML5对一些元素标记的省略.boolean值的属性,以及引号的省略这几 ...
- 下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1...
原标题:IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1 HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可 ...
最新文章
- .net2.0网站多语言
- 自动备份脚本 mysql svn
- 关于nginx信号控制的“故障”案例
- Android权限申请的学习实践
- leetcode 698. Partition to K Equal Sum Subsets | 698. 划分为k个相等的子集(回溯法)
- C++ Lambda表达式基本用法
- Angular Render2
- [2019人工智能实战_廖盈嘉]第1次个人作业
- 联想拯救者Y90游戏性能实测:全程满帧 散热能力出众
- Visual C++ 2008入门经典 第九章类的继承和虚函数(二)
- PCB封装库命名规则
- 丹佛大学计算机专业,丹佛大学计算机工程排名第79(2020年TFE美国排名)
- 物联网平台搭建的全过程介绍(一)——物联网简介
- 史上最简单的 MySQL 教程(十二)「列属性 之 唯一键」
- PaddleClas-SSLD知识蒸馏方法梳理(82.4%ResNet50系列模型养成之路)
- Ubuntu 18.04及几款应用的安装
- 不得不说,这是青铜才需要了解的,绝地求生刺激战场段位保护解析
- JS如何区分对象和数组
- 使用dns服务器信息的方法,保护DNS服务器十大最有效方法
- 【已解决】VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the
热门文章
- linux系统web站点设置-http基础设置
- 信号 应用场景 内置信号 内置信号操作 自定义信号
- 牛客网编程练习之编程马拉松:解读密码
- 类库探源——System.ValueType
- 如何设置python的编码格式为utf-8
- 今天起,踏踏实实做技术
- 在有限多的不大于100的正整数中,找出尽量多个相加起来值介于98~102之间的组合...
- DeleteDC() 与 ReleaseDC() 的区别 [转]
- Java—Collection、Map、树
- Xcode12.5最新快捷键的使用(学会事半功倍)