HTML5 教程之标签（3）

爱编程的鱼2025-02-06 15:45

HTML5 <center> 标签 (已废弃)

定义和用法

<center> 标签对其包围的文本进行水平居中处理。HTML5不支持使用<center>标签，因此有关该标签的更多信息，请参考"HTML <center>标签"部分！

示例:

<center>这个文本将被居中
<p>这是一个段落</p></center>

示例 2 (CSS 替代)

<div style="text-align:center">这个文本将被居中<p>这是一个段落</p></div>

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，不支持该标签。请使用 CSS 代替。

提示和注释

提示：请使用 CSS 来居中文本。

相关参考

CSS教程：CSS text-align 属性

HTML5 <command> 标签 (已废弃)

实例

HTML5 <command>标签用于定义命令按钮。

<command> 可以进行如下标记：

<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>

尝试一下 >>

浏览器支持

目前，主流浏览器都不支持 <command> 标签。

**注释：**只有 IE 9 支持 <command> 标签，其他之前版本或者之后版本的 IE 浏览器不支持 <command> 标签。

标签定义及使用说明

<command> 标签可以定义用户可能调用的命令（比如单选按钮、复选框或按钮）。

当使用 <menu> 元素时，command 元素将作为菜单或者工具栏的一部分显示出来。但是，用 command 规定键盘快捷键时，command元素能被放置在页面的任何位置，但元素不可见。

HTML 4.01 与 HTML5之间的差异

<command> 标签是 HTML 5 中的新标签。

属性

New ：HTML5 中的新属性。

属性 值 描述
checkedNew checked 规定当页面加载时，command 是否被选中。仅用于 radio 或 checkbox 类型。
disabledNew disabled 规定 command 是否可用。
iconNew URL 规定作为 command 来显示的图像的 URL。
labelNew text 必需。规定 command 的名字，对用户可见。
radiogroupNew groupname 规定可进行切换且将被切换的 command 所属的组名。仅在类型为 radio 时使用。
typeNew checkbox command radio 定义 command 的类型。默认是 "command"。

全局属性

<command> 标签支持 HTML 的全局属性。

事件属性

<command> 标签支持 HTML 的事件属性。

HTML5 <canvas> 标签

HTML <canvas> 标签

实例

通过 <canvas> 元素来显示一个红色的矩形：

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>编程狮(w3cschool.cn)</title> 
</head> 
<body>

<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

</body>
</html>

浏览器支持

IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。

标签定义及使用说明

<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

HTML 4.01 与 HTML5之间的差异

<canvas> 标签是 HTML5 中的新标签。

提示和注释

注释：<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。

提示：如想了解 canvas 对象的所有属性和方法，请参阅HTML 画布参考手册。

属性

New : HTML5 中的新属性。

属性 值 描述
height (New) pixels 规定画布的高度。
width (New) pixels 规定画布的宽度。

全局属性

<canvas> 标签支持 HTML 的全局属性。

事件属性

<canvas> 标签支持 HTML 的事件属性。

HTML5 <col> 标签

实例

HTML5 <col> 标签用于控制表格中的列，使你更加方便的为表格中的列应用样式。

<colgroup> 和 <col> 标签为表格中的三个列设置了背景色：

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

尝试一下 >>

浏览器支持

所有主流浏览器都支持 <col> 标签。

标签定义及使用说明

<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。

通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

HTML 4.01 与 HTML5之间的差异

HTML5 中不再支持 HTML 4.01 中的大部分属性。

HTML 与 XHTML 之间的差异

在 HTML 中，<col> 标签没有结束标签。

在 XHTML 中，<col> 标签必须被正确的关闭。

属性

属性 值 描述
align (已废弃) left right center justify char HTML5 不支持。规定与 <col> 元素相关的内容的水平对齐方式。
char (已废弃) character HTML5 不支持。规定根据哪个字符来对齐与 <col> 元素相关的内容。
charoff (已废弃) number HTML5 不支持。规定第一个对齐字符的偏移量。
span number 规定 <col> 元素应该横跨的列数。
valign (已废弃) top middle bottom baseline HTML5 不支持。规定与 <col> 元素相关的内容的垂直对齐方式。
width (已废弃) % pixels relative_length HTML5 不支持。Specifies the width of a <col> element

