HTML5简介

仙鹤__

已于 2022-12-07 17:58:28 修改

阅读量801

点赞数

文章标签： html5 html 前端

于 2022-12-07 17:53:58 首次发布

本文链接：https://blog.csdn.net/weixin_52629158/article/details/128224264

版权

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

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

HTML5 简单易学。

1.1 什么是html5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性(面试题)：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5 <!DOCTYPE>

<!DOCTYPE html>

生成html5文件的快捷写法：！感叹号+回车键；或者 html5+回车键

最小的HTML5文档

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

注意：对于中文网页需要使用<meta charset="UTF-8"> 声明编码，否则会出现乱码。其中 UTF-8 叫万国码

1.2 html5新增的标签（html5常用的语义化和结构元素）

head 头部标签（html里的）

1.header 页眉标签（是块元素，独占一行）

标签定义文档或者文档的一部分区域的页眉

特点：可以直接使用它。也可以把它包裹在某个article区域内，代表article这个区域的页眉

 <!-- 页眉标签 -->
    <header style="outline: 1px dashed red;">头部区域</header>

2.article 文档区域标签（是块元素，独占一行）

特点：我们去表示某个区块的时候，可以用它，去代替div标签。（尤其是我们在写移动端布局的时候）

<!-- 文档区域标签 -->
   <article style="outline: 1px dashed red;">文档区块标签，它可以替代div标签</article>

3.section 文档区域标签（优先选择使用它）特点：

1.section标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域

2.我们去表示某个区块的时候，可以用它，去代替div标签。

3.section标签里面可以包裹若干个div标签

例如：

<section>文档区域标签
        <article>123</article>
        <div>123</div>
        <div>456</div>
    </section>
    <section>文档区域标签</section>

预览：

4.nav 导航（链接）标签

特点：

1.标签定义导航链接的部分，nav标签，一般出现在网页的主题菜单区域，或者面包屑区域。

2.nav标签里面可以包裹一个ul无序列表，无序列表中的每个li列表项放置的内容就是当前网站的菜单。nav>ul>li*8>a

<!-- nav导航标签 -->
    <nav>
        <li><a href="">要闻</a></li>
        <li><a href="">推荐</a></li>
        <li><a href="">热点</a></li>
        <li><a href="">原创</a></li>
    </nav>

预览：

5.aside 侧边栏标签

特点：

1.aside标签表示一个页面的一部分（一般出现在网页的某个侧边）

2.aside标签里面可以包裹若干个div标签

<section>
        <aside>侧边栏</aside>
        <main>主要内容区域0</main>
    </section>

6.main 文档区域主要内容标签

特点：

1.main标签规定文档的主要内容。一般出现在网页的导航栏、版权信息、站点标志或搜索表单。

2.main标签里面可以包裹 h1 p article div等标签

<section>
        <aside>侧边标签</aside>
        <main>文档区域的主要内容标签</main>
    </section>

7.canvas 画布标签

特点：

1.canvas 画布标签，有一个默认的宽度width和高度height（width:300px height:150px）,默认的时候是存在的，但是我们看不见，我们可以通过css样式，去给画布设置边框，设置背景色，让它在浏览器中预览显示出来。我们还可以自行的通过css样式给它设置指定的宽度和高度。也可以通过属性给它设置宽度和高度，例如： width="600" height="500" 。

<style>
        .mycan1{
            border:1px solid blue;
            background-color: skyblue;
         
        }
    </style>

 <canvas id="mycan1" class="mycan1">
    </canvas>

还可以通过js脚本给它设置宽度和高度

  <script>
        window.onload = function(){
            // 1.抓取元素
            var mycanvas = document.getElementById('mycanvas');
            console.log(mycanvas)
            // 2.设置抓取到的这个对象的宽度和高度
            mycanvas.width = 900;
            mycanvas.height = 900;
        }   
    </script>

注意：给画布设置宽度和高度，我们可以通过css样式设置，可以通过属性width和height设置，也可以通过js脚本设置。这3种设置方式，则其一去操作。不要三个一起去设置。

特别注意：用js脚本设置画布宽度和高度的时候，我们要把css样式中设置宽度和高度去掉。否则效果出不来。

2.canvas 画布标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API3.在canvas 画布上绘制图表或图像，一定要给画布标签起 id名或class名。因为你要用js脚本去获取元素

例如：使用画布绘制一个矩形

<script>
        // 1.选择元素
        window.onload=function(){
            var mycan1=document.getElementById('mycan1')
            console.log(mycan1);
        //2.设置抓取到的这个对象的宽高
        mycan1.width=900;
        mycan1.height=900;
         // 3.向画布上 画画
        var ctx=mycan1.getContext('2d');
        console.log(ctx);
       
        //设置起始路径
     
        ctx.beginPath();
        //画矩形
        ctx.rect(300,150,400,200)
        ctx.strokeStyle='green'
        ctx.stroke()
        //闭合路径
        ctx.closePath();
       
        }
    </script>

预览：

8.audio 音频标签

特点：

1.audio音频标签定义音频内容

2.src="public/1365221826.mp3" 引入音频内容的路径

3.controls="controls" 音频标签的控制条（它出现了，这个标签才会显示出来。）

4.通过css样式，控制音频标签的宽度 #myaudio { /* width: 80%; */ width: 990px; }

路径获取某平台歌曲的id

取网易云音乐歌单接口地址：
http://music.163.com/song/media/outer/url?id=924680166.mp3

https://music.163.com/

如何获取 网易云音乐中的某个单曲 MP3文件？并下载到本地？

