首页 > 其他分享 >HTML5第二章 列表 表格与媒体元素

HTML5第二章 列表 表格与媒体元素

时间:2024-09-05 16:52:13浏览次数:12  
标签:第二章 表格 -- 标签 列表 HTML5 对齐 播放

一、列表

1.无序列表

<ui>:声明无序列表

<li>:声明列表

无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容.

<ul>
      <li>范冰冰演藏族女孩</li><!--没有顺序,每个<li>标签独占一行(块元素)-->
      <li>撞死两个人后自拍</li><!--默认<li>标签项前面有个实心小圆点-->
      <li>诗隆甜蜜出游</li>
      <li>一线城市楼市退烧</li>
</ul>
2.有序列表

<ol>:声明有序列表

<li>;声明列表

有序列表ol-----li一般用于显示带有顺序编号的特定场合.

<ol><!--在<ol>里面<li>标签项前面有顺序标记-->
  <li>范冰冰演藏族女孩</li>
  <li>撞死两个人后自拍</li>
  <li>诗隆甜蜜出游</li>
  <li>一线城市楼市退烧</li>
</ol>
3.定义列表

<dl>:声明定义列表

<dt>:生命列表

<dd>:定义列表内容

定义列表一般适用于带有标题和标题解释性内容的场合

<dl><!--没有顺序,每个<dt>标签、<dd>标签独占一行,默认没有标记-->
    <dt>水果</dt><!--一般用于一个标题下有一个或多个列表项的情况-->
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

二、表格

<table>:表格标签

<tr>:行标签

<td>:单元表格标签

<thead>...<th>:头部表格

<tbody>...<tr>...<td>:身体表格

<tfoot>...<tr>...<td>:底部表格

 <body>
        <table border="1"width="500"height="400">
            <thead>
                <th>总页面流量</th>
                <th>共计来访</th>
                <th>会员</th>
                <th>游客</th>
            </thead>
            <tbody>
            <tr>
                <td>9756488</td>
                <td>97656</td>
                <td>7538087</td>
                <td>43364677</td>
            </tr>
            </tbody>
            <tr>
                <td>46776686</td>
                <td>85544</td>
                <td>69357</td>
                <td>568787</td>
            </tr>
            <tr>
                <td>7538087</td>
                <td>546774</td>
                <td>476897</td>
                <td>334545</td>
            </tr>
            <tfoot>
            <tr>
                <td>平均每人浏览</td>
                <td colspan="3">1.58</td>
            </tr>
            </tfoot>
        </table>
    </body>
</html>
​
​

<colspan>:所跨的列数

<rowspan>:所跨的行数

<align>:水平对齐 left左对齐 right右对齐 center居中

<valign>:垂直对齐 top上 bottom下 middle居中

<tr align="center">
        <td colspan="3">学生成绩</td>
</tr>
<tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
</tr>

媒体元素

1.视频元素

<video src>:指定要播放的视频文件的路径

<controls>:提供播放、暂停和音量的控件

<video src="视频路径"  controls></video>
2.音频元素

<audio src>:指定要播放的音频文件的路径

<controls>:提供播放、暂停和音量的控件

3.属性

<autoplay="autoplay">:自动播放<!--有时候不能自动播放,需要加上静音播放的代码才可以播放-->

<loop>:循环播放

<muted>:静音播放

三、页面结构分析

<header>:头部标题内容

<footer>:脚部内容

<section>:wed页面中的一块独立区域

<article>:独立的文章内容

<aside>:相关内容与应用

<nav>;导航类辅助内容

四、iframe的使用

<iframe src>:引用页面地址

<body>
        <header>    
        <a href="https://www.baidu.com/"  target="a1">点击打开百度</a></br>
        <a href="https://v.qq.com/channel/choice?channel_2022=1"  target="a1">点击打开腾讯视频</a></br>
        <a href="index7.html"  target="a1">点击打开index7</a></br>
        </header>
        <section><h2>网页主体部分</h2></section>
        <iframe name="a1" src="" /width="1000"height="500">
        <footer><h2>网页底部</h2></footer>
​
</body>

标签:第二章,表格,--,标签,列表,HTML5,对齐,播放
From: https://blog.csdn.net/ke67855523/article/details/141722290

相关文章

  • HTML5第七章 浮动
    一、标准文档流block:块级元素inline:内联元素(行内元素)内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立二、display属性display:block;元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符display:inline;内联元素的默认值。元素会被显示为内联元素,该元......
  • Python之pandas表格处理常用方法
    0.导入导出操作下面以excel为例,csv同理,只要把read_excel改成read_csv,把to_excel改成to_csv即可。0.1导入excel/csv表格data=pd.read_excel("附件.xlsx",sheet_name="表单2",index_col=0) pd.read_excel(io,sheet_name,index_col)常用参数解读:io:文件地址sheet_name:表单......
  • 用SpringBoot API实现识别pdf文件是否含有表格
    要使用SpringBootAPI实现一个识别PDF文件是否含有表格的功能,你可以结合PDF解析库(如ApachePDFBox)来解析PDF文件内容,并通过分析文本或线条来判断PDF是否包含表格。然后使用SpringBoot提供的RESTAPI来实现上传和检测功能。目录实现步骤1.配置pom.xml2.......
  • 第二章 数据访问:JPA spring boot
    学习目标2.1相关概念2.1.1JPA由来2.1.2JPA是什么2.1.3SpringDataJPA2.2快速上手2.3核心功能2.3.1基本操作2.3.1.1预生成方法2.3.1.2自定义查询2.3.2复杂操作2.3.2.1自定义QL查询2.3.2.2命名QL查询2.3.2.3分页查询2.3.2.4复杂查询  (如果没有了......
  • # yyds干货盘点 # 安装modin后读取excel表格提示如下报错,应该怎么解决呢?
    大家好,我是Python进阶者。一、前言前几天在Python最强白银交流群【wen】问了一个Python库安装报错的问题,问题如下:importmodin.pandasaspddf=pd.read_excel('D:\input\数据.xlsx',sheet_name='原始数据').convert_dtypes()df请教,安装modin后读取excel表格提示如下报错Plea......
  • WPS文字——表格设置
    显示需要的标记文件->选项->视图->格式标记->勾选需要的标记->即可只显示勾选的标记文字转化为表格转换之前利用查找替换将需要分割的位置替换为相同的标记插入->文本转换成表格->文字分隔位置表格细节修改点击表格->文件下方表格属性->修改删除、擦除和......
  • 借助表格技术提升智能审计云平台应用体验
    背景说明:2009年,立信加入全球第五大国际会计网络——BDO国际。BDO全球各地成员所均使用统一的审计方式,在完全遵守国际审计准则的原则同时,也会应不同地区要求提供附加指引,确保在全球提供一致的服务水平。如今,立信的审计过程及档案记录均已实现电子化。然而,审计工作并非一成不变,为......
  • 470.海贼王动漫主题网页 大学生期末大作业 Web前端网页制作 html5+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • HTML中的表格
    一:表格包含的结构        table标签:定义表格            thead标签:表格的头部(可省略)            tbody标签:表格的内容(可省略)            tr标签:定义行            th标签:表头的单元格(......
  • 博弈论简述 第二章 完全信息动态博弈 自用整理中
    持续更新中博弈论简述系列主要参考本校授课老师的PPT,相当于把老师的PPT简单过了一遍,加上自己的理解,但是个人觉得PPT内容系统结构不太行,后面有时间再慢慢调整。没有什么技术性的内容,主要是简述。后面准备开一个系列,认真研读一下一些技术性的内容。一、完美信息动态博弈1、......