前端学习——HTML5

前端学习——HTML5_第1张图片

新增语义化标签

新增布局标签前端学习——HTML5_第2张图片

DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
head>
<body>
    
    <header>
        <h1>尚品汇h1>
    header>
    <hr>
    
    <nav>
        <a href="#">首页a>
        <a href="#">订单a>
        <a href="#">购物车a>
        <a href="#">我的a>
    nav>
    
    <div class="page-content">
        
        <aside style="float:right;">
            <nav>
                <ul>
                    <li><a href="#">秒杀专区a>li>
                    <li><a href="#">会员专区a>li>
                    <li><a href="#">品牌专区a>li>
                    <li><a href="#">优惠专区a>li>
                ul>
            nav>
        aside>
        
        <article>
            <h2>《如何一夜暴富》h2>
            <section>
                <h3>第一种方式:白日梦h3>
                <p>你应该......p>
            section>
            <section>
                <h3>第二种方式:白日梦h3>
                <p>你应该......p>
            section>
            <section>
                <h3>第三种方式:白日梦h3>
                <p>你应该......p>
            section>
        article>
    div>
    <hr>
    <footer>
        <nav>
            <a href="#">友情链接a>
            <a href="#">友情链接a>
            <a href="#">友情链接a>
            <a href="#">友情链接a>
        nav>
    footer>
body>
html>

前端学习——HTML5_第3张图片

新增状态标签

前端学习——HTML5_第4张图片

DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
    <style>
        progress {
            width: 50px;
        }
    style>
head>
<body>
    <span>手机电量:span>
    <meter max="100" min="0" value="5" low="10" high="20" optimum="90">meter>
    <br>
    <span>当前进度:span>
    <progress max="100" value="80">progress>
body>
html>

前端学习——HTML5_第5张图片

新增列表标签

前端学习——HTML5_第6张图片

DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
head>
<body>
    <form action="#">
        <input type="text" list="mydata">
        <button>搜索button>
    form>
    <datalist id="mydata">
        <option value="周杰伦">周杰伦option>
        <option value="周冬雨">周冬雨option>
        <option value="马冬梅">马冬梅option>
        <option value="温兆伦">温兆伦option>
    datalist>
    <details>
        <summary>如何一夜暴富?summary>
        <p>好好学习,天天上线p>
    details>
body>
html>

前端学习——HTML5_第7张图片
前端学习——HTML5_第8张图片

新增文本标签

前端学习——HTML5_第9张图片

DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
head>
<body>
    <ruby>
        <span>魑魅魍魉span>
        <rt>chī mèi wǎng liǎngrt>
    ruby>
    <hr>
    <ruby>
        <span>span>
        <rt>chīrt>
    ruby>
    <hr>
    <p>Lorem ipsum <mark>dolormark> sit amet consectetur adipisicing elit. Tenetur impedit quasi, minima ullam sequi quaerat veniam fugiat distinctio. Iure temporibus laborum earum tenetur suscipit odit ad excepturi ut eaque ab!p>
body>
html>

前端学习——HTML5_第10张图片

表单相关新增

新增表单控件属性

前端学习——HTML5_第11张图片

DOCTYPE html>
<html lang="zh-CN">

<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>Documenttitle>
head>

<body>
    <form action="">
        账号:<input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}">
        <br>
        密码:<input type="password" name="pwd" placeholder="请输入密码" required pattern="\w{6}">
        <br>
        性别:
        <input type="radio" value="mail" name="gender" required><input type="radio" value="femail" name="gender" required><br>
        爱好:
        <input type="checkbox" value="book" name="hobby">读书
        <input type="checkbox" value="music" name="hobby" required>音乐
        <input type="checkbox" value="movie" name="hobby">电影
        <br>
        其他:<textarea name="other" required>textarea>
        <br>
        <button>提交button>
    form>
body>

html>

前端学习——HTML5_第12张图片

input新增type属性值

前端学习——HTML5_第13张图片

DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
head>
<body>
    <form action="" novalidate>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <br>
        
        <button>提交button>
    form>
body>
html>

新增多媒体标签

新增视频标签

前端学习——HTML5_第14张图片

DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
    <style>
        video {
            width: 600px;
        }
    style>
head>
<body>
    <video src="./资料/resource/小电影.mp4" controls muted loop poster="./资料/封面.png" preload="auto">video>
body>
html>

前端学习——HTML5_第15张图片

新增音频标签

前端学习——HTML5_第16张图片

DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
    <style>
        audio {
            width: 600px;
            border: 1px solid skyblue;
        }
    style>
head>
<body>
    <audio src="./资料/小曲.mp3" controls muted loop preload="auto">audio>
body>
html>
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
    <style>
        audio {
            width: 600px;
        }
        .mask {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.727);
        }
        .dialog {
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: green;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            font-size: 40px;
            text-align: center;
            line-height: 400px;
        }
        span {
            border: 1px solid white;
            color: white;
            cursor: pointer;
        }
    style>
head>
<body>
    <audio id="music" src="./资料/小曲.mp3" controls>audio>
    <div class="mask" id="mask">
        <div class="dialog">
            <span>点我登陆span>
            <span onclick="go()">随便听听span>
        div>
    div>

    <script>
        function go(){
            music.play()
            mask.style.display = 'none'
        }
    script>
body>
html>

前端学习——HTML5_第17张图片

新增全局属性

前端学习——HTML5_第18张图片

兼容性处理

前端学习——HTML5_第19张图片

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