方法：
https://music.163.com/#/song?id=1486513704  把 这首歌里的 id后面的值 复制一下，
粘贴到
歌单接口地址 中，把原来的id 值 替换一下 即可。

<audio src="./music/aini.mp3" controls="controls" style="width:50%"></audio>

    <audio controls="controls" >
        <source src="./music/aini.mp3">
    </audio>

预览：

9.video 视频标签

特点：

1.标签定义视频，比如电影片段或其他视频流。

autoplay="autoplay"自动播放

<video src="./videos/movie.mp4" style="width:600px" controls="controls" autoplay="autoplay" ></video>

10.source 视频资源标签（音频资源标签）

特点：source 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源。

 <video controls="controls">
        <source src="./videos/movie.ogg">
          <source src="./videos/movie.mp4">
    </video>

预览：

11.embed 插件标签

特点：

embed 插件标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。可以向这个容器中插入图片，音频、视频、html文件等。

type="image/jpg" 插入资源类型是图像

type="text/html" 插入资源类型是 html文件

type="video/webm" 插入资源类型是视频文件

<div>
        <embed src="./videos/movie.mp4" type="video/webm">
        <embed src="./music/aini.mp3" type="">
    </div>
    <div>
        <embed src="./img/rain.gif" type="">
            <embed src="./img/p1.jpeg" type="">
    </div>
    <div>
        <embed src="./a.html" type="text/html" style="width:500px; height:300px">
    </div>

预览：

12.dialog 对话框标签（窗口标签）

特点：

dialog 对话框标签里面包裹的内容，默认浏览器渲染的时候，这个标签里的内容是不显示的。（通过浏览器开发者工具面板可以查看到它身上有个display:none）。我们想让这个标签中的内容显示，需要给它添加open属性即可。open属性的值和属性名是一样的。其中值可以省略不写。

open属性规定dialog元素是有效的，用户可以与它进行交互（js）。

<!-- 对话框标签 -->
    <dialog open>
        <p>我是对话框中内容</p>
    </dialog>

预览：

13.small定义元素旁注信息并显示为更小的文本

特点：

在html4中，small标签作用是字体小一号。在 HTML5 中，small 元素定义旁注信息，并显示为更小的文本。

 <div>
        <!-- 在 HTML5 中，small 元素定义**旁注信息**，并显示为更小的文本。 -->
        <dt>单人间</dt>
        <dd>价格:&yen;399元<small>含早餐,不含税</small></dd>
        <dt>双人间</dt>
        <dd>价格:&yen;399元<small>含早餐,含税</small></dd>
    </div>

预览：

14.hgroup标题组标签

特点：

hgroup标签被用来对标题元素进行分组。

当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。

<div>
        <hgroup>
            <h1>让每一份创新活力都充分迸发</h1>
            <h2>——沿着总书记</h2>
        </hgroup>
    </div>

预览：

15.menu定义命令的列表或菜单标签

特点：menu标签里的列表项我们可以使用li

<div>
        <menu>
         <li><a href="">公司新闻</a></li>
         <li><a href="">行业新闻</a></li>
        </menu>
    </div>

预览：

16.details定义元素的细节标签

默认，在页面上，会生成"三角符号"和4个字（360浏览器预览）“详细信息”或2字（Google Chrome浏览器预览）“详细”，当你点击"三角符号",对应的详细信息会展开显示。

特点：

1.open属性，定义当前标签是否打开、或者说可见

2.open="open" 表示当前details标签中的内容，默认展开的。

如果我们不给这个属性，当前details标签中的内容，默认隐藏的。

  <details open="open">
        <div>
            杂技与舞蹈是一对舞台上“姐妹花”——她们二者之间既有差异性又有相似性，可以说是交相辉映，相得益彰，成为了艺术大家庭中重要的组成部分。
        </div>
    </details>

预览：

17.ruby定义注释标签

特点：

1.ruby标签定义ruby注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。

2.将ruby标签与 <rt> 和 <rp> 标签一起使用：<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

rp和rt 用来包裹注释文本第一对rp 包裹(; 第二对 rp包裹); 把你注释的文本放在 <rt>sun</rt>特别注意：注释的内容----<rp>(</rp><rt>sun</rt><rp>)</rp>一定要放在文本内容------汤右侧。否则没有效果！

<div>
        <ruby>
            <!-- 余<rt>yu</rt>
            磊<rt>lei</rt>
            
            余<rp>(</rp><rt>tang</rt> <rp>)</rp> 
            磊<rp>(</rp><rt>jian</rt> <rp>)</rp>
        </ruby>
    </div>

预览：

18.figure定义媒介内容的分组，以及它们的标题

特点：

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

2.figcaption可以为figure标签定义一个标题

注意：<figcaption>元素应该被置于<figure>元素的第一个或最后一个子元素的位置。

<div>
        <p>
            <img src="./img/jiuye.jpg" alt="">
        </p>
        <figure>
            <figcaption>毕业生就业信息</figcaption>
        </figure>
    </div>

预览：

19.progress进度条的标签

特点：

1.progress标签定义运行中的任务进度（进程）。

2.value="" 规定进程的当前值。 max="" 规定需要完成的值。

<div>
        <progress value="60" max="100">  

        </progress>
       
    </div>

预览：

仙鹤__

关注

0
点赞
踩
3

收藏

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

html5简介
复制链接

扫一扫

HTML5简介

1.1 什么是html5?

1.2 html5新增的标签（html5常用的语义化和结构元素）

“相关推荐”对你有帮助么？