HTML5

最新推荐文章于 2023-07-22 11:21:33 发布
最新推荐文章于 2023-07-22 11:21:33 发布
阅读量658 收藏 4
点赞数 4
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59938047/article/details/119700429
版权

1.HTML5简介

HTML5是HTML最新的修订版本，同属与HTML系列，2014年10月由万维网联盟（W3C）完成标准制定。

html5更新了一些新标记、元素，比如

1.用于绘画的 canvas 元素

2.用于媒介回放的 video 和 audio 元素

3.对本地离线存储的更好的支持

4.新的特殊内容元素，比如 article、footer、header、nav、section

5.新的表单控件，比如 calendar、date、time、email、url、search

2.HTML5 语义元素

HTML5语义元素表示看见元素名称后就知道这个语义元素的作用（语义元素 = 有意义的元素）。

举例

<!-- <header>表示网页头部的意思</header>-->
        <header>
            网页头部
        </header>

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 提供了新的语义元素来明确一个网页页面的不同部分:

<header> / <nav> / <section> / <article> / <aside> / <figcaption> / <figure> / <footer>

语义元素<header>

<header>定义网页头部的意思，在页面中你可以使用多个<header> 元素.

<!-- <header>表示网页头部的意思</header>-->
		<header>
			网页头部
		</header>

语义元素 <nav>

<nav> 标签定义网页导航栏的部分，导航栏非菜单栏

<!-- nav表示网页导航栏部分 -->
		<nav>
			<a href="https://www.baidu.com/">百度</a>
			<a href="https://www.baidu.com/s?
			cl=3&tn=baidutop10&fr=top1000&wd=
			%E6%B2%B3%E5%8D%97%E8%99%9E%E5%9
			F%8E%E5%8E%BF%E6%B6%89%E5%AB%8C%
			E7%9E%92%E6%8A%A5%E7%96%AB%E6%
			83%85&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">疫情</a>
		</nav>

语义元素 <article><section>

<article> 标签定义页面独立区域的内容。

<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分

<section>标签定义页面文档中的节，比如章节、页眉、页脚或文档中的其他部分。

<!-- article表示页面独立区域的内容 -->
		<article>
			文档名
			<!-- section表示文档中的小节 -->
			<section>
				第一章
			</section>
			<section>
				第二章
			</section>
			<section>
				第三章
			</section>
		</article>

 语义元素 <aside>

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏），并与主区域的内容相关。

<!-- aside 表示页面主区域之外的内容，并与主区域的内容相关-->
		<aside>
			<h1>side 表示页面主区域之外的内容</h1>
			<h1>并与主区域的内容相关</h1>
		</aside>

  语义元素 <footer>

<footer>标签定义文档内的底部区域。

<footer> 元素应该包含它的包含元素，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

文档中你可以使用多个 <footer>元素.。

        <footer>
			<h1>定义文档内的底部区域</h1>
		</footer>
		<footer>
			<h1>定义文档内的底部区域</h1>
		</footer>

 语义元素 <figure> 和 <figcaption>

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>
			<figcaption>图像</figcaption>
			<img src="../img3.jfif"height="200px" >
		</figure>

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
{
    display: block;
}

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.

解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。下载后，将以下代码放入到网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素

3.HTML5 新元素

input标签内常用元素

<details>

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

<details> 元素的内容默认对用户不可见

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增元素</title>
	</head>
	<body>
		<details>
			<summary>网盘</summary>
			<p>网络存储</p>
		</details>
	</body>
</html>

 

 设置了 open 属性后<details> 元素的内容对用户可见

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增元素</title>
	</head>
	<body>
		<details open="open">
			<summary>网盘</summary>
			<p>网络存储</p>
		</details>
	</body>
</html>

 <dialog>

定义对话框比如提示框

<input type="button" value="定义对话框"onclick="testdialog();" />
		<dialog id="1">打开近几年的</dialog>

 <mark>

定义带有记号的文本（突出显示）。

定义带有<mark>定义带有记号的文本。</mark>

 <meter>

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

