首页 前端知识 HTML5简介及新增标签

HTML5简介及新增标签

2024-06-03 12:06:35 前端知识 前端哥 428 999 我要收藏

HTML5简介及新增标签

一、HTML5概述

1.1、什么是 HTML5

在这里插入图片描述

HTML5 是HTML最新的修订版本(超文本标记语言的第五次重大修改),2014年10月由万维网联盟(W3C)完成标准制定。

HTML5 的设计目的是为了在移动设备上支持多媒体。

HTML5 简单易学。

HTML5 是下一代 HTML 标准。

HTML,HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

1.2、HTML5 是如何起步的

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序(Application),而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素

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

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

  • 新的特殊内容元素,比如 article、footer、header、nav、section

  • 新的表单控件,比如 calendar、date、time、email、url、search

1.3、HTML5 浏览器支持(重要)

现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

在这里插入图片描述

此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为行内元素自动处理。

正因为如此,你应该 “教会” 浏览器处理 “未知” 的 HTML 元素。

1.3.1、将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:

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

1.3.2、为 HTML 添加新元素(自定义标签)

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>为 HTML 添加新元素</title>
        <script>
            document.createElement("myHero")
        </script>
        <style>
            myHero {
                display: block;
                background-color: #ddd;
                padding: 50px;
                font-size: 30px;
            }
        </style> 
    </head>

    <body>
        <h1>我的第一个标题</h1>

        <p>我的第一个段落。</p>

        <myHero>我的第一个新元素</myHero>
    </body>
</html>

注:JavaScript 语句 document.createElement(“myHero”) 是为 IE 浏览器添加新的元素。

1.3.3、Internet Explorer 浏览器问题

你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是:

Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, " shiv" 来解决该问题:

html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

注意:国内用户请使用国内静态资源库(Google 资源库在国内不稳定):

<!--[if lt IE 9]>
  <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。

html5shiv.js 引用代码必须放在 <head>元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兼容性</title>

</head>
<body>
    	<!--  
			现代的浏览器都支持 HTML5。
			最新版本的 Safari、Chrome、Firefox 以及 Opera 支持大部分 HTML5 特性。
			Internet Explorer 9 将支持某些 HTML5 特性。
			
			浏览器对无法识别的元素(标签)会作为行内元素自动处理
			
			<hero>、<jeb>、<xxx>官方没有提供,但是符合标签语法规范,那么浏览器就当成标签来解析。
				这几个标签都是行内标签
			我们实际开发的时候,能不能自定义标签?可以,但是大可不必
			
			老版本浏览器无法识别H5新的标签,那么就会当成自定义标签(行内元素)
				你应该 **"教会"** 浏览器处理 **"未知"** 的 HTML 元素。
			
			解决方法:
				1、告诉老版本浏览器,这些标签都是什么类型。通过CSS样式设置元素的类型。
					header, section, footer, aside, nav, main, article, figure都是H5里面提供的块级标签,老版本浏览器不识别,那么我们就告诉老版本浏览器怎么解析。
					myHero、xxx、jeb都是自定义的标签,我们可以告诉浏览器怎么去解析。
					该方式IE8及其更早的IE浏览器不支持该方式。
				2、html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。
					
		-->
 <!-- 浏览器对无法识别的元素(标签)会作为行内元素自动处理 -->
<wsh>ddd</wsh>
<zt>ddd</zt>
</body>
</html>

友情链接:https://www.bootcdn.cn/html5shiv/

1.4、HTML5语义化

在HTML5添加新标签的时候,提出了一个关键词 “语义”。

  • 语义= 意义
  • 语义元素 = 有意义的元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

  • 无语义 元素实例:<div><span> - 无需考虑内容.

  • 语义元素实例:<form><table>,and <img> - 清楚的定义了它的内容.

HTML5新标签的优点:

  • 更注重于内容而不是形式:之前的标签更注重于怎么把内容显示到页面中,新标签更加容易明显的让人明白存放的是什么东西;

  • 对人的友好:更加的语义化,高度的描述性,更加的直观,增加代码的可读性;

  • 对计算机的友好:浏览器更容易解析,搜索引擎更容易抓取文档内容,之前的定义区块,都是使用div结合id和class使用,会出现各种各样的命名;现在定义的新标签更规范;

  • 代码更加的简洁;

