html,css前端开发笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WuLex/article/details/83317456

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的＜head＞与＜/head＞中，meta 标签的用处很多。

meta的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：

name 属性

1. ＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage
   4.0）等；
2. ＜meta name="KEYWords" contect=""＞向搜索引擎说明你的网页的关键词；
3. ＜meta name="DEscription" contect=""＞告诉搜索引擎你的站点的主要内容；
4. ＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；
5. ＜meta name="Robots" contect="all|none|index|noindex|follow|nofollow"＞

其中的属性说明如下：

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性

1. ＜meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"＞和 ＜meta http-equiv="Content-Language" contect="zh-CN"＞用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；
2. ＜meta http-equiv="Refresh" contect="n;url=http://yourlink"＞定时让网页在指定的时间n内，跳转到页面http;//yourlink；
3. ＜meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"＞可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
4. ＜meta http-equiv="Pragma" contect="no-cache"＞是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
5. ＜meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"＞ cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
6. ＜meta http-equiv="Pics-label" contect=""＞网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
7. ＜meta http-equiv="windows-Target" contect="_top"＞强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
8. ＜meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion=50)"＞和＜meta http-equiv="Page-Exit"contect="revealTrans(duration=20，transtion=6)"＞设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

---

解决网站防挂IFRAME木马方案

今天一上服务器2000多个<iframe src="http://ca.winvv.com/cn.htm" width=0 height=0></iframe> 被注入，我晕！检查了半天，原来是FckEditor编辑器上传漏洞导致。在找资料的同时，发现CSS有一个有趣的属性expression,发现这个东东还有点意思，由此写出来，“以儆效尤”！

引用：

“IE5 及其以后版本支持在CSS中使用expression，用来把CSS属性和JavaScript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段JavaScript表达式，CSS属性的值等于Javascript表达式执行的结果。在表达式中可以直接 引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。”我的理解是：expression后面接js表达式执行相关操作

格式：
（1）标记固有的CSS属性名:expression(JS表达式);
（2）自定义属性名:expression(JS表达式);
使用JS销毁iframe对象原理：使iframe里的请求地址变成空白页(about:blank)，再将iframe对象从DOM（文档对象模型）中移除就可以切断所有iframe里的请求了。

CSS代码：
iframe{WuWei:expression(this.src='about:blank',this.outerHTML='');} 解释：outerHTML属性是DOM对象包含自身的HTML代码，而 innerHTML则是DOM对象（不含本身）里面所包含的HTML代码。 例子如下： 如果要使自己的iframe显示在网页里，而别人挂的IFRAME马都不起作用，在CSS里加一个 #okiWuWei{iWuWei:expression() !important} 对应的IFRAME代码为: <iframe id="okiWuWei" src="http://blog.csdn.net/codeshark/"></iframe>就OK了。 问题总结：很多垃圾站点都通过“弹窗”的方式来增加自己的点击率跟访问量，估计也是通过iframe注入木马，然后达到这种效果的。当然次方法只是IE ONLY.也不能从根本上防止木马的注入。

---

一、#的涵义

#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，

http://www.example.com/index.html#print

就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。

为网页位置指定标识符，有两个方法。一是使用锚点，比如，二是使用id属性，比如

。

二、HTTP请求不包括#

#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。

比如，访问下面的网址，

http://www.example.com/index.html#print

浏览器实际发出的请求是这样的：

　　GET /index.html HTTP/1.1
　　
　　Host: www.example.com

可以看到，只是请求index.html，根本没有"#print"的部分。

三、#后的字符

在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。

比如，下面URL的原意是指定一个颜色值：http://www.example.com/?color=#fff,但是，浏览器实际发出的请求是：

　　GET /?color= HTTP/1.1

　　Host: www.example.com

可以看到，"#fff"被省略了。只有将#转码为%23，浏览器才会将其作为实义字符处理。也就是说，上面的网址应该被写成：

　　http://example.com/?color=%23fff

四、改变#不触发网页重载

单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

比如，从

　　http://www.example.com/index.html#location1

改成

　　http://www.example.com/index.html#location2

浏览器不会重新向服务器请求index.html。

五、改变#会改变浏览器的访问历史

每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。

值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。

六、window.location.hash读取#值

window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。

七、onhashchange事件

这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

它的使用方法有三种：

　　window.onhashchange = func;

　　<body onhashchange="func();">

　　window.addEventListener("hashchange", func, false);

对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

八、Google抓取#的机制

默认情况下，Google的网络蜘蛛忽视URL的#部分。

但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"#!"，Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。

比如，Google发现新版twitter的URL如下：

　　http://twitter.com/#!/username

就会自动抓取另一个URL：

　　http://twitter.com/?_escaped_fragment_=/username

通过这种机制，Google就可以索引动态的Ajax内容。

---

CSS优先级备注：
1、同一规则(id与id相比较、class与class相比较)的样式，按书写的顺序，后面的优先级高于前面。
2、同一规则(id与id相比较、class与class相比较)的样式，外部引入的样式，优先级高于内联样式(<style>.ss{}</style>)。
3、同一规则(id与id相比较、class与class相比较)的样式，按书css外部文件引入的顺序，后面的优先级高于前面。

另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：

一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

---

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

nodeName 属性含有某个节点的名称。
•元素节点的 nodeName 是标签名称
•属性节点的 nodeName 是属性名称
•文本节点的 nodeName 永远是 #text
•文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue

对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType 属性可返回节点的类型。
最重要的节点类型是：

元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

---

