HTML5和CSS3（一）

最新推荐文章于 2023-02-09 23:01:48 发布

yyy_wj

最新推荐文章于 2023-02-09 23:01:48 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/100692960

版权

一、什么是HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改
支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式
增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性
相比之前的进步：取消了一些过时的HTML4标记，将内容和展示分离，一些全新的表单输入对象，全新的，更合理的Tag，本地数据库，Canvas 对象，浏览器中的真正程序，Html5取代Flash在移动设备的地位

优点：

提高可用性和改进用户的友好体验；
有几个新的标签，这将有助于开发人员定义重要的内容；
可以给站点带来更多的多媒体元素(视频和音频)；
可以很好的替代FLASH和Silverlight；
当涉及到网站的抓取和索引的时候，对于SEO很友好；
将被大量应用于移动应用程序和游戏；
可移植性好。

缺点：

该标准并未能很好的被Pc端浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。

未来趋势

移动优先
游戏开发者领衔“主演”

二、语义和结构

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
<article>	定义页面的侧边栏内容
<aside>	定义页面内容之外的内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义运行中的进度（进程）。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

三、HTML5中的新增标签

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

canvas：

标签	描述
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

多媒体：

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio> 字体
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

表单：

标签	描述
<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出。
<meter>	度量器，可用于标示级别

<meter>的属性：

属性	值	描述
high	number	定义度量的值位于哪个点，被界定为高的值。
low	number	定义度量的值位于哪个点，被界定为低的值。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value	number	定义度量的值。

注意：

datalist：创建选项值，有两个属性：value具体的值，lable：提示信息，辅助值

建立输入框与datalist关联，list等于datalist的id

四、多媒体

1.音频播放：audio标签的使用

属性

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

示例:播放音频

<audio src="../mp3/See.mp3" controls autoplay></audio>

2.视频播放：video标签的使用

属性

autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。
poster：	当视频还没有完全下载，或者用户还没有点击播放前默认显示的封面。默认显示当前视频的第一幅画面。也可以自己添加封面。

注意：设置宽高的时候，一般情况下只会设置宽度或高度，让其自动的等比缩放。如果同时设置高度和宽度，视频不会真正的调整到所设置的宽度和高度，除非设置的值刚好是等比的。

示例：视频播放

<video src="../mp3/561902ae6ac6e6649.mp4" controls></video>

说明：由于版权等原因，不同的浏览器可支持播放的格式是不一样的

四、表单

1、新增的属性

placeholder 占位符提示文本
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址，多个邮箱地址用逗号分隔
autocomplete 自动完成，用于表单元素，也可用于表单自身

on（打开自动提示） off（关闭自动提示）autocomplete=”on”

自动提示的两个条件：1、必须成功提交过才会记录下来 2、当前添加的autocomplete元素必须有name属性

form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭验证，可用于<form>标签
required 验证条件，必填项
pattern 正则表达式验证表单

2、增的输入类型

email：输入email格式
tel：手机号码不能做验证只是能在移动端打开数字键盘，必要时可以用正则表达式验证
url：只能输入url格式
number：只能输入数字
search：搜索框
file：文件
range：范围，可以进行拖动，通过value进行取值
color ：拾色器，通过value进行取值
time ：时间
date：日期不是绝对的
datetime：时间日期（只有苹果下面的safafi支持）
datetime-local ：日期时间
month：月份
week：星期

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

3、新增的事件

oninput 用户输入内容时触发，可用于移动端输入字数统计。监听当前指定元素内容的改变：只要改变内容就会触发这个事件
oninvalid 验证不通过时触发

4、新增表单元素和属性的案例

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/form.css">
	</head>
	<body>
		<form>
			<fieldset>
				<legend>学生档案</legend>
				<label for="userName">姓名:</label>
				<input type="text" name="userName" id="userName" placeholder="请输入姓名" required="" />
				<label for="phone">手机号码:</label>
				<input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$" />
				<label for="email">邮箱地址:</label>
				<input type="text" name="email" id="email" />
				<label for="collage">所属学院:</label>
				<input type="text" name="collage" id="collage" list="cList" placeholder="请选择">
				<datalist id="cList">
					<option>移动与前端开发学院</option>
					<option>IOS</option>
					<option>andriod</option>
					<option>c++</option>
				</datalist>
				<label for="score">入学成绩:</label>
				<input type="number" name="score" id="score" max="100" min="0" step="1" value="0" />
				<label for="level">基础水平:</label>
				<meter name="lever" id="lever" low="59" high="90" max="100" min="0" value="0"></meter>
				<label for="inTime">入学日期</label>
				<input type="date" name="inTime" id="inTime" />
				<label for="outTime">毕业日期</label>
				<input type="date" name="outTime" id="outTime" />
				<input type="submit" />
			</fieldset>
		</form>
		<script>
			document.getElementById("score").oninput = function() {
				document.getElementById("lever").value = this.value;
			}
		</script>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
	
}
body{
	margin: 0 auto;
	max-width: 600px;
}
form{
	width: 100%;
}
form fieldset{
	padding: 20px 20px 10px;
}
form fieldset label{
	font-weight: bold;
	line-height: 20px;
}
form meter{
	padding-left: 0px;
}
form input,form meter{
	width: 100%;
	margin: 10px 0;
	display: block;
	height: 40px;
	line-height: 40px;
	border: none;
	border: 1px solid #ccc;
	padding-left: 5px;
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 16px;
}

说明：

1.<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

2. legend 元素为 fieldset 元素定义标题（caption）

五、兼容处理

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

yyy_wj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5和CSS3（一）

一、什么是HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏...
复制链接

扫一扫