search

博客列表 >创建html文档-元素-多媒体练习

创建html文档-元素-多媒体练习

葡萄枝子
葡萄枝子原创
2021年11月11日 14:39:50569浏览

创建html文档-元素-多媒体练习

1. 创建html5结构

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  5. </head>
  6. <body>
  8. </body>
  9. </html>

2. head中常用标签

  1.     <!-- 设置字符集 -->
  2.     <meta charset="UTF-8">
  3.     <!-- http-equiv,浏览器行为 -->
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  5.     <!-- 视口属性 -->
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <!-- 标题和描述 -->
  8.     <title>Document</title>
  9.     <meta name="description" content="">
  10.     <!-- link,两个文档的连接关系 -->
  11.     <link rel="stylesheet" href="style.css">
  12.     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  13.     <!-- 5秒后自身刷新 -->
  14.     <meta http-equiv="refresh" content="5">
  15.     <!-- 5秒后跳转新url -->
  16.     <meta http-equiv="refresh" content="5; url=http://example.com">
  17.     <!-- 视口属性，初始化页面放大两倍，用户禁止缩放 -->
  18.     <meta name="viewport" content="initial-scale=2.0, user-scalable=no">
  19.     <!-- 视口属性，初始化页面设备宽度，页面最多放大设备宽度2倍，最小缩小设备宽度1半 -->
  20.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.5">
  21.     <!-- 内链样式和脚本 -->
  22.     <style></style>
  23.     <script src=""></script>
  24.     <script></script>

3. body中常用标签

3.1 语义标签

  1. <!-- 头部标签 -->
  2. <header>
  3.     <!-- 导航标签 -->
  4.     <nav>导航</nav>
  5. </header>
  6. <!-- div标签 -->
  7. <div id="container">
  8.     <!-- 主体标签 -->
  9.     <main>
  10.         <!-- 内容标签 -->
  11.         <article>
  12.             <p>一段内容<span>测试</span></p>
  13.         </article>
  14.         <!-- 区块标签 -->
  15.         <section></section>
  16.     </main>
  17.     <!-- 侧栏标签 -->
  18.     <aside>侧栏</aside>
  19. </div>
  20. <!-- 底部标签 -->
  21. <footer>
  22.     <!-- 地址标签 -->
  23.     <address>xxx路xx号</address>
  24. </footer>

3.2 文本格式标签

  1.     <!-- strong 强调, b 加粗
  2.         em 突出, i 倾斜
  3.         del 删除线
  4.         u 下划线
  5.         mark 标记，为显示的文本添加背景色
  6.     -->
  7.     <p><strong>T</strong>his <b>text</b> is <i>only</i> for <em>test</em>. <u>you</u> can <del>delete</del>
  8.         <mark>it</mark>.
  9.     </p>
  11.     <!-- sub 下标 sup 上标 -->
  12.     <p>E=mc<sup>2</sup></p>
  13.     <p>a<sub>n+1</sub>=a<sub>n</sub>+a<sub>n-1</sub>;(n>1;a<sub>1</sub>=1;a<sub>2</sub>=1)</p>
  15.     <!-- bdo 覆盖默认文本的方向
  16.         ltr: left to right, rtl: right to left -->
  17.     <p><bdo dir="ltr">default</bdo> <bdo dir="rtl">text</bdo> direction</p>
  19.     <!-- 详情隐藏细节 -->
  20.     <details>
  21.         <summary>click show detail</summary>
  22.         This text is hidden detail, click to show.
  23.     </details>
  25.     <!-- 对话框，open 开启，去掉隐藏 -->
  26.     <dialog open>hello world!</dialog>
  27.     <pre>
  28.         &lt;p&gt;hello world!&lt;/p&gt;
  29.     </pre>
  31.     <!-- 组合标签 -->
  32.     <figure>
  33.         <figcaption>组合标签标题</figcaption>
  34.         <p><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="baidu"></p>
  35.     </figure>

文本格式标签

3.3 列表标签

  1. 无序列表

    1.     <ul>
    2.         <li>ul-li-01</li>
    3.         <li>ul-li-02</li>
    4.         <li>ul-li-03</li>
    5.     </ul>

  1. 有序列表

    1.     <ol>
    2.         <li>ol-li-01</li>
    3.         <li>ol-li-02</li>
    4.         <li>ol-li-03</li>
    5.     </ol>

  1. 定义列表

    1.     <dl>
    2.         <dt>dl-dt</dt>
    3.         <dd>dl-dd-01</dd>
    4.         <dd>dl-dd-02</dd>
    5.         <dd>dl-dd-03</dd>
    6.     </dl>

列表标签

3.4 超链接标签

  1.     <p><a href="https://www.php.cn" target="_blank">open in new window</a></p>
  2.     <p><a href="https://www.php.cn" title="self">open in self window</a></p>

3.5 多媒体标签

  • 图像

    1. <p><img src="https://www.php.cn/static/images/PHPlogo.png" alt="logo" width="120"></p>

  • 音频和媒体源

    1.     <p><audio src="https://www.w3school.com.cn/i/horse.mp3" controls="controls"></audio></p>
    3.     <p>
    4.         <!-- 载入时静音 -->
    5.         <audio controls="controls" muted>
    6.             <source src="https://www.w3school.com.cn/i/horse.ogg">
    7.             <source src="https://www.w3school.com.cn/i/horse.mp3">
    8.         </audio>
    9.     </p>

    autoplay 自动播放，loop循环播放，muted 载入时静音

  • 视频和媒体源

    1.     <p><video src="https://www.w3school.com.cn/i/movie.mp4" controls="controls" width="240" height="180"></video></p>
    3.     <p>
    4.         <!-- 显示封面 -->
    5.         <video controls poster="https://www.php.cn/static/images/PHPlogo.png" width="240" height="180">
    6.             <source src="https://www.w3school.com.cn/i/movie.ogg">
    7.             <source src="https://www.w3school.com.cn/i/movie.mp4">
    8.         </video>
    9.     </p>

    autoplay 自动播放，loop循环播放，muted 载入时静音，preload=”url” 预加载视频，poster=”url” 视频显示封面

多媒体标签

上一条：三.python判断语句下一条：二.Python定义变量
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多