<!-- meter度量衡，value当前数值 -->
<meter value="7"min="1"max="10"></meter>

  <progress>

定义任何类型的任务的进度。
        

<input type="button" value="下载量"onclick="testprogress();" />
		<progress max="100"value="0"id="pro1"></progress>

<datalist>

定义输入控件的预定义选项。

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input list="xiala" name="xialaliebiao"  />
		<datalist id="xiala">
			<option value ="111111"></option>
			<option value ="222222"></option>
			<option value ="333333"></option>
		</datalist>
	</body>

 <time>

定义日期或时间。

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到

用户日程表中，搜索引擎也能够生成更智能的搜索结果。

datetime规定日期/时间。另一种方式，则是由元素的内容给定日期/时间，google浏览器不支持

<h1>time</h1>
<h2>时间date<input type="date"  /></h2>
<!-- datetime谷歌浏览器不显示" /> -->
<h2>datetime<input type="datetime"name="datetime" /></h2>
time<input type="time"name="time" />
<!-- datetime-local当前时间 -->
<h2>datetime-local<input type="datetime-local"name="datetime2" /><h2>

  <email>

用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值是否合法有效。

<form action="test" method="get">
<h1>email</h1>
<span>我的邮箱</span><input type="email" name="emile1"  /></form>

  <month>

用于显示年月

<h1>month</h1>
<h2>年月<input type="month" name="month"  /></h2>

< number>

number 类型用于应该包含数值的输入域。

<h1>number</h1>
<h2>可上下选择或者直接输入<input type="number" name="number"  /></h2>

还能够设定对所接受的数字的限定：

disabled

规定输入字段是禁用的

max

规定允许的最大值

maxlength

规定输入字段的最大字符长度

min

规定允许的最小值

pattern

规定用于验证输入字段的模式

readonly

规定输入字段的值无法修改

required

规定输入字段的值是必需的

size

规定输入字段中的可见字符数

step

规定输入字段的合法数字间隔

value

规定输入字段的默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增的表单元素</title>
	</head>
	<body>

		<h1>number</h1>
		<h2>可上下选择或者直接输入<input type="number" name="number"  /></h2>
		<h2>disabled禁用<input type="number" name="numbe1r"disabled="disabled"  /></h2>
		<h2>max允许最大值<input type="number" name="number2"max="5" /></h2>
		<h2>min允许最小值<input type="number" name="number3"min="2"  /></h2>
		<form action="test" method="get">
		<!-- maxlength属性与 <input type="text"或<input type="password"配合使用-->
		<h2>maxlength输入段的最大字符<input type="text" name="wenben"maxlength="3"  /></h2> 
        </form>
		<h2>readonly只能读取<input type="number" name="number4"readonly="readonly" /></h2>
		<h2>required提交时必填项<input type="number" name="number5"required="required" /> 
        </h2>
		<h2>step间隔<input type="number" name="number6"step="3"/></h2>
		<h2>value默认值<input type="number" name="number7"value="9"/></h2>
	</body>
</html>

<range>

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增的表单元素</title>
	</head>
	<body>
		<h1>range</h1>
		<h3>range滑动条<input type="range" name="range"  /></h3>
	</body>
</html>

使用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值

min - 规定允许的最小值

step - 规定合法的数字间隔

value - 规定默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增的表单元素</title>
	</head>
	<body>
		<h1>range</h1>
		<h3>默认为90的滑动条<input type="range" 
		name="range1" max="100"min="1"step="10" value="90" /></h3>
	</body>
</html>

<search>

search 类型用于搜索域，比如站点搜索或 Google 搜索。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增的表单元素</title>
	</head>
	<body>
		<form action="test" >
			<h1>search<input type="search" name="search1" value="" /></h1>
		</form>
		
	</body>
</html>

 

<url>

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增的表单元素</title>
	</head>
	<body>
		<form action="url" >
			<h3>网址<input type="url" name="wangzhi"  value="" /></h3>
		</form>
		
	</body>
</html>

<week>

