3、重新认识alt属性 无论您制作网站多久，您可能都会惊讶地知道这些关于著名但又神秘的alt属性的几个功能。 alt属性是每个img标签必须有的，但空的alt属性是完全有效的。...让我们来看看： a标签旨在将一个文件链接到另一个文件或在新选项卡或当前页面中打开链接。 但是，当我们希望触发诸如汉堡包菜单或图像库之类的操作时，这个标签并不理想。...7、必要时使用roles 为了告诉屏幕阅读器用户我们的链接触发一个动作，实际上并不是一个普通的a标签，我们必须添加一个值为“button”的roles属性。 但要小心！...HTML语义元素具有已应用的默认角色：标签的“导航”， 标签的“链接”等。 这意味着只有当我们希望更改这些默认值时，才需要使用角色属性。...我最喜欢的信息来源是A11y项目，A11y Wins，HTML5 Doctor和MDN。
然后，当我尝试不同的方法时，我开始把我认为有意义的东西包含在我的探索过程中。 在这篇文章中，我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。...当我在寻找一个出色的 CSS 架构时我究竟在找什么 当我将不同的方法拼凑在一起以形成我自己的习惯时，我会寻找以下四个特点： 我必须 立即知道编辑一个 class 是否安全，会不会干扰其他 CSS。...在传统的 BEM 中，当你使用修饰符时，你应该 将块和修饰符添加 到 HTML 中，以便在新的 .button--secondary 中不重写 .button 样式。 ? ?...在这一点上，你仍然可能不喜欢 BEM 丑陋的 --modifier 语法。我知道为什么，但我爱上这个语法是因为我很讨厌命名。有时，我发现需要使用很多单词来命名一个 BEM 块或元素。...你可能会说，“但这是违反 BEM 惯例的！”是的，但请阅读下一篇文章 。你会知道为什么我这样做。 接下来，还有一件事，在我的用例中添加为 BEM 添加的 —— 容器。
在今天的这篇文章中，我想与大家分享一下为什么只用BEM还是不够的，以及如何使用命名空间来弥补一些不足。 为什么BEM不能满足我们 我上周给大家展示的例子很简单。...如果您还没有深入了解，那得知道OOCSS背后的主要思想是表层和结构的分离。 换句话说，影响块或其元素的位置的属性应该被抽象为一个单独的类用于重复利用。 在CSS中，定位块的行为也称为布局块。...当我为Mastering Responsive Typography建站后，我添加了一个如下所示的付款表单： ? 响应式排版的付款表单 在上面的设计中，您可以看到该表单包含两行输入元素。...当您在CSS中设计状态类时，建议您尽可能保持样式接近所讨论的对象/组件。 例如： ? 如果您不用Sass,你可以用这种方式来书写CSS： ?...这意味着你不应该在排版类中添加margin或padding。而这些margin或padding应该直接添加到组件。（阅读Harry的在大型应用上管理排版了解为什么我推荐这个）。 让我们继续。
面试官想知道些什么： 求职者使用 CSS 的经验 对创建网站的兴趣 是否持续关注新技术 参考答案： 我在高中时就开始用 CSS 了。当时我和一些朋友为我们喜欢的电视节目搭了一个网站。...面试官想知道些什么： 对前端设计的兴趣 其他语言技能 是否具有创造性解决问题的能力 参考答案： 通常我用 CSS 来创建网站页面的总体布局并进行美化。另外我还将用 HTML 为页面提供一些结构。...当我需要向网站添加交互式元素、动画、音乐或其他功能时，更喜欢使用 JavaScript，因为它能够很方便的实现一些逻辑。“ 4 你能告诉我一个让你学到新 CSS 技术的项目吗？...它让我想起为什么了解 CSS，JavaScript 和其他常用语言非常重要。如果没有一个好的网站来展示它，你所做的都没有什么意义。 6 当你忘记某个 CSS 的功能时，是怎么解决的？...MDN，为我节省了大量的时间。
2013年初，当我开始进行响应式设计时，我很快意识到网络上流行的方法并不适合我，于是我开始了深入响应式设计领域的旅程。 为什么“移动优先”不再足够好！...查看移动和桌面导航栏 移动导航栏 PC导航栏 那时我明白了，在这种情况下，“移动优先”并不合适！你问为什么？因为无论我是“移动优先”还是“桌面优先”，我都会发现自己需要大量的CSS覆盖！...网络上的常见做法是使用仅以最小宽度为起点而没有最大宽度的断点（称之为“开放式断点”），这是一个非常大的问题！你问为什么？因为你几乎无法控制上层断点会受到什么影响！...以下是《卫报》网站的一个例子，展示了为什么开放的断点是不好的！ 浏览器中有一个检查元素的小组件，即 logo。看看它有多少覆盖！当我看到这么多覆盖时，我就知道代码有问题了！...Open breakpoints 打开断点 当我们使用媒体查询时，有一个起始值但没有结束值。例如: Closed breakpoints 闭合断点 当我们使用具有开始和结束值的媒体查询时。
值得注意的是，在Scripts文件中添加了一个名为_references.js的文件，这是一个非常有用的功能，当我们在使用Bootstrap等一些前端库时，它可以帮助Visual Studio启用智能提示...当然我们也可以创建一个空的ASP.NET MVC项目手动去添加这些依赖文件，正如下图所示这样，选择空的模板： ?...为网站创建Layout布局页 为了让我们的网站保持一致的风格，我将使用Bootstrap来构建Layout布局页。...使用捆绑打包和压缩来提升网站性能 捆绑打包(bundling)和压缩(minification)是ASP.NET中的一项新功能，允许你提升网站加载速度，这是通过限制请求CSS和JavaScript文件的次数来完成的...小结 在这一章节中，简单为大家梳理了Bootstrap的体系结构，然后怎样在ASP.NET MVC项目中添加Bootstrap，最后使用了打包和压缩技术来实现对资源文件的打包，从而提高了网站的性能。
为了保证的可读性，本文采用意译而非直译。 当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。...它可能是CMS中标记为空的段落元素。 如果你的CMS添加了多余的段落元素，你可能不希望它们在其他段落之间造成较大的空白，这时 margin 重叠就有一定的意义。...对于父元素和第一个或最后一个子元素 margin 重叠，如果我们向父级添加border，则子级上的margin会保留在内部。...image.png 网站 margin 策略 由于margin 会重叠，最好能找到一种一致的方法来处理网站的 margin。最简单的方法是只在元素的顶部或底部定义 margin。...因此，当我们讨论垂直边距时，我们实际上是在讨论块维度的边距。如果我们在水平写作模式下，这些 margin 将是顶部和底部，但在垂直写作模式下，这些 margin 将是右侧和左侧。
译者：前端小智 为了保证的可读性，本文采用意译而非直译。 当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。...然而，假设你遇到了上面示例中的几种情况，那么如何才能阻止 margin 重叠呢？ 例如，一个完全空的盒子，如果它有border或padding，它的上下 margin就不会重叠。...它可能是CMS中标记为空的段落元素。 如果你的CMS添加了多余的段落元素，你可能不希望它们在其他段落之间造成较大的空白，这时 margin 重叠就有一定的意义。...对于父元素和第一个或最后一个子元素 margin 重叠，如果我们向父级添加border，则子级上的margin会保留在内部。...因此，当我们讨论垂直边距时，我们实际上是在讨论块维度的边距。如果我们在水平写作模式下，这些 margin 将是顶部和底部，但在垂直写作模式下，这些 margin 将是右侧和左侧。
这意味着，如果我wu7的样式表使用像素单位，可能导致访问网站的用户难以阅读。 因此，作者建议使用相对单位，如em、rem或百分比，而不是像素。...案例证明：在CSS中， px ， em 或 rem 单位之间没有功能上的区别的想法是一个我一遍又一遍听到的误解，因此我想在这里发帖来解决这个问题。 我们要非常清楚：在CSS中使用的单位绝对很重要。...如前所述，用户还可以指定默认和/或最小字体大小。当他们这样做时，功能开始分歧。 在下面的截图中，我已将Firefox的默认字体大小设置为 64px 。...很可能，当我们为较大的断点编写CSS时，我们认为有足够的屏幕空间让元素扩展。...然而，当我将默认字体大小设置得更大时，我的媒体查询没有响应，因为它们仍然只查看屏幕的像素宽度。因此，我仍然有一个微小的侧边栏，里面塞满了难以辨认的巨大文本，因为我没有考虑用户的偏好。
盗链指的是其他网站在未经授权的情况下直接使用你网站上的资源，例如图片、视频或其他文件，消耗你的带宽和资源。Nginx可以检查HTTP请求中的Referer字段，该字段指示了请求的来源网页。...这个的意思是当我们访问img路径下的资源时候，nginx会去 /usr/local/nginx 下的img路径里找对应的资源，道理和 root html 是一样的。...截图如下： 接着我要开启防盗链，只允许referer为空或者blocked或者指定的域名访问 。 我们在刚刚的img对应的location新增valid_referers配置，配置如下。...当我们直接访问是可以访问的，当我们使用curl -e 来指定Referer 为百度时候，则就访问失败了。...当你通过浏览器直接访问一个URL时，通常不会发送Referer字段。这是因为直接在浏览器中输入URL或使用书签等方式访问页面时，没有引荐来源。
（例如npm build时或者是yarn build时） 本文将通过以下TODO的项目示例来让大家更加直观的了解这个框架： 项目的功能概览 1.当没有待办事项时，该应用会向我显示一个占位符 2.当我单击添加没有值的待办事项时...3.当我单击以添加带有值的待办事项时，应用程序将添加一个待办事项并重置该值。...4.我可以看到我有多少个待办事项的摘要，以及完成了多少个待办事项 5.我可以通过单击Todos复选框，将其标记为已完成或撤消来删除它们 设置 与其它框架不同的是，Svelte 没有cli脚手架工具来帮助我们快速构建一个项目...提供完这些东西以后，当我们在组件内部访问它们时，我们的props 将保持上面给出的值。...块有很多种，您应该看一下小型的文档以了解所有知识，您需要了解的所有知识都可以遍历一个数组todos，并为我们提供分别访问每个值的方式，就像todo，并在其中返回模板对于它们中的每一个，如果数组为空，则显示后面的项
如何保证你的网站或 Web 应用的可访问性？ 解析： 前端开发人员在为最终用户设计体验时需要充分掌控其可用性和可访问性。这个问题让面试官知道求职者对这些标准和最佳实践的了解。...我使用此功能开发时，会把视频和音频作为用户体验的重要组成部分，而不必担心它无法正确加载或破坏页面。 如何对 CSS 和 JavaScript 代码进行组织，以使其他开发人员更容易使用？...当我开发基于用户分辨率动态调整大小的页面时，使用float。” 你是怎样处理特定浏览器的渲染问题的？你是否发现某个浏览器比其他浏览器更具挑战性？...面试官想要知道些什么： 对他们最喜欢的发展方向的见解 他们描述该项目时表现出的热情 他们最喜欢的前端项目的案例 参考答案： 我最近为当地医院开发了一个网络应用。...它简化了患者的求医过程，当我知道自己的工作能帮助患者更快地获得所需的帮助时非常开心。
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 可访问性问题 通过将alt属性设置为有意义的描述，用来访问 HTML 图像，这对于屏幕阅读器用户非常有帮助。...而另一个alt为空的图片，会折叠起来看起来像一个小点，这里因为它有边框。 但是，当alt属性有值，它看起来是这样的： ? 这不是一个很好的反馈吗?此外，当图像源失败时，可以向它们添加伪元素。...另外，我喜欢使用HTML 的功能是能够在未加载图片的情况下添加回退。 回退至少可以使内容保持可读性。...带有很多细节的 Logo 当徽标具有许多细节或形状时，将其用作嵌入式SVG可能没有好处。 我建议使用，图像类型可以是png，jpg或svg。 ? 需要动画的简单 Logo ?...带有渐变的Logo ? 当 logo 具有渐变时，从Illustrator或Sketch等设计应用程序将其导出的过程可能并不完美，有时会中断。 使用SVG，我们可以轻松地为logo添加渐变。
当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中： 设置的宽度和高度。...从右向左布局 值得一提的是，使用margin-left: auto或margin-right: auto对于从左到右的布局（例如英语）可能效果很好。 但是，在多语言网站上工作时要当心颠覆这些价值观。...如果我检查了子项并转到computed styles，你猜下left属性的值会是什么？ ? left的默认值为16px，即使没有设置。为什么会发生这种情况？...更好的是，如果您要构建多语言网站，我们可以使用CSS逻辑属性。...CSS将如下所示： .item__action { margin-inline-start: auto; } CSS grid 和自动边距 在向网格项目添加边距时，它可以是固定值，百分比或自动值
看完本教程，你将学会： 理解HTML、CSS、JS各自的作用 学习HTML、CSS、JS基本语法 能写一个简单的网页 为快速上手练习，可以使用在线编辑器，学会基础语法后，再下载专业的网站开发编辑器/开发环境...HTML HTML即超文本标识语言，是网站开发最基础的语言，简单易懂。 HTML用于定义网站的结构及内容，文件名后缀为.html。...当我们在浏览器里查看网站源码（ ctrl + u ）或按F12打开开发者工具，首先看见的是网站的HTML源代码： [image-20200530174306292.png] 下面花 5 分钟，学习下 HTML...CSS CSS即层叠样式表，是美化网页的语言，简单易懂。 CSS用于定义网站的样式和动画，文件名后缀为.css。...HTML：结构层， 定义网页结构和内容 CSS：表现层，定义网站的样式和动画 JS：行为层，定义网站的交互行为 开发网站时，三层通常按照顺序开发，必须先有html，定义好网站的结构和内容，再用CSS美化网站
处理HTML的工具C. 用于简化CSS编写的工具D. 管理数据库的工具React是由哪家公司开发的？A. GoogleB. FacebookC. MicrosoftD....它们是相同的B. null表示未定义，undefined表示空C. null表示空，undefined表示未定义D. 它们都表示空值在CSS中，选择器 .class 是用来选择什么？A. 标签B....DOM（文档对象模型）解释： 文档对象模型（DOM）是浏览器将HTML或XML文档表示为树结构的一种方式。它提供了一种通过JavaScript或其他编程语言动态访问、更新和修改文档的方式。...事件处理： DOM允许将事件处理程序附加到页面元素，以便在用户与页面交互时执行特定的操作。数据交互： 通过DOM，可以读取或修改页面上的数据，使得与后端服务器之间的数据交互更加灵活。...搜索引擎优化： 符合可访问性标准的网站通常更容易被搜索引擎索引，提高了网站的可见性。我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！
许多前端开发人员都在用 Normalize 为他们的网站设计样式。...一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。 在本文中，我会与你分享我自己的 CSS reset 项（除了 Normalize.css 之外我还使用它们）。...当我不了解这些时，默认设置会让我失望。但是我更喜欢通过自己编码设置所有边距和填充。...在这里我将 list-style 设置为 none 。当我需要 disc 样式时，会在特定的 上手动设置它。...我经常将 hidden 添加到用类设置的其他元素中。类的特异性高于属性，并且 display: none 属性不起作用。 这就是为什么我选择用 !important 提高[hidden]的特异性。
当我们这样做时，在我们适当地移动源 material 并删除旧站点之前，什么也不会发生。这包括 _includes。 当我们进行必要的文件移动并运行时，我们的小猫咪(好吧，是另一只小猫咪)回来了。...目录结构现在看起来像这样，忽略 modules 目录但包括配置文件: 如果你是从我们的网站上阅读这篇文章的，你会在文章结尾看到我的一张漂亮的圆形图片。我想在我网站的标题左边放上这张图片。...我们的主线是，我们希望用 Markdown 写内容，并让 Eleventy 来生成网站。在维护网站时，我们不想处理 HTML。...在CSS的帮助下，结果是: 猫咪列表 这为我们提供了到正确页面的链接。从现在开始，我应该能够用 Markdown 添加其他猫咪，它们将自动出现在列表中。...我们的下一个目标是为猫咪页面制作一个单独的布局；总是有一件事要做，但目前足够了。 所以现在去玩吧，用 Eleventy 创建你自己的网站。
问题描述 经过前面对HTML5的入门学习，我已经对HTML格式有了大致了解，也掌握了如何运用标题、段落、图像以及列表、表格、表单来丰富自己的网页。...问题二：（已解决）对于同一个border，可以有最少一种，最多四种边框样式，那么当我们选用三种样式时，就会有两边是一样的样式，是哪两边呢？...这里涉及边框样式的顺序，我发现不论是三种还是四种（因为一、二种不便于观察规律），都是按照顺时针顺序设置样式，即top→right→bottom→left,这是四种时的顺序，若border-style为三种...不过有的教学网站直接将边框样式作为其身份，使我误以为需要将每一个样式都放在P.之后，事实证明，不论放多少个“身份”，他只会识别第一个。...（3）CSS outline中遇到的问题： 问题一：（未解决）为什么给一个边框添加轮廓会使所有边框被框住？如图： ?
为什么要使用阴影？ 我保证，我们很快就会谈到有趣的CSS技巧。但首先，我想退后一步，谈谈为什么阴影存在于CSS中，以及我们如何最大限度地利用它们。 阴影表示高程，而较大的阴影表示更高的高程。...当我希望一个元素有一个阴影时，我会添加box-shadow属性并修改数字，直到我喜欢结果的外观。 问题是：通过像这样孤立地创建每个阴影，你最终会得到一堆不协调的阴影。...如果我们将亮度设置为 95%，则存在差异，但很微妙： 对于非常深的颜色也是如此： 然而，当我们处于亮度光谱的中间时，全范围的饱和度是可用的： 以下是我的看法：50% 亮度是所有色调的“默认”版本。...亮度在 50% 时对饱和度没有影响。 当我们从50%的最佳点增加或减少亮度时，我们减少了颜色中可用颜料的量。颜色不可能完全饱和，浅色或深色。 饱和度%是一个相对度量，基于给定亮度下可用的颜料量。...我希望本教程能启发您添加或调整一些阴影！老实说，很少有开发人员将这种水平的想法置于他们的阴影中。这意味着大多数用户不习惯看到郁郁葱葱、逼真的阴影。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
