• HTML5-列表、表格、媒体元素、页面结构分析

    目录

    1.列表标签

    2.表格标签

    3.媒体元素

    1.列表标签

    1）什么是列表

    列表就是信息资源的一种展现形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

    2）列表的分类

    • 无序列表
    • 有序列表
    • 自定义列表

    3）代码测试

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>列表学习title>
    6. head>
    7. <body>
    9. <ol>
    10.   <li>Javali>
    11.   <li>Pythonli>
    12.   <li>C#li>
    13.   <li>C/C++li>
    14. ol>
    15. <hr/>
    17. <ul>
    18.     <li>Javali>
    19.     <li>Pythonli>
    20.     <li>C#li>
    21.     <li>C/C++li>
    22. ul>
    24. <dl>
    25.     <dt>学科dt>
    26.     <dd>Linuxdd>
    27.     <dd>计算机组成原理dd>
    28.     <dd>操作系统dd>
    29.     <dd>计算机网络dd>
    30.  
    31.     <dt>地区dt>
    32.     <dd>苏州dd>
    33.     <dd>上海dd>
    34.     <dd>北京dd>
    35. dl>
    36. body>
    37. html>

    2.表格标签

    1）为什么使用表格

    • 简单便用
    • 结构稳定

    2）基本结构

    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列

    3）表格标签

    table：表格标签

    tr：行标签

    td：列标签

    colspan：跨列属性，其值代表跨列个数

    rowspan：跨行属性，其值代表跨行个数

    4）代码测试

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表格学习title>
    6. head>
    7. <body>
    9. <table border="1px">
    10.     <tr>
    12.         <td colspan="4">1-1td>
    13.     tr>
    14.     <tr>
    16.         <td rowspan="2">2-1td>
    17.         <td>2-2td>
    18.         <td>2-3td>
    19.         <td>2-4td>
    20.     tr>
    21.     <tr>
    22.         <td>3-2td>
    23.         <td>3-3td>
    24.         <td>3-4td>
    25.     tr>
    26. table>
    27. body>
    28. html>

    5）练习：实现学生成绩表

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>学生成绩title>
    6. head>
    7. <body>
    8. <table border="1px" >
    9.     <tr>
    10.         <td colspan="3" style="text-align: center">学生成绩td>
    11.     tr>
    12.     <tr>
    13.         <td rowspan="2">biubiutd>
    14.         <td>语文td>
    15.         <td>100td>
    16.     tr>
    17.     <tr>
    18.         <td>数学td>
    19.         <td>100td>
    20.     tr>
    21.     <tr>
    22.         <td rowspan="2">小明td>
    23.         <td>语文td>
    24.         <td>100td>
    25.     tr>
    26.     <tr>
    27.         <td>数学td>
    28.         <td>100td>
    29.     tr>
    30. table>
    31. body>
    32. html>

    3.媒体元素

    1）视频元素

    • video

    2）音频元素

    • audio

    3）属性介绍

            src：资源路径

            controls：控制组件

            autoplay：自动播放

    4）代码测试

    准备好音视频资源文件

    代码：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>媒体元素title>
    6. head>
    7. <body>
    9. <video src="../resource/video/test.mp4"controls autoplay>video>
    10.  
    11. <audio src="../resource/audio/录音.m4a" controls autoplay>audio>
    12. body>
    13. html>

    可能会遇到的问题：即使加了autoplay音视频也无法自动播放

    原因：chrome浏览器为了防止网页广告，在2018年取消了自动播放功能，需要手动配置。

    解决方法：video标签中添加muted属性

    <video muted src="../resource/video/test.mp4"controls autoplay>video>

    补充：

    chrome可自动播放例外条件:

    如果视频本身已经被设置为静音的情况下,那么浏览器将不会再拦截其加载进行自动播放。同时如果用户此前点击过自动播放的话那么下次再访问同样的网站,那么浏览器默认情况也不会拦截其播放,而在移动设备上如果用户选择将网站添加到主屏幕上也就是经常访问的网站,这种情况下同样可以自动播放。
    最后:根据谷歌统计数据如果网站视频被大量播放例如视频网站,这种情况下也不会被拦截掉自动播放功能。

    4.页面结构分析 

    代码测试：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>页面结构分析title>
    6. head>
    7. <body>
    8. <header><h2>网页头部h2>header>
    9. <section><h2>网页主体h2>section>
    10. <footer><h2>网页脚布h2>footer>
    11. body>
    12. html>
  • 相关阅读:
    区块链游戏开发颠覆传统游戏开发的 5 种方式
    F - 爱丽丝、鲍勃和巧克力
    常见的HTTP请求方式
    MediaPlayer
    猿创征文 |【数据结构】2个例题带你理解图的遍历：广度优先搜索
    Python 基于 Yolov8 + CPU 实现物体检测
    AutoEncoder和VAE
    Qt 5.15编译（MinGW）及集成Crypto++ 8.8.0笔记
    mysql 存储过程 带游标
    数组扁平化
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126439832