1.5、HTML5特性

1.5.1、新语义元素

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>规定在文本中的何处适合添加换行符。

1.5.2、HTML5 表单

新表单元素, 新属性,新输入类型,自动验证。

1.5.3、HTML5已移除的元素

<acronym>:定义首字母缩写,HTML5 中不支持 <acronym> 标签。请使用 标签代替

<basefont>:规定页面上的默认字体颜色和字号:

<big>:呈现大号字体效果

<dir>:定义目录列表,类似于ul和ol

<center>:对其所包括的文本进行水平居中。

<font>:规定文本的字体、字体尺寸、字体颜色。

<frame>:定义 frameset 中的一个特定的窗口(框架)

<frameset>:可定义一个框架集。

<noframes>:可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

<strike>:可定义加删除线文本定义。

<tt>:呈现类似打字机或者等宽的文本效果。

<!-- acronym用来定义缩写,现在使用abbr来替代 -->
		<acronym title="华杉科技">HS</acronym>希望你更好!
		
		<!-- basefont: 规定页面上的默认字体颜色和字号,直接给html设置字体和颜色即可 -->
		<basefont color="red" size="7">
		
		<!-- big: 呈现大号字体效果 -->
		<big>大号字体</big>
		
		<!-- center: 对其所包括的文本进行水平居中。 -->
		<center>文字居中</center>
		
		<!-- font:规定文本的字体、字体尺寸、字体颜色 -->
		<font color="yellow" size="5">我是font的内容</font>
		
		<!--  
			frameset	可定义一个框架集
			frame		定义 frameset 中的一个特定的窗口
			noframes	可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
		-->
		
		<!-- strike	可定义加删除线文本定义。目前使用del来实现删除文本 -->
		<strike>删除文本</strike>
		
		<!-- <tt>:呈现类似打字机或者等宽的文本效果。 -->
		<tt>打印机字体</tt>

在这里插入图片描述

二、HTML5新布局标签

许多现有网站都包含以下HTML代码: <div id="nav"><div class="header">,或者 <div id="footer">,来指明导航链接,头部,以及尾部。

在这里插入图片描述

首先你要搞清楚一个概念,HTML并不是用来写页面样式的,而是用来表示一个网页的基本架构的,样式用CSS来实现

HTML5除了提出很炫的新效果以外还加强了语义化结构

HTML5新增的还有article、nav、header、footer…等等等,其实现效果都是和div一样没有效果,但是合理使用却能让页面结构更加清晰有逻辑

如果了解H5之前的HTML,会发现之前页面布局完全就是使用的div+css,但是div是不能滥用的,只能用来做整体的布局,细节部分还是要用其他标签,一方面程序可读性和维护性加强,另一方面,可以用下级选择器来写样式,减少了class和id的命名,可以精简网页的结构;而且语义化结构 有条理才能让搜索引擎更加友好

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

在这里插入图片描述

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

2.1、HTML5 header 元素

<header>元素描述了文档的头部区域。

<header>元素主要用于定义内容的介绍展示区域。

在页面中你可以使用多个<header>元素(文档头、独立内容头)。

原来写一个页面,比如有头部和底部。我们都是定义一个div,只不过头部有一个class=header;尾部的div是class=footer;

现在html5出现以后,主张语义化标签。现在我们写样式的时候。选择器直接就写header就可以了。不需要这么写 div.header这样的好处是使得文档结构层次清晰。利于代码编写和开发;还有搜索引擎优化等等的好处。

    <div class="header">
        我是用div="header"定义的头部内容
    </div>

    <!-- 直接用header可以使代码更简单易懂,更容易被浏览器解析,有助于搜索引擎优化 -->
    <header>
        我是用header定义的头部内容
    </header>

2.2、HTML5 nav 元素

<nav>标签定义导航链接的部分。

<nav>元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在 <nav>元素中!

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新布局标签</title>

    <style>
        nav a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>

<body>
    <nav>
        <a href="">首页</a>
        <a href="">京东超市</a>
        <a href="">优惠券</a>
        <a href="">京东生鲜</a>
        <a href="">京东家电</a>
        <a href="">品牌闪购</a>
       </nav>
