HTML5是新一代的标准,其工作原理主要包括3部分:
1.不破坏web
在web中使用HTML5的标准不应该让已经存在的网页无法工作。
2.修补牛蹄子路
HTML5将使用频率很高,但是不是官方的技术作为一个目标,在某种程度上确实是最 实际解决问题的途径。
3.实用至上
1.1文档声明
虽然即使不加<html><head><body> 浏览器依旧能够识别html的标签元素,但是如果不加<!doctype html> 文档说明,浏览器就会以一种混杂模式去渲染网页,不同的浏览器混杂模式不同,渲染页面差别很大,加入文档声明以后,浏览器会以 更严格的标准模式去渲染页面,以保证以一致的格式和布局显示网页。浏览器不关心你有哪种文档声明,它只要检测到文档声明即可。HTML5文档声明很简单
<!doctype html> /<!DOCTYPE html> html5不区分大小写,大写小写无所谓。
1.2语言和编码
使用选择的语言,只需要在<html lang="en/zh-CN"> 中自己添加要使用的语言即可,en 代表英文,zh-CN代表中文。
编码建议采用utf-8 这种编码简单,转换速度快,支持任何非英文字符,当然包含中文。使用如下:
<meta charset="utf-8">
1.3 引入css样式和javascript
推荐外联式引入css,javascript,可以使html5页面结构清晰,便于修改和维护,css的引入内联式和行间样式不推荐使用,js的内联式也不推荐使用。
外联式 :
<link rel="stylesheet" href="css/1.csss">
<script src="js/1.js"></script>
css的引入只能在<head></head> 中,js用<script></script>引入,但是可以放在页面的任何部分,建议放在页面的底部,这样做是要页面加载完以后,再加载交互部分。
2.html5新增的元素
新增的元素有的是添加了功能,有的是形成语义元素,让页面结构更清晰,所有语义元素都有一个特点:不真正做任何事。但是却有一定的用处:容易修改和维护、无障碍性(现代web,让任何人都能无障碍的访问网页)、搜索引擎优化。
2.1构建页面的元素
<article></article> 一块文章、新闻区域。
<aside></aside> 添加附注
<figcaption></figcaption> 插图标题
<figure></figure> 应用插图
<footer></footer> 标示页脚
<header></header> 头部
<hgroup></hgroup> 标题 里面放主标题、副标题,别的不放
<hgroup>
<h1>efgwerwq3</h1>
<h2>efgwerwq3</h2>
</hgroup>
<nav></nav> 标示一组导航
<section></section>
<details></details>
<summary></summary>
对于不识别这些新元素的浏览器 ,浏览器默认是显示为line元素。对于不认识的元素,应该显示为块级元素。有两种方式:
1.自定义
article,aside,figure,figcaption,footer,header,hgroup,nav,section,summary{
display:block;
}
2.引入
这里是使用的boostrap中兼容的小于IE9以下的浏览器
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
2.2标示文本
<mark>awfa</mark> 标记文本 ,默认是有黄色背景
<time>2017-7-1</time> 其实跟不同文本没区别,添加样式很方便
2.3web表单及交互
表单:就是一组文本框、列表、按钮及其他可以点击的小控件,通过这些小控件收集有关访客的某些信息。
2.3.1 input
<input type="text"> 添加了很多类型 button color image email number url tel range datatime data month week time color等
用placeholder=""添加提示信息,默认为灰色
<input type="text" placeholder="请输入.....">
用autofocus 自动获取焦点,表单中只能有一个
<input type="text" autofocus>
用required 验证非空,此为必填的字段。若添加这个属性的表单元素为空,当提交后,会有提示信息。
<input type="text" required>
可添加样式,与伪类结合以体验更好的体验:
必填时的样式
input:required{ background:red;
}
当提交会,无效时显示的样式
input:required:invalid{ background:blue;
}
更好的验证方式是正则表达式
2.3.2
<datalist id="id"></datalist> 用作下拉框,与input 一起使用,input中 指定list="id",即可选择,又可以 自动输入
<progress></progress>
<command>
<menu></menu>
<output></output> 用于js计算后,放一些数据的占位符,通常用span,现在可以用output
2.4音频、视频、插件
<audio src=""></audio>
<video src=""></video>
<embed src="" type="">
2.5画布
<canvas></canvas>