HTML5笔记

最新推荐文章于 2021-06-15 14:07:43 发布

怪胎圣徒

最新推荐文章于 2021-06-15 14:07:43 发布

阅读量203

点赞数

分类专栏：学习文章标签： html5

本文链接：https://blog.csdn.net/weixin_51516810/article/details/116681765

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是 HTML5?

HTML5是下一代 HTML 标准,由万维网联盟（W3C）在2014年10月完成标准制定，为了在移动设备上支持多媒体，仍处于完善之中。
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
2.HTML5的标志
<!doctype html> 声明标记就是Html5的标志，必须位于 HTML5 文档中的第一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

注意：对于中文网页需要使用声明编码，否则会出现乱码。

html4 规范版本的语法声明 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3.HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用

HTML5 应用
使用 HTML5 你可以简单地开发应用
本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2
HTML5 图形
使用 HTML5 你可以简单的绘制图形:
使用 <canvas> 元素。
使用内联 SVG。
使用 CSS3 2D 转换、CSS3 3D 转换。
HTML5 使用 CSS3
新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体
已移除元素
在上一代HTML 4.01的规范上，抛弃一些标记属性，然后在新增一些标记和属性。
以下的 HTML 4.01 元素在HTML5中已经被删除:
以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

HTML5 新元素
1. 允许您设置一段文本，使其脱离其父元素的文本方向设置。
注意：目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">
		<title>datalist</title>
	</head>
	<body>
		<input type="text" name="username" list="namelist"/>
		<datalist id="namelist">
		<option value="zhangsan"></option>
		<option value="lisisi"></option>	
		<option value="wangwu"></option>	
			
		</datalist>
	</body>
</html>

2. 用于描述文档或文档某个部分的细节

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>details</title>
	</head>
	<body>
		<h1>平凡的世界</h1>
		<details>
				<p>平凡的世界的详细内容.........</p>
		</details>
		<h1>平凡的世界之后</h1>
	</body>
</html>

任何形式的内容都能被放在 <details> 标签里边。
详细信息的内容隐藏之后不会占用物理空间。
<details> 元素的内容默认对用户是不可见的，我们可以设置 open 属性展示出来。
例如:<details  open=”open”> 
与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

3. 标签包含 details 元素的标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<meta charset="utf-8">
				<title>details</title>
			</head>
			<body>
				<details>
					<summary>平凡的世界</summary> 
					<p>平凡的世界的详细内容.........</p>
				</details>
				<h1>平凡的世界之后</h1>
	</body>
</html>

4. 定义对话框，比如提示框
open属性–规定 dialog 元素是有效的，用户可以与它进行交互。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dialog元素（定义对话框，比如提示框）</title>
		<script>
			function testclose(){
			var array=document.getElementsByTagName("dialog");
				array[0].open="open";
				}
				function ok(){
					window.close();
				}
				function  no(){
				 var array=document.getElementsByTagName("dialog");
					  array[0].open="";
				}
			
			
		</script>
	</head>
	<body>
		<input type="button" value="关闭" onclick="testclose();" />
		<dialog open="open">
			<p>确定要退出吗?</p>
			<input type="button" value="确定" onclick="ok();"/>
			<input type="button" value="取消" onclick="no();"/>
		</dialog>
	</body>
</html>

**
5.**<mark> 定义带有记号的文本****

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mark标记</title>
	</head>
	<body>
		<h1><mark>mark标记</mark>设置带有记号的文本</h1>也叫高亮显示
	默认黄色的背景颜色
	</body>
</html>

6. 定义度量衡。仅用于已知最大和最小值的度量。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>meter标记（案例：本地磁盘）</title>
		<style>
			meter{ 
			width:200px;
		    height:30px;
				
			}
			
		</style>
	</head>
	<body>
		<img src="tubiao.jpg"/>
		<span>本地磁盘(C:)</span>
		<meter value="80" min="0"  max="100"></meter>
		        <p> high属性   规定被界定为高的值的范围</p>
		        <p>low属性    规定被界定为低的值的范围。</p>
	 			<p>max属性   规定范围的最大值。</p>
				<p>min属性   规定范围的最小值。</p>
				<p>optimum属性 规定度量的最优值</p>
				<p>value属性	必需。规定度量的当前值。</p>
	</body>
</html>

