08-HTML5新标签与特性

孟嘉歆
2023-12-01

文档类型设定和字符设定

文档类型设定

<!DOCTYPE html>

字符设定

<!-- HTML与XHTML中建议这样去写 -->
<meta http-equiv="charset" content="utf-8">

<!-- HTML5的标签中建议这样去写 -->
<meta charset="utf-8">

H5常用的新标签

结构标签

  • header:定义文档的页眉、头部
  • nav:定义导航链接的部分
  • footer:定义文档或节的页脚、底部
  • article:定义文章
  • section:定义文档中的节(section、区段)
  • aside:定义其所处内容之外的内容、侧边
<body>
    <header>语义:定义页面的头部、页眉</header>
    <nav>语义:定义导航栏</nav>
    <footer>语义:定义页面底部、页脚</footer>
    <article>语义:定义文章</article>
    <section>语义:定义区域(文章中的节)</section>
    <aside>语义:侧边(定义其所处内容之外的内容)</aside>
</body>

datalist

  该标签用来定义选项列表,该元素需要和input元素配合使用:

<body>
    <input type="text" value="选择你喜欢的运动"
    list="sports">
    <datalist id="sports">
        <option>篮球</option>
        <option>足球</option>
    </datalist>
</body>

fieldset

  该元素可以将表单内的相关元素分组、打包,需要与legend搭配使用:

<body>
    <fieldset>
        <legend>用户登陆</legend>
        用户名:<input type="text"><br>
        密&nbsp;码:<input type="password">
    </fieldset>
</body>

新增的input type属性值

类型使用示例含义
email<input type=“email”>输入邮箱格式
tel<input type=“tel”>输入手机号码格式
url<input type=“url”>输入url格式
number<input type=“number”>输入数字格式
search<input type=“search”>搜索框(体现语义化)
range<input type=“range”>7自由拖动滑块
time<input type=“time”>小时分钟
date<input type=“date”>年月日
datetime<input type=“datetime”>时间
month<input type=“month”>月年
week<input type=“week”>星期 年
color<input type=“color”>选择颜色
<body>
    <fieldset>
        <legend>HTML5新增type类型</legend>
        <form action="#">
            email:<input type="email"><br>
            tel:<input type="tel"><br>
            url:<input type="url"><br>
            number:<input type="number"><br>
            search:<input type="search"><br>
            range:<input type="range"><br>
            time:<input type="time"><br>
            datetime:<input type="datetime"><br>
            date:<input type="date"><br>
            month:<input type="month"><br>
            week:<input type="week"><br>
            color:<input type="color"><br>
            <input type="submit" value="提交">
        </form>
    </fieldset>
</body>

在手机端的显示效果更为明显,比如:type为number的时候,手机上会弹出数字键盘

常用新属性

属性用法含义
placeholder<input type=“text” placeholder=“请输入用户名”>占位符当用户输入的时候里面的文字消失,删除所有文字自动返回提示信息
autofocus<input type=“text” autofocus>规定当页面加载时input元素应该自动获得焦点
multiple<input type=“file” multiple>多文件上传
autocomplete<input type=“text” autocomplete=“off”>规定表单是否应该启用自动完成功能,有2个值:on、off。on代表记录已经输入的值
1.autocomplete 首先需要提交按钮
2.这个表单必须给他名字(name属性)
required<input type=“text” required>必填项内容不能为空
accesskey<input type=“text” accesskey=“s”>规定激活(使元素获得焦点)元素的快捷键 采用 alt + s的形式
<body>
    <form action="#">
        <!-- placeholder 占位符 -->
        <!-- autofocus 自动获取焦点 -->
        <!-- autocomplete自动完成 -->
        <!-- required 必须填 -->
        用户名:<input type="text" 
        placeholder="请输入你的用户名"
        autofocus
        autocomplete="on"
        required name="username"> <br>

        <!-- 快捷键获取焦点  alt + s-->
        姓名:<input type="text" accesskey="s"><br>

        <!-- 多文件上传 -->
        文件上传:<input type="file" multiple><br>
        <input type="submit" value="提交">
    </form>
</body>

多媒体标签

  • embed:标签定义嵌入的内容
  • audio:播放音频
  • video:播放视频

多媒体embed

  embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。

注意: 因为兼容性问题,这里只演示插入网络视频,后面H5会用 audio 和video 视频多媒体。

  1. 将视频上传到优酷、土豆等网页,或者直接找一个视频
  2. 打开视频,点击分享,然后复制html的分享
  3. 粘贴到自己的网页中
<!-- 06-embend -->
<body>
    <embed src="//player.video.iqiyi.com/0a428688c3d38aed4630240961646a29/0/0/v_19rxjk5zus.swf-albumId=13397439400-tvId=13397439400-isPurchase=0-cnId=undefined" 
    allowFullScreen="true" 
    quality="high" 
    width="480" 
    height="350" 
    align="middle" 
    allowScriptAccess="always" 
    type="application/x-shockwave-flash">
    </embed>
</body>

多媒体 audio

  HTML5通过<audio>标签来解决音频播放的问题。使用相当简单,如下所示:

<audio src="路径"></audio>

  并且可以通过附加属性可以更友好控制音频的播放,如:

  • autoplay:自动播放
  • controls:是否显不默认播放控件
  • loop:循环播放,“loop = 2” 就是循环2次,“loop” 或者"loop = -1"是无限循环

  由于版权等原因,不同的浏览器可支持播放的格式是不一样的,多浏览器支持的方案如下:

<body>
    <audio controls autoplay loop="-1">
        <source src="./assets/bgsound.mp3">
        <source src="./assets/music.ogg">
        您的浏览器不支持HTML音频播放功能
      </audio>
</body>

  浏览器会依次读取source的文件,直到浏览器支持为止,如果都不支持,则显示最下面的提示文字。

多媒体 video

  HTML5通过<audio>标签来解决音频播放的问题。同音频播放一样,<video>使用也相当简单,如下:

<video src="./movie.mp4" controls="controls"></video>

  同样,通过附加属性可以更友好的控制视频的播放:

  • autoplay:自动播放
  • controls:是否显示默认播放控件
  • loop:循环播放
  • width:设置播放窗口宽度
  • height:设置播放窗口的高度

  由于版权等原因,不同的浏览器可支持播放的格式是不一样的,多浏览器支持的方案,如下:

<video>
<source src="./movie.ogg">
<source src="./movie.mp4">
您的浏览器不支持HTML视频的播放
</video>
 类似资料: