004 HTML5新增属性

阿立同学
156 阅读2分钟

HTML5新增语义化标签

  1. <header></header> 页眉
  2. <footer></footer> 页脚
  3. <nav></nav> 导航
  4. <article></article> 文档中独立的内容
  5. <section></section> 页面内容的章节
  6. <aside></aside> 侧边栏
  7. ``` 标题组
  8. <figure></figure> 设置独立的流内容
  9. <mark></mark> 定义有记号的文本
  10. <time></time>时间

完整案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- 整个文档的头部或者某个区块的头部   通常可以用来包含logo 搜索框 标题-->
<header>这里是头部区</header>

<!--整个文档的底部或者某个区块的底部  如包含友情链接、版权等  -->
<footer>这里是页脚区</footer>

<!--导航(链接组)   如：主导航、页内导航、分页-->
<nav>
    <a>首页</a>
    <a>关于我们</a>
    <a>联系我们</a>
</nav>


<!-- 独立完整的内容   如：文章（博文） 一条完整的评论、回复-->
<article>这里是一个有完整含义的内容区</article>

<!--  文档中的区块、节   如：章节 通常包含一个标题 标签 -->
<section>
    <h2>标题一</h2>
    <p>内容区域</p>
</section>
<section>
    <h2>标题二</h2>
    <p>内容区域</p>
</section>

<!--侧边栏  与文档或某个区块相关的附属信息 -->
<aside>这里是侧边栏</aside>

<!-- 可以为标题或者子标题进行分组，通常与h1-h6组合使用 -->
<hgroup>
    <h1>主标题</h1>
    <h2>副标题</h2>
</hgroup>

<!-- 被主体内容所引用的相对独立完整的内容  例：文章页引用的图片、图表、代码块 -->
<figure>
    <figcaption>figure的标题</figcaption>
</figure>

<!--  标记 默认黄色背景 -->
<p>今天天气<mark>晴朗</mark></p>

<!-- 日期时间  -->
<p>现在是上午<time>10:37</time></p>

</body>
</html>

新增多媒体标签

1. <audio> </audio>音频

属性：

​ src 要播放的音频的URL

​ controls 显示播放控件

​ loop 循环播放

​ muted 静音

audio允许使用source引入多个资源路径，默认播放浏览器可识别的第一个格式

source 媒介元素，可以链接不同的文件，浏览器使用第一个可识别的格式

<audio controls muted loop>
      <source src="videoAudio/biubiubiu.ogg" type="audio/ogg">
      <source src="videoAudio/hanmai.mp3" type="audio/mpeg">
        您的浏览器不支持audio元素播放音频
</audio>

2. <video> </video> 视频

属性：

​ src 要播放的视频的URL

​ controls 显示播放控件

​ loop 循环播放

​ muted 静音

​ height 播放器的高度

​ width 播放器的宽度

​ poster 预览图片

video允许使用source引入多个资源路径，默认播放浏览器可识别的第一个格式

​ source 媒介元素，可以链接不同的文件，浏览器使用第一个可识别的格式

<video controls width="400" poster="pic.png">
      <source src="videoAudio/butterfly.ogg" type="video/ogg">
      <source src="videoAudio/movie.mp4" type="video/mp4">
        您的浏览器不支持video元素播放视频
</video>

新增表单元素

  1. <input type="url" name="userurl"/> 网址
  2. <input type="email" name="usere"/> 邮件
  3. <input type="search"/> 搜索
  4. <input type="tel"/> 电话
  5. <input type="number" value="10" min="0" max="20" step="2"/> 数值输入域
  6. <input type="range" value="5" min="1" max="10" step="1"/>滑块
  7. <input type="color" /> 取色器
<form action="#">
    <!-- url输入域
              提交时默认进行格式验证，输入不合法弹出提示且无法提交；移动端：.com 键盘变化-->
    <input type="url" name="userurl"/>

    <!--email域
              提交时默认进行格式验证，输入不合法弹出提示且无法提交；移动端：@ 键盘变化 -->
    <input type="email" name="usere"/>

    <input type="search"/><!--搜索域-->

    <!--电话号码输入域  移动端：数字键盘变化 -->
    <input type="tel"/>

    <!--数值输入域
              value 初始值
              min最小值
              max最大值
              step步长（合法输入间隔）
      -->
    <input type="number" value="10" min="0" max="20" step="2"/>

    <!-- 一定范围内的数值输入域（滑块）  -->
    <input type="range" value="5" min="1" max="10" step="1"/>

    <input type="color" /><!--取色器-->

    <input type="submit">
</form>

日期、时间

<form action="#">
    <!--时间日期选择器-->
    <input type="date"/><br/><br/>

    <!-- 手动输入一个日期和时间-->
    <input type="datetime"/><br/><br/>

    <!--本地时间：选择年、月、日、 小时、分钟-->
    <input type="datetime-local"/><br/><br/>

    <!--选择年、月-->
    <input type="month"/><br/><br/>

    <!--选择 小时、分钟-->
    <input type="time"/><br/><br/>
    <!--选择年、周-->
    <input type="week"/><br/><br/>

    <!-- 选项列表-->
    <input id="myCar" list="cars"/>  <!--通过list的值跟datalist的id匹配数据列表-->
    <datalist id="cars">
        <option value="WEB"></option>
        <option value="ASD"></option>
    </datalist>
</form>

表单相关属性

  1. <input type="text" placeholder="请您输入">

    placeholder 输入提示占位符

  2. <input type="text" name="usere" autocomplete="on"/>

    autocomplete="on/off" 开启 用户输入时显示选项列表,提交后有历史记录

  3. <input type="text" autofocus>

    autofocus 自动获取焦点（页面加载完成后，指定某个表单元素处于获取焦点状态）

  4. form id

    <!--
form  规定表单元素所归属的表单
form="form标签的id"

-->
<form action="#" id="form1">
	<input type="text" name="username"/>
</form>

<input type="reset" form="form1">

  5. <datalist></datalist>

    <form action="#">
    <input type="url" list="urlList" name="weblink">
    <datalist id="urlList">
        <option label="百度" value="http://www.baidu.com"></option>
        <option label="新浪" value="http://www.sina.com"></option>
        <option label="搜狐" value="http://www.sohu.com"></option>
    </datalist>
</form>

  6. <input type="file" multiple/>

    mutiple 允许选择多个文件

  7. <input type="text" name="usere" pattern="[0-9]"/>表单值验证

    pattern 模式验证（正则验证）， 提交时进行表单验证

    ​ pattern="[0-9]" //只允许输入0-9的数字

  8. Name: <input type="text" name="username" required/>

    required 不能为空，提交时进行表单验证，不能为空

HTML5兼容问题

对于IE9以下的浏览器，我们可以使用谷歌的一个插件：html5shiv.js

image-20200722233827173

也可以用js生成dom解决，不过比较麻烦，不推荐。

image-20200722233954563

avatar
文章
阅读
粉丝