HTML5

最新推荐文章于 2024-09-02 07:00:00 发布

slom_fxt

最新推荐文章于 2024-09-02 07:00:00 发布

阅读量128

点赞数 1

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/slom_fxt/article/details/120368574

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、HTML5

HTML5是HTML最新的修订版本.

HTML5的设计目的是为了在移动设备上支持多媒体。

较上一个版本新元素新增了

新元素、新属性、完全支持CSS3 、Video 和 Audio 、2D/3D 制图、本地存储、

本地 SQL 数据、Web 应用

二、HTML5中移除元素

<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>

三、新增元素

1.语义元素

<header> / <nav> / <section> / <article> / <aside> / <figcaption> / <figure> / <footer>

语义元素：一个语义元素能够清楚的描述其意义给浏览器和开发者。<table>

无语义元素实例: <div> 和 <span>

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header> / <nav> / <section> / <article> / <aside> / <figcaption> / <figure> / <footer>

<header>元素描述了文档的头部区域【<div id=”header”>】

<nav> 标签定义导航链接的部分【<div id=”nav”>】

<article> 标签定义独立的内容。【<div id=”article”>】

<aside>标签定义页面主区域内容之外的内容（比如侧边栏）【<div id=”aside”>】

<section> 标签定义文档中的节（section、区段）【<div id=”section”>】

