html5新标签

一，html5

1.将html5元素设定为块级元素

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

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

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

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<footer>	定义 section 或 document 的页脚。
<nav>	定义导航链接的部分。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 元素的标题
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。

语义化标签的使用：

    <!-- 头部 -->
    <header>
       <ul>
        <li><a href="#">这是头部</a></li>
       </ul> 
    </header>

    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航1</a></li>
        </ul>
    </nav>.......

2.h5标签的表单元素

1.html5新的input类型

控件名称	type属性	描述
电子邮箱	email	包含 e-mail 地址的输入域(有校验)，
拾色器	color	color 类型用在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 字段的值自动进行验证。

email自带有校验功能，如果写的格式没有@符号就会报错。

date 会自动调用本地的日期。

number 只可以输入数值，文本不可以。

search 用来搜索，跟文本框的区别是后面有可以一键清空的×符号。

tel :电话号码可以设置最大字符数

    <!-- 表单的一些新元素 -->
    <input type="email" name="" id=""><br>
    <input type="datetime" name="" id=""><br>
    <input type="datetime" name="" id="">
    <input type="date">
    <input type="tel">
    
    <input type="number">
    <input type="url"><br>

date 显示的效果如下：

number显示效果如下：

email显示效果如下：

3.新的表单控件

1.输入域的选项列表

<datalist>

属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时浏览器应该在该域中显示填写的选项：

使用 <input> 元素的list属性与 <datalist> 元素绑定。

 <!--datalist  表单中h5新属性-->
    <input type="text" name="list"  list="mylist">
  <datalist id="mylist">
      <option value="1">语文</option>>
      <option value="2">数学</option>>
      <option value="英语">英语</option>>
  </datalist><br>

效果图如下所致：

注意：option 每一项的内容 value 的值和标签内的值相等时就会变成一个选项，不相等时是两个选项。

2.新的表单属性

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

<form> 新属性：

autocomplete：自动补充。在form上开启。

  <!-- autocomplete 自动填充 -->
  <input type="text"  autocomplete="on" name="uesrname">
  <input type="submit"></form>
  <input type="text"  autocomplete="off" name="uesrname">

显示效果如下：

novalidate：对自带校验的标签定义不再校验。在form中使用

<input> 新属性：

autocomplete：自动填充。input上单独使用也可以。

autofocus：焦点，设置之后刷新页面光标自动定位到该框内闪烁。

form：如果有表单表签写在表单域外面，用这个和表单域的ID保持一致也可以。

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">

formaction:描述表单提交的地址，可以覆盖action

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

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

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

数据:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

formmethod:表单提交的方式

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

formnovalidate：在提交表单时不需要验证，与 type=“submit” 一起使用

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

formtarget

height 与 width:一般用来定义图像的宽度和高度

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

min 与 max:一般在number中使用，用来设置最大值和最小值

multiple：选择多文件

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

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

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

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

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code">

placeholder:占位符，对要填写的内容的解释说明会显示在网页上。

required：要求表单中必须要填写的标签。

step

 <!-- novalidate  不进行验证  email是要输入正确的个是才可以进行提交，有novaildate就可以不用验证格式的正确与否 --> <hr>
  <form action="" novalidate>

    <input type="text" placeholder="请输入用户名" >
    <input type="email" >
    <!--requird 必须要写的内容-->
    <input type="number" required>
    <input type="submit">
    <!-- step  间隔  数字相加或者相减的数字  -->
    <input type="number" step="5">
 </form>
 <form action="">
    <input type="text" placeholder="请输入用户名" >
    <input type="email" >

4.html5多媒体标签

1.视频

<video> 通过这个元素来包含视频的标准方法。

nternet Explorer 8 或者更早的IE版本不支持 <video> 元素。

视频的格式尽量是MP4格式，能有更多浏览器支持。

2.视频的相关属性

属性	值	描述
muted	muted	如果出现该属性，视频的音频输出为静音。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	添加播放控制及音量控制功能栏。
height	px	指定播放器的高度，以pixel为单位。
loop	loop	如果指定，视频将重复播放。
poster	url	指定视频的预览图
preload	auto metadata none	如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频
src	URL	目标视频的URL
width	px	指定播放器的宽度，以pixel为单位

注意：自动播放在谷歌内核中可能不支持，加一个静音就可以自动播放。

    <!-- source后面的type是mimetype类型 通俗的来说就是视频的类型 -->
    <!-- source的作用是浏览器的兼容 ，如果不支持video类型的话，就在source中寻找浏览器所支持的类型-->
    <!-- autoplay 自动播放 controls 播放视频或者音频的控件  muted 静音 自动播放必须搭配静音使用在谷歌浏览器内核的话 -->
    <video muted  autoplay controls loop>
        <source src="video/华丽耀眼的白孔雀.mp4" type="video/mp4">
    </video>

显示效果如下：

2.音频标签

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

注意：音频标签的属性与视频标签相同，不过要写音频标签的话必须要加controls

<!-- 音频 与视频属性一样 但是音频一定要有控件 -->
    <audio loop controls>
        <source src="music/吕大叶,马子林,陈觅Lynne - 篝火旁.mp3" >
    </audio>

显示效果如下：

3.source标签

因为IE8以下的浏览器不支持<video>与<audio>标签，所以用source

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

5.其他常用新标签

1.文本格式化标签

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

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

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

  <!-- time 标记时间 -->
    <p>发表文章</p>

    <time>发布时间:2023年7月18日</time>
    <!-- mark 会像马克笔标记一样给文本添加背景色 -->
    <mark>给文本设置背景色</mark>
    <!-- ruby 搭配rt 使用 可以给文字加拼音 -->
    <ruby>你是谁<rt> ni shi shei</rt></ruby><br>

显示效果如下：

2.度量条Meter

属性名	属性作用
value	规定计量条当前默认显示值
max	规定范围的最大值,默认值为
min	规定范围的最小值,默认值为0
low	规定被视作低的标准
high	规定被视作高标准
form	规定所属的一个或多个表单
optimum	定义度量条的最佳标准值，最佳必须在低和高之间

  <!-- 度量条meter -->
    下载进度：
    <meter min="0" max="100" value="50" low="30" high="80" ></meter>
    <meter min="0" max="100" value="20" low="30" high="80" ></meter>
    <meter min="0" max="100" value="90" low="30" high="80" ></meter>

显示效果如下：

3.进度条progress

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

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

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

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

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

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

    <!-- 进度条 progress  设置百分比无效-->
    <progress value="60" max="100" ></progress>
    <progress value="30" max="100" ></progress>
    <progress value="80" max="100" ></progress>
    <br>

显示效果如下;

4.详情标签

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

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

标题时,会显示details中的内容。

details元素的属性:

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

 <!-- 详情标签 details 搭配summary(标题)只在details中是标题 -->
    <details>
        <summary>我是标题</summary>
        我是内容
    </details>

显示效果如下：