避免常见的HTML5错误用法

最新推荐文章于 2024-04-30 14:22:09 发布
最新推荐文章于 2024-04-30 14:22:09 发布
阅读量609 收藏
点赞数
分类专栏： html5
不要使用section作为div的替代品
人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码：

<!-- HTML 4-style code -->
<div id="wrapper">
        <div id="header">
                <h1>My super duper page</h1>
                Header content
        </div>
        <div id="main">
                Page content 
        </div>
        <div id="secondary">
                Secondary content 
        </div>
        <div id="footer">
                Footer content 
        </div>
</div>
而现在在HTML5中，会是这样：

<!-- 请不要复制这些代码！这是错误的！ -->
<section id="wrapper">
        <header>
                <h1>My super duper page</h1>
                <!-- Header content -->
        </header>
        <section id="main">
                <!-- Page content -->
        </section>
        <section id="secondary">
                <!-- Secondary content -->
        </section>
        <footer>
                <!-- Footer content --> 
        </footer>
</section>
这样使用并不正确：<section>并不是样式容器。section元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或者XHTML的风格)，那么考虑如Kroc Camen所说，直接把样式写到body元素上吧。如果你仍然需要额外的样式容器，还是继续使用div吧。

基于上述思想，下面才是正确的使用HTML5和一些ARIA roles特性的例子（注意，根据你自己的设计，你也可能需要加入div）

<body>
<header>
        <h1>My super duper page</h1>
        <!-- Header content -->
</header>
<div role="main">
        <!-- Page content -->
</div>
<aside role="complementary">
        <!-- Secondary content -->
</aside>
<footer>
        <!-- Footer content -->
</footer>
</body>