</body>

在这里插入图片描述

2.3、HTML5 article 元素

<article>标签定义独立的内容。

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注。

注:article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。

 <article>
        <header>
            <h1>标题</h1>
            <p>时间</p>
        </header>
        <section>
            内容内容内容内容内容内容内容内容内容内容<br>
            内容内容内容内容内容内容内容内容内容内容<br>
            内容内容内容内容内容内容内容内容内容内容 <br>
            内容内容内容内容内容内容内容内容内容内容<br>
            内容内容内容内容内容内容内容内容内容内容 <br>
            内容内容内容内容内容内容内容内容内容内容 <br>
            内容内容内容内容内容内容内容内容内容内容 <br>
             内容内容内容内容内容内容内容内容内容内容
        </section>
        <article>
            <header>
                <h3>天使在人间的评论</h3>
                <p>7月16日 03:10</p>
            </header>
            <p>内容内容内容内容内容内容内容内容内容内容</p>
        </article>
        <article>
            <header>
                <h3>天使在人间的评论</h3>
                <p>7月16日 03:10</p>
            </header>
            <p>内容内容内容内容内容内容内容内容内容内容</p>
        </article>
        <article>
            <header>
                <h3>天使在人间的评论</h3>
                <p>7月16日 03:10</p>
            </header>
            <p>内容内容内容内容内容内容内容内容内容内容</p>
        </article>
    </article>

2.4、HTML5 section 元素

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

根据W3C HTML5文档: section 包含了一组内容及其标题。

从字面理解就是区块、部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单、文章正文、文章的评论等。

  • section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段;

  • 一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素,

  • section元素并非一个普通的容器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素;

  • 如果article、nav、aside元素都符合某条件,那么就不要用section元素定义;

  • section元素中的内容可以单独存储到数据库中或输出到word文档中。

2.5、HTML5 aside 元素

<aside>标签定义页面主区域内容之外的内容(比如侧边栏)。

aside 标签的内容应与主区域的内容相关。

2.6、HTML5 footer 元素

<footer>元素描述了文档的底部区域.

<footer>元素应该包含它的包含元素

一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尾部</title>
    <style>
        /* 尾部 */
        .footer_div {
            overflow: hidden;
            background-color: #3D2D22;
            clear: both;

        }

        .footer_div .footer-left_div,
        .footer_div .footer-right_div {
            float: left;
            margin-top: 30px;
        }

        .footer_div .footer-left_div {
            margin-left: 50px;
        }

        .footer_div .footer-right_div {
            margin-left: 60px;
        }

        .footer_div .footer-left_div span {
            color: white;
        }

        .footer_div .footer-left_div a,
        .footer_div .footer-right_div a,
        .footer_div .footer-last_div a {
            margin: 0 10px;
            font-size: 14px;
            color: white;
            text-decoration: none;
          
        }

        .footer-last_div {

            overflow: hidden;
            float: left;
            margin-top: 30px;
            margin-left: 65px;
            margin-bottom: 30px;
        }

        .footer_div a:hover {
            color: red;
        }

    </style>
</head>

<body>
    <!-- 尾部 -->
    <footer>
        <div class="footer_div">
            <div class="footer-left_div">
                <a href="">品牌动态</a><span> |</span>
                <a href="">生产经营资质</a><span> |</span>
                <a href="">企业合作</a><span> |</span>
                <a href="">发票申请</a><span> |</span>
                <a href="">平台规则</a><span> |</span>
                <a href="">帮助服务</a><span> |</span>
                <a href="">联系我们</a><span> |</span>
            </div>

            <div class="footer-right_div">
                <a href="">400-999-6665</a>
                <a href="">WEIBO</a>
                <a href="">WECHAT</a>
                <a href="">京东商城</a>
            </div>
            <div class="footer-last_div">
                <a href="">深圳市悦轩商城科技股份有限公司</a>
                <a href="">粤CP备16039394号-6</a>
                <a href="">京公网安备4403070200239</a>
                <a href="">公司地址:深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</a>
            </div>
        </div>
    </footer>
</body>

</html>

在这里插入图片描述