high属性规定被界定为高的值的范围
low属性规定被界定为低的值的范围。
max属性规定范围的最大值。
min属性规定范围的最小值。
optimum属性规定度量的最优值
value属性必需。规定度量的当前值。
7. 定义任何类型的任务的进度。
请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。
max属性规定需要完成的值。
value属性规定进程的当前值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>progress标记(进度条)</title>
		<script>
			function startdown(){
				var curvalue=0;
			var array=document.getElementsByTagName("progress");				function myactive(){
				   curvalue++;
			      array[0].value=curvalue;
				}
				setInterval(function(){myactive();},500);
				}
			</script>
	</head>
	<body>
		<input type="button" value="开始下载" onclick="startdown();"/>
		下载进度:
		<progress value="0" max="100"></progress>
		<h4>请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。</h4>
		<h4>注释：<progress>标签不适合用来表示度衡量（例如：磁盘空间使用情况或相关的查询结果）。</h4>
	     <h4>表示度衡量，请使用<meter>标签来代替</h4>
		<h4>	max属性   规定需要完成的值。</h4>
		<h4> value属性  规定进程的当前值。</h4>
	
	</body>
</html>

8. 定义 ruby 注释（中文注音或字符）。
9. 定义字符（中文注音或字符）的解释或发音。
10. 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ruby/rt/rp标记</title>
	</head>
	<body>
		
		<ruby>
			汉<rp>(</rp><rt>han</rt><rp>)</rp>
			字<rp>(</rp><rt>zi</rt><rp>)</rp>
		</ruby>
		<h4><ruby> 定义 ruby 注释（中文注音或字符）。</h4> 
		<h4><rt> 定义字符（中文注音或字符）的解释或发音。</h4> 
		<h4>rp 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。<h4>
		</body>
</html>

在东亚使用，显示的是东亚字符的发音。

将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用：
<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

11.规定在文本中的何处适合添加换行符。
如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>wbr标签</title>
	</head>
	<body>
		<h4><wbr>规定在文本中的何处适合添加换行符</h4>
		<h3>如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用<wbr>元素在添加Word Break Opportunity（单词换行时机）XML<wbr>Http</wbr>Request</h3>
	</body>
</html>

HTML5新的表单元素

<datalist> 定义输入控件的预定义选项
<datalist> 元素为 <input type=”text”> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。 
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<input  list=”xxxxx”>  ==  <datalist id=”xxxxx”>

HTML5新的input元素
Input 类型: color – color类型用在input字段主要用于选取颜色
Input 类型: email–email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值是否合法有效
Input 类型: url–url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
Input 类型: date----date类型允许你从一个日期选择器选择一个日期。
Input 类型: datetime—datetime类型允许你选择一个日期（UTC 时间）。[google浏览器不支持]
Input 类型: datetime-local—datetime-local 类型允许你选择一个日期和时间 (无时区).
Input 类型: month–month 类型允许你选择一个月份。
Input 类型: time–time 类型允许你选择一个时间。
Input 类型: week–week 类型允许你选择周和年。
Input 类型: number–number 类型用于应该包含数值的输入域。
Input 类型: range–range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
使用下面的属性来规定对数字类型的限定：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
Input 类型: search–search 类型用于搜索域，比如站点搜索或 Google 搜索。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		input类型：date <input type="date"/><br>
		input类型：datetime-local <input type="datetime-local"/><br>
	    input类型：time <input type="time"/><br>
	    input类型：Month <input type="Month"/><br>
		input类型：Week<input type="Week"/><br>
	    input类型：Number<input type="Number" step="2"   /><br>
	    input类型：range <input type="range" min="1"  max="100" step="2" value="0"/><br>
	    input类型：search <input type="search"/><br>
</body>
</html>

HTML5 新的表单属性
autocomplete 可以作用在和标签，拥有自动完成功能，有可能在 form元素中是开启的，而在input元素中是关闭的。
autocomplete 适用于标签，以及以下类型的标签：text, search, url, telephone,email, password, datepickers, range 以及 color。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>wangxing</title> 
</head>
<body>
<form action="#" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
<p>注意 form 的 autocomplete 属性为  "on"（开），但是 e-mail 自动为“off”（关）。</p>
</body>
</html>

novalidate
novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>novalidate</title>
	</head>
	<body>
		<form action="login" method="get" novalidate="novalidate">
			E-mail: <input type="email" name="user_email">
			<input type="submit">
		</form>
	</body>
</html>

HTML5 新的input元素的属性
autocomplete
autofocus–规定在页面加载时，input元素自动地获得焦点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>novalidate</title>
	</head>
	<body>
		<form action="login" method="get" novalidate="novalidate">
			username:<input type="text" name="username"><br>
			E-mail: <input type="email" name="user_email" autofocus="autofocus">
			<input type="submit">
		</form>
	</body>
</html>