week 类型允许你选择周和年。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增的表单元素</title>
	</head>
	<body>
		<h1>week</h1>
		<h3>选择那一年的第几周<input type="week" name="week1"  value="" /></h3>
	</body>
</html>

 4.新的表单属性

HTML5 的 <form> 和 <input>标签添加了几个新属性.

4.1<form>新属性：

autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone,email, password, datepickers, range 以及 color。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新的表单属性</title>
	</head>
	<body>
		<!-- 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。默认打开 -->
		<h1>autocomplete定义表单是否启用自动完成功能</h1>
		<form action="xinshuxing" method="get"autocomplete="on">
		autocomplete<input type="text" name="text1"   />	
		</form>
	</body>
</html>

 

<Novalidate>

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新的表单属性</title>
	</head>
	<body>
		<h1>novalidate提交表单时不验证</h1>
		<form action="xinshuxing" method="get"novalidate="novalidate">
		邮箱<input type="email" name="myemail"  />	
		</form>
	</body>
</html>

4.2<input>新属性：

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

autofocus不适用于hidden。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新的表单属性</title>
	</head>
	<body>
		<h1>autofocus页面加载时，自动地获得焦点</h1>
		<form action="new" >
			密码<input type="password" name="mypassword"  value=""autofocus="autofocus" /> 
             <br>
			文本<input type="text" name="mytext"  value="" />
		</form>
	</body>
</html>

<form>,

form 属性规定输入域所属的一个或多个表单。

如需引用一个以上的表单，请使用空格分隔的列表。

formaction

formaction 属性用于描述表单提交的URL地址.

formaction 属性会代替<form> 元素中的action属性.

formaction 属性用于 type="submit" 和 type="image".

<formenctype>

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formenctype 属性代替 form 元素的 enctype 属性。

该属性与 type="submit" 和 type="image" 配合使用。

<formmethod>

formmethod 属性定义了表单提交的方式。

formmethod 属性代替了 <form> 元素的 method 属性。

<formnovalidate>

novalidate 属性是一个 boolean(布尔) 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

 formnovalidate 属性与type="submit一起使用

<formtarget>

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖 <form>元素的target属性.

formtarget 属性与type="submit" 和 type="image"配合使用.

<list>

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

		<h1>list</h1>
		<input list="list" name="mylist"  />
		<datalist id="list">
			<option value ="111">111</option>
			<option value ="222">222</option>
			<option value ="333">333</option>
		</datalist>

<multiple>

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

multiple 属性适用于以下类型的 <input> 标签：email 和 file:

		<h1>multiple多选</h1>
		<form action="file" method="post">
		多选<input type="file" name="file"multiple="multiple"  />
		</form>

<placeholder>

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

		<h1>placeholder提示在用户输入值前会显示在输入域上</h1>
		<form action="tel111" method="get">
			电话<input type="tel" name="dianhua" placeholder="手机号" />
		</form>

pattern (regexp)

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

		<form action="tel111" method="get">
			电话<input type="tel" name="dianhua" pattern="[0-9]{11}" />
		</form>

<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>新的表单属性</title>
	</head>
	<body>
		<h1>required必填</h1>
		<form action="5-1.html" method="post">
			账号<input type="tel" name="username" placeholder="手机号"pattern="[0-9]{11}"required="required" /><br>
			密码<input type="password" name="passWord" placeholder="密码"required="required"/>
			<input type="submit"value="提交" />
		</form>
	</body>
</html>

 

大大126
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
静态页面中出现代码：[if lt IE 9]
jsnjzgb的博客
01-28 1390
 在静态页面中出现如下代码：        ……的代码，表示的是限定IE浏览器版本9以下才能执行的语句，其他还有比如： 除IE外都可识别   所有的IE可识别   仅IE9可识别   IE9以下版本可识别   IE9以及IE9以下版本可识别   IE9以及IE9以上版本可识别