2.7、HTML5 figure 和 figcaption 元素

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

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

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

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

<figure>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新布局标签</title>



    <style>
        body {
            margin: 0;

        }

        header {
            height: 120px;
            border: 1px solid rebeccapurple;
        }

        nav {
            height: 40px;
            width: 700px;
            border: 1px solid black;
            top: 60px;
            right: 60px;
            position: absolute;
        }

        ul {
            /* 去除每行前面的标记 */
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            float: left;
            line-height: 40px;
            padding: 0 15px;
        }

        main {
            height: 400px;
            width: 1000px;
            border: 1px solid red;
            margin: 10px auto;
        }

        section {
            height: 200px;
            border: 1px solid black;
        }

        aside {
            width: 50px;
            height: 300px;
            border: 1px solid red;
            right: 0;
            top: 200px;
            position: fixed;
        }

        footer {
            height: 100px;
            border: 1px solid black;
        }
    </style>

</head>

<body>
    <!--  
			H5之前布局标签只有div。
			H5新增了8个语义化的布局标签。
			
			新布局标签的用法:这些标签用法上和div一模一样,你可以认为他们是已经定义了名称div。
			新布局标签的作用:
				header:描述了网页文档的头部区域
				nav:定义导航链接的部分
				article:定义独立的内容
				main: 用于指定文档的主体内容
				section:定义文档中的节
				aside:定义页面主区域内容之外的内容
				footer:描述了文档的底部区域
				figure:规定独立的流内容(图像、图表、照片、代码等等)
				figcaption:定义<figure>元素的标题.
			
			切记:我们所谓的布局标签,只是用来承载指定的内容,并放置到页面的指定位置。
			
			header、head、thead:
				head:定义网页结构的头部,用来定义网页的元信息。
				header:定义网页内容的头部
				thead:定义表格的头部
				
		-->
    <header>
       
        <header>页面内容头部</header>
        <nav>
            <!-- 导航nav -->
            <ul>
                <li><a href="">导航nav</a></li>
                <li><a href="">首页</a></li>
                <li><a href="">京东超市</a></li>
                <li><a href="">优惠券</a></li>
                <li><a href="">京东生鲜</a></li>
                <li><a href="">京东家电</a></li>
                <li><a href="">品牌闪购</a></li>
               
            </ul>
        </nav>


    </header>


    <main>
        <!-- 内容主题main -->
        <section>
            section主体部分一
        </section>

        <section>
            section主体部分二
        </section>


    </main>


    <aside>
        侧边栏aside
    </aside>


    <footer>
       <footer>页面内容尾部footer</footer>
    </footer>

</body>

</html>

在这里插入图片描述

三、HTML5新表单元素

3.1、HTML5 新的 input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

控件名称type属性值描述
电子邮箱email包含 e-mail 地址的输入域(有校验),
拾色器colorcolor 类型用在input字段主要用于选取颜色
选择你喜欢的颜色:
日期字段date
datetime
datetime-local
month
week
time
定义日期字段:包含年月日
定义日期字段:(UTC 时间)(仅opera支持)
定义日期字段:包含年月日时分(无时区)
定义日期:年月
定义年中的周数
定义时间
数值框number输入类型用于包含数字值的输入字段,可以设置可接受数字的限制。
使用min属性和max属性设置最小和最大值
step设置数字间隔 如果step=“3” ,那么数值间隔是3
数值滑块空间range用于应该包含一定范围内数字值的输入域。。
range 类型显示为滑动条。
使用min属性和max属性设置最小和最大值,step设置数字间隔
搜索框search用于搜索字段,比如站内搜索或谷歌搜索等。
电话号码框tel定义输入电话号码字段,但是不会进行校验
url地址url包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。

