一、html5 标签

1. 语义标签

header : 头部标签

<nav> : 导航标签

<article> : 内容标签

<section> : 定义文档某个区域

<aside> : 侧边栏标签

<footer> : 尾部标签

注意：

  • 这种语义化标准主要是针对 搜索引擎 的
  • 这些标签可以多次使用
  • 在 ie9 中，需要把这些标签转换为块级元素

2. 多媒体标签

<audio> ：音频标签， 尽可能使用 mp3 格式的文件

<video> ： 视频标签，尽可能使用 mp4 格式的文件

1. 视频标签（video）

标签 描述
video 定义一个视频
source 定义多种媒体资源
track 定义在媒体播放器文本轨迹 
  1. /* 解决兼容性问题 */
  2. <video width="320" height="240" controls>
  3.   <source src="movie.mp4" type="video/mp4">
  4.   <source src="movie.ogg" type="video/ogg">
  5.   您的浏览器不支持Video标签。
  6. </video>

常见属性：

属性 值 说明
autoplay autoplay 视频就绪自动播放（google需要添加 muted 来解决）
controls controls 向用户显示播放控件
width px 播放器宽度
height px 播放器高度
loop loop 是否循环播放
preload auto（预加载）、none（不预加载） 是否预加载（如果有 autoplay 可忽略）
src url 视频地址
poster imgurl 加载等待图片
muted muted 静音播放 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增视频标签</title>
    <style>
        video {
            width: 100%;
        }
    </style>
</head>
<body>
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>
</body>
</html>

2. 音频标签（audio）

标签 描述
audio 定义声音内容
source 规定类多种媒体资源

常见属性：

属性 值 描述
autoplay autoplay 音频在就绪后马上播放
controls controls 显示控件
loop loop 循环播放
src url 音频地址

3. input 表单

新增 input 类型

属性值 说明
type=”email” email类型
type=”url” url类型
type=”date” 日期类型
type=”time” 时间类型
type=”month” 月类型
type=”week” 周类型
type=”number” 数字类型
type=”tel” 手机号码
type=”search” 搜索框
type=”color” 生成颜色选择表单 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱: <input type="email" /></li>
            <li>网址: <input type="url" /></li>
            <li>日期: <input type="date" /></li>
            <li>时间: <input type="time" /></li>
            <li>数量: <input type="number" /></li>
            <li>手机号码: <input type="tel" /></li>
            <li>搜索: <input type="search" /></li>
            <li>颜色: <input type="color" /></li>
            <!-- 当我们点击提交按钮就可以验证表单了 -->
            <li> <input type="submit" value="提交"></li>
        </ul>
    </form>
</body>

</html>

表单属性

属性 值 说明
required required 必填
placeholder 提示文本 提示信息
autofocus autofocus 自动聚焦，页面加载完成自动聚焦到指定表单
autocomplete off/on 历史输入提示，默认打开 on，关闭值为 off
multiple multiple 多选文件提交 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
    <style>
        input::placeholder {
            color: pink;
        }
    </style>
</head>
<body>
    <form action="">
            <input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocomplete="off">
            <input type="file" name="" id="" multiple="multiple">
            <input type="submit" value="提交">
    </form>

</body>
</html>

二、 ico 图标制作

将一下代码放到 hand 中

<link rel="shortcut icon" href="favicon.ico" />

ico 图标制作网站 ： https://www.bitbug.net/

将制作好的图片放到 项目 根目录中， 文件名为 favicon.ico