HTML5新增标签(网课笔记，自用)

最新推荐文章于 2023-12-27 09:55:44 发布

一只呆桃酱

最新推荐文章于 2023-12-27 09:55:44 发布

阅读量223

点赞数

分类专栏：网页学习文章标签： html5 html

本文链接：https://blog.csdn.net/qq_43978754/article/details/109890432

版权

网页学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.video标签：播放视频

注意：vedio跟img很像，src后边跟视频的位置，其中autoplay=“autoplay”表示自动播放，或者直接加autoplay

<video src="SeanXiao.mp4" autoplay="autoplay">
</video>

* 属性1：controls，加上控制条

在这里插入图片描述

 <video src="SeanXiao.mp4" align="center" autoplay="autoplay" controls="controls">     
 </video>

* 属性2：poster—视频未播放前显示的图片

在这里插入图片描述
poster=“图片位置”

 <video src="SeanXiao.mp4" align="center" controls="controls" poster="007fzS16ly1gje86iv2jsj33qj23lhdy.jpg">     
 </video>

* 属性3：loop—视频是否需要循环播

autoplay类似用法

* 属性4：preload–预加载视频

与autoplay属性相冲

* 属性5：muted—视频静音、 width和height与img相同用法

2.audeo标签：播放音频

重要属性与vedio相同，自动播放autoplay、控制部件controls

在这里插入图片描述

 <audio src="初见.mp3" autoplay controls>
 </audio>

3.details、summary标签：概要详情标签

在这里插入图片描述

<details>
        <summary>肖战</summary>
        2015年，被浙江卫视《燃烧吧少年！》节目组发掘成为选手；同年12月31日，作为燃烧吧少年团体成员之一亮相于浙江卫视“奔跑吧2016”跨年演唱会。2016年，主演校园星座超能力网络剧《超星星学园》并正式进入演艺圈。同年9月，以主唱担当的身份加入“X玖少年团”；之后，随X玖少年团推出同名数字专辑《X玖》。2017年，参演东方玄幻剧《斗破苍穹》；同年4月2日，随组合举行“以己之名”上海演唱会；之后，在古装言情传奇剧《狼殿下》饰演浪迹天涯的赏金猎人疾冲 。2018年，确认参演根据猫腻同名小说改编的古装权谋剧《庆余年》；4月，主演古装仙侠剧《陈情令》。2019年6月27日，主演的古装仙侠剧《陈情令》在腾讯视频播出，肖战凭魏无羡一角获得更多关注。8月，主演都市情感剧《余生，请多指教》。9月13日，主演的古装仙侠电影《诛仙I》在全国上映。11月10日，参加在上海举行的双十一晚会。
    </details>

4.marquee标签：概要详情标签

<marquee direction="right" scrollamount="100">
        内容1
</marquee> 
<marquee scrollamount="10" loop="2" behavior="slide">
        内容2
</marquee>

dirction指定滚动的方向，scrollamount="10"设置滚动速度,loop指定滚动次数，behavior="slide"设置滚动的类型

<marquee>
<img src="007fzS16ly1gje5kxcp6aj32e936u1l3.jpg" width="100">
</marquee>

注意在marquee中的东西都可以滚动！

5.特殊标签: 加粗、下划线、斜体、删除线(企业开发中不用)

---------->strong=b 、ins=u、em=i、del=s

展示：
在这里插入图片描述

    <b>SeanXiao</b>
    <u>SeanXiao</u>
    <i>SeanXiao</i>
    <s>SeanXiao</s>
    <!--改进版可以增添语义-->
    <strong>SeanXiao</strong>
    <ins>SeanXiao</ins>
    <em>SeanXiao</em>
    <del>SeanXiao</del>

6.字符实体（如何显示空格、回车、tab）

空格：&nbsp；（一个空格）
如何显特殊符号（> <）：&lt ; 小于 &gt ; 大于
版权符号:&copy ;

在这里插入图片描述

 &gt;<br>
 &lt;<br>
 &copy;<br>

7.引入CSS

在这里插入图片描述

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS开始学习</title>
    <style type="text/css">
        .one{
            font-weight: bold;
        }
        .two{
            text-decoration: underline;
        }
        .three{
            font-style: italic;
        }
        .four{
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <hr>
    <p class="one">SeanXiao</p>
    <p class="two">SeanXiao</p>
    <p class="three">SeanXiao</p>
    <p class="four">SeanXiao</p>
</body>
</html>