formaction
formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖元素中的action属性.
formaction 属性用于 type=“submit” 和 type=“image”.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>formaction</title>
	</head>
	<body>
		<form id="form1" action="login">
			用户名<input type="text" name="username"><br>
			password：<input type="password" name="pass">
			<input type="submit" value="登陆" formaction="testlogin"/>
		</form>
	</body>
</html>

formenctype
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
该属性与 type=“submit” 和 type=“image” 配合使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>formenctype</title>
	</head>
	<body>
		<form id="form1" action="login" enctype="text/plain">
			用户名<input type="text" name="username"><br>
			password：<input type="password" name="pass">
			<input type="submit" value="登陆" formenctype="multipart/form-data"/>
		</form>
	</body>
</html>

formmethod
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了元素的 method 属性。
该属性可以与 type=“submit” 和 type=“image” 配合使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>formmethod</title>
	</head>
	<body>
		<form id="form1" action="login" method="get">
			用户名<input type="text" name="username"><br>
			password：<input type="password" name="pass">
			<input type="submit" value="登陆" formmethod="post"/>
		</form>
	</body>
</html>

formnovalidate
novalidate 属性是一个 boolean 属性.
novalidate属性描述了元素在表单提交时无需被验证。
formnovalidate 属性会覆盖元素的novalidate属性.
formnovalidate 属性与type="submit一起使用

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title>formnovalidate</title>
   </head>
   <body>
   	<form id="form1" action="login" method="get" >
   		用户名<input type="text" name="username"><br>
   		E-mail: <input type="email" name="user_email" autofocus="autofocus">
   		<input type="submit" value="登陆" formnovalidate="formnovalidate"/>
   	</form>
   </body>
</html>

formtarget
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
The formtarget 属性覆盖元素的target属性.
formtarget 属性与type=“submit” 和 type="image"配合使用.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>formtarget</title>
	</head>
	<body>
		<form id="form1" action="login" method="get" target="_self">
			用户名<input type="text" name="username"><br>
			password：<input type="password" name="pass">
			<input type="submit" value="登陆" formtarget="_blank"/>
		</form>
	</body>
</html>

height 与 width
height 和 width 属性规定用于 image 类型的标签的图像高度和宽度。
height 和 width 属性只适用于 image 类型的标签。
图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间在加载页时会被保留。如果没有这些属性，浏览器不知道图像的大小，并不能预留适当的空间。图片在加载过程中会使页面布局效果改变（尽管图片已加载）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="login">
		  First name: <input type="text" name="fname"><br>
		  Last name: <input type="text" name="lname"><br>
		 <input type="image" src="imgs/tubiao1.jpg"  alt="Submit" width="50px" height="30px">
		</form>
	</body>
</html>

multiple
multiple 属性是一个 boolean 属性.
multiple 属性规定元素中可选择多个值。
multiple 属性适用于以下类型的标签：email 和 file:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>multiple</title>
	</head>
	<body>
		<form action="login">
		  选择文件: <input type="file" name="myfile" multiple="multiple">
		  <input type="submit">
		</form>
	</body>
</html>

pattern (regexp)
pattern 属性描述了一个正则表达式用于验证元素的值。
pattern 属性适用于以下类型的标签: text, search, url, tel, email, 和 password

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>pattern</title>
	</head>
	<body>
		<form action="login">
		Contry code：
			<input type="text" name="country_code" pattern="[A-ZA-z]{3}">
			<input type="submit">
		</form>
	</body>
</html>

placeholder
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
placeholder 属性适用于以下类型的标签：text, search, url, telephone, email 以及 password。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>placeholder</title>
	</head>
	<body>
		<form action="login">
		  用户名: <input type="text" name="username" placeholder="请输入用户名"><br>
		  密码:<input type="password" name="password" placeholder="请输入密码"><br>
		  <input type="submit">
		</form>
	</body>
</html>

placeholder
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>placeholder</title>
	</head>
	<body>
		<form action="login">
		  用户名: <input type="text" name="username" placeholder="请输入用户名"><br>
		  密码:<input type="password" name="password" placeholder="请输入密码"><br>
		  <input type="submit">
		</form>
	</body>
</html>

required
required 属性是一个 boolean 属性.
required 属性规定必须在提交之前填写输入域（不能为空）。
required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>required</title>
	</head>
	<body>
		<form action="login">
		  用户名: <input type="text" name="username" placeholder="请输入用户名" required="required"><br>
		  密码:<input type="password" name="password" placeholder="请输入密码"><br>
		  <input type="submit">
		</form>
	</body>
</html>