对HTML5标签的认识(三)

本文深入解析HTML中的表格标签<table>、音频标签<audio>及视频标签<video>的使用技巧,涵盖属性详解与实践案例,助你提升网页布局与多媒体内容整合能力。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这篇随笔继续来认识HTML标签。这次随笔主要是对<table>标签的认识和最近我学习到的一些标签来和大家分享。

一、<table>标签

<table>标签的作用主要是定义HTML表格,<table>内也分头<thead>和主体<tbody>,而简单的HTML表格由table元素以及一个或者多个tr,th或者td元素组成

tr元素定义表格的行,th元素定义列头,td元素定义表格单元。也有更复杂的HTML表格可能包括<caption>定义表格标题,<thead> 标签用于组合 HTML 表格的表头内容。

具体怎么用呢,一个最简单的HTML表格     代码如下:

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>HTML5标签的认识</title>
 5     </head>
 6     <body>
 7         <table border="1">
 8             <tr>
 9                 <td>姓名</td>
10                 <td>年龄</td>
11             </tr>
12             <tr>
13                 <td>小明</td>
14                 <td>20</td>
15             </tr>
16         </table>
17     </body>
18 </html>

 

一样的方法 在body里面定义<table>标签(有头就要有尾),上面说过tr是定义表行所以先先一个<tr>元素再把<td>表单元包在里面,这就成为了表格的第一行。同样在写一个一样的成为了表格的第二行

写完还以后运行看效果会发现并没有表格的存在:

这里面还要补充一个属性,就是border属性 作用是规定表格边框的宽度,如果没有规定那自然会没有表格的出现。

border属性和<table>元素放在一起。边框宽度设置为1.看效果

 

那为什么没有运用到<th>标签呢?

th元素内部的文本通常会呈现为居中的粗体文本,而td元素内的文本通常是左对齐的普通文本。

可以看到效果

对比用td的

 

<caption>标签

作用是定义表格的标题,<caption>标签必须放置到<table>标签之后。每个表格最多规定一个标题。他一般都会显示在表格上方。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>HTML5标签的认识</title>
 5     </head>
 6     <body>
 7         <table border="1">
 8             <caption>学生信息</caption>
 9             <tr>
10                 <th>姓名</th>
11                 <th>年龄</th>
12             </tr>
13             <tr>
14                 <td>小明</td>
15                 <td>20</td>
16             </tr>
17         </table>
18     </body>
19 </html>

运行效果:

注:如果需要将内容纵横跨多个行或列,请使用rowspan和colspan属性。

 例如:

我做了一个学生信息表,要获取姓名和性别 还有一张学生照片。但这张图占了表格的三列,使用使用colspan属性来合并

 

 代码如下:

 

 1 <!DOTYPE html>
 2 <html>
 3     <head>
 4         <title>colspan的使用</title>
 5     </head>
 6     
 7     <body>
 8         <table border="1" align="center" width="600" style="border:3px dotted blue">
 9         <caption>个人信息</caption>
10         <tr>
11             <td width="150" height="50x" align="center">姓名</td>
12             <td width="150" height="50px" align="center">Mary</td>
13             <td width="150" height="50px" align="center">年龄</td>
14             <td width="150" height="50px" align="center">5</td>
15         </tr>    
16         <tr>
17             <td align="center">照片</td>
18             <td colspan="3">
19                 <img src="C:\Users\XYM\Desktop\图\头像.jpg" width="200" height="200">
20         </tr>
21     </body>
22 </html>    

运行效果:

 

二、<audio>标签

<audio> 标签定义声音,比如音乐或其他音频流。

目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。是HTML5中的新的标签。

 1 <!DOTYPE html>
 2 <html>
 3     <head>
 4         <title>简单的音频</title>
 5     </head>
 6     <body>
 7         <audio src="01.mp3" controls="controls"></audio>
 8         
 9     </body>
10 </html>

 

 src里是写音频的路径。

controls属性供添加音频播放,暂停和音量的控件

运行效果:

这就是一首音频音乐了。

 

三、<video>标签

定义视频

<video>标签和<audio>b标签相似,都是HTML5中的新标签,解决一些网页播放的问题。

video有支持三种视频格式:

  1、ogg = 带有Theora视频的编码和Vorbis音频编码的Ogg文件。

  2、MPEG4 = 带有H.264视频编码和AAC音频编码的MPEG 4 文件。

  3、WebM = 带有 VP8视频编码和Vorbis音频编码的WebM文件

简单代码

<!DOTYPE html>
<html>
    <head>
        <title>简单的Video</title>
    </head>
    <body>
        
        <video src="02.mp4" controls="controls" ></video>
    </body>
</html>

 运行效果:

 

这篇笔记的重点是 掌握列表标签的运用和掌握网页中的音频和视频的运用。希望大家能掌握运用,为以后的学习打下基础。

 

转载于:https://www.cnblogs.com/xym15079750872/p/10692658.html

HTML 5 特性 官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性: • 语义化标记 • Form 表单增强功能 • 视频 / 音频 • 画布(Canvas) • 可编辑内容 • 拖放 • 稳健的数据存储 检测浏览器支持 在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走: • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比 你还可以运行 Javascript(用Javascript 检测浏览器特性)来检测 HTML5 特性的支持。你还应该用用Modernizr: 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。 你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。 值得注意的变更点 除了新的特征,你还应该记下这些重要的变更点: • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。 • 简单易记的编码类型 你现在可以在 meta 标签中使用 "charset":<meta charset="utf-8″ /> • 不需要闭合标签HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp> 简单代码示例: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html> 你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。 语义化标记 HTML5 新增的一些新标签除了不仅仅是更具语义的 标签的替代品,并不提供额外的功能。这些都是新增的标签:、、、、<header>,、、、、 和 。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+)支持。Javascript 提供了document.createElement(tagName) 的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。 你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset: • HTML5 Reset CSS • Reset5 简单代码示例: 兼容 IE 的 HTML5 页面布局 <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] <![endif]--> </head> <body> <header> Page Header Page Sub Heading </header> Home Projects Portfolio Profile Contact <header> Article Heading May 5th, 2010 </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <header> Section Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Section Footer: Pellentesque volutpat, leo nec auctor euismod <header> Section Heading </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. FigCaption: Club, Heart, Spade and Diamond Ut sapien enim, porttitor id feugiat non, ultrices non odio Section Footer: Pellentesque volutpat, leo nec auctor euismod est. Article Footer <header> Siderbar Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Page Footer </body> </html> 注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值