CSS与HTML使用误区

误区一.多p症 

上述使用使用多余的p标签现状,就称为“多p症”,理应简化成下

误区二.多类class症  注意点class可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目

立即学习“前端免费学习笔记(深入)”;

一段新闻(新闻标题、新闻详情内容)

Elastic Layout Example—View Source for the HTML and CSS

Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

上述类名使用news-head与news-text 就称为”多类症“表现,不需要这么多的类区分元素样式

最好使用p(pision)代表部分而不是没有语义(大多数人误解p无语义!!!),实际上p可以将文档划分为几个有意义的区域.

类名news从而识别整个新闻条目。然后可以使用层叠(cascade)样式识别新闻标题、文本,理应修改如下

Elastic Layout Example—View Source for the HTML and CSS

Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

span 对行内元素进行分组或标识

Andy wins an Oscar for his cameo in Iron Man

Public and on Februray 22nd, 2009 By Harry Knowles

误区三.id使用误区 用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航、内容区域)

/*大量的使用id,很难找到唯一名称混乱*/#andy, #rich, #jeremy, #james-box, #sophie {    font-size: 1em;    font-weight: bold;    border: 1px solid #ccc;}/*只需一个普通类替代它*/.staff {    font-size: 1em;    font-weight: bold;    border: 1px solid #ccc;}

用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航、内容区域)

CSS与HTML使用误区

更多CSS与HTML使用误区相关文章请关注PHP中文网!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1607554.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
CSS属性transparent实现各种三角形示例
上一篇 2025年12月23日 20:49:20
用CSS实现带箭头的流程进度条
下一篇 2025年12月23日 20:50:01