<body>
	<!--  
				我们通过input标签的type属性,可以实现各种控件效果,H5之前type属性的值:
					text、password、radio、checkbox、file、hidden、submit、reset、button
				新的 input 类型(type的值):
					email:定义电子邮箱,有简单的校验
					color:拾色器
					日期相关:
						date	定义年月日选择器
						datetime-local	定义年月日时分选择器
						month	定义年月
						week	定义年中的周数
						time	定义时分
					number	定义数值框,有检验
					range	数值滑块
						无论是数值框还是数值滑块,都具有如下三个属性:
							max 最大值
							min 最小值
							step 步长
					search	搜索框
					tel	电话号码框,没有校验
					url	url地址输入框,有简单的校验
			-->

	<form action="">
		<p>
			电子邮箱: <input type="email" name="email">
		</p>


		<p>
			拾色器<input type="color" name="color">
		</p>

		<p>
			年月日: <input type="date" name="date">
		</p>

		<p>
			年月日时分: <input type="datetime-local" name="datetime-local">
		</p>


		<p>
			年月: <input type="month" name="month">
		</p>


		<p>
			年中的周数: <input type="week" name="week">
		</p>

		<p>
			时分: <input type="time" name="time">
		</p>


		<p>
			数值: <input type="number" name="number">
		</p>

		<p>
			数值滑块空间:<input type="range" min="2" max="20" step="3">
		</p>
		<p>
			搜索框: <input type="search" name="search">
		</p>

		<p>
			电话框: <input type="tel" name="tel">
		</p>
		
		<p>
			URL: <input type="url" name="url">
		</p>

		<button type="submit">提交</button>
	</form>
</body>

在这里插入图片描述

3.2、HTML5 新的表单属性

3.2.1、*form / input autocomplete 属性

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

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

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

注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, tel, email, password, datepickers, range 以及 color。

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

        <!--  
			在整个表单中,我们在输入框中提交的历史数据,都会自动提示
			
			autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
			关于自动补全,一定是分场景的:
				如果是注册,我们肯定不需要自动补全功能
				如果是登录,用户名可以开启自动补全
				
				如果autocomplete="off"添加给form表单,那么表单里面的所有元素都关闭自动补全
		-->
    <!-- <form action="" autocomplete="off"> -->
        <form action="">
            用户名: <input type="text" name="username" autocomplete="off"> <br>&emsp;码: <input type="password" name="password"><br>&emsp;名: <input type="text" name="name"><br>
            <button type="submit">提交</button>
        </form>

在这里插入图片描述

3.2.2、*form novalidate 属性

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

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

无需验证提交的表单数据:

    <!-- novalidate提交信息时不会再进行校验 -->
    <form action="#" method="get"  novalidate autocomplete="off">
        邮箱:<input type="email" name="email"><br>
        URL:<input type="url" name="url"><br>
        <button type="submit">提交</button>
    </form>

在这里插入图片描述

3.2.3、*input placeholder 属性

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

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

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

3.2.4、*input required 属性

required 属性规定必须在提交之前填写输入域(不能为空)。

注意:required 属性适用于以下类型的 <input>标签:text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。

3.2.5、input step 属性

step 属性为输入域规定合法的数字间隔。

如果 step=“3”,则合法的数是 -3,0,3,6 等

提示:step 属性可以与 max 和 min 属性创建一个区域值.

**注意:**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

3.2.6、input autofocus 属性

autofocus 属性是一个 boolean 属性.

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

    <!--  
			placeholder 属性提供一种提示(hint),描述输入域所期待的值。
			required 属性规定必须在提交之前填写输入域(不能为空)。
				如果我们使用正则校验,required其实可以不使用。
				这个属性也是重要的,原因是很多框架中还在用这个属性
			step 属性为输入域规定合法的数字间隔。
			autofocus 属性规定在页面加载时,域自动地获得焦点。
		-->

    <form action="">
        用户名: <input type="text" name="username" autocomplete="off" placeholder="请输入用户名"> <br>&emsp;码: <input type="password" name="password" placeholder="请输入密码" autofocus required><br>&emsp;名: <input type="text" name="name" placeholder="请输入姓名"><br>
        <button type="submit">提交</button>
    </form>

在这里插入图片描述
)]

3.2.7、input form 属性

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

**提示:**如需引用一个以上的表单,请使用空格分隔的列表。

位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<form action="#" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

在这里插入图片描述

3.2.8、input formaction 属性

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

formaction 属性会覆盖<form>元素中的action属性.

注意: formaction 属性用于 type=“submit” 和 type=“image”.

