图标的可访问性现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符.为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置了 aria-hidden="true" 属性.如果你使用图标是为了表达某些含义(不仅仅是为了装饰用),请确保你所要表达的意思能够通过被辅助设备识别,例如,包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果.如果你所创建的组件不包含任何文本内容(例如, <…

什么是读屏软件? 读屏软件是一种专为视力障碍人士设计的,能够辅助视障人士操作计算机的工具,它可以将屏幕上显示的内容用语音朗读出来,这样视障人士就可以正常使用电脑了. 知名的屏幕阅读软件国内有争渡读屏.阳光读屏等,其中争渡读屏在国内最受欢迎,有免费的公益版. 国外有完全免费开源的NVDA,Windows 系统内置的讲述人(narrator)等. 目前争渡读屏和NVDA开放了语音接口,也就是说,开发者可以主动调用争渡或NVDA的语音接口朗读文本. 软件可以调用屏幕阅读器朗读信息,不仅仅是屏幕阅读器被…

最简单: <input type="image" src="email.png" width="14" height="14" alt="Email">   使用 css sprites的话: <style>     .email-btn {         width: 14px;         height: 14px;         background: url(acti…

ARIA Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用(特别是那些由 Ajax 和 JavaScript 开发的)对于残障人士更易使用的各种机制.例如,ARIA 提供了易用的导航地标.JavaScript 组件.表单提示以及错误信息.实时内容更新等.主要用来标识页面中涉及到动态交互的地方,这些交互通常是由js和相关技术来实现的,例如浮出层,对话框弹出,下拉列表以及伪元素等. ARIA 是一组特殊的易用性属性,…

总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击 opacity: 0: 不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击 继承: display: none和opacity: 0:是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示. visibility: hidden:是…

联系:他们都能让元素不可见 区别: display:none:会让元素从渲染树中消失,渲染的时候不占据任何空间: visibility:hidden:不会让元素从渲染树中消失,渲染时袁旭继续占据空间,知识内容不可见了: display:none:是非继承属性,子孙节点消失是由于元素从渲染树中消失造成的,通过修改子孙节点的属性也无法显示:visibility:hidden:是继承属性,子孙节点消失是由于继承了hidden,可以通过设置子孙节点visibility:visible:然子孙节点显示 修…

(1)视图容器 名称 功能说明 movable-view 可移动的视图容器,在页面中可以拖拽滑动 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视图 movable-area movable-view的可移动区域 scroll-view 可滚动视图区域 swiper 滑块视图容器 swiper-item 仅可放置在swiper组件中,宽高自动设置为100% view 视图容器     ①movable-view 可移动的视图容器,在页面中可以…

二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型.…

.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; margin: 20px; line-height: 100px } .myDiv { opacity: 0 } .myDiv:hover { opacity: 1 } .blue { width: 100px; height: 100px; background-color: #b7f9fb; tex…

转载请注明出处: https://github.com/qiu-deqing/FE-interview Table of Contents generated with DocToc FE-interview $HTML, HTTP,web综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些SEO web开发中会话跟踪的方法有哪些 <img>的title和alt有什么区别 doctype是什么,举例常见doctype及特点 HTML全局属性(global attribute)有哪些…

一个用于显示多种不同类型图片的React组件,包括网络图片.静态资源.临时的本地图片.以及本地磁盘上的图片(如相册)等 一:属性 1:onLayout function 当元素挂载或者布局改变的时候调用,参数为:{nativeEvent: {layout: {x, y, width, height}}}. 2:onLoad function 加载成功完成时调用此回调函数. 3:onLoadEnd function 加载结束后,不论成功还是失败,调用此回调函数. 4:onLoadStart fun…

用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute 然后将位置设到不可见区域.   Opacity,占据网页布局,可以交互,读屏软件可以读到它    opacity 属性的意思是设置一个元素的透明度.它不是为改变元素的边界框(bounding box)而设计的.这意味着将 opacity 设为 0 只能从视觉上隐藏元素.而元素本身依然占据它自己的位…

目录 二.CSS部分 1.解释一下CSS的盒子模型? 2.请你说说CSS选择器的类型有哪些,并举几个例子说明其用法? 3.请你说说CSS有什么特殊性?(优先级.计算特殊值) 4.要动态改变层中内容可以使用的方法? 5.常见浏览器兼容性问题与解决方案? 6.列出display的值并说明他们的作用? 7.如何居中div, 如何居中一个浮动元素? 8.CSS中 link 和@import 的区别是? 9.请列举几种清除浮动的方法(至少两种)? 10.block,inline和inlinke-block…

无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该关注到的一个方面. 无障碍化受益人群: 普通人 普通网站用户:文化背景和习惯与主流用户不同的用户:老年人或儿童等用户:无障碍化可使得用户更轻松地使用网站服务,降低使用.学习和理解的成本. 视力障碍用户 主要包括盲人.低视力.色盲.色弱等用户.针对这部分用户所做的信息无障碍化是最通用和最具有代表性的,…

CSS3 font-face定义的字体使用时有时候用引号,有时候不用,很奇怪,如 @font-face{ font-family: Roboto-Black; src: url('../package/fonts/Roboto-Black.ttf'); } p{font-family: "Roboto-Black", Sans-serif } <p style="font-family: Roboto-Black, Sans-serif"></p&…

$HTML, HTTP,web综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些SEO web开发中会话跟踪的方法有哪些 <img>的title和alt有什么区别 doctype是什么,举例常见doctype及特点 HTML全局属性(global attribute)有哪些 什么是web语义化,有什么好处 HTTP method 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例) HTTP request报文结构是怎样的 HTTP response报文结构是怎样的 如何进…

原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.这篇教程将覆盖到…

什么是CSS盒子模型 页面上的每个元素都被浏览器看做是一个矩形的盒子. 由内容.填充.边框.边界组成. 什么是 css sprite 将多个图片拼接在一个图片中,通过background-position和元素尺寸调节显示想要的背景的方案. 优点: 减少HTTP请求数,加快页面加载速度. 提高压缩比.减少图片大小 更换风格方便,只需在一张或者几张图片上修改颜色或者样式即可. 缺点: 图片合并麻烦 维护麻烦,修改一个图片可能需要重新布局整个图片.样式 display:none; 于 visibil…

转自:http://www.sharetk.com/html/ued/Interactive-Design/1394.html 随着web使用量的增加和人们网络意识的增强,一些特殊用户开始被我们所关注.其中有些人很难看清或根本无法看到电脑屏幕:有些人无法使用鼠标: 有些人有阅读障碍:而年长者经常同时具有上述这些障碍,但仍需要使用网站.让每个人更容易地浏览,并协助这些特殊人士无障碍的使用网站,是非常有价值的. 互联网让世界发生了翻天覆地的变化,那么,它给盲人带来了什么?出乎绝大多数明眼人的意料——…

1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 回答二:…

----------------------html定义和基本结构---------------------- HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语 言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示 的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器…

hTML, HTTP,web综合问题 1.前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同:description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同:keywords列举出重要关键词即可 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页 重要内容HTML代码放在最前…

什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用:另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器(如果访客有视障)能够读懂内容. 简单来说就是利于 SEO,便于阅读维护理解. 总结起来就是: 正确的标签做正确的事情 页面内容结构化 无CSS样子时…

1.什么是 WCAG? WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则,简单的说就是为了方便残障人士(包括低视患者,盲人,聋人,学习障碍,行动不便,认知障碍....)访问Web内容而制定的相关标准,可以使网站更加人性化. 举个例子,在WCAG准则2.3.2中规定:网页不包含任何闪光超过3次/秒的内容. 即不要设计会导致癫痫发作的内容(每秒3次以上的闪烁可能会使癫痫发作). WCAG具体内容和条例请参考Web内容无障碍指南2.0版(WC…

一,HTML部分 1,XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元素必须被关闭. 标签名必须用小写字母. XHTML 文档必须拥有根元素. 2,前端页面有哪几层构成,分别是什么?作用是什么? 1, 结构层 Html(页面结构内容,骨架) 表示层 2, CSS(网页的样式和外观) 3, js(实现网页的交互,动画效果) 3,请描述一下 cookies,sessionSt…

用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.我们只需要记住的细小不同点,根据不同情况选择上面这些方法中适合的方法来隐藏元素. d…

前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同:description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同:keywords列举出重要关键词即可 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页 重要内容HTML代码放在最前:搜索引擎抓取HTMl顺序是从上到下,有的…

##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好.自信.谦虚.善于沟通.表达. ü  喜欢追究原理 5.2 面试内容 1.2.1简历上的项目 ü  介绍下你的项目吧? 1)        第一步:介绍你项目是干嘛的 2)        第二步:介绍下你负责的是哪块 3)        第三步:介绍下里面都有什么功能,你是怎么实现的,怎么分层的? 1…

一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元素必须被关闭. 标签名必须用小写字母. XHTML 文档必须拥有根元素. 2. 前端页面有哪几层构成,分别是什么?作用是什么? , 结构层 Html(页面结构内容,骨架) 表示层 , CSS(网页的样式和外观) 行为层 , js(实现网页的交互,动画效果) 3. 请描述一下 cookies,sess…

一.算法题部分   1. 如何获取浏览器URL中查询字符串中的参数? function getParamsWithUrl(url) {       var args = url.split('?');     if (args[0] === url) {               return "";    }        var arr = args[1].split('&');        var obj = {};        for ( var i = 0; …