DOM是表示 XML文档的流行的方法。它未必是最快的、最轻便的、或者最易使用 的，却是是最普及的，绝大多数 web 开发语言（如 Java，Perl，PHP，Ruby，Python，及 Javascript)都实现了对它的支持。

---

easyui isField属性不能要，否则多选rows行，rows.length始终返回1

---

加载某个元素，
首先设置style="display:none;"，然后show(); 可以防止加载中闪烁，降低用户体验

---

$("#loinInputForm").serialize(); 

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

---

CSS组合选择器

E,F (多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔)

Div,p { color:#f00; }

E F (后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔)

#nav li { display:inline; }
li a { font-weight:bold; }

E > F (子元素选择器，匹配所有E元素的子元素F)

div > strong { color:#f00; }

E + F (毗邻元素选择器，匹配所有紧随E元素之后的同级元素F)

p + p { color:#f00; }

---

position：absolute这个是绝对定位；是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

---

css实现div自动添加滚动条

基本语法

overflow-x : visible | auto | hidden | scroll 

语法取值
visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto :　 在必需时对象内容才会被裁切或显示横向滚动条
hidden :　 不显示超过对象尺寸的内容
scroll :　 总是显示横向滚动条

使用说明
检索或设置当对象的内容超过其指定宽度时如何管理内容。
所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。

对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。

自IE5开始，此属性在MAC平台上可用。
自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为overflowX 。

代码示例

div { overflow-x: scroll; height: 100px; width: 100px; }

---

JSONP在JQuery中如何体现的

1. $.getJSON

<script> 　　
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data) {　　
        $.each(data.items,
		        function(i, item) {
		            $("<img/>").attr("src", item.media.m).appendTo("#images");　　
		            if (i == 3) return false;
             });
    });
});　
</script> 　

//jsoncallback=?，其中？会自动替换为function(data)函数。 　　

2. $.ajax

$.ajax({ 　　
  dataType: 'jsonp', 　　
  data: 'id=10', 　
  jsonp: 'jsonp_callback', 　
　url: 'http://www.yiwuku.com/getdata', 　　
  success: function () { 　
　// do stuff 　
　}
});

---

浏览器判断:

var XMLHttp=null;
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}

---

常用目录名：
data(数据库)
images(图片)
install (安装)
templets (模版)
include (包含)
admin (后台)
rss (定阅)
media (媒体)
config (配置)
Script (脚本)
Language (语言)
style (样式)等……

常用CSS名：
页面外围控制整体布局宽度：wrapper　　
头：header　　
内容：content/container　　
页面主体：main　　
侧栏：sidebar　　
尾：footer等……

---

success(data, textStatus, jqXHR)

data:处理后的数据, textStatus:描述状态的字符串。
jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）对象

---

剩余宽度=父容器宽度-子容器固定宽度（优先）/子容器内容宽度-子容器margin&border&padding

---

列表组件

dl – 定义一个自定义列表
dt – 定义一个列表组
dd – 定义列表一个组的描述
label – 定义一个表单的域的说明
nl – 代表HTML导航列表
ol – 定义一个有序列表
ul – 定义一个无序列表
li – 定义列表的内容

---

自封闭的html标签，非成对出现（单独出现），而且是以 / >结尾，称为自封闭。

br hr
col img
area  link meta
frame input param
DOCTYPE  

html标签主要分两类，两边封闭的，自封闭的，总结自封闭的html标签，主要是为了方便初学者记忆

html标签 – 代表HTML文档的开始
html标签是成对出现的,以<html>开始, </html>结束
属性
Common – 一般属性
xml:lang – 国际化属性
xmlns – 代表xml命名空间
dir – 定义元素(文字)的对齐方式

---

DOCTYPE 标签 – 定义了标准文档的类型
DOCTYPE标签是单独出现的

说明：
文档类型，会使浏览器使用相应标准加载网页并显示
文档类型定义在HTML文档的第一行，在html标签之前
文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式，详见：浏览器模式
DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”

HTML DOCTYPE文档类型举例说明

HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签（例如：font、b等），不可以使用框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签（例如：font、b）(梦之都就使用了此类型)，不可以使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5文档类型

<!DOCTYPE html>

---

HTML meta 标签

13.1. HTML meta content-type 定义文件MIME类型
13.1.1 HTML meta charset 定义网页编码信息
13.2. HTML meta content-language 定义页面语言
13.3. HTML meta refresh 刷新与跳转(重定向)页面
13.4. HTML meta expires 网页缓存过期时间
13.5. HTML meta pragma no-cache 页面缓存
13.6. HTML meta keywords 网页关键词
13.7. HTML meta description 网页简短描述
13.8. HTML meta author 网页作者
13.9. HTML meta copyright 网页版权
13.10. HTML meta date 网页生成时间
13.11. HTML meta robots 搜索引擎索引方式

meta 标签 – 在head标签中的meta标签,可以为HTML文档提供额外信息
此标签是单独出现的,<meta />
此标签只能出现在head标签内
引用网址:http://www.dreamdu.com/xhtml/tag_meta/
属性:

I18N -- i18n属性
xml:lang -- 国际化属性
content -- content属性
http-equiv -- http-equiv属性
id -- id属性
name -- name属性
scheme -- scheme属性
meta的英文翻译为"元"
meta是metainformation的缩写
meta属性主要分为两组

name属性与content属性

name属性用于描述网页,它是以名称/值形式的名称,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description,keywords和robots.

http-equiv属性与content属性

http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头),它是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重要的是content-type charset 提供编码信息,refresh刷新与跳转页面,no-cache 页面缓存,expires网页缓存过期时间.