首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

DIVS该停止(滥用)了 我们喜欢(使用)标签。它们已经存在了几十年,这几十年来,当需要将一些内容包裹起来达到(添加样式或者布局目的时候,它们成为首选元素。...我意思主要是,它具有你需要结构。并且,我确定在你完成样式添加之后,它看起来会像你想要那个样子。... 复制代码 我已经看过(并且使用过)这种模式很久了,以这种方式构造文档非常有意义,既可以读取HTML,又可以更加简单地在CSS中设置页面样式。...分解: 因此,我们为页面提供了一个基本大纲:页眉,页脚和主要内容区域。现在是时候添加些美妙内容了。...这可能是文字文章博客,但也可用于社交媒体帖子,如推特脸书墙贴。 HTML5规范建议文章总有一个标题,标识它是什么,理想情况下使用标题元素(-)。

1.8K20
您找到你想要的搜索结果了吗?
是的
没有找到

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

DIVS该停止(滥用)了 我们喜欢(使用)标签。它们已经存在了几十年,这几十年来,当需要将一些内容包裹起来达到(添加样式或者布局目的时候,它们成为首选元素。...我意思主要是,它具有你需要结构。并且,我确定在你完成样式添加之后,它看起来会像你想要那个样子。... 我已经看过(并且使用过)这种模式很久了,以这种方式构造文档非常有意义,既可以读取HTML,又可以更加简单地在CSS中设置页面样式。...分解: 因此,我们为页面提供了一个基本大纲:页眉,页脚和主要内容区域。现在是时候添加些美妙内容了。...这可能是文字文章博客,但也可用于社交媒体帖子,如推特脸书墙贴。 HTML5规范建议文章总有一个标题,标识它是什么,理想情况下使用标题元素(-)。

97640

用Vue.js开发一个电影App前端界面

随着所有CSS样式渲染,我们应用程序目前应该像这样: ? 桌面页脚 ?...随着我们添加所有样式,我们应用程序应该如下所示: ? 电影组件(多路由) 我们现在App已经完成我们指定主要路径和我们页脚部分布局。让我们将路径扩展到显示特定电影所有信息电影组件。...首先,让我们正确地设置导航。如前所述,我们设置页脚目的是允许用户在电影之间导航。我们将使用Vuevue-routerrouter-link组件去实现导航并提供相应目标地址。...我们现在能够通过读取$route.params.id获得不同动态段内组件。 现在我们已经为电影组件设置了路由,让我们快速草拟组件并确保我们路由正常工作。...“添加到收藏夹”按钮从addToFavorites()方法处理简单切换即当单击某一部电影favorite时,文本之间切换“添加”和“删除”基于电影是否已添加删除收藏夹(hide类是创建类设置display

4K10

前端如何做好seo_seo五个步骤

2、在写HTML代码时应该注意 尽可能少使用无语义标签div和span; 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利; 不要使用纯样式标签... 我是页脚 footer使用注意: 可以是“网页”任意“section”底部部分; 没有个数限制,除了包裹内容不一样,其他跟header类似。...页脚区域中链接列表,虽然指向不同网站不同区域,譬如服务条款,版权页等,这些footer元素就能够用了。...section不是一般意义上容器元素,如果想作为样式展示和脚本便利,可以用div。...">段落1内容强调内容 段落2内容 上述代码添加CSS样式可以达到效果,但用只是向

68920

CSS规范--BEM入门

.block__element 代表.block后代,用于形成一个完整.block整体。 .block--modifier 代表.block不同状态不同版本。...这个例子中,网站logo完全是恰巧在.header内部,它也有可能在侧边栏或是页脚里面。一个元素范围可能开始于任何上下文,因此你要确定只在你需要用到BEM地方你才使用它。...在组件开发中其实推荐使用原子类,因为这会降低组件可复用性。可复用性最理想状态就是组件不仅仅在不同页面中表现一致,在跨项目的情况下,也能够运行良好。...更有甚者,来维护这块代码同事,直接在样式文件最后添加覆盖样式,这会造成一个非常严重问题了:同一个元素样式零散分布在文件不同地方,而且定位该元素选择器也可能各不相同。...为了覆盖前面权重过大样式,甚至通过添加额外类名标签名来增加权重。可想而知,此后这个样式文件维护难度就像雪球一样,越滚越大。

1.1K20

在 jQuery Mobile 中使用 UI 组件

在 jQuery Mobile 中,页眉默认用法是作为固定在 Web 页面顶部页面标题;在大部分情况下页脚是 Web 页面中最后一个元素,并且包括版权信息、其他超链接等内容。...创建页眉页脚很容易,就像将 data-role 属性添加到 HTML 元素一样。清单 1 显示了创建一个 Header 和 Footer 工具栏有多简单。 清单 1.... navbar 用于在一个页眉页脚内显示多达五个按钮导航项。...Hendrix Led Zeppelin 使用 data-role 属性值 list-divider,使这些列表项与其他列表项具有不同视觉样式...您也可以通过使用图标、缩略图和计数泡泡来创建不同视觉样式。您可以通过使用 ul-li-count 类,将计数泡泡添加到一个列表项(清单 9)。 清单 9.

8K20

Web前端如何进行SEO结构优化

在写HTML代码时应该注意 尽可能少使用无语义标签div和span; 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利; 不要使用纯样式标签,如...我是页脚 footer使用注意: 可以是“网页”任意“section”底部部分; 没有个数限制,除了包裹内容不一样,其他跟header类似。...页脚区域中链接列表,虽然指向不同网站不同区域,譬如服务条款,版权页等,这些footer元素就能够用了。...section不是一般意义上容器元素,如果想作为样式展示和脚本便利,可以用div。...="p">段落1内容强调内容     段落2内容 上述代码添加CSS样式可以达到效果

87110

Web前端如何进行SEO结构优化

在写HTML代码时应该注意 尽可能少使用无语义标签div和span; 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利; 不要使用纯样式标签,如...我是页脚 footer使用注意: 可以是“网页”任意“section”底部部分; 没有个数限制,除了包裹内容不一样,其他跟header类似。...页脚区域中链接列表,虽然指向不同网站不同区域,譬如服务条款,版权页等,这些footer元素就能够用了。...="p">段落1内容强调内容 段落2内容 上述代码添加CSS样式可以达到效果...图片文字网站名称,并设置对方网站超链接(点击后,切换弹出另一个新页面),使得用户可以从合作网站中发现自己网站,达到互相推广目的,因此常作为一种网站推广基本手段。

82320

Web前端如何进行SEO结构优化

在写HTML代码时应该注意 尽可能少使用无语义标签div和span; 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利; 不要使用纯样式标签,如...我是页脚 footer使用注意: 可以是“网页”任意“section”底部部分; 没有个数限制,除了包裹内容不一样,其他跟header类似。...页脚区域中链接列表,虽然指向不同网站不同区域,譬如服务条款,版权页等,这些footer元素就能够用了。...section不是一般意义上容器元素,如果想作为样式展示和脚本便利,可以用div。...="p">段落1内容强调内容     段落2内容 上述代码添加CSS样式可以达到效果

86420

Apriso 开发葵花宝典之四 CSS 篇

不同Panel设置不同样式名称 可以设置样式名称,也可以直接设置行内(Inline Style)样式 2、Form样式引入 每个Form ControlAdvanced也中可以设置样式 设置自定义样式名称...builder中提供了server mode和client mode两种页面运行模式,两种模式页面渲染模式不同,同样调试视图、debug tree等也存在差异(详细差异可能在其他文档中进行介绍)。...主要用于不同宽度图标无法对齐情况。尤其在列表导航时起到重要作用。...3个结构伪类、后代兄弟组合 8、尽量减少id使用,避免不必要重要元素样式 9、使用简写属性,如 div { padding: 8px 16px 4px 8px; margin: 8px 16px...否则,始终使用十六进制格式所需颜色实际名称 12、使用注释CSS,就像任何其他语言一样,分段注释代码是个好主意。

24430

你不知道 CSS 可以做 4 件事

我们可以将小人跑动动作分解,拼成下面的雪碧图: 通过设置不同background-position设置不同时间小人不通动作 @keyframes run { 0% { background-position...,把整个动画切分为多帧,第二个可选参数可以是 start end(默认)。...开发中我们一定遇到过 Web 应用程序中页脚问题,在这种情况下,具有任何块级样式页脚在处理较长内容时,可以正常工作,但在页面较短时时就不准确了。...外部容器display设为flex弹性布局,flex-flow设置方向为column纵向并设置最小高度为100vh 主体内容flex属性设为1 DOM节点 .../div> 样式代码 .container { display: flex; flex-flow: column; min-height: 100vh; } .section { flex

1.3K30

CSS入门指南-4:页面布局

display:none 通常被 JavaScript 用来在不删除元素情况下隐藏显示元素。把display设置为 none,该元素及所有包含在其中元素,都不会在页面中显示。...布局宽度 与高度不同,我们需要更精细地控制布局宽度,以便随着浏览器窗口宽度合理变化,布局能够作出适当调整,确保文本行不会过长过短。...现在我们再添加一个页眉和页脚: A Fixed-Width Layout ... 为了让页脚在最下一栏浮动到 aside 后边,我们为页脚应用clear:both,以组织它向上移动。...如此一来,只要为内部div设定一次样式,就可以把让所有内容元素与栏边界保持一致距离。而且,将来再需要调整时也会很方便。任何新增内容元素宽度都由这个内部div决定。

2.2K10

你不知道 CSS 可以做 4 件事

我们可以将小人跑动动作分解,拼成下面的雪碧图: 通过设置不同background-position设置不同时间小人不通动作 @keyframes run { 0% { background-position...,把整个动画切分为多帧,第二个可选参数可以是 start end(默认)。...开发中我们一定遇到过 Web 应用程序中页脚问题,在这种情况下,具有任何块级样式页脚在处理较长内容时,可以正常工作,但在页面较短时时就不准确了。...外部容器display设为flex弹性布局,flex-flow设置方向为column纵向并设置最小高度为100vh 主体内容flex属性设为1 DOM节点 .../div> 样式代码 .container { display: flex; flex-flow: column; min-height: 100vh; } .section { flex

1.2K10

彰显个性│博客园自定义主题「建议收藏」

经过自己摸索,终于将自己 博客园主页 设置成了自己满意样式,如下图所示: 该代码均已开源在Github上:极客飞兔Github 极客飞兔博客首页 极客飞兔博客详情页...,在本地网站调试成自己想要样式后,将其中 JS、CSS 进行编译打包,在博客园后台中设置即可 该大神怕大家不会部署,项目文档 中部署指南写一清二楚 部署该主题前,博客皮肤必须选择...目录下生成css和js两个文件,我们只需要将这两个文件内容分别复制放到页面定制CSS代码和页脚HTML代码中即可 在部署CSS代码时,一定要勾选模板默认CSS,这样系统就只会使用你复制这段样式了...> 加载条显示 页面看板 如果想要在页面的右下角添加页面看板功能的话 可以在页脚HTML导航中添加以下代码 <!...,这里特效是线性粒子跟随鼠标 可以在页脚HTML导航中添加以下代码 <!

99210

docsify配置+全插件列表

(添加字数统计)@827652549.这个插件与阅读进度条插件兼容这是一个字数统计插件,它提供了统计中文汉字和英文单词功能,并且排除了一些markdown语法特殊字符例如*、-等图片首先是添加js...(handsome也是这样~这是一个通用范式吗?)然后看上图,左右两边分别是不同样式,左边框框是空,右边框是填充了颜色。...tip|style:callout]> 填写你要内容则会变成下图效果图片以上,简单总结一下。这个插件拥有两种显示样式、四种高亮文本框,可行进行全局设置样式单个文本指定样式。...,填写时候要记得加引号copyYear就是年份,填写时候不需要加引号url就是网站链接,填写时候要记得加引号底下就是一些关于其他信息设置,可以选择开启并选择md路径。...------默认展开层级设置我们在配置参数中添加sidebarDisplayLevel: 0数字0就代表展开 只显示最表层【一级目录】数字1的话就会展开二级目录。

7.3K82

angular浏览器兼容性问题解决方案

,非常简单,将表格一列设置成绝对定位,在设置了绝对定位后,该列会脱离原来文档流,表格少了一列,所以需要加一个背景板来保证表格能够给这个固定列留出一个位置。...HTML代码大致如下,这个fixed-col可以为固定列样式,也可以设置成背景板样式,demo中是用其指定了固定列样式。...自定义页脚,加入额外页脚,来替代确定功能,此时有两种方式来实现: 只覆盖对应按钮,如确定按钮,此时按钮样式与默认页脚按钮是不一致,为保持一致,可以自定义样式,也可以直接使用默认页脚中按钮样式...解决方案: 使用表单reset()重置表单,但是重置操作需要放在setTimeout中,或者通过其他手段将重置操作作为表单初始化时最后一个宏任务执行。...,插件需要自己添加到项目文件中(根据angular团队所说,这个插件修复了一个IE10或者IE11bug,但是提交了太多代码,这会给增加现有的应用打包体积,虽然后面关于这个PR讨论了挺久,但是看样子是准备把这个放到

3K30

Java后端:html转pdf实战笔记

3、wkhtmltopdf 参数介绍常规选项 –allow 允许加载从指定文件夹中文件文件(可重复) –book* 设置一会打印一本书时候,通常设置选项 –collate 打印多份副本时整理...PDF文件标题(第一个文档标题使用,如果没有指定) –toc* 插入内容表中文件开头 –use-xserver* 使用X服务器(一些插件和其他东西没有X11可能无法正常工作) –user-style-sheet...指定用户样式表,加载在每一页中 –username HTTP认证用户名 –version 输出版本信息退出 –zoom 使用这个缩放因子 (default 1)页眉和页脚选项 –header-center...* (设置页眉和内容距离,默认0) –footer-center* (设置在中心位置页脚内容) –footer-font-name* (设置页脚字体名称) –footer-font-size* (...设置页脚字体大小default 11) –footer-html* (添加一个HTML页脚,后面是网址) –footer-left* (左对齐页脚文本) –footer-line* 显示一条线在页脚内容上

2K60
领券