全局属性

<col> 标签支持 HTML 的全局属性。

事件属性

<col> 标签支持 HTML 的事件属性。

HTML5 <colgroup> 标签

实例

HTML5 <colgroup>标签可以组合<col>标签。

<colgroup> 和 <col> 标签为表格中的三个列设置了背景色：

 <table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

尝试一下 >>

浏览器支持

所有主流浏览器都支持 <colgroup> 标签。

标签定义及使用说明

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

**注释：**只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。

提示： 如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

HTML 4.01 与 HTML5之间的差异

HTML5 中不再支持 HTML 4.01 中的大部分属性。

属性

属性 值 描述
align (已废弃) left right center justify char HTML5 不支持。规定在列组合中内容的水平对齐方式。
char (已废弃) character HTML5 不支持。规定根据哪个字符来对齐列组中的内容。
charoff (已废弃) number HTML5 不支持。规定第一个对齐字符的偏移量。
span number 规定列组应该横跨的列数。
valign (已废弃) top middle bottom baseline HTML5 不支持。定义在列组合中内容的垂直对齐方式。
width (已废弃) pixels % relative_length HTML5 不支持。规定列组合的宽度。

全局属性

<colgroup> 标签支持 HTML 的全局属性。

事件属性

<colgroup> 标签支持 HTML 的事件属性。

HTML5 <caption> 标签

实例

HTML5 <caption>标签用来为表格定义一个标题，使用示例如下：

带有标题的表格：

<table border="1"> 
<caption>Monthly savings</caption> 
<tr> <th>Month</th> <th>Savings</th> </tr> 
<tr> <td>January</td> <td>$100</td> </tr>
</table>

尝试一下 >>

浏览器支持

所有主流浏览器都支持 <caption> 标签。

标签定义及使用说明

<caption> 标签定义表格的标题。

<caption> 标签必须直接放置到 <table> 标签之后。

您只能对每个表格定义一个标题。

提示： 通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 align 属性。

HTML 4.01 已废弃 align 属性。

属性

属性 值 描述
align (已废弃) left right top bottom HTML5 不支持。HTML 4.01 已废弃。 定义标题的对齐方式。

使用说明: 当 <table> 元素是 <caption> 的父元素，caption是 <figure> 元素的唯一后代的时候，使用 <figcaption> 元素替代 caption 元素

全局属性

<caption> 标签支持 HTML 的全局属性。

事件属性

<caption> 标签支持 HTML 的事件属性。

相关推荐
枫叶丹429 分钟前
【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(四) -＞ 常见组件(一)
前端·javascript·华为·华为云·harmonyos
dal118网工任子仪1 小时前
102，【2】buuctf web [第二章 web进阶]XSS闯关
前端·xss
dal118网工任子仪1 小时前
101，【1】buuctf web BUU XSS COURSE 1
前端·xss
魂兮-龙游2 小时前
C语言：把两个16位的数据合成32位浮点型数据
c语言·前端·javascript·信息与通信
OpenTiny社区2 小时前
开发者福音！TinyEngine开启新篇章，服务端Java版本正式开源~
前端·低代码·开源
Coodor2 小时前
在https下引用IC卡读卡器web插件
前端·网络协议·https
步、步、为营2 小时前
使用.NET精准计算日出日落时间
前端·c#·asp.net·.net
XiaoyuEr_66882 小时前
maven构件子模块步骤及注意事项
java·前端·maven
江湖人称菠萝包3 小时前
【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter3-语言基础
开发语言·前端·javascript
热门推荐
01DeepSeek本地部署详细指南02DeepSeek r1本地安装全指南03Ollama 安装教程：轻松开启本地大语言模型之旅04在Windows下安装Ollama并体验DeepSeek r1大模型05【deepseek】deepseek-r1本地部署-第一步：下载LM Studio06将DeepSeek接入Word，打造AI办公助手07本地部署DeepSeek教程（Mac版本）08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型10【人工智能】：搭建本地AI服务——Ollama、LobeChat和Go语言的全方位实践指南