HTML5

我记得之前几年很少有人提及前端这个行业,更多的人认为这不是一个很有技术含量的工作,我记得直到两年前或者更早一点HTML5暂露头角的时候,大家才对前端有了一点正确的认识,前端这个行业也开始有了生机,慢慢被大众所接受,话不多说,下面,以我的亲身经历给大家讲讲HTML5。

1.1 认识HTML5

HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。


我们日常讨论的H5其实指的是一个范称,它是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。


1.2 语法规范

随着Web技术的更新,HTML也先后经历了HTML 4.01、XHTML 1.0、HTML5几个重要的版本,在版本的演变过程中新增或废弃了一些属性,同时对语法规

范也做了一些调整,为了能够保证浏览器可以兼容不同版本语法规范的,我们可以使用<!DOCTYPE>指示浏览器应该如何处理。

HTML5在语法规范上也做了比较大的调整,去除了许多冗余的内容,书写规则更加简洁、清晰。

见代码实例

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

<p>我是一段文本,我闭合标签用了大写</p>
<!--很过分的写法,而且没有闭合-->
</body>
</html>

特点:

1、更简洁

2、更宽松

实际开发中应规范书写,不建议太随意 !

现在基本所有网站都采用了HTML5的<!DOCTYPE>

W3C验证地址

https://validator.w3.org/

 

语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备来理解HTML页面内容。

传统的做法我们或许通过增加类名如class="header"、class="footer",使HTML页面具有语义性,但是不具有通用性。

HTML5则是通过新增语义标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以使其具有通用性。

2.1 常用新语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组 与 ul > li 做个比较

<mark> 表示标记 (带用“UI”,不怎么用,可以重写样式)

<progress> 表示进度 (带用“UI”,不怎么用,不可重写样式)

<time> 表示日期

<hgroup> 标题列表 (据说已废弃)

<details>

<bdi>

<command>

<summary>

<rp>

<rt>

<ruby>

本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。不要好奇,它只是一个标签!

尽量避免全局使用header、footer、aside等语义标签。


2.2 兼容处理


在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了,在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题。

 


伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,所以HTML5在Web表单方向也做了很大的改进,如拾色器、日期/时间组件等,使表单处理更加高效。

此章节学习目的,了解HTML5表单的新增的特性,以及PC和移动设备间的差异,其兼容性较差。

3.1 输入类型

email 输入email格式

tel 手机号码

url 只能输入url格式

number 只能输入数字

search 搜索框

range 范围

color 拾色器

time 时间

date 日期 不是绝对的

datetime 时间日期

month 月份

week 星期

部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。

 

3.2 表单元素(标签)

<datalist> 下拉选项,使用中文时要注意

<keygen> 生成加密字符串

<output> 不可当做数据提交

<meter> 表示度量器,不建议用作进度条

3.3 表单属性

placeholder 占位符

autofocus 获取焦点

multiple 文件上传多选或多个邮箱地址

autocomplete 自动完成,用于form元素,也可用于部分input,默认值on

form 指定表单项属于哪个form,处理复杂表单时会需要

novalidate 关闭验证,可用于<form>标签,(只适应用form)

required 验证条件,必填项

pattern 正则表达式 自定义验证规则

表单重写没有提及,自行验证,共包含

formaction、formenctype、formtarget、formmethod、formnovalidate

应用于提交按钮上,如:<input type="submit" formaction="xxx.php">

3.4 表单事件

oninput 用户输入内容时触发,可用于移动端输入字数统计

oninvalid 验证不通过时触发

 

当然还有很多,今天太晚了,明天继续写哦。

希望对你有所帮助。

--不青春

posted @ 2016-10-11 09:50  不青春  阅读(291)  评论(0编辑  收藏  举报