HTML5和CSS3
HTML5
一、前言
1.1认识HTML5
HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一系列Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏,同时结合CSS3的过渡、转换、动画等特性,可以极大的增强用户体验,提升开发功能的可应用性。
我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。
1.12 语法规范
随着Web技术的更新,HTML也先后经历了HTML 4.01、XHTML 1.0、HTML5几个重要的版本,在版本的演变过程中新增或废弃了一些属性,同时对语法规范也做了一些调整,为了能够保证浏览器可以兼容不同版本语法规范的,我们可以使用<!DOCTYPE>指示浏览器应该如何处理我们的HTML。
HTML5在语法规范上也做了比较大的调整,去除了许多冗余的内容,书写规则更加简洁、清晰。
通过以上的比较我们可以总结得出HTML5在语法规范上的特点:
1、更简洁
2、更宽松
但是我们在实际开发中应规范书写,不建议太随意 !并且现在基本所有网站都采用了HTML5的语法规范。
W3C验证地址
The W3C Markup Validation Service
二、语义化
所谓语义化是要使HTML标签具备很好的可读性,可以清晰传达每个标签所要表达的意义,以方便其被友好的处理和解析。
2.1语义化标签
对于语义化标签我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备来理解HTML页面内容。
传统的做法我们通过添加类名如class="header"、class="footer",使HTML页面具有语义性的,但是不具有通用性(如class="header"也可能被写成class="head")。
HTML5则是通过增加语义化标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以保证其具有通用性。
此章节学习目的为了解增加语义标签的目的,以及各语义标签所表达的意义,在网页布局中能够合理使用标签。
2.1.1常用语义标签
标签 | *语义* |
---|---|
<nav> | 导航 |
<header> | 页眉 |
<footer> | 页脚 |
<section> | 区块 |
<article> | 文章 |
<aside> | 侧边栏 |
<progress> | 进度条 |
本质上新语义标签与<div>、<span>没有区别,只是其具有语义性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。不要好奇,它只是一个标签!
尽量避免全局使用header、footer、aside等语义标签。
三、表单
伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,所以HTML5在Web表单方向也做了很大的改进,如拾色器、日期/时间组件等,使表单处理变的更加高效。
3.1输入类型
类型 | 使用示例 | 含义 |
---|---|---|
<input type="email"> | 输入邮箱格式 | |
tel | <input type="tel"> | 输入手机号码格式 |
url | <input type="url"> | 输入url格式 |
number | <input type="number"> | 输入数字格式 |
search | <input type="search"> | 搜索框(体现语义化) |
range | <input type="range"> | 自由拖动滑块 |
color | <input type="color"> | 拾色器 |
---|---|---|
time | <input type="time"> | |
date | <input type="date"> | |
datetime | <input type="datetime"> | |
month | <input type="month"> | |
week | <input type="week"> |
3.2表单元素
元素 | 含义 |
---|---|
<datalist> |