前言Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。用户权限想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的？...
script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲染。但既然会存在两个属性...
<header> head 元素包含了所有的头部标签元素,可以添加在头部区域的元素标签为： <title>、<style>、<meta>、<link>、<script>、<noscript>、<base> 下面将一一解释各标签的作用<title>用于定义不同文档的标题定义浏览器工具栏的标题当网页添加至收藏夹,显示在收藏夹中的标题显示在搜索引擎结果页面的标题 eg: <title> 我是标题 </title><base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链...
基本页面设置<!-- 页面描述 --> <meta name="description" content="页面描述，控制在150字以内" /> <!-- 页面关键词 --> <meta name="keywords" content="关键字列表" /> <!-- 作者信息 --> <meta name="author" content="basecss, i@basecss.net" /> <!-- 页面图标 --> <link rel="shortcut icon" type="image/icon" href="icon.ico" /> <!--解决360浏览器网页显示异常 --> <meta http-equiv="X-UA-Compatible" content="IE=edge...
本文对HTML基本语法和语义进行了整理与实例，需要的朋友可以参考下DOCTYPEDOCTYPE(Document Type)该声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档使用哪种HTML或者 XHTML规范。DTD(Document Type Definition)声明以<!DOCTYPE>开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在IE下开启怪异模式(quirks mode)渲染网页。公共DTD，名称格式为注册//组织//类型 标签//语言,注册指组...
Meta是用来在HTML文档中模拟HTTP协议的响应头报文，用于网页的<head>与</head>中，其属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个： name ...
这篇文章主要介绍了p的offsetLeft与style.left区别的相关资料,需要的朋友可以参考下clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。如果父p的position定义为relative,子p的position定义为absolute，那么子p的style.left的值是相对于父p的值，这同offsetLeft是相同的，区别在于：1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进...
近年来，超文本标识语言(HTML)得到了迅速拓展。为满足更多的需要，它增加了许多扩展功能。设计新颖、吸引人的网页已经越来越依赖java applet(小程序)、内嵌脚本、图文框、插件和其它扩展的HTML功能。这些扩展的HTML功能不仅可以对文本作进一步的格式化，而且可以嵌入程序、动画和其它交互式操作元素，将曾经是静态的主页转换成一幅新的美妙绝伦的画面，它可以任主页制作者充分发挥自己的想像力，设计出充满魅力的主页来。下面我就介...
众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法<a href="javascript:;"></a>，所以就来整理下a标签中href的几种用法。一、Js的几种调用方法（参考总结的） 1、a href="javascript:j s_method();" 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发...
我以前在写<A>的href和onclick一直很随意，后来出过几次问题，以后才开始重视这个问题：首先摘录一篇文档：在Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。void 操作符用法格式如下： 1. javascript:void (expression) 2. javascript:void expressionexpression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的，但是写上去是一个好习惯。 (实现版本 Navigator 3.0)你以使用 voi...
radio注册了click事件以后，神奇的是用键盘上的上下左右选择时，居然会触发鼠标事件，滚轮也会触发，这种神奇的事情在mousedown下面是不会发生的。（webkit不能使用上下左右选择） checkbox注册click事件后，奇迹再次上演，当我们用空格选中checkbox时，神奇的click事件再次触发，而mousedown再次与奇迹擦身而过。（webkit还是不能用空格选择） 让我们都用click吧，给这两位老兄减负吧，不要为了他们先天不足给他们绑定一堆事件了，...
1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。方法一：在jsp的前端页面的头部插入一个js方法：function checkUser(){var result = document.getElementById("userid").value;var password = document.getElementById("userpassid").value;if(result == "" ){alert("用户名不能为空");return false;}if(password ...
<!DOCTYPE html> <html> <head> <title>当锚点定位遇上position: fixed</title> <style type="text/css"> * { margin: 0; padding: 0; }body { position: relative; }a { color: white; text-decoration: none; }.nav { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: black; }.part-one, .part-two, .part-three { width: 100%; height: 800px; }.part-one { background-color: red; padding-...
一个name可以同时对应多个控件，比如checkbox和radio而id必须是全文档中唯一的id的用途1） id是HTML元素的Identity，主要是在客户端脚本里用。2） label与form控件的关联，如 <label for="MyInput">My Input</label> <input id="MyInput" type="text"> for属性指定与label关联的元素的id，不可用name替代3）脚本中获得对象：IE支持在脚本中直接以id（而不是name）引用该id标识的对象。例如上面的input，要在脚本中...
我们都知道clearfix一般这么写：.clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{clear:both;}但是为嘛用 display：table哪？ 我用display:block好像也是显示很正常，也能清除浮动。曾经也搜索过这个问题，感觉都讲得糊里糊涂的还是我水平太低了，反正我是看不懂他们想要表达啥意思，也不给例子，好了，废话不多说， 看结果吧：See the Pen Clearfix by wenjie (@wenjie) on CodePen.网上讲得一...