html5语义化

2024年4月14日 80次阅读来源: 长空

1. 文本元素

序号	HTML标签	英文全称	音标	中文释义
1	a	anchor	[ˈæŋkɚ]	锚点
2	br	break	[brek]	换行
3	wbr	Word Break	略	字符换行时机
4	b	bold	略	粗体
5	strong	strong	略	加重
6	i	italic	[ɪˈtælɪk]	斜体
7	em	emphasize	[ˈɛmfəˌsaɪz]	强调
8	del	delete	略	删除
9	s/strike	strikethrough	[straɪki:θ’ru:]	删除线
10	u	underline	略	下划线
11	ins	insert	略	下划线
12	code	code	略	源代码
13	var	variable	[ˈveriəbl]	变量
14	samp	sample	略	示例
15	kbd	keyborad	略	键盘输入
16	abbr	abbreviation	[əˌbriviˈeʃən]	缩写
17	cite	citation	[saɪˈteʃən]	引用
18	dfn	define	略	定义
19	mark	mark	略	标签文本
20	q	quotation	[kwoʊˈteɪʃn]	引用
21	ruby	ruby	略	语言元素
22	rt	ruby text	略	注释
23	rp	ruby parenthesis	[pəˈrɛnθɪsɪs]	括号不支持ruby时显示
24	bdo	bidirectional override	[ˌbaɪdɪˈrɛkʃənəl]	双向覆盖文本方向
25	small	small	略	小字
26	sub	subscript	[ˈsʌbˌskrɪpt]	下标
27	sup	superscript	[ˈsu:pərskrɪpt]	上标
28	time	time	略	时间
29	span	span	略	通用元素

ruby的使用

<ruby>
饕<rp>(</rp><rt>tāo</rt><rp>)</rp>
餮<rp>(</rp><rt>tiè</rt><rp>)</rp>
</ruby>

2. 分组元素

序号	HTML标签	英文全称	音标	中文释义
1	p	paragraph	[ˈpærəgræf]	段落
2	div	division	[dɪˈvɪʒən]	部分除法
3	blockquote	block quote	略	大块引用
4	pre	pre-formatted	略	预定义格式
5	hr	Horizontal Rule	略	水平线
6	ul,ol	un/order list	略	有序/无序列表
7	li	list item	略	列表项
8	dl	define list	略	自定义列表
9	dt	define term	略	自定义列表项
10	dd	define Description	略	自定义列表数据
11	figure	figure	略	流数据
12	figcaption	figure caption	略	流数据标题

figure的使用

<figsure>
  <figcaption>这是一张图片</figcaption>
  <img src="img.png">
</figsure>

3. 表格元素

序号	HTML标签	英文全称	音标	中文释义
1	table	table	略	表格
2	thead	table head	略	表头
3	tbody	table body	略	表体
4	tfoot	table foot	略	表脚
5	tr	table row	略	表的一行
6	th	table head	略	表头
7	td	table data	略	表的数据
8	col	column	[ˈkɑ:ləm]	一列
9	colgroup	column group	略	一组列
10	caption	caption	略	表格名称

thead和th的区别

thead,tbody,tfoot无论代码位置如何，都会正确显示。

<tfoot></tfoot>
<tbody></tbody>
<thead>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>婚否</th>
  </tr>
</thead>

col和colgroup的作用

行的样式可以加在tr上，但列的样式如何添加呢？答案就是使用col和colgroup.

<table border="1" style="width:300px;">
  <colgroup>
    <col> // 第一列
    <col style="background:red;" span=2>// 第二列和第三列
  </colgroup>

  <tr>
    <th>姓名</th><th>性别</th><th>婚否</th>
  </tr>
  <tr>
    <td>张三</td><td>男</td><td>未婚</td>
  </tr>
  <tr>
    <td>李四</td><td>女</td><td>已婚</td>
  </tr>
</table>

4. 文档元素

序号	HTML标签	英文全称	中文释义
1	h1-h6	header	标题
2	header	header	首部
3	section	section	部分
4	footer	footer	尾部
5	nav	navigation	导航
6	article	article	文章
7	address	address	地址
8	aside	column	旁注
9	hgroup	header group	一组标题
10	details	details	细节
11	summary	summary	details的标题

article

article如同body，里面可以包含完整的header,section,footer.

5. 嵌入元素

序号	HTML标签	英文全称	中文释义
1	img	image	图片
2	map	map	分区响应图
3	area	area	分区响应图区域
4	audio	audio	音频
5	video	video	视频
6	iframe	inline frame	内联框架
7	embed	embed	使用插件嵌入
8	canvas	canvas	画图
9	meter	header group	度量衡，取值范围
10	object	object	嵌入对象
11	param	param	通过object传递给插件的参数
12	progress	progress	进度条
13	source	source	媒体资源
14	svg	Scalable Vector Graphics	可缩放矢量图形
15	track	track	附加轨道，如字幕

object和param

object和param是4.0的东西，现在被embed,audio,video等替换。

embed插件

<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" width="800" height="600"></embed>

meter和progress

<progress value="30" max="100"></progress>
<meter value="60" min="10" max="100" low="40" high="80" optimum="60"></meter>

img map 和area

实现图区热点

<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="47,33,132,102" href="http://www.baidu.com" target="_blank" alt="百度">
  <area shape="circle" coords="232,115,40" href="http://www.soso.com" target="_blank" alt="搜搜">
  <area shape="poly" coords="56,151,177,182,50,217" href="http://www.haosou.com" target="_blank" alt="好搜">
</map>

6. 表单元素

序号	HTML标签	英文全称	中文释义
1	form	form	表单
2	input	input	输入audio/checkbox
3	textarea	textarea	文本输入框
4	select	select	下拉选择
5	option	option	下拉选项
6	optgroup	option group	选项组
7	button	button	按钮
8	datalist	data list	数据列表
9	fieldset	field set	表单字段集
10	legend	legend	说明/传说
10	output	output	输出结果

7. 全局属性

序号	HTML标签	英文全称	中文释义
1	id	id	id
2	class	class	class
3	accesskey	accesskey	快捷键(alt+指定键)
4	contenteditable	让文本处于可编辑状态
5	dir	dir	方向
6	hidden	hidden	隐藏
7	lang	lang	局部设置语言
8	title	title	额外提示
9	tabindex	tab index	按tab键焦点获取顺序
10	style	style	内联样式

8. 参考资料

html 标签对应的英文

    原文作者：长空
    原文地址: https://segmentfault.com/a/1190000008455369
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。