如果你还是无法确定使用哪种元素，那么我建议你参考HTML5 sectioning content element flowchart
贵州大学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
抛弃 div 标签：改用这些 HTML 标签
我的博客，不一样的自我表达
04-29 326
Div标签是一种 HTML 元素，可用于将网页划分为多个部分，并可使用CSS设置样式。虽然div标签对于创建页面布局和分隔内容很有用，但不应过度或不必要地使用它们。通常最好为您要标记的内容使用最合适的HTMLdiv元素，而不是一直依赖标签。所以在这里，在本文中，我选择了一些可以轻松替换 div 标签的替代方法。他们是：部分此标记定义文档中的一个部分，例如章节或附录。它通常用于对语义相关的内容进行分组。
section和div的区别
热门推荐
sunshine940326的博客
09-21 6万+
在做移动web的时候，参考的案例用的是section而不是div，就好奇，section是什么鬼？section是属于听说过但是一直都没有用过的一个元素，所以百度查了一下section和div的区别，收获如下： 作者：贺师俊 链接：http://www.zhihu.com/question/20227599/answer/14582155 来源：知乎 著作权归作者所有，转载请联
html5中还有div吗,关于html5中的section标签与div标签的区别（内有实例）
weixin_35045970的博客
06-11 245
摘要 腾兴网为您分享:关于html5中的section标签与div标签的区别(内有实例)，周公解梦，智学网，学习计时，完美root等软件知识，以及网上预约医院软件，字体预览软件，铁血联盟卷土重来，海量小说，亿图，宝贝树，友基ex05,9669，上海医药学校，好大学在线cnmooc，拼客，斯坦福桥球场，快乐影音，mv聊天室，abb传动等软件it资讯，欢迎关注腾兴网。本篇文章主要的想大家介绍了关于HT...
HTML5之section与article与div
乱七八糟的
03-29 2133
W3C：标签定义文档中的节（section、区段）。 适用场景：（与article互相当干爹，怎么用分情况！） 用article呢还是用section呢？还是用div呢？ 当一个区域没有语义时果断用div标签！ 有语义就要分情况了 一个博文用article，然后用section将不同的段落分隔开。博文下面的评论用section，然后用article将每个评论分开。这个区域
html html5 很少用的标签
weixin_30566149的博客
10-11 71
1.<s>我是s标签</s> 示例： 注意：在html中已经废弃 2.<ins>我是ins标签</ins> 示例： 3.<del>我是del标签<del> 示例： 转载于:https://www.cnblogs.com/qiangmin/p/4019447.html...
避免常见的六种HTML5错误用法
01-31
人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码：而现在在HTML5中，会是这样：这样使用并不正确：并不是样式...
如何避免常见的6种HTML5错误用法
09-27
总结，避免HTML5错误用法的关键在于理解每个标签的语义含义，并正确地将它们应用于网页结构中。遵循这些原则，不仅可以提高代码质量，还能提升网站的可访问性和用户体验。在编写HTML5代码时，时刻记住，语义化是核心...
常见的HTML标记错误写法
09-28
下面是10个常见的HTML标记错误写法，了解它们避免它们，可以提高网页的质量和用户体验。 罪行1：把块级元素放入了内联元素内 在HTML中，元素可以分为块级元素和内联元素。块级元素，如div和p，用于形成文档结构，...
基于HTML5 FileSystem API的使用介绍
12-14
为此，我们可以使用`webkitStorageInfo.queryUsageAndQuota`方法，它会返回当前Web应用的存储使用量和总配额。成功回调会接收到这两个值，而错误回调则处理查询失败的情况。 **其他API操作** FileSystem API还包含...
html中section与div,HTML5中div、section、article的区别
weixin_36378771的博客
06-17 687
HTML5中新增了、、、、、、多个有语义的结构化标签元素。其中section和article这两个标签和div差不多功能，很容易混淆。div(分区division)这个标签是我们见得最多、用得最多的一个标签，以至于Div+CSS成了HTML网页设计的标准。本身没有任何语义，用作布局以及样式化。section(章节)简单地说section就是带有语义的div，。section表示一段专题性的内容，一...
编辑器不支持section html,小程序富文本编辑器editor初体验
weixin_36212732的博客
06-10 407
终于，微信在5月9号的 v2.7.0 版本中新增了 editor富文本编辑器组件，今天有时间了准备体验一下在5月6日的时候写了一篇 小程序富文本解析的「伪需求」，从wxParse到towxml的坑 ,当时还在感慨官方什么时候出个比较全面的富文本组件，谁知道没几天就发布了 editor 富文本组件。 熟悉下文档首先是兼容版本，最低要求 2.7.0 ，使用时确认下开发 工具 的调试基础库。 然后需要关...
CSS样式没有生效的常见原因
最新发布
Keep trying, keep going
04-30 709
如果你的样式文件仍然无法生效，请逐步排查上述可能的原因，并确保样式文件的正确性和适用范围。另外，使用浏览器的开发者工具可以帮助你检查样式是否应用成功，并查看样式规则和层叠顺序的情况。优先级不足：可能是样式文件的选择器优先级不足以覆盖目标元素的默认样式。可以通过使用开发者工具检查元素的样式并查看应用的样式规则，以确定是否存在样式冲突。样式代码错误：检查样式文件中的代码是否存在语法错误、拼写错误或其他问题，确保样式规则书写正确。样式层叠顺序：样式的层叠顺序可能导致你的自定义样式被其他样式覆盖。
JavaScript浏览器BOM
weixin_58139900的博客
11-07 8121
目录 window Window 尺寸 Windows的一些方法 Window History 一些方法： Window Location Window Navigator Windows 弹窗 系統提示框 计时事件 BOM事件 BOM（Browser Obejct Model）:浏览器对象模型 window 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全...
Common HTML Error Codes
江南才子
06-17 1631
Code Description Comment 100 Continue   101 Switching Protocols   200 OK Action completed successfully 201 Created Success following a POST command 202 Accepted Th
web前端：main、header、footer、nav、article、section标签的用法
网民阿三的博客
05-14 1万+
HTML5 添加了诸如main、header、footer、nav、article、section等大量新标签，这些新标签为开发人员提供更多的选择和辅助特性。 默认情况下，浏览器呈现这些新标签的方式与div相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。 标签main main标签用于呈现网页的主体内容...
用html5新布局元素代替div元素布局页面
yin_991的博客
10-27 1万+
用html5新布局元素代替div元素布局页面
三种隐藏 HTML 元素的方式
qq_45272642的博客
02-12 6933
在网页应用中，显示/隐藏某个元素或组件是一件经常要做的事情，尤其是在目前比较流行的单页应用中。 总体而言，有 3 种方式来实现 CSS 的 display: none; CSS 的 visibility: hidden; HTML5 的 hidden 属性（boolean） 它们之间有相同点和不同点。相同点很简单，都能使添加了这个属性的元素及其子元素『不被看见』。这篇文章着重来比较一下它们之间的差异。 display: none; 添加了这个属性的元素： 不占据页面空间（不影响布局），因为这个
HTML5替代div的元素
weixin_33804582的博客
02-26 198
section页面中的一个内容区块和 h1,h2等元素结合起来使用 article页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章 aside和article配合 header标签定义文档的页眉 hgroup标签用于对网页或区段（section）的标题进行组合 footer 页脚 nav导航链接 figure请使用 元素为元素组添加标题 ...
html div 替代,innerHTML替代或用div替換onchange事件
weixin_33124479的博客
06-17 429
我有一個html表單。它將國家，州，城市和PIN碼(手動輸入)發送到一個php文件，以便在ajax的幫助下處理。一旦提交，它將返回文本框中的PIN碼值。我想要的是，每當用戶第二次更改PIN碼的值時，表單需要重置。我所做的是，我用innerHTML的是這樣的：復位形式是這樣的：function resetpin() {document.getElementById('someid').innerHT...
对学习HTML语法和文档结构的心得和以后要避免的错误
05-30
(course == NULL) { cout << "请先录入课程信息" << endl; teacher_menu(); return; 学习HTML语法和文档结构的关键是掌握HTML标签的用法和语义化。在编 } ofstream fout("data.txt"); fout << course->id << " " << course->name << endl; for (写HTML代码时，应该遵循一定的规范，包括正确使用标签，避免嵌套错误，使用vector<Student>::iterator it = course->students.begin(); it != course->students.end(); it++) { fout << it->id <<合适的属性等。 在学习HTML时，需要注意以下几点： 1. 学习HTML标签的语义化 " " << it->name << " " << it->score1 << " " << it->score2 << " " << it->total，理解每个标签的作用和使用场景，避免滥用无意义的标签。 2. 学_score << endl; } fout.close(); cout << "数据已保存" << endl; teacher_menu(); } 习HTML标签的嵌套规则，避免嵌套错误，导致文档解析出错。 3. 学习 // 读取数据 void load_data() { ifstream fin("data.txt"); if (!fin.is_open()) { HTML标签的属性用法，避免滥用属性，使用不必要的属性会增加文档的复杂度 cout << "无保存的数据" << endl; return; } string id, name; fin >> id >> name; course = new Course(id, name); while (!fin.eof()) { string student_id, student_name; int score。 4. 学习HTML文档的结构，理解文档的头部和主体部分的作用和实1, score2, total_score; fin >> student_id >> student_name >> score1 >> score2 >> total_score; if现方式。 以后要避免的错误包括： 1. 避免滥用无意义的标签，如使用div (!student_id.empty() && !student_name.empty()) { Student student(student_id, student_name); student.score1 = score1标签代替具有语义化的标签。 2. 避免嵌套错误，如将块级元素嵌套; student.score2 = score2; student.total_score = total_score; course->add_student(student); } } fin.close(); cout << "数据已加载" << endl; } private: Course* course; // 课程 在行内元素中，或将表格元素嵌套在列表元素中。 3. 避免滥用属性，}; int main() { ScoreSystem system; system.load_data(); system.select_identity(); return 0; } ``` 如使用不必要的属性或将属性写在不适当的标签中。 4. 避免忽略HTML文档这个程序实现了一个简单的单门课程成绩管理系统，包括教师和学生两个身的结构，如未正确编写文档头部信息或忽略主体部分的分块结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值