HTML5新特性

我的HTML简陋笔记(3)

1.语义化块级元素:

解释:根据语义来创建的新的标签

标签名 解释 属性
header 头部标签 块级
nav 导航栏标签 块级
section 某个区域 块级
aside 侧边栏标签 块级
footer 尾部标签 块级

这些标签更能一眼看出此标签是什么作用,当然 因为是新特性,要注意兼容问题

使用代码如下:


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
    style>
head>
<body>
    <header>头部标签header>
    <nav>导航栏标签nav>
    <section>某个区域section>
    <aside>侧边栏标签aside>
    <footer>尾部标签footer>
body>
html>

2.视频标签:

视频标签使用:video
此标签可以适应当前绝大多数后缀格式的视频:
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
video有以下几种属性:

属性 解释
src URL 要播放的视频所在的URL(路径)
autoplay autoplay 当添加此值之后,视频就绪自动播放(Chrome浏览器需要添加muted来解决自动播放问题)
muted muted 静音,只有添加了此值,Chrome浏览器才会相应autoplay,才会自动播放
controls controls 添加可以暂停,设置进度,放大缩小的按钮控件
loop loop 浏览器默认的是只播放一次,添加此值之后就会重复播放视频
poster 路径 此值是添加图片,再视频未加载出来的时候在窗口设置一张加载的图片。
preload auto(预先加载视频) none(不应加载视频) 规定是否预加载视频(如果有了autoplay,就忽略该属性)
width pixels(像素) 设置播放器宽度
height pixels 设置播放器高度

使用代码如下:


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        video {
      
            width: 100%;
        }
    style>
head>
<body>
    
    
    <video src="index_08.mp4" autoplay="autoplay"  controls="controls" loop="loop" poster="../images/yzfc.jpg">video>
body>
html>

3.音频标签:

属性 解释
src url 要播放的音频的URL(路径)
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
loop loop 如果出现该属性,则每当音频结束时重新开始播放

HTML5浏览器和音频格式兼容性如下:

HTML5新特性_第1张图片
使用代码如下:


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    
    <audio src="" autoplay="autoplay" controls="controls" loop="loop">audio>
body>
html>

3.新增的input类型:

属性值(type=“值”) 说明
email 限制用户输入必须为Email类型
url 限制用户输入必须为URL类型
date 限制用户输入必须为日期类型
time 限制用户输入必须为时间类型
month 限制用户输入必须为月类型
week 限制用户输入必须为周类型
number 限制用户输入必须为数字类型
tel 限制用户输入必须为手机号码
search 搜索框
color 生成一个颜色选择表单

使用代码如下:


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <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>

可复制进入尝试。


4.新增表单属性:

属性 说明
required required 表单拥有该属性表示其内容不能为空,必填
placeholder 提示文本 表单的提示信息,存在默认值将不会显示
autofocus autofocus 自动聚焦属性,页面加载完成自动聚焦到指定表单
autocomplete off/on 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 默认已经打开,如autocomplete=“on” ,关闭用 autocomplete=“off” 需要放在表单内,同时加上name属性,同时成功提交
mutiple mutiple 可以多选文件提交

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        可以通过::来改里面的元素设置
        input::placeholder {
      
            color: pink;
        }
    style>
head>
<body>
    <form action="">
        
        
        <input type="text" name="sear" id="" required placeholder="pink老师" autofocus="autofocus" autocomplete="off">
        
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" name="" id="">
    form>
body>
html>

以上为代码案例,复制修改尝试即可。

太难了~~

你可能感兴趣的:(前端学习,html)