学习html5系列之比较典型的div滥用

最新推荐文章于 2024-04-06 23:15:58 发布

weixin_34049032

最新推荐文章于 2024-04-06 23:15:58 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/280773/838810

本文探讨了网站开发中常见的div滥用问题，并提供了优化建议，以减少代码冗余，提升页面美观性和维护性。通过实例对比，展示了如何简化结构，达到相同展示效果的同时，提高代码效率。

在做网站过程过比较典型的div滥用，在很多网站中都可看到如下比较典型的div滥用情况。 div滥用情况：

网站首页
新闻中心
网站案例
产品中心
在线招聘
联系我们

优化后可实现相同效果：

网站首页
新闻中心
建站套餐
产品中心
关于我们
联系我们

最上面的代码定义了一个ul，它是一个块元素。外层的2个div也是块元素。虽然div中的id指明了其作用，但去掉其中1个或2个div后，我们仍然得到相同的效果。过度使用div会导致代码臃肿，也不利于页面的美化和维

转载于:https://blog.51cto.com/280773/838810

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34049032

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

基于官方规范系列篇之——HTML 篇（七）iframe

weixin_44168130的博客

12-19

1222

本文介绍了大名鼎鼎的 iframe，介绍了其基本使用，包括 src、srcdoc、loading 属性、sandbox 属性、allow 属性等。还扩充了一下 iframe 内部跳转链接，介绍了为何业界普遍不采用 iframe 作为微前端解决方案的原因之一。

【前端开发】从0到1，带你开启HTML5学习之旅

大雨的博客

08-16

736

HTML5是构建现代网页的核心技术，相比HTML4在语义化标签、多媒体支持和本地存储等方面有显著改进。本文系统介绍了HTML5的基础语法、元素使用和新特性，包括文档结构、表单处理、图像与媒体元素、离线存储等。通过实践项目展示了如何创建响应式网页，并提供了兼容性解决方案和优化技巧。HTML5为网页开发带来更多可能性，结合CSS和JavaScript能创建功能丰富、用户体验良好的网页应用。文章旨在帮助开发者掌握HTML5的核心知识，并为持续学习新技术提供方向。

参与评论您还未登录，请先登录后发表或查看评论

【译】停止滥用div!HTML语义化介绍

pangjiaming99的博客

04-13

333

DIVS该停止（滥用）了我们喜欢（使用）<div>标签。它们已经存在了几十年，这几十年来，当需要将一些内容包裹起来达到（添加）样式或者布局目的的时候，它们成为首选元素。查看线上站点时，看到像下面这些内容的情况依旧很常见： <div class="container" id="header"> <div class="header header-main"&...

【前端系列教程之HTML5】06_HTML5新标签

波哩个波的博客

11-19

1901

一、HTML5新布局标签许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部. 首先你要搞清楚一个概念，HTML并不是用来写页面样式的，而是用来表示一个网页的基本架构的，样式用CSS来实现。 HTML5除了提出很炫的新效果以外还加强了语义化结构 HTML5新增的...

【译】停止滥用div! HTML语义化介绍

weixin_34292287的博客

04-13

225

学籍管理页面html脚本之家,学习如何书写整洁规范的HTML标记

weixin_36439481的博客

06-03

148

良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候, 我总是首先告诉他们: 良好的CSS只存在于良好的HTML标记基础上。这就好像一间房子需要一个坚固的地基一样，对不？整洁、语义化的HTML标记具有很多的优势，但却还是有很多网站使用着并不友好的标记写法。让我们来看一些写得并不友好的HTML标记, 并针对这些问题进行讨论，从而学习如何书写整洁规范的HTML标记。脚本之家注: Chris...

【前端｜HTML系列第2篇】HTML零基础入门之标签元素

A_D_H_E_R_E的博客

06-26

1713

掌握html常用表情的使用、基础特性以及用途。本篇文章详细的介绍了html常用标签的特点，展现，属性以及应用等方面，希望能够帮助零基础小白快速入门html，也可以作为大家查询html常用标签如何使用的检索工具。如果觉得写的不错，请给小豪点个关注吧！

HTML学习笔记

weixin_46485886的博客

04-06

854

html学习笔记。为什么会设计html？html是什么？元素和标签是什么？有哪些常用标签？属性是什么？文档结构的构成。注释。HTML5与普通html的区别？HTML新增的标签。

html5 图形组件,HTML5 组件: 实现标准组件

weixin_32312889的博客

06-05

392

关于本系列HTML5 的标准 UI 组件模型目前仍正不断演变。在本系列文章中，HTML5 专家 David Geary 将向您展示如何使用现有技术创建您自己的专属 HTML5 组件，以及如何利用现有的规范定义一个真实的 HTML5 组件系统。在这个由三部分组成的系列文章的前两部分中，您已经学习了如何实现一个专属 HTML5 滑块组件。该组件提供了许多复杂功能；例如，当用户单击轨道时，该组件会使用 ...

DIV+CSS入门教程

06-22

标题中的"DIV+CSS入门教程"指的是学习使用HTML中的DIV元素配合CSS（层叠样式表）进行网页布局的基础教程，适合初学者。通常，这种布局方式被称为“Div+CSS布局”，但实际上是不准确的术语。在描述中提到，"DIV+CSS...

html页面怎么获取vue里面的data,Vue中避免滥用this去读取data中数据

weixin_31487917的博客

06-09

4135

这篇文章主要介绍了Vue中避免滥用this去读取data中数据的的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下前言在Vue中，data选项是个好东西，把数据往里一丢，在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据，至于在哪里要避免滥用，如果滥用会导致什么后果，本专栏将会一一揭晓。一、用this读取data...

HTML5andCSS3面试题大全

donglize521521的博客

03-08

6129

文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引

HTML5入门指南：新特性与实用标签解析

但在HTML5中，鼓励使用更具体的结构化元素，如`<section>`和`<article>`，这样可以使页面结构更清晰，减少不必要的`<div>`滥用。 6. 多媒体支持 HTML5引入了`<audio>`和`<video>`标签，使得在网页中嵌入音频和视频...

美国职业棒球大联盟历史数据SQL数据库项目-19世纪至今的棒球比赛数据球队信息球员统计127个CSV文件相互关联-用于存储查询分析美国职业棒球大联盟从19世纪至今的完整历史数据支持.zip

09-10

fpga美国职业棒球大联盟历史数据SQL数据库项目_19世纪至今的棒球比赛数据球队信息球员统计127个CSV文件相互关联_用于存储查询分析美国职业棒球大联盟从19世纪至今的完整历史数据支持.zip

pyjson5-0.9.1-1.el8.tar.gz

09-10

# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm

探寻数学活动经验的本质-助力学生深度学习.doc