搜索
首页web前端H5教程HTML5中标签和常用规则有哪些?html5标签以及规则的介绍

这篇文章给大家介绍的内容是关于HTML5中标签和常用规则有哪些?html5标签以及规则的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1. 命名规则
[强制]class:必须单词全字母小写,单词间以-分隔,且必须代表相应的模块或部件的内容或功能,不得以html内置样式进行命名,命名应该具有明确的语义。
[强制]id:必须保持在页面中的唯一性,命名应该具有明确的语义。

2. 标签
[强制]Html中的标签名必须使用小写字母。
[强制]标签的闭合要符合html5的规定。
[强制]标签的使用必须符合标签的嵌套规则,例:p不得置于p中,tbody必须置于table中。
[建议]标签的使用必须遵循标签的语义,例:
p - 段落
h1,h2,h3,h4,h5,h6- 层级标题
strong,em - 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义列表
[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。

3. 属性
[强制]属性必须使用小写字母,其属性值必须用双引号包围。
[建议]布尔类型的建议不添加属性值。自定义属性建议以 xxx- 为前缀,推荐使用data-

4. DOCTYPE
[强制]使用doctype 来启用标准模式,建议使用大写的 DOCTYPE

5. 语言编码
[建议]有助于提高页面的可访问性,必须设置正确的lang属性,例:64e387cbdaec8b435704b16aa67c8742
[强制]页面必须指定字符编码的meta,且必须是 head 的第一个直接子元素,例:37239b482b732c1479c24c4aace4db31。

6. CSS和JavaScript引入
[强制]引入css时必须指明rel="stylesheet",在引入css和javascript时必须指明type属性。
[建议]Javascript代码必须放在页面末尾或采用异步加载。

7. Head内容
[强制]Title标签必须设置为head的直接子元素,并紧随charset声明之后。
[强制]Favicon保证可访问,例:ef2b85b6f15d843acf8c7b69f66d9445
[强制]Viewport属性必须指定。

8. 图片
[强制]禁止 img 的 src 取值为空,延迟加载的图片也要增加默认的 src属性值。
[建议]重要图片添加 alt 属性值。
[建议]添加 width 和 height 属性以避免页面抖动。

9. 控件标题
[强制]文本标题的控件必须使用 label 标签将其与其标题相关联,例:

<label><input type="checkbox"name="confirm" value="on"> 我已确认上述条款</label>或<labelfor="user">用户:</label><inputtype="text" name="user" id="user">

10. 按钮
[强制]使用 button 元素时必须指明 type 属性值

11. 可访问性
[建议]当使用 JavaScript 进行表单提交时,应使原生提交功能正常工作。
[建议] 根据内容类型指定输入框的 type 属性,例:f267505e5138c154de5cd3e5a02b564f

12. 多媒体
[建议]使用 audio 以及 video 标签来播放音频、视频时,应当注意格式:
音频格式:MP3、WAV、Ogg
视频格式:MP4、WebM、Ogg

13. 注释

[强制]针对页面或模块的CSS、javascript代码必须进行详细的注释

相关推荐:

html5页面结构的变化以及增加和删除标签的总结

HTML5中div标签的实例代码

以上是HTML5中标签和常用规则有哪些?html5标签以及规则的介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
H5代码:Web开发人员的最佳实践H5代码:Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括:1.使用正确的DOCTYPE声明和字符编码;2.采用语义化标签;3.减少HTTP请求;4.使用异步加载;5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5:网络标准和技术的发展H5:网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能,使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗?探索细节H5是HTML5的速记吗?探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称,它代表了一个更广泛的现代网页开发技术生态:1.H5包括HTML5、CSS3、JavaScript及相关API和技术;2.它提供更丰富、互动、流畅的用户体验,能在多设备上无缝运行;3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5:网络开发中常用的术语H5和HTML5:网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西,即HTML5。HTML5是HTML的第五个版本,带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能,提升了网页的表现力和交互性。

H5指的是什么?探索上下文H5指的是什么?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:工具,框架和最佳实践H5:工具,框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面,支持组件化开发。2.React通过虚拟DOM优化页面渲染,适合复杂应用。3.Webpack用于模块打包,优化资源加载。

HTML5的遗产:当前了解H5HTML5的遗产:当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码:可访问性和语义HTMLH5代码:可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构,提高SEO。2.ARIA属性如aria-label增强可访问性,辅助技术用户可顺利使用网页。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)