以下HTMLform表单包含了两个不同地址的提交按钮:

 <!-- input formaction 属性
    formaction 属性用于描述表单提交的URL地址.
    点击新提交页面会转跳到百度页面提交内容
    -->
    <form action="#">
        用户名:<input type="text" name="id"><br>
        密码:<input type="password" name="pwd"><br>
        <input type="submit">
        <input type="submit" value="新提交" formaction="https://www.baidu.com/">
    </form>

3.2.9、input formenctype 属性

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

formenctype 属性覆盖 form 元素的 enctype 属性。

注意: 该属性与 type=“submit” 和 type=“image” 配合使用。

第一个提交按钮已默认编码发送表单数据,第二个提交按钮以 “multipart/form-data” 编码格式发送表单数据:

    <!-- input formenctype 属性
    formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
    提交图片时一般用formenctype="multipart/form-data"
    -->
    <form action="#" method="post">
        用户名:<input type="text" name="id"><br>
        密码:<input type="password" name="pwd"><br>
        <input type="submit">
        <input type="submit" value="新提交" formenctype="multipart/form-data">
    </form>

3.2.10、input formmethod 属性

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

formmethod 属性覆盖了 <form>元素的 method 属性。

注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

重新定义表单提交方式实例:

 <!-- input formmethod 属性
    formmethod 属性定义了表单提交的方式。
    点击新提交,页面会以post的提交方式提交
    -->
    <form action="#">
        用户名:<input type="text" name="id"><br>
        密码:<input type="password" name="pwd"><br>
        <input type="submit">
        <input type="submit" value="新提交" formmethod="post">
    </form>

3.2.11、input formnovalidate 属性

novalidate 属性是一个 boolean 属性.

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

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

注意: formnovalidate 属性与 type=“submit” 一起使用

两个提交按钮的表单(使用与不适用验证 ):

 <!-- input formnovalidate 属性
    novalidate属性描述了 `<input>` 元素在表单提交时无需被验证。
    注意: formnovalidate 属性与 type="submit" 一起使用
    点击新提交 type="email"不会进行校验
    -->
    <form action="#">
        邮箱:<input type="email" name="e-mail"><br>
        <input type="submit">
        <input type="submit" value="新提交" formnovalidate>
    </form>

3.2.12、input height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input>标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的<input>标签。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。

定义了一个图像提交按钮, 使用了 height 和 width 属性:

    <!-- input height 和 width 属性
    注意: height 和 width 属性只适用于 image 类型的<input>标签。 -->
    <form action="#">
        <input type="image" src="../images/login.png" width="100" height="50">
    </form>

3.2.13、*input list 属性

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

    <!-- 
			datalist:规定输入域的选项列表。必须和input输入框结合使用
				input标签的list属性值 和 datalist的id属性值保持一致
				列表项是由option来定义的
				当我们在input输入框输入内容的时候,它会匹配数据列表中的列表项。由option的value来进行匹配。
		-->

    <input type=“text” name=”data” list=”dlist”>
    <datalist id=”dlist”>
        <option value="CAD">CAD制图是一款制图软件,设计人员利用计算机及其图形设备进行设计工作</option>
        <option value="HTML5">HTML5是构建Web内容的一种语言描述方式。</option>
        <option value="JAVASCRIPT">JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。</option>
        <option value=".NET">.NET是一种用于构建多种应用的免费开源开发平台,</option>
        <option value="JAVA">Java 是一个通用术语,用于表示 Java 软件及其组件</option>
    </datalist>


在这里插入图片描述

3.2.14、input multiple 属性

multiple 属性是一个 boolean 属性.

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

注意: multiple 属性适用于以下类型的 <input>标签: file

    <form action="#">
       <input type="file" name="file" multiple><br>
        <input type="submit">
    </form>

3.2.15、*input pattern 属性

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

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

提示: 是用来全局 title 属性描述了模式.

提示: 在我们的 JavaScript 教程中学习到有关正则表达式的内容

    <!-- input pattern 属性
    pattern 属性描述了一个正则表达式用于验证 <input>元素的值。 -->
    <form action="#">
        <input type="tel" name="phone" pattern="^(1[3456789])\d{9}$" title="请输入正确的手机号"><br>
         <input type="submit">
     </form>

在这里插入图片描述

3.2.16、*input min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。

