首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5的新特性(1)

Posted in HTML / CSS onMarch 03, 2016

HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML [1]（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。

1. 新的文档类型声明
HTML4规定的三种文档类型声明：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http:/www.w3.org/TR/html4/strict.dtd”>  
  2. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01//EN””http://www.w3.org/TR/html4/loose.dtd”>  
  3. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01//EN””http://www.w3.org/TR/html4/frameset.dtd”>  

XHTML 1.0  规定的三种文档类型声明:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>  
  2. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  3. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>  

XHTML 1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN””http://www.w3.org/TR/xhtml11/DTD/xhtml1.dtd”>  

HTML 5的文档类型声明

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  

2. script和link里不需要写type

XML/HTML Code复制内容到剪贴板
  1. <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />   ==》  <link rel=”stylesheet” href=”path/to/stylesheet.css”/>  
  2. <script src=”path/to/script.js” type=”text/javascript”></script>    ==》  <script src=”path/to/script.js”></script>  

3. 语义化header和footer标签
在HTML4或XHTML里，我们定义网页的页眉或页脚时会这样：

XML/HTML Code复制内容到剪贴板
  1. <div id=”header”>  
  2. …   
  3. </div>  
  4. 或   
  5. <div id=”footer”>  
  6. …   
  7. </div>  

而在HTML5里有直接定义上面元素块的标签，可以使代码更加的简洁和语义化

XML/HTML Code复制内容到剪贴板
  1. <header>  
  2. …   
  3. </header>  
  4. 或   
  5. <footer>  
  6. …   
  7. </footer>  

4. hgroup标签，它主要是表明标题的集合。如果有主标题、副标题，可以用这个来包裹一下。但是这个标签没什么大的用处，在最新的HTML5.1版中被废除了。我们如果想声明主标题和对应副标题说明，可以向下面这样。
使用标点符号分割，一般适合于文章标题，不太适合网站标题。

XML/HTML Code复制内容到剪贴板
  1. <h1>前端试题：HTML5的新特性</h1>  

使用span标签标注副标题说明

XML/HTML Code复制内容到剪贴板
  1. <h1>前端试题   
  2.     <span>HTML5的新特性</span>  
  3. </h1>  

使用header标签包裹标题和描述

XML/HTML Code复制内容到剪贴板
  1. <header>  
  2.     <h1>前端试题</h1>  
  3.     <p>HTML5的新特性</p>  
  4. </header>  

5. 标记元素 mark

XML/HTML Code复制内容到剪贴板
  1. The <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.  

可以把它当做高亮标签，被它包起来的字符以高亮显示。<mark>…</mark>
6. 图形元素figure
在HTML4或XHTML中，下面的这些代码被用来修饰图片的注释。

XML/HTML Code复制内容到剪贴板
  1. <img src=”path/to/image” alt=”About image”/>  
  2. <p>Image of Flower</p>  

上面代码并没有将文字和图片内存联系起来，不过HTML5添加的figure和figcaption组合可以为图文完美联系起来。

XML/HTML Code复制内容到剪贴板
  1. <figure>  
  2. <img src=”path/to/image” alt=”About image”/>  
  3. <figcaption>  
  4.     <p>beautiful flower</p>  
  5. <figcaption>  
  6. </figure>  

7. 重新定义了small标签
HTML5里<small>标签将旁注呈现为小型文本，负责声明、注意事项、法律限制或版本声明的特征通常都是小型文本。
在HTML4或XHTML里已经定义过small，不过对它的使用却没有一个完整的说明。在HTML里，它主要用于网页下方的版本声明，邮箱等小型文本。
8.占位符 placeholder
在HTML4或XHTML里，如果我们想实现输入框为空时显示提示信息，输入框字段获得焦点时该提示消失的效果，只能用js写这种效果。而在HTML5添加的placeholder则直接实现了这种效果.
placeholder属性适用于以下的<input>类型：text,search,url,telephone,email以及password.

XML/HTML Code复制内容到剪贴板
  1. <input placeholder=”text”>  

HTML5的新特性(1)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
细说CSS3中的选择符
Oct 17 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 #HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 #HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 #HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 #HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 #HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 #HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 #HTML / CSS
SSL(3) 二级域名(1) 默认端口(3) 压力测试(1) shell(3) 前后端分离(1) reload(1) 443(1) 反向代理(2) URL重定向(3)
You might like
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php日历制作代码分享
2014/01/20 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
JS作用域链详解
2017/06/26 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
python修改字典内key对应值的方法
2015/07/11 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python中uuid模块实例浅析
2020/12/29 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
Bata印度官网：源自欧洲舒适鞋履品牌
2020/01/30 全球购物
标准单位租车协议书
2014/09/23 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Java spring单点登录系统
2021/09/04 Java/Android
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA