html,css前端开发笔记

客官°小女子只卖身不卖艺 2021-09-16 16:50 337阅读 0赞

`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][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`

1.  `$.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/][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`网页缓存过期时间.

[http_www.example.com_index.html_print]: http://www.example.com/index.html#print
[http_www.dreamdu.com_xhtml_tag_meta]: http://www.dreamdu.com/xhtml/tag_meta/