<figcaption> 标签定义 <figure> 元素的标题.

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<footer>元素描述了文档的底部区域.【<div id=”footer”>】

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>语义元素</title>
        <style>
            header,nav,aside,article,section,figcaption,figure,footer{
                border: 1px solid red;
            }
            aside{
                width: 30%;
                height: 400px;
                float: left;
                position: absolute;
            }
            article{
                height: 400px;
                width: 68%;
                position: absolute;
                left: 400px;
            }
            footer{
                position: absolute;
                width: 100%;
                top: 570px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>header--页面头部区域</h1>
        </header>
        <nav>
            <h2>nav--标签定义导航链接的部分</h2>
        </nav>
        <aside>
            <h4>aside--标签定义页面主区域内容外的区域（例如侧边栏）</h4>
        </aside>
        <article>
            <h3>article--标签定义独立的内容</h3>
            <section>
                <h4>section--标签定义网页中节（section、区段）</h4>
                <figure>
                    <figcaption><b>figcaption--定义figure元素的标题</b></figcaption>
                    <img src="../../CSS基础/CSS基础（3）/imgs/avatar2.png" width="30px">
                    标签规定独立的流内容（图像、图表、照片、代码等）
                </figure>
            </section>
            <section>
                <h4>section--标签定义网页中节（section、区段）</h4>
                <figure>
                    <figcaption><b>figcaption--定义figure元素的标题</b></figcaption>
                    <img src="../../CSS基础/CSS基础（3）/imgs/avatar2.png" width="30px">
                    标签规定独立的流内容（图像、图表、照片、代码等）
                </figure>
            </section>
        </article>
        <footer>
            <h4>footer--元素描述文档的底部区域</h4>
        </footer>

    </body>
</html>

2.新的表单元素

Input 类型: number ,range,week,

<datalist> 定义输入控件的预定义选项。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新的表单元素</title>
        <style>
        </style>
    </head>
    <body>
         <h4>只能输入数字，不能输入其他字符</h4>
        <h4>max---数字最大值</h4>
        <h4>min---数字最小值</h4>
        <h4>step---数字间隔值</h4>
        数字：<input type="number" min="0" max="10" step="2">
        <h4>max---数字最大值</h4>
        <h4>min---数字最小值</h4>
        <h4>step---数字间隔值</h4>
        滑动条：<input type="range" max="10" min="0" step="2"><br>
        选择周：<input type="week" name="year_week"><br>
        <h4>datalist定义输入控件的预定义选项</h4>
        选择科目：<input list="browsers" name="browser">
        <datalist id="browsers">
            <option value="数学"></option>
            <option value="语文"></option>
            <option value="英语"></option>
        </datalist> 
    </body>
</html>

3.其他元素

<details> 用于描述文档或文档某个部分的细节

<summary> 标签包含 details 元素的标题

<dialog> 定义对话框，比如提示框

<progress> 定义任何类型的任务的进度。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>其他元素</title>
        <style>
        </style>
        <script>
            //获取进度条开始按钮的函数
            function runprogress(){
                var num=0;
                //得到进度条
                var progress1 = document.getElementById("progress1");
                setInterval(function(){
                    num++;
                    progress1.value=num;
                },300)
            }
        </script>
    </head>
    <body>
        <h4>details 用于描述文档或文档某个部分的细节</h4>
        <h4>summary标签包含 details 元素的标题 </h4>
        <h4>open属性--规定 details 是否可见。默认是不可见需要自己点击后在网页可见</h4>
        <details>
            <summary>details元素的标题</summary>
            <p>用于描述文档或文档某个部分的细节</p>
        </details>
        <h4>open属性--规定 dialog 是否可见。默认不可见</h4>
        <h4>dialog--定义对话框，比如提示框</h4>
        <h4>open属性--规定 dialog 是否可见。</h4>
        <dialog open="open">
            <p>我的对话框</p>
        </dialog>
        <h4><mark>mark</mark>带有标记的文本</h4>
        <h4>progress定义任何类型的进度条</h4>
        <input id="but1" type="button" value="开始" onclick="runprogress()">
        <progress id="progress1" value="30" max="100"></progress>
    </body>
</html>

4.多媒体元素

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多媒体元素video/audio</title>
        <style>
        </style>
    </head>
    <body>
        <h4>HTML5 规定了一种通过 video 元素来包含视频的标准方法</h4>
        <h4>controls---控制器</h4>
        <h4>width和height---设置播放大小</h4>
        <h4>video元素支持三种视频格式： MP4, WebM, 和 Ogg。</h4>
        <video controls width="300px">
            <source src="../视频/录像1_转.mp4"></source>
        </video>
        h4>HTML5 规定了在网页上嵌入音频元素的标准，即使用 audio元素</h4>
        <h4>controls--设置控制器</h4>
        <h4>source--子元素表示被播放的音频资源</h4>
        <h4>src--音频资源路径</h4>
        <h4>type--文件类型</h4>
        <h4>audio元素支持三种音频格式文件: MP3, Wav, 和 Ogg。</h4>
        <h4>autoplay--设置自动播放</h4>
        <h4>loop--设置循环播放</h4>
        <audio controls="controls" autoplay="autoplay" loop="4">
            <source src="res/zijinghuayuan.mp3" type="audio/mp3"></source> 
        </audio>
    </body>
</html>

5.2D/3D 制图 <canvas>

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2D/3D制图工具</title>
        <script>
            function testcanvas(){
                //得到当前需要使用的canvas元素对象
                var c= document.getElementById("myCanvas");
                //创建 context 对象
                var ctx=c.getContext("2d");
                //绘制颜色
                ctx.fillStyle="red";
                //创建绘制图形
                //fillRect(0,0,150,75)
                //参数1---x轴坐标
                //参数2---y轴坐标
                //参数3---图形长度
                //参数4---图形宽度 
                ctx.fillRect(8,8,150,75);
            }
        </script>
    </head>
    <body>
        <input id="but1" type="button" value="绘制图形" onclick="testcanvas()">
        <canvas width="200px" height="200px" id="myCanvas" style="border:1px solid black"></canvas>
    </body>
</html>

6.新增表单属性

autocomplete，novalidate，autofocus，multiple，pattern (regexp)，placeholder，required

例如：size表示设置下拉菜单的大小，变小带有轮动条

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单新增元素</title>
        
    </head>
    <body>
        <h5>autocomplete--属性规定from或input域应该拥有自动完成功能</h5>
        <h5>novalidate--属性规定在提交表单时不应该验证from或input域</h5>
        <h5>autofocus--属性规定在页面加载时，域自动获得焦点</h5>
        <h5>target--属性指定一个名称或一个关键词来指明表单数据接收后的展示<br>
        属性与type="submit"和type="image"配合使用</h5>
        <h5>multipe--选择多个内容</h5>
        <h5>pattern--属性描述了一个正则表达式用于验证input元素的值</h5>
        <h5>placeholder--设置提示内容</h5>
        <h5>require--设置必填项效验</h5>
        <form action="login" method="GET" autocomplete="on">
            name：<input type="text" autofocus name="myname" placeholder="请输入姓名" autocomplete="off"><br>
            Emil：<input type="email" name="user_name" placeholder="邮箱" required><br>
            <input type="file" name="myfile" multiple><br>
            <select size="3">
                <option>test1</option>
                <option>test2</option>
                <option>test3</option>
            </select><br>
            输入数字：<input type="text" name="mynum" pattern="[0-9]{6}"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

slom_fxt

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5

一、HTML5HTML5是HTML最新的修订版本.HTML5的设计目的是为了在移动设备上支持多媒体。较上一个版本新元素新增了新元素、新属性、完全支持CSS3、Video 和 Audio、2D/3D 制图、本地存储、本地 SQL 数据、Web 应用二、HTML5中移除元素<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、...
复制链接

扫一扫