SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题,另一个问题就是 SVG 的本地运行环境下的厂家支持程度。 3.“data-”属性的作用是什么?...需要注意的是:`data-`之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。...label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。...(3)浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度 问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度 碰到频率:60%...IE浏览器才支持:after,原理和方法2有点类似,zoom(IE专有属性)可解决ie6,ie7浮动问题 优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾讯,网易,新浪等等)
H5在语义上的改进 在此基础上,HTML5 增加了大量有意义的语义标签,更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。... 表示标记 (用得少) 表示进度 (用得少) 表示日期 本质上新语义标签与、没有区别,只是其具有表意性,使用时除了在...HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成 相当于。...解释一下: l:less 更小 t:than 比 e:equal等于 g:great 更大 PS:我们在测试 IE 浏览器的兼容的时候,可以使用软件 ietest,模拟IE6-IE11...在不支持HTML5新标签的浏览器,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用。
另外,用户也可以在浏览器上直接看到提交的数据,一些系统内部消息将会一同显示在用户面前。Post 的所有操作对用户来说都是不可见的。...温馨提示:W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。...-- IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。...为带有指定 id 的元素改变或添加样式。...狼蛛;塔兰图拉毒蛛--> WeiyiGeek. data-*属性使用图 温馨提示: 用户代理会完全忽略前缀为 “data-“ 的自定义属性。
基本介绍 在HTML5中,我们经常使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们在一个button上添加id 点我</button...Dataset的使用 还是上面那个button的例子 点我 var btnID = document.querySelector...需要注意的是带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor。...兼容性不是很好,但是目前主流的浏览器都已经实现了,只是低版本的上还无法实现,就需要使用兼容的方式在低版本的浏览器上使用。...,Dataset返回值其实就是带有data-前缀的一个属性值键值对对象。
11、X[href="foo"]:精准属性值选择器 上一小节,我们学习了 X[title] 这样的简单属性选择器,如果你想对属性的值进行精准匹配如何做呢,不用担心,CSS为我们提供了精准的属性选择器,比如我们想把特定网址的链接变成绿色...但是有一种解决方案,我们可以使用自定义属性,我们可以在图片的链接标签中添加data-filetype属性,如下所示: <a href="path/to/image.jpg" data-filetype=...: IE7+ Firefox Chrome Safari Opera 16、X[foo~="bar"]:匹配带有空格属性的值 这个技巧大多数人不会用,但是你使用后,一定会让你的小伙伴对你刮目相看的,波浪号可以选择带有空格的属性...pseudo class,比如想给用户鼠标悬停的元素加上样式,你就可以使用此选择器: 小提示:在旧版的IE里,:hover只能用于链接标签。...,选择不满足条件的元素,比如我们希望选中所有的div,除了一个 id 为 container 的div。
(需要注意的是虽然styleSheets方法返回的结果把link标签引进的外部样式也算进去了,但是非IE浏览器没办法获取到他们的cssRules属性,只有内嵌的style标签内的元素可以被获取到) document.styleSheets...('.test::before{color:green}',0)//IE系列浏览器使用/* 虽然部分浏览器也可以通过id来指定,'document.styleSheets.id.insertRule()...'这种写法在chrome和IE下都行得通,但是firefox会返回'undefined',所以建议还是使用index值来获取stylesheet */ .insertRule的语法是stylesheet.insertRule...addrule和insertRule方法本质上没区别,只是后者不被IE浏览器识别,所以前者作为浏览器兼容方法存在。(下文为节省篇幅,以insertRule方法指代此两种方法。)...(此情况只针对非IE浏览器,IE浏览器正常,但是定义的早往往意味着被后面的样式覆盖,所以意义不大) 同上,如果页面内没有内嵌样式的style标签,则insertRule方法也无法发挥作用。
函数预解析(函数提升) 把所有的函数声明提升到当前的最前面。 实际上,变量提升,可能会引发很多问题,会导致变量可以先使用后申明。函数提升暂时没有遇到什么问题。..."); console.log(my); 根据标签名获取 document.getElementsByTagName(标签名,字符串形式); 得到的是一个对象的集合 通过 HTML5...; }; 操作元素 改变元素内容 element.innerText 不识别 html 标签,空格和换行也会去掉 2. element.innerHTML 识别 html 标签,保留空格和换行 常见元素的属性操作...想要保留原来的类名的基础上改的话,则通过 element.className = ‘原来的类名 新的类名’来保留。...出现问题:不容易判断是内置属性还是自定义属性 设置 H5 自定义属性 H5 规定自定义属性 data-开头作为属性名 直接在标签后给属性赋值 例子:
不要省略可选的结束标签(closing tag)(例如, 或 ) IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。...除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。...class id, name data-* src, for, type, href title, alt aria-*, role class 用于标识高度可复用组件,因此应该排在首位。...id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。 减少标签的数量 编写 HTML 代码时,尽量避免多余的父元素。很多时候,这需要迭代和重构来实现。请看下面的案例: 不要使用 @import 与 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。
document.getElementsByName在Chrome和FF30.0中返回NodeList(木有namedItem方法的),在IE全系列中都返回HTMLCollection,吐血了吧? ...由于document.getElementsByName在不同的浏览器中返回不同类型的对象,因此推荐使用[{Number} 索引]的方法来访问集合元素会省心一些; 4....,也就是上文说到的带有HTMLCollection特征的[object Object]对象。...但IE11中的HTMLAllCollection还可以当作函数使用,具体请看本文的第三节。...赋值操作时,仅仅在特性映射表中新建键值对,并不会赋值到标签对应的"data-*"特性中。 为何JQuery要设计成这样呢?
周末总是过得很快,又到了跟代码亲密接触的日子,我在北京向各位问好,今天我分享一点关于前端的东西,HTML5之标签"data-*"自定义属性的值传递。 ...前几天在给公司网站更换页面的过程中,我狠幸运的参与了统计模块那块的业务和功能改造,由于我个人比较喜欢写一些由聚合函数存在的业务SQL,因为这类SQL语句大部分都有优化的必要,之前在博客中也分享过自己优化的一些案例...好了,下面正式来说说HTML5的"data-*"的机制提供数据,并如何获取。因为之前在更换页面的过程中也看到了公司使用"data-*"的机制来输送数据,但是对它的印象不是太深,就没有深究。...下面是一个表单中定义data-*自定义属性,并如何获取属性的数据值。...但是说到这儿,我不得我多说点儿,通过早上的各种尝试得出,如果你没有使用驼峰式的方式来获取,也可以使用另外一种方式,直接把"data-"去掉,最后在data()方法中直接把后面剩余的字符串作为参数传入即可获取
建议网站开发人员避免使用非唯一ID或动态生成的ID,但是某些MVC框架(如– ADF)可能会导致页面具有动态生成的ID。...如果任何网站具有非唯一ID或具有动态生成的ID,则不能使用此策略唯一地查找元素,而是将返回与定位器匹配的第一个Web元素。我们将如何克服这种情况,将在XPATH / CSS选择器策略中进行说明。...让我们继续前进,看看如何使用LinkText查找元素 通过链接查找文本/部分链接 使用这种方法,可以找到带有链接名称或具有匹配的部分链接名称的“ a ”标签( Link )的元素。...通过CSS选择器查找 对于生成动态ID的网站(例如基于ADF的应用程序)或基于最新的JavaScript框架(例如–无法生成任何ID或名称的React js)构建的网站,无法使用ID /名称策略定位器来查找元素...– 带有ID的标签 css =标签#id public class LocateByCSSSelector { public static void main (String [] args
浏览器标准模式和怪异模式之间的区别是什么? 在怪癖模式下,浏览器会模拟Navigator 4和IE5的方式来渲染页面。 在标准模式下,浏览器会用HTML和CSS规范定义的方式来渲染页面。...在某些浏览器(如IE)的怪癖模式下,盒模型(box model)变成IE5.5的盒模型(IE5.5的盒模型的宽和高包括padding和border,即 border-box)。...使用 XHTML 的局限有哪些? XHTML要求严格。元素必须被正确地嵌套,元素必须被关闭,空标签也必须被关闭,标签名和属性对大小写敏感,属性名称必须小写,属性值必须加引号等。...编码使用UTF-8,空间域名需要支持多浏览地址,准备多套模板。(对多语言这方面不熟悉) 在设计和开发多语言网站时,有哪些问题你必须要考虑?...见 7 Tips and Techniques For Multi-lingual Website Accessibility data-属性的作用是什么? 在元素上存放数据。
HTML 通常会忽略这些自定义属性,在属性名称之前添加前缀 data- 是为了避免与 HTML...Github lang 属性 说明元素使用的语言。...,多数时候放在页面底部 body 标签结束前加载 JavaScript 或使用 async)。...表示当有 webkit 内核浏览器,使用 webkit 内核渲染,否则使用 IE 最高版本渲染。...然而他们并没有考虑到原本的网站,是否符合规范。
标签:VBA,用户界面 本文接上两篇文章: 在Excel中自定义上下文菜单(上) 在Excel中自定义上下文菜单(中) 上下文菜单技术和技巧 下面的内容展示了如何修改本文中提供的代码,以使过程更具灵活性...在本文开头的VBA示例中,你看到了如何通过使用工作簿的Activate和Deactivate事件调用宏来创建和删除菜单控件,从而来更改单元格上下文菜单。...RibbonX中似乎没有支持的控件ID列表。可以通过使用VBA代码禁用与上一节中所述类似的特定控件来使用变通方法。 那么,如何找到要更改的其他上下文菜单的名称呢?...下面的宏在每个上下文菜单的底部添加了一个带有菜单名称的按钮。...在Excel 2010及后续版本中,可以使用VBA代码将控件添加到几乎每个上下文菜单中。使用VBA更改某些上下文菜单的限制与Excel 2007中相同。
DOCTYPE html> [建议] 启用 IE Edge 模式。 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。...示例: [建议] 在 html 标签上设置正确的 lang 属性。...[强制] 同一页面,应避免使用相同的 name 与 id。 IE 浏览器会混淆元素的 id 和 name 属性, document.getElementById 可能获得不期望的元素。... [建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。 [建议] 标签的使用应尽量简洁,减少不必要的标签。 示例: <!...控件标题 [强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。 有两种方式: 将控件置于 label 内。 label 的 for 属性指向控件的 id。
因为用户在网站登录后,这个网站服务端会在 Cookie 中会放一个凭证,这个凭证是后端用来验证用户身份的。 在发评论的时候,提交评论的请求会带上这个凭证,后端通过判断这个凭证,来确认是哪个用户。...CSRF 特点 攻击一般发起在第三方网站,而不是被攻击的网站。 攻击是利用受害者在被攻击网站的登录凭证,冒充受害者提交操作,仅仅是“冒用”,而不是直接窃取数据。...但是 Origin 在以下两种情况下并不存在: 1、 IE11同源策略: IE 11 不会在跨站 CORS 请求上添加 Origin 头,Referer 头将仍然是唯一的标识。...需要注意的是在以下情况下 Referer 没有或者不可信: 1.IE6、7下使用window.kk=url进行界面的跳转,会丢失 Referer。...之后页面加载完成时,使用 JS 遍历整个 DOM 树,在 DOM 中所有地址是本站的 a 和 form 标签中加入 Token,其他的请求就在编码时手动添加 Token 这个参数。
[TOC] (1) HTML编码规范 用两个空格来代替制表符(tab),嵌套元素应当缩进一次(即两个空格); 属性的定义确保全部使用双引号,绝不要使用单引号 不要省略可选的结束标签(closing tag...#id 用于标识具体组件,应当谨慎使用(例如,页面内的书签)因此排在第二位。...class id, name data-* src, for, type, href title, alt aria-*, role 基础实例: 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。...当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。
很多时候我们只是关注我们如何去页面,完成需求,怎么使用框架,样式兼容。很多时候我们忽略前端的安全问题。...万恶的IE,就是那么奇葩!...其实和反射性xss的防御方式一样,前后端对提交的任何内容都进行转义,并且在后端可以通过过滤的方式过滤script标签或者一些敏刚的符号,前端在展示文章的时候也可以通过直接以字符串显示,而并非通过DOM去进行显示...CSRF(跨站点请求伪造) 原理: 用户登录了受信的网站,生成了对应的cookie 用户不退出登录受信网站的情况下,访问了钓鱼网站 钓鱼网站调用通过image或其他方式访问了受信网站的url,然后浏览器就会带上受信网站的...可以加载指定来源的frame页面(可以定义frame页面的地址) 另外一种会出现点击劫持的就是文章网站,例如攻击者提交了一个带有一些特殊布局的html标签和点击事件的文章,如果没有XSS防御的话,就很容易被点击劫持了
IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为edge mode,从而通知 IE 采用其所支持的最新的模式。...这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。...任何时候都要尽量使用最少的标签并保持最小的复杂度。 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。...class id, name data-* src, for, type, href title, alt aria-*, role class 用于标识高度可复用组件,因此应该排在首位。...id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。 Example link 布尔(boolean)型属性 布尔型属性可以在声明时不赋值。
领取专属 10元无门槛券
手把手带您无忧上云