<input> 元素最小值与最大值设置:

    <!-- input min 和 max 属性
    min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。 -->
    <form action="#">
        <input type="date" min="1940-10-01">
         <input type="submit">
     </form>

在这里插入图片描述

四、HTML5多媒体标签

4.1、HTML5 Video(视频)

很多站点都会使用到视频,HTML5 提供了展示视频的标准。

直到现在,仍然不存在一项旨在网页上显示视频的标准。

今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

4.1.1、浏览器支持

在这里插入图片描述

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video>元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video>元素。

4.1.2、HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频,您所有需要的是:

	<!-- autoplay如果出现该属性,则视频在就绪后马上播放。 -->
    <!-- controls属性:添加播放控制及音量控制功能栏。 -->
    <!-- loop属性·:当媒介文件完成播放后再次开始播放。(循环播放) -->
    <!-- muted属性:视频的音频输出为静音。 -->
    <!-- poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。(视频封面) -->
    <!-- width 和 height可以设置视频的大小 -->
<video src="/video/华丽耀眼的白孔雀.mp4" width="200" height="400"  controls loop muted poster="../images/music.jpg">

</video>

在这里插入图片描述

<video>元素提供了 播放、暂停和音量控件来控制视频。

同时 <video>元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。

<video></video>标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video>元素支持多个 <source>元素. <source>元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

<video width="320" height="240" controls> 
     <!-- type="video/mp4" 是mimetype类型 -->
     <!-- 如果浏览器不支持mp4格式,则会显示ogg格式 -->
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
</video>

4.1.3、视频格式与浏览器的支持

当前, <video>元素支持三种视频格式: MP4, WebM, 和 Ogg:

浏览器MP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (从 Opera 25 起)YESYES
  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式MIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

什么是 MIME TYPE?

首先,我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash ……那么,浏览器是如何区分它们,决定什么内容用什么形式来显示呢?答案是 MIME Type,也就是该资源的媒体类型。

媒体类型通常是通过 HTTP 协议,由 Web 服务器告知浏览器的,更准确地说,是通过 Content-Type 来表示的,例如:Content-Type: text/HTML

表示内容是 text/HTML 类型,也就是超文本文件。为什么是“text/HTML”而不是“HTML/text”或者别的什么?MIME Type 不是个人指定的,是经过 ietf 组织协商,以 RFC 的形式作为建议的标准发布在网上的,大多数的 Web 服务器和用户代理都会支持这个规范 (顺便说一句,Email 附件的类型也是通过 MIME Type 指定的)。

通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type,如果是某个客户端自己定义的格式,一般只能以 application/x- 开头。

XHTML 正是一个获得广泛应用的格式,因此,在 RFC 3236 中,说明了 XHTML 格式文件的 MIME Type 应该是 application/xHTML+XML。

当然,处理本地的文件,在没有人告诉浏览器某个文件的 MIME Type 的情况下,浏览器也会做一些默认的处理,这可能和你在操作系统中给文件配置的 MIME Type 有关。比如在 Windows 下,打开注册表的“HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type”主键,你可以看到所有 MIME Type 的配置信息。

more:https://www.cnblogs.com/jsean/articles/1610265.html

4.1.4、video标签相关属性

属性描述
mutedmuted如果出现该属性,视频的音频输出为静音。
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols添加播放控制及音量控制功能栏。
heightPixels指定播放器的高度,以pixel为单位。
looploop如果指定,视频将重复播放。
posterurl指定视频的预览图。
preloadauto
metadata
none
如果指定,视频会在加页面加载过程中被加载。当autoplay被指定时,会被忽略。
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
srcurl目标视频的URL。
widthpixels指定播放器的宽度,以pixel为单位。

4.2、HTML5 Audio(音频)

用法大致都和video相同

HTML5 提供了播放音频文件的标准。

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio>元素。

4.2.1、浏览器支持

在这里插入图片描述

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio>元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio>元素.

4.2.2、HTML5 Audio - 如何工作

如需在 HTML5 中播放音频,你需要使用以下代码:

<audio controls> 
    <source src="horse.ogg" type="audio/ogg"> 
    <source src="horse.mp3" type="audio/mpeg"> 
    您的浏览器不支持 audio 元素。 
