HTML5基本特性和新功能
HTML5的基本特征
1、向前兼容性
核心理念——平滑过渡!
不支持html5的浏览器可以向前兼容,并不会影响web内容的显示!
2、跨平台运行性
从pc浏览器到手机、平板电脑,甚至是智能电视。
只要用户的设备支持HTML5,基于HTML5的web程序就可以无障碍的运行!
3、简单易用性
相对HTML4.01,HTML5更加简单实用。
没有XHTML2.0那样严格的语法规则。
(<HTML5的属性精简表示方法可以大大提高html文本的传输效率!> <HTML5 Web Form提供一套强大的表单验证机制,无需冗长的JS代码验证!>)
4、用户友好性
强化web页面的变现性能:Audio、video、canvas 等标签元素的引入;
提高用户体验度:地理位置服务、本地数据存储、文件上传、离线应用等新特性。
HTML5的新功能
1、简化的DOCTYPE声明
HTML4.01标准版本的DOCTYPE的声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww.w3.org/TR/html4/strict.dtd">
HTML4.01过度版本的DOCTYPE的声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww.w3.org/TR/html4/loose.dtd">
HTML4.01基于框架的HTML文档版本的DOCTYPE的声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://ww.w3.org/TR/html4/frameset.dtd">
HTML5中的DOCTYPE声明(对字母大小写不敏感)
<!DOCTYPE HTML>
2、简化的编码字符集
对于HTML4.01标准编码字符集声明
<meta http = "Content-Type" content = "text/html;chatset = utf-8">
HTML5的编码字符集声明
<metachatset = "utf-8">
3、简化的样式表和脚本引入
HTML4.01标准的html文档中引入的样式表和脚本文本
<link href = "test.css" type = "text/css" rel = "stylesheet">
<script src = "test.js" type = "text/javascript"></script>
HTML5中标准的html文档引入的样式文本和脚本文本
<link href = "test.css" rel = "stylesheet">
<script src = "test.js"></scritpt>
4、新增的全局属性
contenteditable属性(true:表示设置HTML元素可编辑。 false:默认值,设置HTML元素不可编辑! )
<p contenteditable = "true">可编辑的内容</p>
<p contenteditable = "false">不可编辑的内容</p>
spellcheck属性(true/false :是否对用户输入的内容进行语法拼写检查,若检查不通过,下划线标注)
<label for = "input">内容</label>
<input type = "text" id = “input” spellcheck = "ture">
draggable属性(true/false:制定html元素是否可进行拖动。用法同contentditable一样)
dropzone属性(属性如下,用来规定当元素被拖动时发生的动作!)
dropzone属性 | 说明 |
copy | 创建拖动元素的一个副本 |
link | 将拖动元素移动到一个新的位置 |
move | 创建拖动元素的链接 |
hidden属性(默认显示)
<label>输入框隐藏:<input type = “text” hidden></label>
<label>输入框显示:<input type = “text”></label>
5、语义化标签之文档元素(不理解语义化的可以参考——“让标签语义化成为一种习惯”博文)
header标签 :用来定义一个文档结构的“页眉”。通常情况下,会和h1-h6标签和hgroup标签组合,表示一个内容块的标题,或者是包含一个搜索框、导航栏、logo等栏目;
/*未用CSS进行格式控制*/
<header>
<hgroup>
<h1>HTML5</h1>
<h4>语义化标签之文档元素</h4>
</hgroup>
<input type="search" results="9">
</header>
footer标签 :用来定义一个文档结构的“页眉”。通常用来表示文档的作者信息、相关链接,版权资料等;
<footer>
作者:<em>wanglehui</em>
工作单位:<em>CSUST Ddream Stadion </em>
</footer>
hgroup标签 :用来定义一个文档中标题组。即一个内容块包含主标题和多个副标题时,多个h1-h6标签可以放在hgroup标签里面;
<hgroup>
<h1>HTML5</h1>
<h4>语义化标签之文档元素</h4>
</hgroup>
nav标签:用来定义一个文档中的导航区域,通常只用于页面的主要导航,侧边栏导航不适用;
<nav>
<ul>
<li>nav部分一</li>
<li>nav部分二</li>
<li>(nav部分)</li>
</ul>
</nav>
article标签:用来定义一个文档中自成一体的东西,比如,论坛的帖子、博客的文章或者用户的评论。通常article标签里面有header、footer等标签。也可以自己嵌套使用;
<article>
<header>
<h2>语义化标签之文档元素</h2>
</header>
<p>文章内容....</p>
<article>
<h2>评论</h2>
<article>
<header>
<h3>评论者:访客甲</h3>
</header>
<p>甲的评论内容</p>
</article>
<article>
<header>
<h3>评论者:访客乙</h3>
</header>
<p>乙的评论内容</p>
</article>
</article>
<footer>
作者:<em>wanglehui</em>
工作单位:<em>CSUST Ddream Stadion</em>
</footer>
</article>
section标签:用来定义一个文档结构中的“章节”内容,section和article的区别:article定义的是一个文档的独立版块,是一个容器元素。而section定义的是一个文档中的组成部分,和父标签是从属关系。article和section之间允许相互嵌套;
<section>
<h1>语义化</h1>
<article>
<h2>HTML5新功能介绍</h2>
<p>介绍内容...</p>
<section>
<h3>其他内容</h3>
<p>内容介绍....</p>
</section>
</article>
</section>
aside标签:通常包含在article标签中作为主要内容的附属信息部分。因此,aside和article常常组合使用,用来作为页面或站点全局的附属信息部分。
<article>
<h2>HTML5新功能介绍</h2>
<p>介绍内容...</p>
<aside>
<h1>附属信息</h1>
<p>附属信息内容。。。。</p>
</aside>
<footer>
作者:<em>wanglehui</em>
工作单位:<em>CSUST Ddream Stadion</em>
</footer>
</article>
6、语义化标签之文本元素(不理解语义化的可以参考——“让标签语义化成为一种习惯”博文)
b 标签:bold 定义加粗文本;
i 标签:Italic 定义倾斜文本;
u 标签:underline 定义下划线文本;
<b>HTML5新功能</b> <br/><br/>
<i>HTML5新功能</i> <br/><br/>
<u>HTML5新功能</u> <br/><br/>
code 标签:定义计算机代码文本,通常指单行的代码。多行代码用pre标签;
pre 标签:用来定义与格式化的文本。也就是说可以保留原有的空格和换行符,用途:显示长代码。
<code>
//This is a javascript code.<br/>
function foo(){
alert("警告");
}
</code>
<pre>
//This is a javascript code.<br/>
function foo(){
alert("警告");
}
</pre>
q 标签:quote 用来定义引用文本,q标签用来标记的是一行文本。
cite 标签:用来定义引用文本,与q不同的是,cite标签引用的通常是书籍杂志的标题。
blockquote 标签:用来标记长文本引用,和q不同的是,q标签用来标记的是一行文本。
<q>今朝有酒今朝醉,明日愁来明日愁</q><br/><br/>
<q>今朝有酒今朝醉,明日愁来明日愁<cite>——唐·罗隐《自遣》</cite></q>
<blockquote>
得即高歌失即休,多愁多恨亦悠悠。
今朝有酒今朝醉,明日愁来明日愁。
</blockquote>
time 标签:定义一个时间显示文本,有两个属性。datetime:定义元素的日期和时间,如果未定义该属性,则必须在元素的内容中规定日期或时间。pubdate:定义特定文档的发布时间。(在浏览器中没有实际的效果)
<p>我们在每天早上 <time>9:00</time> 开始营业。</p> <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
注释:<time> 标签不会在任何浏览器中呈现任何特殊效果。且目前主流浏览器都不支持time标签。
<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
总结:总结的不是很全面,目前用的也不是很熟练。都是写基础的知识,望大家能指出其中不足的地方,O(∩_∩)O谢谢!
参考书籍:【HTML5+CSS3技术应用】——郭小成
HTML5基本特性和新功能的更多相关文章
- JDK14的新特性-Switch新功能
2020年3月17日,Oracle正式发布了JDK14版本,共新增了16项新特性 本文重点写一下关于switch的新功能: switch 表达式扩展了 switch 语句,使其不仅可以作为语句(sta ...
- JAVA 8 主要新特性 ----------------(三)新功能Lambda表达式入门
一.简述 Java为了扩充匿名方法在1.8中新追加的特性.本身Java之前的版本是没有匿名方法的,只有匿名对象. 二.使用 Java中使用匿名方法必须要对应接口中的一个抽象方 ...
- hadoop3.0新特性及新功能
Hadoop-3.0.0-alpha2版本发布,相比之前的hadoop-2.x有一系列的功能增强.但目前还是个alpha版本,有很多bug,且不能保证API的稳定和质量. 主要变化 Java最低版本要 ...
- Atitit. visual studio vs2003 vs2005 vs2008 VS2010 vs2012 vs2015新特性 新功能.doc
Atitit. visual studio vs2003 vs2005 vs2008 VS2010 vs2012 vs2015新特性 新功能.doc 1.1. Visual Studio2 1.2. ...
- Redis 7.0 新功能新特性总览
说明:本文根据Redis 7 RC2 的release note 整理并翻译 近日,Redis 开源社区发布了7.0的两个预览版.在这两个预览版中,有很多Redis 7.0中新增加的特性,新增加的命令 ...
- Android 9 新功能 及 API 介绍(提供了实用的模块化的功能支持,包括 人工智能)
Android 9(API 级别 28)为用户和开发者引入了众多新特性和新功能. 本文重点介绍面向开发者的新功能. 要了解新 API,请阅读 API 差异报告或访问 Android API 参考. ...
- HTML5的十大新特性
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者 ...
- 【新功能前瞻】SpreadJS 纯前端表格控件V12.2:打印增强、拖拽填充等六大特性
新版本来袭:葡萄城 SpreadJS 纯前端表格控件的全新版本 V12.2 将于8月正式发布! 作为一款备受华为.招商银行.中国平安.苏宁易购等行业专家和前端开发者认可的纯 JavaScript 电子 ...
- PHP 5.6正式发布:新特性、及功能改进介绍
经过了长时间的开发测试,新版本PHP程序(PHP5.6正式版)终于发布了.新版本中加入了一些实用的新特性,也摒弃了一些冗余的功能.同时,也对部分原有功能进行了改进.下面就一起看看PHP 5.6正式版到 ...
随机推荐
- 【hihoCoder 1036】Trie图
看了一下简单的$Trie图$,调模板调啊调一连调了$2h$,最后发现$-'a'$打成$-'A'$了hhh,有种摔键盘的冲动. $Trie图$是$Trie树$上建立“前缀边”,不用再像在$Trie树$上 ...
- The resource identified by this request is only capable of generating responses with characteristics
[转]今天在调试springMVC的时候,在将一个对象返回为json串的时候,浏览器中出现异常: The resource identified by this request is only cap ...
- hdu3410 单调队列
Passing the Message Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- 64.GitHub 排名前100的android项目简介
GitHub Android Libraries Top 100 简介 排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不 ...
- Oracle数据库安装及配置(一)
http://blog.csdn.net/phacker2010/article/details/7190126 1.安装 Oracle 版本:Oracle Database 10g Release ...
- Leetcode Find Minimum in Rotated Sorted Array I and II
Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...
- 何解決 LinqToExcel 發生「無法載入檔案或組件」問題何解決 LinqToExcel 發生「無法載入檔案或組件」問題
在自己的主機上透過 Visual Studio 2013 與 IISExpress 開發與測試都還正常,但只要部署到測試機或正式機,就是沒辦法順利執行,卡關許久之後找我協助.我發現錯誤訊息確實很「一般 ...
- SPOJ375 Query on a tree
Description You are given a tree (an acyclic undirected connected graph) with N nodes, and edges num ...
- dedecms /plus/stow.php Twice SQL Injection
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 收藏文章功能$title变量未过滤,造成二次注入 Relevant Li ...
- Linux Overflow Vulnerability General Hardened Defense Technology、Grsecurity/PaX
Catalog . Linux attack vector . Grsecurity/PaX . Hardened toolchain . Default addition of the Stack ...