1.属性值:用单引号或者双引号括起来
注释:<!-- -->
特殊字符:< > Space 需要转义
< < less than
> > greater than
空格 no-break space
2.<br>与<p> 段落之间有空白。
<br>:换行,行前空白比较小。
<p>:分段,段前有比较大的空白。
3.URL
/ 表示网站根目录
../ 表示父目录
../../ 表示父目录的父目录
./或不写 表示相对当前路径的目录,站内引用最好用相对URL。
<a>的target属性设定为"_blank"可以在新窗口中打开超链接,默认在当前页面打开超链接
<a href="http://www.baidu.com"> 百度</a>
<a name="Last"><a>设置瞄点
<a href="#Last">跳到最后</a>
4.<img>图片标签
alt属性为图片无法显示时的显示的文本
<img src="/Images/123.jpg" height="40%" width="40%" alt="图片无法显示" />
最好指定width和height。因为网页先加载,图片后加载,先占位。
图片缩略图:
<a href="/Images/123.jpg" target="_blank">
<img src="/Images/123.jpg" height="20%" width="20%" />
</a>
这种方式,仍然会下载大图,再由浏览器缩小显示。流量仍然是下载大图不变。
另一种方式:
两张图,分别存储缩略图和大图。先加载缩略图,点击后再请求大图。
5.列表
<ul> un-ordered list 圆点列表,没序号
<ol> ordered list 有序列表,有序号
6.文件选择框:自带“浏览”按钮
<input type="file" />
7.FieldSet 将控件划分一个区域,类似GroupBox效果
8.样式表
CSS(层叠样式表)是用来美化页面的,可以对页面元素进行更精细的设置,样式主要描述原色的字体颜色、背景颜色、边框等。
CSS有三种方式:
(1)元素内嵌
直接将样式写入元素的style属性中。适用于样式没有可复用性的场合。
例子:
<input type="text" value="123"
style="border-style:double; border-color:Yellow; border-width: 3;
background-color:Blue; height: 24px; width: 152px;" />
(2)页面嵌入
在head中加入:
<style type="text/css">
input{border-color:Yellow,color:Red;}
</style>
例子:
<style type="text/css">
input
{
background-color: Red;
border-color: Black;
}
div
{
background-color: Yellow;
}
p
{
background-color: Green;
}
</style>
表示页面中所有input都是采用指定的样式,适合于样式复用,减小页面体积。
(3)外部引用
将css内容写入css后缀的样式文件,然后在页面中引用,在head中加入。
<link type="text/css" rel="Stylesheet" href="s1.css" />
适合于多个页面共享CSS。
(4)常见样式
(a)css计量单位
px(像素) 30%(百分比) em(相对单位)
width;30px
(b)background-color:Red 背景颜色
color:文本颜色
(c) 边框
border-style:solid;
border-color: 边框颜色
border-width:默认为0
(d)display:元素是否显示
可选none(不显示)
inline(显示为内联元素,元素前后没有换行符)
block(显示为块级元素,元素前后会带有换行符)
(e)cursor:鼠标在元素上时显示的光标图标
可选:
cursor:默认光标
pointer:超链接上的手
text:输入Bean
wait:忙沙漏
help:帮助
……
(f)LI不显示圆点
LIST-STYLE-TYPE:none,一般设在li或者ul上
9.div和span
(1)div:层
div类似panel。
<div> </div>将内容放到层中,整体处理,整体移动
div将所有内容包成一个方块。将内容放在一个矩形的区块中,会影响布局
(2)span:块
<span></span>
span只是把一段内容定义成一个整体进行操作,但不影响布局和显示。
10.样式选择器
对于非元素内联的样式需要定义样式选择器,也就是说明样式适合哪些元素。一共有三种CSS选择器:
(1)标签选择器
对于指定的标签采用统一的样式
input{border-color:Yellow;}
(2)class选择器
以定义一个命名的样式,然后在用到它的时候设定元素的class属性为样式的名称,还可以同时设定多个class,名称之间加空格
样式名称开头要加点(.)
.warming{background:Yellow;}
<div class="warming"><div>
(3)id选择器
为指定id的元素设定样式,id前加#
#username
{
font-size:xx-large;
}
<input id="username" type="text" value="aaaa" />
(4)标签+class选择器
class选择器可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加标签名即可。
input.account{color:Red;text-align:right;}
label.account{color:Blue;text-align:left;}
<input class="account" type="text" value="1111" />
<label class="account">2222</label>
id、style、class可以同时组合使用:
<input id="username" class="account" style="font-size:xx-large type="text" value="12345" />
(5)关联选择器
P strong{background-color:Blue;}
表示P标签内的strong标签内的内容使用的样式。
(6)组合选择器
同时为多个标签设定一个样式
h1,h2,h3,input{background-color:green;}
(7)伪选择器
为标签的不同状态下设定不同的样式
A:visited 超链接点击过的样式
A:active 选中超链接时的样式
A:link 超链接未被访问时的样式
A:hover 鼠标移到超链接时的样式
A:visited{TEXT-DECORATION:none}
A:active{TEXT-DECORATION:none}
A:link{TEXT-DECORATION:none}
A:hover{TEXT-DECORATION:underline}
上面这个模板一般是写死的,link.css ,同一个项目内共享CSS,所有超链接都一样。
11.样式选择器优先级
内联样式会覆盖标签样式。
<div style="background:Yellow;"></div>