html5语义化

djfml 发布于2019-08-01 16:22 / 3524人阅读

摘要：文本元素序号标签英文全称音标中文释义锚点换行略字符换行时机略粗体略加重斜体强调略删除删除线略下划线略下划线略源代码变量略示例略键盘输入缩写引用略定义略标签文本引用略语言元素略注释括号不支持时显示双向覆盖文本方向略小字下标上标略时间略通用元素

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的使用


饕(tāo)
餮(tiè)

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的使用


  这是一张图片

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无论代码位置如何，都会正确显示。




  
    姓名
    性别
    婚否

col和colgroup的作用

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

// 第一列
    // 第二列和第三列
  
  
     

  
    姓名 性别 婚否
  
  
    张三 男 未婚
  
  
    李四 女 已婚

姓名	性别	婚否
张三	男	未婚
李四	女	已婚

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插件

meter和progress

img map 和area

实现图区热点

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 标签对应的英文

云服务器 GPU云服务器语义化标签语义化 html 标签语义化语义分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50471.html

HTML语义化标签探析

摘要：具体的语义化标签探析本文主要是为了探析部分标签在语义化中的差别。同时也探索新加入的语义化标签。英文意思为，作用是定义列表中的项目。强调标签说明在上面的介绍中，已经介绍了和，个中差别，看英文既能分辨。什么是HTML语义化 HTML语义化就是根据具体内容，选择合适的标签进行代码的编写。便于开发者阅读和写出更优雅的代码，同时让搜索引擎的爬虫能更好的识别。为什么要语义化有利于SEO:搜...

DandJ 2019-08-01 15:01 评论0 收藏0
深入理解HTML5标签

摘要：可能一些有心的开发者会把的写的语义明白些，比如导航栏的用，边栏的用。 0. HTML5中最看重的理念语义化相比HTML有什么区别？在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容，这里搜集整理了一些语义化标签方面的问题和解答，以供大家参考。语义化这个概念应该说是伴着HTML5应运而生，那么什么是HTML5中所谓的语义化？简单来说就是：描述...

scq000 2019-08-01 14:47 评论0 收藏0