HTML5总结与案例

heyunh

已于 2022-04-15 21:12:06 修改

阅读量1.6k

点赞数 2

文章标签：前端 html5

于 2022-04-15 20:56:23 首次发布

本文链接：https://blog.youkuaiyun.com/Miratowa_/article/details/124191311

版权

本文介绍了HTML5的新特性，包括语义标签、音视频标签、新增input类型及表单属性。通过注册页面、报名页面和导航案例，展示了HTML5在实际应用中的结构搭建。HTML5的audio和video标签简化了多媒体的嵌入，新增的input类型丰富了表单功能。文章强调HTML作为网页结构核心的重要性，并预告下节将总结CSS基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

HTML5简介

HTML5简介

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

HTML5新元素与属性

1.语义标签

header元素描述了文档的头部区域
nav元素定义导航链接的部分
article元素定义独立的内容
section元素定义文档中的段落
aside元素定义页面主区域内容之外的内容（比如侧边栏）
footer元素描述了文档的底部区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <div><article>artical
        <section>section</section>
    </article>
    <aside>aside</aside></div>
    <footer>footer</footer>
</body>
</html>

定义样式后呈现一下基本结构 （图中尖括号请忽略）
由语义标签搭建的基本html结构

2.音视频标签

HTML5 规定了在网页上嵌入音频元素的标准，即使用元素，和一种通过 video 元素来包含视频的标准方法。

- audio标签--------音频标签

1.如需在 HTML5 中播放音频，可使用以下代码：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

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

2.元素支持三种音频格式文件: MP3, Wav, 和 Ogg
3.audio标签的属性：

①autoplay(=autoplay)--------如果出现该属性，则音频在就绪后马上播放。
②loop(=loop)----------如果出现该属性，则每当音频结束时重新开始播放。
③muted(=muted)---------如果出现该属性，则音频输出为静音。
④load----------规定是否预加载音频。
       可能的值：
          auto - 当页面加载后载入整个音频
          meta - 当页面加载后只载入元数据
          none - 当页面加载后不载入音频
⑤src(=url)-----------规定音频文件的 URL。

- video 标签---------视频标签

1.如需在 HTML5 中播放视频，可使用以下代码：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

2. 元素支持三种视频格式：MP4, WebM, 和 Ogg
3.audio标签的属性：

①height和width----------设置视频播放器的高度和宽度
②autoplay\ muted\ loop\ controls-------和音频使用方式一样
③poster(=url)-------规定视频正在下载时显示的图像，直到用户点击播放按钮。
④preload-------如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
       可能的值：
          auto - 指示一旦页面加载，则开始加载音频/视频。
          metadate- 指示当页面加载后仅加载音频/视频的元数据。
          none - 指示页面加载后不应加载视频

3.新增input类型

从拾色器中选择一个颜色(type=“color”):

<input type="color" name=" ">

定义一个时间控制器(type=date):

<input type="date" name=" ">

定义一个日期和时间控制器（本地时间）(type=“datetime”):

<input type="datetime" name=" ">

定义一个email选择器( type=“email”):

<input type="email" name="email">

选择一个月份(type=“month”)

<input type="month" name=" ">

定义一个数值输入域(type=“number”)

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

数字类型的属性
①max和min-------规定数字段的最大值和最小值
②maxlength-------规定输入字段的最大字符长度
③required-------规定输入字段的值是必需的
④step-------规定输入字段的合法数字间隔
⑤value-------规定输入字段的默认值

显示滑动条(type=“range”)

<input type="range" name="points" min="1" max="10">

定义一个搜索框(type=“search”)

<input type="search" name=" ">

定义输入电话号码字段(type=“tel”)

<input type="tel" name=" ">

选择一个时间(小时加分钟)(type=“time”)

<input type="time" name=" ">

选择周和年(type=“week”)

<input type="week" name=" ">

3.新增表单属性

属性	值	解释
required	required	规定必需在提交表单之前填写输入字段
placeholder	提示文本	表单的提示信息
multiple	multiple	允许用户输入多个值
autofocus	autofocus	在当前页面自动获得焦点
autocomplete	on/off	规定元素输入字段是否应该启用自动完成功能
step	number	规定合法数字间隔

HTML案例

1. 注册页面案例

(来自b站pink老师,视频请转往b站黑马程序员pink老师前端入门教程)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <form>
        <table >
            <!-- name要一样（元素名称），id不一样（元素地址） -->
            <tr><td>性别</td><td><input type="radio" name="sex" id="man" ><label for="man">男</label>
        <input type="radio" name="sex" id="woman"><label for="woman">女</label></td></tr>
        <tr><td>生日</td><td>
        <select >
            <option selected="selected">--请选择年--</option>
            <option >2001</option> <option >2000</option> <option >1999</option>
            <option >1998</option> <option >1997</option> <option >1996</option>
            <option >1995</option> <option >1994</option> <option >1993</option>
        </select>
        <select>
            <option selected="selected">--请选择月</option>
            <option>12</option> <option>11</option> <option>10</option>
            <option>9</option> <option>8

最低0.47元/天解锁文章