</audio>

control 属性供添加播放、暂停和音量控件。

<audio></audio>之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio>元素允许使用多个 <source>元素. <source>元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件

4.2.3、音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器MP3WavOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+YESYESYES
Safari 5+YESYESNO
Opera 10+YESYESYES

音频格式的MIME类型

FormatMIME-type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

4.2.4、Audio标签属性

属性属性值描述
autoplayautoplay如果指定, 音频会在准备好后立即播放.
controlscontrols显示播放控制工具栏…
looploop如果指定,则循环播放.
mutedmuted如果出现该属性,则音频输出为静音。
preloadauto
metadata
none
如果指定,视频会在加页面加载过程中被加载。当autoplay被指定时,会被忽略。
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
srcurl目标音频的URL.

4.3、source标签

video和audio元素的子元素,可指定多个文件来源,用来解决浏览器的兼容问题

如果使用了source元素,则不可以在video和audio中设置src属性

<source>标签为媒介元素(比如 <video><audio>)定义媒介资源。

<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

五、其他常用HTML5新标签

5.1、HTML5文本格式化标签

<time>标签定义日期或时间,或者两者;

<mark>标签定义带有记号的文本。请在需要突出显示文本时使用 < mark > 标签。

<ruby>在文字上方注音,不常用,主流浏览器基本都支持,需要使用rt标签定义注音,例如:

<ruby>饕餮<rt>tao tie</rt></ruby>

5.2、HTML5度量条

定义已知范围或分数值内的标量测量,计数仪表,也被称为 gauge(尺度)。例子:磁盘用量、查询结果的相关性,等等。

注释:<meter>标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress>标签。

属性名属性作用
value规定计量条当前默认显示值
max规定范围的最大值,默认值为1
min规定范围的最小值,默认值为0
low规定被视作低的标准
high规定被视作高标准
form规定所属的一个或多个表单
optimum定义度量条的最佳标准值,最佳必须在低和高之间
 <h3>HTML5度量条</h3>
    <!-- meter 定义度量条 -->
    默认:<meter max="100" min="1" value="30"></meter> <br>
    低:<meter max="100" min="1" value="10" low="20" high="80"></meter> <br>
    高:<meter max="100" min="1" value="90" low="20" high="80"></meter> <br>
    最佳:<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter><br>

在这里插入图片描述

5.3、HTML5进度条

<progress>标签定义运行中的任务进度(进程)。

请将 <progress>标签与 JavaScript 一起使用来显示任务的进度。

progress元素的属性

max属性:规定当前进度的最大值

value属性:规定进度条当前默认显示值

form属性:规定进度条所属的一个或多个表单

注:max和value属性的值必须是一个类型数值,可以是小数或整数

<h3>HTML5进度条</h3>
    <!-- progress 标签定义运行中的任务进度 -->
    <progress></progress><br>
    <progress value="30" max="100"></progress><br>
    <progress value="0.6" max="1"></progress><br>

在这里插入图片描述

5.4、HTML5详情标签

“details" 元素用于描述有关文档或文档片段的详细信息。

“summary” 元素应该是 “details” 元素的第一个子元素。可以为details定义标题.标题是可见的,用户点击标题时,会显示details中的内容。

details元素的属性:

open属性:规定在html页面中details是可见的

注:目前还不是所有浏览器都支持,但是之后肯定会都支持的

<h3>详情标签</h3>
    <!--  
			details:用于描述有关文档或文档片段的详细信息。
				open属性:规定在html页面中details是可见的
				想要折叠起来的,都包裹在details里面
				summary:用来给details添加标题
		-->
    <details>
        <summary>工作进度报表</summary>
        默认:<meter max="100" min="1" value="30"></meter> <br>
        低:<meter max="100" min="1" value="10" low="20" high="80"></meter> <br>
        高:<meter max="100" min="1" value="90" low="20" high="80"></meter> <br>
        最佳:<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter><br>
    </details>
    <details>
        <summary>下载进度表</summary>
        <progress></progress><br>
        <progress value="30" max="100"></progress><br>
        <progress value="0.6" max="1"></progress><br>
    </details>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10586.html
标签
学习方法
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!