相关推荐

  • UC浏览器如何导入其他浏览器书签_UC浏览器书签数据导入步骤

    UC浏览器如何导入其他浏览器书签_UC浏览器书签数据导入步骤UC浏览器如何导入其他浏览器书签_UC浏览器书签数据导入步骤UC浏览器如何导入其他浏览器书签_UC浏览器书签数据导入步骤UC浏览器如何导入其他浏览器书签_UC浏览器书签数据导入步骤

    首先通过源浏览器导出书签为HTML文件,再将其传输至手机存储,接着在UC浏览器中选择导入该文件,最后检查书签是否完整迁移。 如果您希望将其他浏览器的书签迁移到UC浏览器中,以便在新设备或应用中继续使用常用网站链接,则可以通过导出和导入HTML文件的方式实现数据迁移。以下是具体操作步骤: 本文运行环境…

    2026年10月3日 • 用户投稿
    100
  • 2025 年 Python 现状:83% 仍在运行旧版,Python Web 开发复兴

    2025 年 Python 现状:83% 仍在运行旧版,Python Web 开发复兴2025 年 Python 现状:83% 仍在运行旧版,Python Web 开发复兴2025 年 Python 现状:83% 仍在运行旧版,Python Web 开发复兴2025 年 Python 现状:83% 仍在运行旧版,Python Web 开发复兴

    第八届年度 python 开发者调查现已正式发布,基于来自全球超过 30,000 名 python 开发者的反馈。本次调研由 python software foundation 联合 jetbrains 的 pycharm 团队共同完成。 2025 年 Python 现状(精简速览)半数 Pyth…

    2026年10月3日 • 用户投稿
    200
  • 小米3nm旗舰SoC玄戒O1到底是不是自研:Arm又一次回应!

    小米3nm旗舰SoC玄戒O1到底是不是自研:Arm又一次回应!小米3nm旗舰SoC玄戒O1到底是不是自研:Arm又一次回应!小米3nm旗舰SoC玄戒O1到底是不是自研:Arm又一次回应!小米3nm旗舰SoC玄戒O1到底是不是自研:Arm又一次回应!

    9月16日,关于小米即将推出的3nm旗舰SoC玄戒O1是否真正自研的问题,Arm官方再次作出回应。 在Arm UNLOCKED峰会后的媒体交流中,Arm高级副总裁兼终端事业部总经理Chris Bergey表示,当前主流智能手机厂商纷纷投身芯片自研已成为不可忽视的行业趋势。他提到,苹果、三星和华为早已…

    2026年10月3日 • 用户投稿
    300
  • 优化PHP框架的性能表现_通过ThinkPHP实现php框架怎么用的调优

    启用生产模式、配置与路由缓存、优化数据库查询、合理使用页面缓存是提升ThinkPHP性能的关键。通过关闭调试模式、生成配置缓存文件、设置数据库索引与查询缓存、开启模板及页面缓存,可显著降低资源消耗、加快响应速度,实现高效稳定的Web应用运行。 提升PHP框架的性能,关键在于减少资源消耗、加快响应速度…

    2026年10月2日
    500
  • 5 月上线,微软预告网页版 OneDrive 更新:AI 梳理整合各种文档

    5 月上线,微软预告网页版 OneDrive 更新:AI 梳理整合各种文档5 月上线,微软预告网页版 OneDrive 更新:AI 梳理整合各种文档5 月上线,微软预告网页版 OneDrive 更新:AI 梳理整合各种文档5 月上线,微软预告网页版 OneDrive 更新:AI 梳理整合各种文档

    根据微软近期在 microsoft 365 路线图中的更新内容,该公司计划于今年5月为microsoft 365用户提供网页版onedrive云盘服务的升级。此次更新将引入ai功能,用于自动分析、整理和归纳各类文档内容。这项功能将涵盖多种文件类型,包括但不限于doc、docx、fluid、loop、…

    2026年10月2日 • 用户投稿
    200
  • 搜狗浏览器如何导出书签?备份书签的简单操作方法

    搜狗浏览器如何导出书签?备份书签的简单操作方法搜狗浏览器如何导出书签?备份书签的简单操作方法搜狗浏览器如何导出书签?备份书签的简单操作方法搜狗浏览器如何导出书签?备份书签的简单操作方法

    搜狗浏览器导出书签可通过三种方式:一、点击【收藏】图标,选择【更多功能】→【导入/导出收藏】→【导出收藏到html】,保存为HTML文件;二、通过菜单【三条横线】→【收藏】→【整理书签】→点击【导出】,选择路径保存;三、进入【收藏】→【备份/还原】→【备份到本地】,自动打包为HTML文件并保存。三种…

    2026年10月2日 • 用户投稿
    100
  • Symfony 5与Mercure实时通信集成:配置、启动与常见访问问题排查

    本文详细介绍了如何在Symfony 5项目中集成Mercure实时通信服务。内容涵盖Mercure Hub的安装、环境变量配置、服务器启动命令,并着重解决了初次配置时常见的Mercure Hub访问问题,强调了URL端口一致性的重要性,确保开发者能顺利构建实时应用。 Mercure实时通信服务概述 …

    2026年10月2日
    200
  • Js处理滚动条和日期框

    Js处理滚动条和日期框Js处理滚动条和日期框Js处理滚动条和日期框Js处理滚动条和日期框

    文章总览图 此思维导图中的语法要结合文章内容来看,切记不可死读书,要活学活用。 Js处理1.常用的元素基本操作是什么? 四个基本操作。 1.send_keys() 2.click() 3.获取元素的文本内容。 4.获取元素的属性。 find_element_by_xpath()是我们的元素对象。 .…

    2026年10月2日 • 用户投稿
    200
  • sublime是干嘛的 sublime是什么软件

    sublime是干嘛的 sublime是什么软件sublime是干嘛的 sublime是什么软件sublime是干嘛的 sublime是什么软件sublime是干嘛的 sublime是什么软件

    Sublime Text 是一款跨平台代码编辑器,以其速度、可定制性和优雅界面著称。其核心优势包括:强大的插件生态系统,可扩展到各种编程语言和任务。丰富快捷键,提升编码效率。对多种编程语言提供语法高亮和代码自动补全。虽然Sublime Text 并非免费,也缺乏强大的调试功能,但它是一款轻巧灵活的代…

    2026年10月2日 • 用户投稿
    100
  • 悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程

    悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程

    首先通过悟空浏览器内置功能导出书签为HTML文件,进入书签页面后点击更多选项,选择书签管理并导出为HTML格式,保存至下载目录;若无此功能可手动访问应用数据目录提取书签数据库文件,再用SQLite工具转换为HTML;也可借助第三方同步工具将书签上传云端,在其他设备或浏览器中登录同一账号后导出为HTM…

    2026年10月2日 • 用户投稿
    100
  • Linux文件系统tree命令使用详解

    tree命令用于以树状图展示目录结构,需手动安装,支持层级限制、隐藏文件显示及输出格式定制,适用于目录分析与文档整理。 tree命令用于以树状图的形式列出目录结构,直观展示文件和子目录的层级关系。它不是Linux系统默认安装的工具,但功能强大,适合快速查看复杂目录内容。 安装tree命令 大多数Li…

    2026年10月2日
    200
  • javascript闭包怎么管理浏览器缓存

    javascript闭包怎么管理浏览器缓存javascript闭包怎么管理浏览器缓存javascript闭包怎么管理浏览器缓存javascript闭包怎么管理浏览器缓存

    闭包不能直接操作浏览器缓存,但可通过封装缓存逻辑间接影响缓存行为:1. 利用闭包维持对缓存变量的引用,实现数据的存储与检索;2. 在闭包中实现缓存过期、更新和清理策略;3. 结合http头部信息(如cache-control)决定缓存读取与更新;4. 与service worker协同实现动态缓存管…

    2026年10月2日 • 用户投稿
    100
  • Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入

    Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入

    Archiveofownour书签同步功能位于设置界面,支持多端实时同步。用户登录同一账号后,可在手机、电脑等设备间自动同步书签数据,通过加密传输保障隐私安全,并可点击“立即同步”手动刷新。配合浏览器插件与二维码扫码登录,实现跨设备无缝接入。 Archiveofownour书签同步功能使用指南 Ar…

    2026年10月2日 • 用户投稿
    200
  • JavaScript数据属性值安全转换为数字的专业指南:避免NaN的策略

    本教程详细阐述了在JavaScript中如何安全地将HTML数据属性(data attributes)的值转换为数字,并确保在值无效时返回0,从而有效避免在计算中出现NaN。文章重点介绍了使用parseFloat()而非Number()进行转换,并强调了将|| 0操作符正确放置在转换函数外部的关键性…

    2026年10月2日
    100
  • 项目文件夹配置与多文件管理技巧

    项目文件夹配置与多文件管理技巧项目文件夹配置与多文件管理技巧项目文件夹配置与多文件管理技巧项目文件夹配置与多文件管理技巧

    高效的项目文件夹结构应具备清晰、一致、可扩展的特点。1. 顶层目录通常包括src(源代码)、data(数据)、docs(文档)、assets(资源)、lib(依赖库)、build(构建输出)、tests(测试)等;2. 每个目录下按模块或功能进一步细分,如src下分components、pages、…

    2026年10月2日 • 用户投稿
    200
  • 苹果手机火狐浏览器怎么改成电脑ua标识

    什么是ua标识 ua标识,全称为用户代理(User-Agent)标识,是浏览器向网站发送请求时附带的一段字符串,用于告知服务器当前所使用的设备类型、操作系统以及浏览器版本等信息。通过修改ua标识,可以让网页误认为你正在使用电脑浏览器访问,从而加载桌面版网页内容。 更改ua标识的优势 部分网站为电脑端…

    2026年10月2日
    000
  • sublime执行html代码 sublime怎么在浏览器运行html

    sublime执行html代码 sublime怎么在浏览器运行htmlsublime执行html代码 sublime怎么在浏览器运行htmlsublime执行html代码 sublime怎么在浏览器运行htmlsublime执行html代码 sublime怎么在浏览器运行html

    sublime text不能直接运行html文件,因为它是一个文本编辑器而非浏览器或ide。1. 编写html代码并保存为.html文件;2. 通过双击或右键选择浏览器打开文件;3. 使用默认或指定浏览器查看效果。sublime text提供emmet插件、自动补全、代码高亮、多光标编辑和自定义代码…

    2026年10月2日 • 用户投稿
    200
  • Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入

    Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入

    Archiveofownour收藏夹导入教程在个人中心的“数据管理”中,打开平台后点击“导入收藏夹”,上传HTML格式书签文件即可完成导入;多设备同步需登录同一账户并开启“同步设置”,支持端到端加密传输;平台还具备跨设备合并、智能标签、时间轴视图、自定义过滤及离线查看等核心功能。 Archiveof…

    2026年10月2日 • 用户投稿
    200
  • Sublime Text 中文显示乱码的编码设置方案

    Sublime Text 中文显示乱码的编码设置方案Sublime Text 中文显示乱码的编码设置方案Sublime Text 中文显示乱码的编码设置方案Sublime Text 中文显示乱码的编码设置方案

    sublime text 中文显示乱码主要是由于文件编码与软件默认解码方式不匹配所致,解决方法包括:1. 使用 notepad++ 等工具检测文件实际编码(如 utf-8、gbk);2. 打开文件时通过 reopen with encoding 选择正确编码;3. 修改 sublime text 用…

    2026年10月2日 • 用户投稿
    900
  • JS中的循环怎么使用

    JS中的循环怎么使用JS中的循环怎么使用JS中的循环怎么使用JS中的循环怎么使用

    JS中的循环主要用于重复执行一段代码,直到满足特定条件为止。 掌握它们对于处理数组、对象以及执行重复性任务至关重要。 解决方案 JavaScript 提供了几种循环结构,各有用途: for 循环: 这是最常用的循环之一,尤其适用于已知循环次数的情况。 for (let i = 0; i < 1…

    2026年10月2日 • 用户投稿
    100

发表回复

登录后才能评论
关注微信