web 基础(二) HTML5
web 基础(二) HTML5
一、HTML5
HTML5 是最新的 HTML 标准。是专门为承载丰富的 web 内容而设计的,并且无需额外插件。它拥有新的语义、图形以及多媒体元素。并提供的新元素和新的 API 简化了 web 应用程序的搭建,是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
总而言之,HTML5 属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!
HTML5 的文档规范:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
相比 HTML4 及以下版本,HTML5 的文档类型(DOCTYPE)声明非常简单,HTML5 中默认的字符编码是 UTF-8。
二、HTML5 新特性
- 新的语义元素。比如 <header>, <footer>, <article>, and <section>。
- 新的表单控件。比如数字、日期、时间、日历和滑块。
- 强大的图像支持(借由 <canvas> 和 <svg>)。
- 强大的多媒体支持(借由 <video> 和 <audio>)。
- 强大的新 API。比如用本地存储取代 cookie。
三、浏览器对 HTML5 的支持
目前,所有现代浏览器都支持 HTML5。此外,所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。正因如此,可以用下面三种方式来帮助老式浏览器处理“未知的“ HTML 元素,以实现浏览器对 HTML5 的支持:
1、把 HTML5 元素定义为块级元素
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。可以把 CSS display 属性设置为 block,以确保老式浏览器中正确的行为,如下所示:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
2、向 HTML 文档中添加新元素
可以通过浏览器 trick 向 HTML 添加任何新元素,如下示例是向 HTML 添加了一个名为 <my> 的新元素,并为其定义 display 样式为block:
<!DOCTYPE html>
<html> <head>
<title>an HTML Element</title>
<script>document.createElement("my")</script>
<style>
myHero {
display: block;
}
</style>
</head>
<body>
<my>My First Hero</my>
</body>
</html>
注意:已添加的 JavaScript 语句 document.createElement("my"),仅适用于 IE内核的浏览器。
上述两种方案可用于所有新的 HTML5 元素,但是对于Internet Explorer 8 以及更早的版本,不允许对未知元素添加样式。此时需要用到下面的Shiv 解决方案。
3、完整的 Shiv 解决方案
在 Internet Explorer 8 以及更早的版本,不允许对未知元素添加样式。幸运的是,Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript", "the shiv"的插件:html5shiv.min.js,在HTML5 文档中引用此文件,可以实现对HTML5 的支持,如下示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[if lte IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>头部</header>
</body>
</html>
注意:以上代码是一段注释,但是 IE9 的早期版本会读取它(并理解它)。引用 JS 插件代码的链接必须位于 <head> 元素中,因为 Internet Explorer 需要在读取之前认识所有新元素。
由于第三种方案可以解决大部分兼容性问题,所以 推荐使用第三种 Shiv 解决方案。
四、HTML5 中新元素及属性
这边列出了常用的元素和相关属性,详细的可以访问各个章节:HTML5 教程。
(一)、新元素
标签 |
描述 |
|
<canvas>新元素 |
<canvas> |
标签定义图形,比如图表和其他图像,该标签基于JS的绘画API |
新多媒体元素 |
<audio> |
定义音频内容 |
<video> |
定义视频(video或者movie) |
|
<source> |
定义多媒体资源<video>和<audio> |
|
<embed> |
定义嵌入的内容,比如插件 |
|
<track> |
为诸如<video>和<audio>元素之类的媒介规定外部文本轨道 |
|
新表单元素 |
<datalist> |
定义选项列表。与input元素配合使用,来定义input可能的值。 |
<keygen> |
规定用于表单的密钥对生成字段。 |
|
<output> |
定义不同类型的输出,比如脚本的输出。 |
|
新的语义和结构元素 |
<aside> |
定义页面的侧边栏内容 |
<dialog> |
定义对话框,比如提示框 |
|
<figure> |
规定独立的流内容(图像图表照片代码等) |
|
<figcaption> |
定义<figure>元素的标题 |
|
<footer> |
定义section或decument的页脚 |
|
<header> |
定义文档的头部区域 |
|
<nav> |
定义运行中的进度 |
|
<section> |
定义文档中的节 |
|
<time> |
定义日期或时间 |
(二)、新表单属性
1、智能表单控件
<input type="email">
type可选以下类型:
email: 输入合法的邮箱地址
url: 输入合法的网址
number: 只能输入数字
range: 滑块
color: 拾色器
date: 显示日期
month: 显示月份
week : 显示第几周
time: 显示时间
五、HTML5 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单属性示例</title>
</head>
<body>
<form action="test.action" method="get" autocomplete="off" novalidate>
邮箱地址:
<input type="email" name="">
<input type="submit" name="">
</form>
</body>
</html>
web 基础(二) HTML5的更多相关文章
- web基础 (二) html标签
一.html是什么? 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 浏览器按顺序渲染网页文件,然 ...
- Web基础知识和技术
WEB是一个外延广泛的概念,不单单指网站,乌徒帮专注拥有WEB界面的网站开发,帮助初学者或已经进入开发的朋友们提供参考讨论平台,然而并不一定能将所有的WEB知识讲全讲透,只是能满足初涉者的建站需求,能 ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- Web基础--HTML、Css入门
一.Web项目(可跳过,直接从下一个标题开始) 1.Web项目: 指的是带网页的项目,通过浏览器可以访问的项目.比如:淘宝.天猫等. 2.Web项目构成: 浏览器(客户端).服务器.数据库. 3.Ja ...
- web基础(四)严格模式与混杂模式
web基础(四)严格模式与混杂模式 一.介绍 DOCTYPE 标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.DO ...
- Web基础开发最核心要解决的问题
Web基础开发要解决的问题,往往也就是那些框架出现的目的 - 要解决问题. 1. 便捷的Db操作: 2. 高效的表单处理: 3. 灵活的Url路由: 4. 合理的代码组织结构: 5. 架构延伸 缓存. ...
- web基础--html
WebBasic 1.web应用体系 课程大纲 1.web基础:做网页 2.结构: a.html 勾勒网页结构及内容 b.css ...
- (0)写给Web初学者的教案-----Web基础
0,Web基础 一. What is the Web? Can It Eat? 很多同学可能都听说过一个名词叫做“Web”,这个词隐隐约约好像和我们上网相关.但是呢,又很难说的清楚.我们今天每位 ...
- web基础笔记整理(一)
一.程序的分层 1.界面层: 某种类型的应用程序 a.DOS(控制台运行) b.桌面应用程序--独立安装,独立运行 c.web类型--现在流行的 单机版:电脑上要安装,程序升级之后,电脑上也要升级-- ...
随机推荐
- 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- HDU - 3591 The trouble of Xiaoqian 题解
题目大意 有 \(N\) 种不同面值的硬币,分别给出每种硬币的面值 \(v_i\) 和数量 \(c_i\).同时,售货员每种硬币数量都是无限的,用来找零. 要买价格为 \(T\) 的商品,求在交易中最 ...
- [寒假学习]ps知识
小学就开始学了,还是要感谢当时年轻不懂事到处研究怎么画画哈哈哈哈,不过到现在有点忘,寒假在家禁足也无聊,寻思着重拾画笔来着,复习一下,冲! 为了防止看完就忘用博客记录一下小笔记 1. 一些快捷键的 ...
- Autoware 标定工具 Calibration Tool Kit 联合标定 Robosense-16 和 ZED 相机!
一.安装 Autoware & ZED 内参标定 & 外参标定准备 之前的这篇文章:Autoware 进行 Robosense-16 线雷达与 ZED 双目相机联合标定! 记录了我用 ...
- 使用PyQtGraph绘制数据滚动图形(3)
import pyqtgraph as pg import numpy as np from pyqtgraph.Qt import QtGui, QtCore app = pg.QtGui.QApp ...
- WDCP配置ThinkPHP5伪静态隐藏index.php,出现“”解决重定向次数过”问题
站点域名的配置:xxx.com.conf server { listen 80; root /www/web/xxx_com/public_html; server_name xxx.com; ind ...
- RabbitMQ系列之【设置RabbitMQ远程ip登录】
由于账号guest具有所有的操作权限,并且又是默认账号,出于安全因素的考虑,guest用户只能通过localhost登陆使用,并建议修改guest用户的密码以及新建其他账号管理使用rabbitmq. ...
- 2019-02-13 思考:1000瓶药水,1瓶有毒,老鼠毒发24h,如何用最少的老鼠在24h内找出毒药?
题目: 现在有1000瓶药水,其中一瓶有毒,一只老鼠喝了在24h后会准时死亡,药水无色无味,如何用最少的老鼠在24h内找出毒药? 分析: 时间限制为24h,说明我们只有一次喂老鼠的机会,需要一波找出来 ...
- 使用Vim写LaTeX代码(Vim+Vimtex+Skim)
最近在写博客的时候发现对数学公式的支持并不好,于是就想寻找一个解决方案.我本身是一个爱折腾的人,有时尽管有现成的解决方案我有事也不愿意去用.于是多方查找资料,想寻求一个自定义的解决方案,最终把自己的目 ...
- 恕我直言你可能真的不会java第2篇:Java Stream API?
一.什么是Java Stream API? Java Stream函数式编程接口最初是在Java 8中引入的,并且与lambda一起成为Java开发的里程碑式的功能特性,它极大的方便了开放人员处理集合 ...