HTML5官方文档中文版
07-18
HTML5官方文档中文版
[if lte IE 9]……[endif]
mmayanfa的专栏
07-16 1005
项目范例说明![if !IE]The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式
[if it IE 9]
sleepwalker_1992的专栏
05-23 1026
页面里面经常看到类似[if it IE 9]，表示的是限定某些浏览器版本才能执行的语句。
条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>
固体胶的笔记本
01-09 1099
除IE外都可识别 所有的IE可识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 仅IE8可识别 仅IE9可识别 项目 范例 说明 ! [if !IE] The NOT operator. This
判断IE版本的HTML语句详解，如：＜!--[if IE 9]＞ 仅IE9可识别 ＜![endif]--＞
考拉很OK
09-21 278
-[if gte IE 6]> IE6以及IE6以上版本可识别 <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <!--[if IE 6]> 仅IE6可识别 <!--[if IE 7]> 仅IE7可识别 <!--[if IE 8]> 仅IE8可识别 <!--[if IE 9]> 仅IE9可识别 <!--[if IE]> 所有的IE可识别 <!
HTML5 二维码扫描
03-16
html5 二维码扫描源代码，javascript源码，jquery.min.js，reqrcode.js，test.html。
HTML5快速参考
10-08
HTML5快速参考书，可作为一个工具书使用，别的不多说，请大家参考
html5七天速成手册
12-21
html5七天速成手册
HTML5指纹识别方法
10-25
HTML5指纹识别方法。HTML5指纹识别方法。HTML5指纹识别方法。
HTML5新标签兼容—— !–if lt IE 9!endif– 的两种方法
11-21
第一种方法：(使用html5shiv) <!--[if lt IE9]> [removed][removed] <![endif]--> 由于国内google的服务器访问卡，建议调用国内的cdn <!--[if lt IE 9]> 　　[removed][removed] <![endif]--> 下载html5shiv https://gith
IE 浏览器：HTML条件注释判断IE !--[if IE]
weixin_41796631的博客
03-22 1169
在某些js，html前端框架中经常会有如下这样的语句，不要以为它是注释掉了，它表示IE9版本以下的IE浏览器用jquery-1.11.3版本，IE9以及以上的浏览器将会用jquery-2.1.4版本，这种用法是很多的，如下： <!--[if lt IE 9]> <script type="text/javascript" src="js/jquery-1.11.3.min.j...
一文带你掌握 HTML5 必会知识点
孔维伟的博客
05-20 438
子曰：温故而知新，可以为师矣。 《论语》-- 孔子 一、新增标签 1. 结构标签（块状元素） <article> ：标记定义一篇文章。 <header> ：标记定义一个页面或一个区域的头部。 <nav> ：标记定义导航链接。 <section> ：标记定义一个区域。 aside ：标记定义页面内容部分的侧边栏。 hgroup ：标记定义文件中一个区块的相关信息。 figure ：标记定义一组.
html5常用新元素总结
问一的博客
06-16 437
语义与结构元素 header 定义文档的头部 nav 定义导航内容 aside 定义文档侧边栏内容 footer 定义 section 或 document 的页脚 article 定义页面独立的内容区 - section 定义文档中的节（section、区段） figure 规定独立的流内容（图像、图表、照片...
条件注释判断浏览器
anzheng6118的博客
11-27 203
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可...
HTML5简介及新增标签
wshwsh_的博客
07-18 1400
HTML5简介及新增标签 一、HTML5概述 1.1、什么是 HTML5 HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟（W3C）完成标准制定。 HTML5 的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 HTML5 是下一代 HTML 标准。 HTML，HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 1
html5 新特性，新标签
Czyqyf的博客
07-22 322
HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟 （W3C）完成标准制定。HTML5 的设计目的是为了在移动设备上支持多媒体。HTML5 简单易学。HTML5 是下一代 HTML 标准。HTML，HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。用于绘画的 canvas 元素。
HTML5中新的语义元素
前端小白菜
07-23 370
header、footer、nav等
html和html5
最新发布
08-02
HTML和HTML5有什么区别？ 回答: HTML和HTML5是指代不同的东西。HTML是指超文本标记语言，是一种用于创建网页的标准标记语言。而HTML5是HTML的第五个版本，是对HTML进行了扩展和改进的新一代标准。[1] HTML5相比HTML4...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值